/* Template compositions. Shared content stays editable; each preset has its own
   silhouette, image rhythm, navigation and room presentation. */
.hero-title { overflow-wrap: anywhere; }
.hero-reservation { background: #fff; color: #292621; padding: clamp(24px, 4vw, 44px); }
.hero-reservation h2 { font: 400 2rem/1.2 Georgia, serif; margin: 18px 0; }
.hero-reservation p { color: #69645d; line-height: 1.7; }
.reservation-eyebrow { font-size: .65rem; letter-spacing: .2em; }
.reservation-room { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #ddd7cf; color: #292621; text-decoration: none; }
.reservation-room span:first-child { color: #827565; font-size: .75rem; }
.reservation-room span:last-child { margin-left: auto; }
.block-hero-reservation .hero-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.block-hero-reservation { padding-block: 80px; }
.header-masthead { display: flex; justify-content: space-between; padding: 12px max(24px, calc((100% - 1180px)/2)); font-size: .75rem; letter-spacing: .08em; }
.header-masthead a { color: inherit; }

/* Mellow: an airy arch and an asymmetrical editorial room collection. */
.tpl-template_riverside .block-hero-split { padding-inline: 0; background: none; }
.tpl-template_riverside .block-hero-split .hero-media { min-height: 560px; border-radius: 48% 48% 0 0; box-shadow: none; }
.tpl-template_riverside .hero-title { font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; }
.tpl-template_riverside .block-room-grid .card-grid { grid-template-columns: 1.35fr 1fr; gap: 48px; }
.tpl-template_riverside .block-room-grid .sf-card { background: transparent; border: 0; box-shadow: none; }
.tpl-template_riverside .block-room-grid .sf-card:nth-child(even) { margin-top: 80px; }
.tpl-template_riverside .sf-card-media { height: 340px; border-radius: 8px; }
.tpl-template_riverside .sf-card-body { padding-inline: 0; }

/* Hotelier: a two-tier navy masthead and precise, boxed hotel inventory. */
.tpl-template_noir { --bg-page: #fff; --bg-card: #fff; --text-main: #252b38; --text-muted: #687080; --title-color: #111d35; }
.tpl-template_noir .header-masthead { background: #fff; color: #596274; }
.tpl-template_noir .site-header { background: #111d35; }
.tpl-template_noir .block-hero { min-height: 620px; display: grid; align-items: center; }
.tpl-template_noir .hero-title { font-weight: 800; max-width: 800px; }
.tpl-template_noir .sf-card, .tpl-template_noir .hero-cta, .tpl-template_noir .header-action-btn { border-radius: 0; }
.tpl-template_noir .sf-room-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.tpl-template_noir .sf-room-row { flex-direction: column; }
.tpl-template_noir .sf-room-row .sf-room-media { flex: none; height: 240px; }
.tpl-template_noir .sf-room-row .sf-card-body { flex: 1; }

/* Vacation Rental: friendly pink, a raised white panel and checkerboard rooms. */
.tpl-template_coast .hero-reservation { border-radius: 14px; box-shadow: 0 20px 60px #0003; }
.tpl-template_coast .hero-title { font: 700 clamp(2.8rem, 5vw, 5rem)/1.1 Georgia, serif; }
.tpl-template_coast .block-room-grid .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.tpl-template_coast .block-room-grid .sf-card { border: 0; border-radius: 0; box-shadow: none; }
.tpl-template_coast .block-room-grid .sf-card:nth-child(4n+2) .sf-card-media,
.tpl-template_coast .block-room-grid .sf-card:nth-child(4n+3) .sf-card-media { order: 2; }
.tpl-template_coast .sf-card-body { padding: 40px; }
.tpl-template_coast .sf-card-media { height: 300px; }

/* Garden: a botanical inset with soft arches and alternating story rows. */
.tpl-template_garden .block-hero-split { margin-top: 30px; border-radius: 180px 180px 20px 20px; background: #e8eee3; padding-top: 110px; }
.tpl-template_garden .hero-media { border-radius: 160px 160px 8px 8px; }
.tpl-template_garden .sf-room-row:nth-child(even) { flex-direction: row-reverse; }
.tpl-template_garden .sf-room-list { gap: 64px; }
.tpl-template_garden .sf-room-row { border: 0; box-shadow: none; background: #f0f3eb; }

/* Hiroto: broad contemporary typography and a dark architectural search strip. */
.tpl-template_urban .header-masthead { background: #202020; color: #eee; }
.tpl-template_urban .hero-title { font-size: clamp(3rem, 6vw, 6rem); font-weight: 500; letter-spacing: -.055em; }
.tpl-template_urban .block-hero-booking-bar { text-align: left; padding-bottom: 0; }
.tpl-template_urban .block-hero-booking-bar .hero-inner { align-items: flex-start; max-width: none; }
.tpl-template_urban .hero-booking-bar { max-width: none; border-radius: 0; margin-top: 90px; background: #202020; color: #fff; }
.tpl-template_urban .hero-booking-bar label { color: #ddd; }
.tpl-template_urban .block-room-grid .sf-card { border: 0; border-radius: 0; box-shadow: none; }
.tpl-template_urban .sf-card-media { height: 360px; }

/* Marian: a formal, framed central composition and generous alternating suites. */
.tpl-template_sand .block-hero { outline: 1px solid #ffffff80; outline-offset: -24px; min-height: 640px; display: grid; align-items: center; }
.tpl-template_sand .hero-title { font-size: clamp(3rem, 6vw, 6rem); letter-spacing: .08em; }
.tpl-template_sand .sf-room-row { border: 0; box-shadow: none; border-radius: 0; }
.tpl-template_sand .sf-room-row:nth-child(even) { flex-direction: row-reverse; }
.tpl-template_sand .sf-room-row .sf-room-media { flex: 1 1 50%; min-height: 380px; }
.tpl-template_sand .sf-room-row .sf-card-body { justify-content: center; padding: 48px; }

/* Sona: open serif headline, tall reservation panel, edge-to-edge suite tiles. */
.tpl-template_sona .hero-copy { max-width: 560px; }
.tpl-template_sona .hero-title { font-size: clamp(3.2rem, 5.5vw, 5.8rem); font-weight: 400; }
.tpl-template_sona .hero-cta { border-radius: 0; background: transparent; border-bottom: 2px solid var(--accent); padding-inline: 0; color: #fff; }
.tpl-template_sona .hero-reservation { border-top: 5px solid var(--accent); }
.tpl-template_sona .sf-room-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.tpl-template_sona .sf-room-row { border: 0; border-radius: 0; position: relative; min-height: 460px; }
.tpl-template_sona .sf-room-row .sf-room-media { position: absolute; inset: 0; }
.tpl-template_sona .sf-room-row .sf-card-body { position: relative; justify-content: flex-end; background: linear-gradient(transparent, #19191af5); padding: 36px; }
.tpl-template_sona .sf-room-row .sf-card-title, .tpl-template_sona .sf-room-row .sf-card-text { color: #fff; flex: none; }

/* Star Hotels: compact, bright, a gold-framed booking card and balanced columns. */
.tpl-template_keto .block-hero-reservation { margin-top: 28px; }
.tpl-template_keto .hero-reservation { border: 8px solid #e9dbbe; }
.tpl-template_keto .block-hero-reservation .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.tpl-template_keto .hero-reservation { order: -1; }
.tpl-template_keto .hero-title { font-size: clamp(2.5rem, 4vw, 4rem); }
.tpl-template_keto .block-room-grid .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.tpl-template_keto .sf-card-media { height: 320px; }
.tpl-template_keto .block-title { text-align: left; border-left: 5px solid var(--accent); padding-left: 22px; }

/* Villa: a romantic oversized cover and a staggered magazine room layout. */
.tpl-template_deluxe .block-hero { min-height: 720px; display: grid; align-items: center; }
.tpl-template_deluxe .hero-title { font: italic 400 clamp(3.8rem, 8vw, 8rem)/1 Georgia, serif; text-transform: none; }
.tpl-template_deluxe .sf-room-list { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.tpl-template_deluxe .sf-room-row { display: flex; flex-direction: column; border: 0; box-shadow: none; background: transparent; }
.tpl-template_deluxe .sf-room-row:nth-child(even) { margin-top: 100px; }
.tpl-template_deluxe .sf-room-row .sf-room-media { flex: none; height: 420px; }
.tpl-template_deluxe .sf-room-row .sf-card-body { flex: 1; padding-inline: 0; }

/* Sogo: quiet, narrow typography, broad whitespace, simple unboxed cards. */
.tpl-template_sogo .block-hero { min-height: 680px; display: grid; align-items: center; }
.tpl-template_sogo .hero-title { font: 400 clamp(3rem, 7vw, 7rem)/1.05 Georgia, serif; }
.tpl-template_sogo .hero-cta { background: transparent; border: 1px solid #fff; border-radius: 0; }
.tpl-template_sogo .block-room-grid { padding-block: 120px; }
.tpl-template_sogo .sf-card { box-shadow: none; border: 0; background: transparent; }
.tpl-template_sogo .sf-card-body { text-align: center; align-items: center; }
.tpl-template_sogo .sf-price { align-self: center; background: transparent; color: #81673f; box-shadow: none; }
.tpl-template_sogo .sf-card-media { height: 290px; }

/* Royal: a formal masthead and bordered heritage room catalogue. */
.tpl-template_royal .header-masthead { justify-content: center; gap: 40px; background: #28241f; color: #dac7a4; }
.tpl-template_royal .block-hero { border: 12px solid #b99d6b; margin-top: 24px; }
.tpl-template_royal .sf-room-row { padding: 14px; border: 1px solid #b99d6b; border-radius: 0; box-shadow: none; }
.tpl-template_royal .sf-room-list { gap: 36px; }

/* Montana: a cinematic cover and large, uninterrupted photographic room tiles. */
.tpl-template_montana .block-hero { min-height: 720px; display: grid; align-items: center; }
.tpl-template_montana .hero-title { font-weight: 400; font-size: clamp(3rem, 7vw, 7rem); }
.tpl-template_montana .hero-booking-bar { border-radius: 0; box-shadow: none; }
.tpl-template_montana .block-room-grid .card-grid { grid-template-columns: 1fr 1fr; gap: 0; }
.tpl-template_montana .block-room-grid .sf-card { position: relative; border: 0; border-radius: 0; min-height: 440px; }
.tpl-template_montana .block-room-grid .sf-card-media { position: absolute; inset: 0; height: 100%; }
.tpl-template_montana .block-room-grid .sf-card-body { position: relative; justify-content: flex-end; padding: 40px; background: linear-gradient(transparent, #001d38ed); }
.tpl-template_montana .block-room-grid .sf-card-title, .tpl-template_montana .block-room-grid .sf-card-text { color: #fff; flex: none; }

/* Harbor Lights: ocean-blue split cover, reversed image and horizontal rhythm. */
.tpl-template_harbor_lights .block-hero-split { padding: 0; background: #e9f4fb; }
.tpl-template_harbor_lights .block-hero-split .hero-inner { gap: 0; flex-direction: row-reverse; }
.tpl-template_harbor_lights .block-hero-split .hero-text { padding: 50px; }
.tpl-template_harbor_lights .block-hero-split .hero-media { min-height: 630px; border-radius: 0; box-shadow: none; }
.tpl-template_harbor_lights .block-hero-split .hero-media { background-blend-mode: normal; }
.tpl-template_harbor_lights .hero-title { color: #1262a0; font-weight: 400; }
.tpl-template_harbor_lights .hero-sub { color: #36586f; }
.tpl-template_harbor_lights .block-room-grid .card-grid { grid-template-columns: 1fr; gap: 32px; }
.tpl-template_harbor_lights .block-room-grid .sf-card { display: grid; grid-template-columns: 1fr 1fr; border: 0; border-radius: 0; }
.tpl-template_harbor_lights .sf-card-media { height: 320px; }
.tpl-template_harbor_lights .sf-card-body { justify-content: center; padding: 40px; }

@media (min-width: 992px) {
  .site-header .site-nav { gap: 4px 12px; font-size: .82rem; }
  .site-header .header-action-btn { white-space: nowrap; margin-left: 14px; }
  body:not(.tpl-template_riverside):not(.tpl-template_garden):not(.tpl-template_keto):not(.tpl-template_royal) .site-main { width: 100%; }
  body .site-main > .block:not(.block-hero) { padding-inline: max(24px, calc((100% - 1180px)/2)); }
  .tpl-template_sand .site-header .navbar { flex-direction: column; gap: 18px; padding-block: 24px; }
  .tpl-template_sogo:has(.block-hero) .site-header,
  .tpl-template_deluxe:has(.block-hero) .site-header { position: absolute; top: 0; width: 100%; background: transparent; border: 0; box-shadow: none; }
  .tpl-template_sogo:has(.block-hero) .site-header .brand-name,
  .tpl-template_sogo:has(.block-hero) .site-nav a,
  .tpl-template_deluxe:has(.block-hero) .site-header .brand-name,
  .tpl-template_deluxe:has(.block-hero) .site-nav a { color: #fff; }
}
@media (max-width: 767px) {
  body[data-template] .block-hero-reservation .hero-inner { grid-template-columns: 1fr; }
  body[data-template] .block-room-grid .card-grid, body[data-template] .block-room-grid .sf-room-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body[data-template] .block-room-grid .sf-card:nth-child(n) { margin-top: 0; }
  body[data-template] .block-room-grid .sf-card .sf-card-media { order: 0; }
  body[data-template] .block-room-grid .sf-card { grid-template-columns: 1fr; }
  body[data-template] .block-hero { min-height: auto; }
  body[data-template] .block-hero-split .hero-media { min-height: 340px; flex-basis: 100%; }
  body[data-template] .block-hero-split .hero-text { padding: 24px; }
  .header-masthead { gap: 16px; font-size: .65rem; }
  .site-nav { padding-block: 16px; }
}