/*
 * Front page only (inc/setup.php): module 01 (intro + proof sheet), module 02 (find your stay: the stays deck)
 * and module 04 (news & offers cards).
 * Loaded after hero2.css, so equal-specificity rules here win over its .home-film ones.
 */

/* ---- 01 intro: headline and body, proof sheet beside them ---- */
.home-intro{padding-block:clamp(64px,8vw,104px)}
.home-intro-grid{display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:clamp(40px,8vw,128px);margin-top:36px}
.home-intro .intro-lead{margin:0}
.home-intro-body{max-width:30em;margin-top:30px;font-size:15px;line-height:2.1;color:var(--muted)}
.proof{margin:0;border-top:1px solid var(--line)}
.proof>div{display:grid;grid-template-columns:92px 1fr;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.proof dt{font:400 60px/.9 var(--display);font-variant-numeric:lining-nums;color:var(--ink)}
.proof dd{margin:0}
.proof strong{display:block;font:500 17px/1.5 var(--serif);letter-spacing:.08em}
.proof span{display:block;margin-top:4px;font-size:13px;line-height:1.8;color:var(--muted)}

/* ---- 02 find your stay: the stays deck (site.css, assets/app.js) with region chips, highlights and a spec line ---- */
/* Region chips: one row that scrolls sideways when it runs out of room (padding keeps focus rings unclipped);
   a light tint keeps them readable over the photo's bright side. */
.stage-top .region-tabs{flex-wrap:nowrap;min-width:0;margin:-6px;padding:6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff59 transparent}
.stage-top .region-tabs button{flex:none;background:#1b140e4d}
.stage-top .search-count.sr-only{position:absolute}
.stage-facts{max-width:460px;margin:20px 0 0;padding:0;list-style:none}
.stage-facts li{display:grid;grid-template-columns:22px 1fr;padding:9px 0;border-top:1px solid #ffffff2e;font-size:14.5px;line-height:1.7;color:#ffffffd9;word-break:keep-all;overflow-wrap:anywhere}
.stage-facts li::before{content:'';width:10px;height:1px;margin-top:.85em;background:var(--gold-soft)}
/* Short desktop screens (1280×720, 1366×768): tighten the copy so a two-line name and three highlights clear the chips. */
@media(min-width:901px) and (max-height:820px){
 .stage-title{font-size:clamp(40px,4.4vw,72px)}
 .stage-facts{margin-top:14px}
 .stage-facts li{padding:5px 0}
 .stage-copy .actions{margin-top:20px}
}

/* ---- 04 news & offers: the latest three posts as the news list's cards (stay-card; theme.css draws the NO7 STAY placeholder) ---- */
.journal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.journal-card{position:relative;display:flex;flex-direction:column}
.journal-card .stay-card-media{height:auto;aspect-ratio:3/2}
.journal-card .stay-card-body{flex:1;grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;align-items:start;gap:10px}
.journal-card h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:500 clamp(19px,1.6vw,23px)/1.45 var(--serif);letter-spacing:.04em}
.journal-card-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:14px;line-height:1.9;color:var(--muted)}
.journal-card .stay-card-cta{justify-self:start;margin-top:6px}

@media(max-width:900px){
 .home-intro{padding-block:62px}
 .home-intro-grid{display:block;margin-top:28px}
 .home-intro-body{margin-top:24px;font-size:14px;line-height:1.9}
 .proof{margin-top:40px}
 .proof>div{grid-template-columns:64px 1fr;gap:14px;padding:16px 0}
 .proof dt{font-size:46px}
 .proof strong{font-size:16px}

 .stage-facts{display:none}
 .stage-top .region-tabs{scrollbar-width:none}
 .stage-top .region-tabs::-webkit-scrollbar{display:none}
 .stage-top .region-tabs span{display:inline;margin-left:6px}

 /* News: a stacked list with a square thumbnail, so all three read without swiping. */
 .journal-cards{grid-template-columns:1fr;gap:0}
 .journal-card{display:grid;grid-template-columns:clamp(96px,28vw,180px) 1fr;align-items:start;gap:16px}
 .journal-card+.journal-card{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-strong)}
 .journal-card .stay-card-media{aspect-ratio:1;border-radius:14px}
 .journal-cards .stay-card-media:not(:has(img))::before{font-size:17px}
 .journal-card .stay-card-body{gap:6px;padding:0}
 .journal-card h3{font-size:17px}
 .journal-card-excerpt{-webkit-line-clamp:2;font-size:13px;line-height:1.8}
}