/* pages.css — deep pages only. Loaded AFTER main.css, which owns every token.
   Nothing here re-declares a colour, a font or a spacing value: Fibonacci
   (8 13 21 34 55 89 144) and the golden type scale come from main.css. */

/* ---------- page hero (compact; the scroll hero stays index-only) ---------- */
.page-hero{position:relative;min-height:62vh;display:grid;align-items:end;padding:144px max(55px,calc((100% - 1280px)/2)) 89px;overflow:hidden}
.page-hero>*{position:relative;z-index:1}
.page-hero .hero-photo{position:absolute;inset:0;z-index:0}
.page-hero .hero-photo img{width:100%;height:100%;object-fit:cover}
.page-hero:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(14,51,80,.55) 0%,rgba(14,51,80,.72) 55%,rgba(14,51,80,.92) 100%)}
.page-hero h1{font-size:clamp(47px,7vw,76px);max-width:16ch}
.page-hero .lead{margin:21px 0 0;max-width:58ch;font-size:22px;line-height:1.5;color:rgba(247,242,232,.92)}
.page-hero .trust{margin:21px 0 0;font-size:16px;color:var(--water-on-dark, #B8D4E4)}

.crumb{margin:0 0 21px;font-size:16px;font-weight:600}
.crumb a{color:var(--water-on-dark, #B8D4E4);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease-lake)}
.crumb a:hover{border-bottom-color:var(--gold)}

/* ---------- the short "why here" blocks ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}
.feature-grid article{padding:34px;background:var(--sand-warm);border-radius:12px;box-shadow:var(--ring-gold)}
.dark .feature-grid article{background:rgba(247,242,232,.06);box-shadow:inset 0 0 0 1px rgba(201,151,59,.28)}
.feature-grid h3{margin:0 0 13px;font-family:var(--font-display);font-weight:700;font-size:29px;line-height:1.1}
.feature-grid p{margin:0;color:var(--muted)}
.dark .feature-grid p{color:rgba(247,242,232,.82)}

/* ---------- room cards ---------- */
.room-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:21px;margin-top:55px}
.room-cards article{background:var(--sand-warm);border-radius:12px;overflow:hidden;box-shadow:var(--ring-gold);display:flex;flex-direction:column}
.room-cards img{width:100%;aspect-ratio:3/2;object-fit:cover}
.room-cards .body{padding:21px 21px 34px}
.room-cards h3{margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:29px;line-height:1.1}
.room-cards .cap{margin:0 0 13px;font-weight:800;font-size:16px;letter-spacing:.02em;color:var(--gold-on-sand, #8C6827)}
.room-cards p{margin:0;color:var(--muted);font-size:17px}

/* ---------- FAQ (native disclosure — no JS) ---------- */
.faq{max-width:820px;margin-top:34px}
.faq details{border-bottom:1px solid rgba(18,63,94,.16)}
.dark .faq details{border-bottom-color:rgba(201,151,59,.28)}
.faq summary{list-style:none;cursor:pointer;padding:21px 34px 21px 0;position:relative;font-weight:700;font-size:19px;min-height:48px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease-lake)}
.faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.faq .answer{margin:0;padding:0 0 21px;color:var(--muted);max-width:70ch}
.dark .faq .answer{color:rgba(247,242,232,.85)}

/* ---------- sibling-page rail ---------- */
.page-rail{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.page-rail a{padding:13px 21px;border-radius:999px;text-decoration:none;font-weight:700;font-size:16px;background:rgba(18,63,94,.06);box-shadow:var(--ring-gold);transition:transform .3s var(--ease-lake),background .3s}
.dark .page-rail a{background:rgba(247,242,232,.08)}
.page-rail a:hover{transform:translateY(-2px);background:rgba(201,151,59,.16)}
.page-rail a[aria-current="page"]{background:linear-gradient(170deg,var(--gold-bright),var(--gold));color:var(--ink)}

@media (max-width:899px){
  .page-hero{min-height:0;padding:89px 21px 55px}
  .page-hero .lead{font-size:19px}
  .feature-grid,.room-cards{gap:21px}
  .feature-grid article{padding:21px}
}