/* Homepage additions: real-text headline, region map, route band, ownership section. */
/* Additions to the live stylesheet for the updated homepage.
   build.py appends this after live/css/styles.css and scopes both. */

body{position:relative}

/* Hero: the headline is real text instead of words painted into the photo,
   so it fits every screen. The photo keeps only the coach scene. */
.hero{background:#0e1613;overflow:hidden}
.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;width:62%;background:url('../images/hero-coach.jpg') 50% 62%/cover no-repeat}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0e1613 0%,#0e1613 38%,rgba(14,22,19,.6) 52%,rgba(14,22,19,0) 70%)}
.heroShade{display:none}
.heroContent{z-index:2;padding-top:200px}
.heroBrand{font-size:clamp(13px,1.45vw,22px);letter-spacing:.32em;text-transform:uppercase;color:#efe6d6;margin:6px 0 0}
.heroRule{display:block;position:relative;width:min(600px,100%);height:1px;background:#b79356;margin:26px 0 38px}
.heroRule:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;background:#d9bb7e;transform:rotate(45deg)}
.hero h1{color:#efdcc0;letter-spacing:-1.5px;line-height:1}

/* Featured cards: photo above the details. The resorts' own pictures are
   small website screenshots, often with words on them, so the details sit
   below the photo instead of on top of it. */
.resortGrid{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:22px}
.resortCard,.resortCard.r0{grid-row:auto;display:flex;flex-direction:column;background:#101b18}
.resortCard img{height:250px;flex:none}
.resortCard .imageVeil{display:none}
.resortInfo{position:static;padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.resortInfo h3{font-size:28px;line-height:1.15}
.resortInfo .tags{margin-bottom:22px}
.resortInfo>.viewLink{margin-top:auto}

/* Region map */
.regionExplorer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;margin-top:50px;align-items:center}
.regionMap{display:block;width:100%;height:auto}
.regionMap .rmNone{fill:#111c18;stroke:#1f2d28;stroke-width:.7}
.rmRegion{cursor:pointer;stroke-width:.9;transition:fill .15s,stroke .15s}
.rmRegion.s1{fill:#2a4a3e;stroke:#2a4a3e}
.rmRegion.s2{fill:#203a31;stroke:#203a31}
.rmRegion.s3{fill:#33574a;stroke:#33574a}
.rmRegion.s4{fill:#1a3029;stroke:#1a3029}
.rmRegion:hover,.rmRegion.on,.rmRegion:focus-visible{fill:#b79356;stroke:#b79356;outline:none}
.rmDots circle{fill:#f4f0e8;opacity:.42;pointer-events:none}
.rmLabels text{font-family:var(--font-sans);font-weight:700;font-size:13px;letter-spacing:.4px;fill:#efe6d6;text-anchor:middle;paint-order:stroke;stroke:#0e1613;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.rmLabels text.on{fill:#101b18;stroke:#e7d2a7}
.regionHint{font-size:11px;color:#9da39f;margin:12px 0 0}
.regionPanel{background:#16241f;border:1px solid #ffffff1c;display:flex;flex-direction:column}
.regionPanel img{height:180px;width:100%;object-fit:cover}
.rpBody{padding:24px 26px 24px;display:flex;flex-direction:column;flex:1}
.rpBody .eyebrow{margin-bottom:10px}
.rpBody h3{font-family:var(--font-serif);font-weight:400;font-size:34px;line-height:1.05;margin:0 0 8px;color:white}
.rpTag{font-family:var(--font-serif);font-size:16px;line-height:1.45;color:#d6d0c2;margin:0}
.rpStats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff1c;border:1px solid #ffffff1c;margin:20px 0 12px}
.rpStats div{background:#16241f;padding:12px 6px;text-align:center}
.rpStats b{display:block;font-family:var(--font-serif);font-weight:400;font-size:26px;color:#e1c38e;line-height:1.1}
.rpStats span{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:#bdb7a8}
.rpPlaces{font-size:12px;line-height:1.5;color:#bdb7a8;margin:0 0 18px}
.rpBtns{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.rpBtns a{text-align:center;text-transform:uppercase;font-size:10px;letter-spacing:1.4px;font-weight:700;padding:13px 14px;margin:0}
.rpCredit{font-size:10px;color:#8f8a7d;margin:12px 0 0}
.destination.on{outline:2px solid #d9bb7e;outline-offset:-2px}
.photoCredits{font-size:10.5px;line-height:1.6;color:#8f958f;margin:22px 0 0}
.photoCredits a{color:#bdb7a8;border-bottom:1px solid #ffffff33}

/* Motorcoach brands link to the Motorcoach.direct encyclopedia */
.brandRow a{border-bottom:1px solid transparent;padding-bottom:3px}
.brandRow a:hover,.brandRow a:focus-visible{color:var(--ink);border-bottom-color:var(--gold)}
.brandNote{font-size:12px;color:#6e746f;margin:-35px 0 40px}

/* Whole-card links: the photo and the card open the resort's own page */
.resortCard,.listingCard{position:relative;cursor:pointer}
.stretch{position:absolute;inset:0;z-index:3}
.stretch:focus-visible{outline:2px solid #d9bb7e;outline-offset:-5px}
.listingImage button{z-index:4}
.resortInfo>.viewLink{font-size:9px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.price .viewLink{margin-left:auto;text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:700}
.listingCard:hover h3,.resortCard:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.resortCard img{object-position:center}

/* Preview markers */
.newTag{display:inline-block;margin-left:10px;padding:2px 7px;border:1px solid #b79356;color:#92733f;font:700 9px/1.5 var(--font-sans);letter-spacing:1.5px;vertical-align:middle;text-transform:uppercase}
.eyebrow.light .newTag,.planTeaser .newTag{color:#d9bb7e;border-color:#d9bb7e}
.searchTabs .newTag{margin-left:6px;padding:1px 5px;font-size:8px}
.navLinks a.isNew{border-bottom:1px solid #d9bb7e;padding-bottom:3px}

/* Plan-a-route teaser */
.planTeaser{background:#101b18;color:white}
.planTeaser .section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:center}
.planTeaser h2{color:white}
.teaserText{font-family:var(--font-serif);font-size:18px;line-height:1.5;color:#d6d0c2;max-width:460px;margin:26px 0 0}
.routeChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.routeChips a{border:1px solid #ffffff3d;color:#e9e4d8;padding:9px 13px;font-size:12px;line-height:1.2}
.routeChips a:hover{border-color:#d9bb7e;color:#d9bb7e}
.teaserBtns{margin-top:30px}
.teaserBtns .goldButton{text-transform:uppercase;font-size:10px;letter-spacing:1.4px;font-weight:700}
.teaserMapLink{display:block;position:relative}
.teaserMap{display:block;width:100%;height:auto}
.teaserMap .land{fill:#15231f;stroke:#22342e;stroke-width:.6}
.teaserMap .states{fill:#1d312b;stroke:#3a5449;stroke-width:.6}
.teaserMap .lot{fill:#d9bb7e}
.teaserMap .rent{fill:#cfc8b8;opacity:.5}
.teaserMapLink:hover .states{fill:#22382f}
.teaserKey{display:flex;gap:18px;justify-content:flex-end;font-size:11px;color:#bdb7a8;margin-top:10px}
.teaserKey i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.teaserKey .lotKey{background:#d9bb7e}
.teaserKey .rentKey{background:#cfc8b8;opacity:.6}

/* Beefier ownership section */
.sale .lead{margin-bottom:0}
.sale .statRow{margin-top:40px}
.sale .statCard strong{white-space:nowrap}
.ownLinks{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:white;margin-top:50px}
.ownLinks a{padding:24px 22px;border-right:1px solid var(--line);transition:.2s ease}
.ownLinks a:last-child{border-right:0}
.ownLinks b{display:block;font-family:var(--font-serif);font-weight:400;font-size:21px;margin-bottom:8px;color:var(--ink)}
.ownLinks span{display:block;font-size:12.5px;line-height:1.5;color:#5f6762}
.ownLinks a:hover{background:var(--forest)}
.ownLinks a:hover b,.ownLinks a:hover span{color:white}
.footerBottom a{color:inherit;border-bottom:1px solid #ffffff33}

@media(max-width:1100px){
.navLinks{gap:18px}
}
@media(max-width:900px){
.regionExplorer{grid-template-columns:1fr}
.regionPanel img{height:240px}
.hero:before{width:100%;top:auto;height:52%}
.hero:after{background:linear-gradient(180deg,#0e1613 0%,#0e1613 46%,rgba(14,22,19,.4) 58%,rgba(14,22,19,0) 74%)}
.heroContent{padding-top:150px}
.resortGrid{grid-template-columns:1fr;grid-template-rows:auto}
.resortCard img{height:300px}
.planTeaser .section{grid-template-columns:1fr;gap:40px}
.ownLinks{grid-template-columns:1fr 1fr}
.ownLinks a:nth-child(2){border-right:0}
.ownLinks a:nth-child(-n+2){border-bottom:1px solid var(--line)}
.navLinks.open a.isNew{border-bottom:0;color:#d9bb7e}
}
@media(max-width:620px){
.rmLabels{display:none}
.regionPanel img{height:180px}
.rpBody{padding:20px}
.rpBody h3{font-size:28px}
.brandNote{margin:-10px 0 30px;text-align:center}
.heroContent{padding-top:120px}
.heroBrand{font-size:12px;letter-spacing:.24em}
.heroRule{margin:20px 0 28px}
.hero{min-height:760px}
.hero:before{height:44%}
.hero:after{background:linear-gradient(180deg,#0e1613 0%,#0e1613 56%,rgba(14,22,19,.35) 64%,rgba(14,22,19,0) 76%)}
.hero h1{font-size:42px}
.resortGrid{grid-template-rows:auto}
.resortCard img{height:210px}
.resortInfo{padding:22px 20px 24px}
.ownLinks{grid-template-columns:1fr}
.ownLinks a{border-right:0;border-bottom:1px solid var(--line)}
.ownLinks a:last-child{border-bottom:0}
.teaserKey{justify-content:flex-start}
.searchTabs{gap:16px;padding-left:16px}
.searchTabs .newTag{display:none}
}