/* hub-components.css: SHARED hub components (not scoped to one page). Loaded by any hub page that uses them; Travel Products is the first.
   Namespace: hub-*. Self-contained: needs only the site design tokens (--color-*, --font-*, --text-label-*, --radius, --card-title-*).
   The geometry is the LIVE hub stream system, copied value for value (home / journeys / food-drink / news rules .stream-layout,
   .stream-item, .popular-list ... , verified 2026-10-06 on staging). Nothing here is a new ratio or a Travel Products size.
   Components:
     .hub-stream        end-of-hub section: main stream column + right rail (live .stream-layout: grid 7fr 3fr, gap 20px 48px)
       .hub-stream__head / __title / __rule   section title with the gold rule (live .stream-col-head + .section-label + .accent-rule--gold)
       .hub-stream__main                      the story column (.hub-stream__feed > .hub-story ...; .hub-stream__more = optional "Load More" row)
       .hub-stream__rail > .hub-stream__rail-inner   rail wrapper (any HTML); sticky when the section has .hub-stream--sticky
     .hub-story         live .stream-item: media 56% | text, gap 30px, padding 32px 0 (__media, __body, __eyebrow, __title, __excerpt)
     .hub-compact       horizontal compact card GEOMETRY at 640px and below (live .dest-compact-card / article .latest-item: media 47.7%, gap 16px, padding 14px 0, separator). Layout only: no typography tier is defined by this class
     .hub-popular       live Most Popular list (.popular-list / .popular-item / .popular-thumb / .popular-body / .popular-eyebrow)
     .hub-promo         House Promo card (shared, optional rail content; NOT used by Travel Products More From)
     .hub-hero          hero image (live .tl-hub-hero .hero.has-inline-image: 3:1, 2px radius, cover; min-height 200px at 640px and below)
     .hub-btn-outline   outline button
   Migration map for the existing hubs (a LATER task, nothing migrated yet): .stream-layout -> .hub-stream, .stream-feed-col -> .hub-stream__main,
   .stream-item -> .hub-story, .stream-sidebar -> .hub-stream__rail(-inner), .popular-* -> .hub-popular__*.
   Breakpoints (owner decision 2026-10-06): the stream is two columns from 1024px and one column at 1023px and below (rail AFTER the stream, never sticky);
   story card switches at 640px; Most Popular list rules keep the live 900px switch. Sticky rail = the live offset (header + 20px; the only input that differs is the header height, see below). */

:root{
	--hub-header-h:71px;       /* live header height (also the live fallback of --sig-header-h) */
}
@media (min-width:1024px){:root{--hub-header-h:105px}}   /* port step 4.2 two-row desktop header (60 + 1 + 44 + 1px border); the live formula below is unchanged */

