/* Destination hub: overview block (Trip Overview screen) and the profile panels from WF-008. */
.overview{position:relative;margin:0 calc(var(--gutter) * -1)}
.detail-hero{position:relative;display:flex;align-items:flex-end;min-height:min(62vh,440px);padding:24px var(--gutter) 44px;overflow:hidden;background:var(--hero-fallback);color:var(--on-accent)}
.detail-hero::before{content:'';position:absolute;inset:0;z-index:1;background:var(--scrim-hero)}
.detail-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-hero .hero-photo-fallback{z-index:0}
.detail-hero-content{position:relative;z-index:2;max-width:640px}
.detail-hero h1{margin:0 0 4px;color:var(--on-accent);font-size:36px;line-height:38px;overflow-wrap:anywhere}
@media(min-width:700px){.detail-hero h1{font-size:56px;line-height:56px}}
/* Country as an eyebrow above the name (user, 2026-11-04): "MOROCCO · AFRICA ›", no underline; the chevron is the tap cue. */
.hero-country{margin:0 0 6px;font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--on-accent);opacity:.9}
.hero-country-link{display:inline-flex;align-items:center;gap:4px;min-height:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;cursor:pointer}
.hero-country-link:hover,.hero-country-link:focus-visible{opacity:1;text-decoration:none}
.hero-country-link .icon{width:14px;height:14px}
.hero-region{font-weight:700}
.hub-country{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.overview-card{position:relative;z-index:3;margin:-24px 0 0;padding:20px var(--gutter) 8px;background:var(--surface);border-radius:24px 24px 0 0}
.overview-summary{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
/* Stat row (WF-042): flight time · flight band · month weather · tier; 1–4 equal columns, each stat omitted when null. */
.stat-row{list-style:none;margin:0 0 16px;padding:12px 0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row li{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 6px;text-align:center;min-width:0}
.stat-row li+li{border-left:1px solid var(--line)}
.stat-row .icon{color:var(--ink-2);margin-bottom:2px}
.stat-row strong{font-family:var(--font-head);font-weight:900;font-size:15px;line-height:1.25;overflow-wrap:break-word}
.stat-row strong.tier{color:var(--accent-text)}
.stat-row span{font-size:12px;line-height:1.35;color:var(--muted);overflow-wrap:break-word}
@media(max-width:379px){.stat-row li{padding:0 3px}.stat-row strong{font-size:14px}}
.overview-label{margin:0;font-size:15px}
.overview-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.highlights{margin:0 0 16px}
.highlights .ghost{color:var(--accent-text)}
.highlight-strip{display:grid;grid-auto-flow:column;grid-auto-columns:104px;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 4px}
.highlight-strip::-webkit-scrollbar{display:none}
.highlight{display:flex;flex-direction:column;gap:4px;min-width:0;padding:0;border:0;background:none;text-align:left;color:var(--ink)}
.highlight-thumb{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:14px;overflow:hidden;background:var(--surface-2);color:var(--accent)}
.highlight-thumb img{position:absolute;inset:0}
.highlight-thumb .badge{position:absolute;left:6px;bottom:6px}
.highlight-name{font-size:12px;font-weight:800;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.overview-tags{margin:0 0 12px}
.overview-tags .tags{margin:8px 0 6px}
.hub-cta{margin:0;padding:0 var(--gutter)}
.hub-intro{margin:0 0 16px}
/* Overview read-through (WF-042): the first About paragraph open under the intro, the rest collapsed beneath it,
   then Feels like before the highlights and Great for after them. */
.hub-about-lead{margin:0 0 6px}
.hub-about-lead>p:first-child{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 4px}
.hub-about-lead .small-note{margin:0 0 10px}
.overview-card .hub-about.panel{margin:0 0 14px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:none}
.hub-feels,.hub-great{margin:0 0 16px}
.hub-intro-text{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.hub-rows{display:grid;gap:10px;margin-bottom:8px}
.hub-label{display:block;margin-bottom:6px;font-size:13px;font-weight:800;color:var(--ink)}
/* The sections after the overview run on in the page: no toggles, no boxes (user, 2026-11-04). */
.side-stack{display:flex;flex-direction:column;gap:var(--space-6);margin-top:24px;min-width:0}
.side-stack>.hub-about,.side-stack>.hub-base,.side-stack>.hub-getting,.side-stack>.hub-extend,.side-stack>.hub-byg,.side-stack>.hub-hacks{padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.side-stack>.panel>h2{margin:0 0 8px;font:var(--text-h2)}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.info-item{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px;min-width:0}
.info-item strong{display:block;font-size:13px}
.info-item span{font-size:12px;color:var(--muted)}
.hub-facts>summary,.hub-climate>summary,.hub-eat>summary{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:var(--tap);padding-right:28px;cursor:pointer;list-style:none}
.hub-facts>summary::-webkit-details-marker,.hub-climate>summary::-webkit-details-marker,.hub-eat>summary::-webkit-details-marker{display:none}
.hub-facts>summary h2,.hub-eat>summary h2{margin:0}
.hub-facts>summary::after,.hub-climate>summary::after,.hub-eat>summary::after{content:'';position:absolute;right:6px;top:16px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.hub-facts[open]>summary::after,.hub-climate[open]>summary::after,.hub-eat[open]>summary::after{transform:rotate(225deg)}
.hub-facts[open]>summary,.hub-climate[open]>summary,.hub-eat[open]>summary{margin-bottom:10px}
.hub-climate>summary h2{margin:0}
.hub-climate .hub-verdict{flex-basis:100%;margin:2px 0 0;font-weight:700}
.hub-about p{line-height:1.6}
/* Prose panels open with a top rule instead of a box (user, 2026-11-04). */
.side-stack>.hub-about,.side-stack>.hub-base,.side-stack>.hub-getting,.side-stack>.hub-extend,.side-stack>.hub-byg{padding-top:14px;border-top:2px solid var(--navy)}
.hub-hoods{padding-left:18px;line-height:1.6}
.hub-hoods li{margin:4px 0}
.hub-sources{display:flex;flex-wrap:wrap;gap:4px 10px;margin:4px 0 10px;font-size:12px;line-height:1.6}
.hub-sources a{color:var(--accent-text);overflow-wrap:anywhere}
.hub-checked{color:var(--muted)}
/* Sources fold under a "Read more" line (user, 2026-11-04): one disclosure per panel, meta type, never orange underlines in the prose. */
.hub-src{margin:6px 0 0;font:var(--text-meta);color:var(--ink-muted)}
.hub-src>summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer;list-style:none;color:var(--ink-muted)}
.hub-src>summary::-webkit-details-marker{display:none}
.hub-src>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.hub-src[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.hub-src>summary:hover{color:var(--ink)}
.hub-src ul{margin:4px 0 0;padding-left:18px;display:grid;gap:3px}
.hub-src a{color:var(--rust-text);text-decoration:none;overflow-wrap:anywhere}
.hub-src a:hover{text-decoration:underline}
.hub-src .hub-checked{margin-left:6px}
.hub-facts dl,.hub-getting dl{margin:0;display:grid;gap:12px}
.hub-getting h3{margin:14px 0 6px;font-size:15px}
.hub-transfers{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);white-space:nowrap;overflow-x:auto;scrollbar-width:thin}
.hub-transfer a{font-weight:800;color:inherit}
.hub-fact dt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:4px;font-weight:800}
.hub-fact dd{margin:0;line-height:1.6;color:var(--ink-2)}
.hub-fact.is-estimate dd{color:var(--muted)}
.tag-warn{background:var(--warn-bg);color:var(--warn-ink)}
.hub-best{margin:12px 0 4px;line-height:1.6}
/* Before you go (destination depth D2): the sourced items only (user, 2026-11-04: no advisory button, no other countries),
   icon + label + one line, two columns from 640 px. The advisory styles stay for the Ready screen rows. */
.hub-byg>.byg-body{margin-top:10px}
.byg-advisory{display:grid;gap:6px}
.byg-advisory-btn{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:10px 14px;border-radius:var(--radius-sm,12px);text-align:left;text-decoration:none;font-weight:800;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.byg-advisory-btn .icon{flex:none;color:var(--accent-text)}
.byg-small,.byg-copy,.byg-none,.byg-ask{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.byg-copy{margin-top:10px;color:var(--ink-2)}
.byg-choose{display:grid;gap:8px}
.byg-chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 4px}
.byg-chips::-webkit-scrollbar{display:none}
.byg-chips .chip{flex:none;font-size:13px;padding:0 14px}
.byg-others{margin-top:10px}
.byg-others>h3{margin:0 0 6px;font-size:15px;line-height:22px;font-weight:800}

.byg-other-list{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.byg-other-list li{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:13px;line-height:1.5}
.byg-other{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent-text);overflow-wrap:anywhere}
.byg-items{margin:0;padding:0;list-style:none;display:grid;gap:0 24px}
.byg-item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--hairline)}
.byg-item:first-child{border-top:0}
@media(min-width:640px){.byg-items{grid-template-columns:1fr 1fr}.byg-item:nth-child(2){border-top:0}}
.byg-icon{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--cream);color:var(--navy)}
.byg-icon .icon{width:15px;height:15px}
.byg-item-text{min-width:0}
.byg-item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 2px;font-size:14px;line-height:20px}
.byg-item-head .byg-src{font:var(--text-meta);font-size:12px;color:var(--ink-muted);text-decoration:none}
.byg-item-head .byg-src:hover{color:var(--rust-text)}
.byg-item-body{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-muted)}
.byg-stale{background:var(--surface-2);color:var(--muted)}
.highlight-thumb.is-icon .icon{color:var(--accent-text)}
/* Where to eat (destination depth D4): area select, dish / dietary / budget chips, one Google Maps link. */
.hub-eat>.eat-body{margin-top:10px;display:grid;gap:14px}
.eat-intro,.eat-small,.eat-why,.eat-diet-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.eat-label{display:block;margin:0 0 6px;font-size:14px;font-weight:800;color:var(--ink)}
.eat-field select{width:100%;max-width:100%;min-height:var(--tap);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm,12px);background:var(--surface);color:var(--ink);font:inherit}
.eat-chips{display:flex;flex-wrap:wrap;gap:8px}
.eat-chips .chip,.eat-dish .chip{font-size:13px;padding:0 14px}
.eat-dishes{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.eat-dish{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.eat-dish .eat-why{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.eat-why .hub-sources,.eat-diet-note .hub-sources{display:inline;margin:0}
.eat-diet-note{margin-top:8px;color:var(--ink-2)}
.eat-action{display:grid;gap:6px}
.eat-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);text-decoration:none}
.eat-day{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:6px 0 0}
.eat-near{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-size:14px;font-weight:700;color:var(--accent-text);text-decoration:none}
.eat-near-card{display:grid;gap:6px;padding:12px}
.eat-near-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.loose-tick.is-link{background:var(--accent-soft);color:var(--accent-ink)}
.eat-todo{text-decoration:none;color:inherit}
/* Extend your trip (destination depth D5): compact rows (user, 2026-11-04) — name · kind, one travel line, one action on the
   right; three rows open, the rest under "See all". Pair it with… stays as before. */
.hub-extend>.extend-body{margin-top:10px;display:grid;gap:10px}
.extend-cards,.extend-pair-list{margin:0;padding:0;list-style:none;display:grid;gap:0}
.extend-pair-list{gap:10px}
.extend-card{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:2px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--hairline)}
.extend-thumb{grid-row:1/3;display:block;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--cream)}
.extend-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.extend-card>.extend-head{grid-column:2}
.extend-cards>.extend-card:first-child{border-top:0}
.extend-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;min-width:0}
.extend-name{font-size:15px;overflow-wrap:anywhere}
.extend-kind{font:var(--text-eyebrow);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);background:none;padding:0;border:0}
.extend-line{grid-column:2;margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-muted)}
.extend-line .hub-sources{display:inline;margin:0 0 0 4px;font-size:12px}
.extend-line .hub-sources a{color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--hairline)}
.extend-line .hub-sources a:hover{color:var(--rust-text);border-color:var(--rust-text)}
.extend-why{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.extend-pair .hub-sources{margin:0}
.extend-pair{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 14px;align-items:start}
.extend-pair .extend-thumb{grid-row:auto}
.extend-actions{grid-row:1/3;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.extend-btn{min-height:36px;padding:0 12px;font-size:13px}
@media(max-width:639px){
 .extend-card{grid-template-columns:56px minmax(0,1fr);align-items:start}
 .extend-pair{grid-template-columns:56px minmax(0,1fr)}
 .extend-thumb{width:56px;height:56px}
 .extend-actions{grid-row:auto;grid-column:2;align-items:flex-start;margin-top:6px}
}
.extend-more{margin:0}
.extend-more>summary{display:inline-flex;align-items:center;min-height:var(--tap);cursor:pointer;list-style:none;font:var(--text-meta);color:var(--navy);border-bottom:1.5px solid var(--navy)}
.extend-more>summary::-webkit-details-marker{display:none}
.extend-more[open]>summary{margin-bottom:6px}
.extend-more .extend-cards>.extend-card:first-child{border-top:1px solid var(--hairline)}
.extend-soon-note,.extend-added{font-size:13px;color:var(--muted)}
.extend-added{font-weight:800;color:var(--ok-ink,var(--ink))}
.extend-pairs h3{margin:0 0 8px;font-size:15px}
.extend-pair-head{margin:0;line-height:1.5;overflow-wrap:anywhere}
/* Ideas header (mock 1, Main.dc.html); the screen's own layout is in ideas.css. */
.ideas-head h1{margin:0;font-size:24px;font-weight:800}
.ideas-sub{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.lite-sights{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line-strong)}
.lite-sights>h3{margin:0 0 4px}
.lite-sights>p{font-size:13px;color:var(--muted);margin:0 0 10px}
@media(min-width:700px){
 .overview{margin:0}
 .detail-hero{min-height:420px;margin-top:20px;padding:32px 32px 56px;border-radius:24px}
 .overview-card{margin:-32px 0 0;padding:24px;border-radius:20px;box-shadow:var(--shadow-card)}
 .hub-cta{margin-top:20px;padding:0}
 .highlight-strip{grid-auto-columns:128px;margin:0;padding:2px 0 4px}
 .highlight-thumb{width:128px;height:128px}
 .ideas-head h1{font-size:28px}
}
@media(min-width:1000px){
 .detail-content{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:28px;align-items:start}
}
.overview-card .hub-intro.panel{padding:0;border:0;box-shadow:none;background:none}
.overview-card>.stat-row:first-child{border-top:0;padding-top:4px}
/* WF-114: Seasons as sentences */
.hub-season-list{padding-left:18px;margin:0;line-height:1.6;color:var(--ink-2)}
.hub-season-list li{margin:6px 0}
.hub-season-list .hub-sources{font-size:12px}
/* What's on and the 7-day forecast (user, 2026-11-03): stacked in the 760 px reading column. */
.hub-pair{display:grid;gap:14px;align-items:start}
.hub-pair>.panel{margin:0;min-width:0}
.hub-pair .wx-days{margin-top:6px}
.hub-pair .wx-day,.hub-pair .wx-head{padding:3px 0}
.hub-pair .wx-now{margin:8px 0 2px}
.hub-pair .hub-whats-on .ev-section+.ev-section{margin-top:10px;padding-top:8px}
.stat-credit{margin:4px 0 0}
.ev-yearly>h3{margin:0 0 8px}
/* Reading width (user, 2026-11-03): the destination overview — hero, card, Why, CTA and panels — shares the country and
   route pages' 760 px column; grid and map pages (Explore, Ideas, Itinerary, Weather map) stay full width. */
@media(min-width:700px){.overview,.hub-panels{max-width:760px;margin-left:auto;margin-right:auto}}