/* ---- Section layout (live .stream-layout; two columns from 1024px, one column at 1023px and below) ---- */
.hub-stream-block{margin:0 0 56px}
.hub-stream{
	/* live: --stories-sticky-top, calc(--sig-header-h + --sig-quicknav-h + --sig-anchor-gap), i.e. header 71 + 20 = 91px */
	--hub-sticky-top:var(--stories-sticky-top,calc(var(--hub-header-h) + var(--sig-quicknav-h,0px) + var(--sig-anchor-gap,20px)));
	display:grid;
	grid-template-columns:minmax(0,1fr);
	gap:0 48px;                       /* live: 20px 48px; row gap 0 here because the head sits in its own row (its 28px margin below is the live .stream-col-head spacing) */
	align-items:start;
}
.hub-stream__head{grid-column:1;grid-row:1;margin-bottom:28px}
.hub-stream__title{margin:0;font-family:var(--text-label-family,var(--font-sans));font-size:15px;font-weight:500;line-height:1.4;letter-spacing:3px;text-transform:uppercase;color:var(--color-text)}   /* 3px = Home, Journeys, Food & Drink */
.hub-stream__rule{display:block;width:40px;height:2px;margin:8px 0 0;border:0;background:var(--color-accent)}
.hub-stream__main{grid-column:1;grid-row:2;min-width:0}
.hub-stream__rail{grid-column:1;grid-row:3;min-width:0;align-self:start;margin-top:48px}
.hub-stream__feed{display:flex;flex-direction:column}
.hub-stream__more{margin-top:36px;text-align:center}
@media (min-width:1024px){
	.hub-stream{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
	.hub-stream--no-rail{grid-template-columns:minmax(0,1fr)}
	.hub-stream__rail{grid-column:2;grid-row:1 / span 2;align-self:stretch;margin-top:0}   /* spans the whole stream, so a sticky child is bounded by this section */
	.hub-stream--rail-content .hub-stream__rail{grid-row:2}                                  /* rail starts level with the first story (House Promo) */
}

/* ---- Story card (live .stream-item): media 56% left, text right ---- */
.hub-story{display:grid;grid-template-columns:minmax(0,56%) minmax(0,1fr);gap:30px;padding:32px 0;color:inherit}
.hub-story>*{min-width:0}
.hub-story:first-child{padding-top:0}
.hub-stream__feed .hub-story+.hub-story{border-top:1px solid var(--color-border)}
.hub-story__media{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;border-radius:var(--radius,2px);background:var(--color-border)}
.hub-story__media>img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover}
.hub-story__body{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.hub-story__eyebrow{display:flex;align-items:baseline;gap:4px;margin:0 0 10px;font-family:var(--text-label-family,var(--font-sans));font-size:10px;font-weight:var(--text-label-weight,500);line-height:var(--text-label-line,1.4);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);white-space:nowrap;overflow:hidden;min-width:0}
.hub-story__title{margin:0 0 10px;font-family:var(--text-card-title-family,var(--font-editorial));font-weight:400;font-size:var(--card-title-compact-size,20px);line-height:var(--card-title-compact-line,1.3)}
.hub-story__excerpt{margin:0 0 14px;font-family:var(--font-sans);font-size:var(--text-body-size,14px);font-weight:300;line-height:var(--text-body-line,1.7);color:var(--color-text-body,#4f4f4b);max-width:52ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
a.hub-story:hover .hub-story__title{text-decoration:underline}

/* ---- Rail content: Most Popular (live .popular-list / .popular-item) ---- */
.hub-popular__head{margin-bottom:28px}
.hub-popular__head .hub-stream__title{margin-bottom:0}
.hub-popular{display:flex;flex-direction:column}
.hub-popular__item{display:flex;gap:16px;align-items:flex-start;padding:20px 0;min-width:0;color:inherit}
.hub-popular__item:first-child{padding-top:0}
.hub-popular__item+.hub-popular__item{border-top:1px solid var(--color-border)}
.hub-popular__thumb{position:relative;width:147px;height:98px;flex-shrink:0;aspect-ratio:3/2;border-radius:var(--radius,2px);overflow:hidden;background:var(--color-border)}
.hub-popular__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.hub-popular__body{min-width:0}
.hub-popular__eyebrow{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin:0 0 6px;font-family:var(--font-sans);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;min-width:0}
.hub-popular__eyebrow .cat{color:var(--color-accent);white-space:nowrap;font-weight:600}
.hub-popular__title{margin:0;font-family:var(--text-card-title-family,var(--font-editorial));font-weight:400;font-size:var(--card-title-small-size,16px);line-height:var(--card-title-small-line,1.4);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
a.hub-popular__item:hover .hub-popular__title{text-decoration:underline}
@media (min-width:901px) and (max-width:1040px){
	.hub-popular__thumb{width:clamp(88px,42%,147px);height:auto}   /* live rule for the narrow rail */
}

/* ---- Rail content: House Promo ---- */
.hub-promo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:#fff}
.hub-promo>img.hub-promo__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-promo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.05) 30%,rgba(15,15,15,.78) 100%);z-index:1}
.hub-promo__body{position:absolute;left:24px;right:24px;bottom:24px;z-index:2}
.hub-promo__tag{position:absolute;top:16px;left:16px;z-index:2;font:500 10px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;background:rgba(255,255,255,.9);color:#171614}
.hub-promo__eyebrow{margin:0 0 8px;font:500 10px/1.4 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:#e3c88f}
.hub-promo__title{margin:0 0 14px;font:400 24px/1.25 var(--font-editorial)}
.hub-promo__cta{font:500 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #e3c88f;padding-bottom:4px}

/* ---- Hero image (live hubs: aspect-ratio 3/1, radius 2px, image covers; 200px minimum height at 640px and below) ---- */
.hub-hero{position:relative;display:block;width:100%;aspect-ratio:3/1;min-height:0;overflow:hidden;border-radius:var(--radius,2px);color:inherit}
.hub-hero__media{position:absolute;inset:0;width:100%;height:100%}
.hub-hero__media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- Button ---- */
.hub-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border:1px solid var(--color-accent);background:transparent;color:var(--color-text);font:500 12px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radius,2px)}
.hub-btn-outline:hover{background:rgba(176,138,82,.08)}
.hub-btn-outline svg{width:14px;height:14px}

/* ---- Sticky rail (live .stream-sidebar: position sticky, top = header + 20px). From 1024px, optional per section (.hub-stream--sticky).
        Bounded by the section (the rail cell ends with the stream), so it is released before the newsletter/footer. Never sticky at 1023px and below. ---- */
@media (min-width:1024px){
	.hub-stream--sticky .hub-stream__rail-inner{position:sticky;top:var(--hub-sticky-top)}
	.hub-stream--sticky .hub-promo{max-height:calc(100vh - var(--hub-sticky-top) - 24px)}
}

/* ---- 1023px and below: one column, rail stacks after the stream, never sticky ---- */
@media (max-width:1023px){
	.hub-stream-block{margin-bottom:44px}
	.hub-stream__rail-inner{position:static}
	.hub-promo{aspect-ratio:16/9}
}
/* ---- Most Popular list (live rules, switch at 900px). Not used by Travel Products at this stage. ---- */
@media (max-width:900px){
	.hub-popular{flex-direction:row;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
	.hub-popular::-webkit-scrollbar{display:none}
	.hub-popular__item{flex:0 0 calc((100% - 16px) / 2.5);width:auto;flex-direction:column;align-items:stretch;gap:10px;padding:0;scroll-snap-align:start}
	.hub-popular__item+.hub-popular__item{border-top:0}
	.hub-popular__thumb{width:100%;height:auto}
	.hub-popular__body{width:100%}
}
@media (max-width:640px){
	/* House Promo rail (rail starts at the content): mobile only, it stacks BEFORE the section (promo, then heading, then stories) */
	.hub-stream--rail-content .hub-stream__rail{grid-row:1;margin-top:0;margin-bottom:48px}
	.hub-stream--rail-content .hub-stream__head{grid-row:2}
	.hub-stream--rail-content .hub-stream__main{grid-row:3}
	.hub-stream-block{margin-bottom:36px}
	.hub-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:26px 0}
	.hub-story:first-child{padding-top:0}
	.hub-story__excerpt{display:none}
	.hub-popular__title{font-size:var(--card-title-compact-size,18px);line-height:var(--card-title-compact-line,1.3)}
	.hub-stream__more{text-align:center}
	.hub-btn-outline{width:100%;padding:15px 24px}
	.hub-promo{aspect-ratio:4/5}
	.hub-hero{min-height:200px}
	/* Horizontal compact geometry (live .dest-compact-card and article .latest-item at 640px and below). Geometry only. */
	.hub-compact{display:grid;grid-template-columns:minmax(0,47.7%) minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;border-top:1px solid var(--color-border)}
	.hub-compact:last-child{padding-bottom:0}
}