/* ========================================================================== Travel Hub - Visual Foundation: layout (Redesign Phase 1A) The one page container, and the rhythm utilities later phases build on. Loaded LAST on every route (after page stylesheets and the engine's booking.css) so the anchor below wins over each template's own width rule at equal specificity. Kill switch: define TRAVELHUB_FOUNDATION_DISABLE (true) in wp-config.php and neither foundation stylesheet loads. See inc/functions/enqueue.php. ========================================================================== */ /* -------------------------------------------------------------------------- 1. One container The audit found five wrapper rules and four different content edges at 1440px (113 / 129 / 137 / 143) plus two mobile gutters (16 / 20). Each legacy wrapper is anchored here to the same box instead of being nudged individually, so a heading on the tour page, a card on the archive and the logo in the header all start on the same line. Width model: content = min(viewport - 2 gutters, container). Padding is zeroed because the gutter is already outside the box; a wrapper that also padded would push its content off the grid. Verified on 11 routes: no wrapper in this list is nested in another, so no element loses the gutter twice. -------------------------------------------------------------------------- */ .th-container, .thc-wrap, .thcx-container, .thde-hero__inner, .thh-shell, .thh-section-inner, .thpg-head__inner, .thui-container, .thv3__wrap, .thtr__wrap, .thte-hub { box-sizing: border-box; inline-size: min(100% - 2 * var(--th-gutter), var(--th-container)); max-inline-size: none; margin-inline: auto; padding-inline: 0; } /* A text column that should stay on the grid's start edge but not run the full width. Start-aligned (not centred) so it keeps the left edge in LTR and the right edge in RTL. */ .th-measure { max-inline-size: var(--th-measure); } .th-measure-lead { max-inline-size: var(--th-measure-lead); } .th-measure-overview { max-inline-size: var(--th-measure-overview); } /* -------------------------------------------------------------------------- 2. Section rhythm (L1 / L2 / L3) -------------------------------------------------------------------------- */ .th-section { padding-block: var(--th-section); } .th-section--sm { padding-block: var(--th-section-sm); } .th-section--surface { background: var(--thui-color-surface); } .th-group + .th-group { margin-block-start: var(--th-group); } /* -------------------------------------------------------------------------- 3. Section head: eyebrow -> title -> lead -> actions -> content -------------------------------------------------------------------------- */ .th-head { display: flex; flex-direction: column; align-items: flex-start; max-inline-size: var(--th-measure-lead); margin-block-end: var(--th-gap-head); } .th-head > * { margin: 0; } .th-head__eyebrow { font-size: var(--th-fs-micro); font-weight: var(--th-fw-heading); letter-spacing: var(--th-ls-eyebrow); line-height: var(--th-lh-ui); text-transform: uppercase; } .th-head__eyebrow + * { margin-block-start: var(--th-gap-eyebrow); } .th-head__title { font-size: var(--th-fs-h2); font-weight: var(--th-fw-display); line-height: var(--th-lh-heading); letter-spacing: var(--th-ls-heading); } .th-head__title + .th-head__lead { margin-block-start: var(--th-gap-title); } .th-head__lead { font-size: var(--th-fs-lead); line-height: var(--th-lh-body); } .th-head__actions { display: flex; flex-wrap: wrap; gap: var(--th-control-gap); margin-block-start: var(--th-gap-lead); } /* -------------------------------------------------------------------------- 4. Prose flow: editorial copy (tour overview, destination guidance) -------------------------------------------------------------------------- */ .th-flow { max-inline-size: var(--th-measure); } .th-flow > * { margin-block: 0; } .th-flow > * + * { margin-block-start: var(--th-gap-p); } .th-flow > h2 + * { margin-block-start: var(--th-gap-h2); } .th-flow > h3 + * { margin-block-start: var(--th-gap-h3); } .th-flow > * + h2 { margin-block-start: var(--th-group); } .th-flow > * + h3 { margin-block-start: var(--th-space-7); } /* -------------------------------------------------------------------------- 5. Grid 1 column on phones, 2 on tablet, 3 or 4 on desktop - chosen by the modifier, never by content width, so a row of cards is always a whole number of equal columns. Cards stretch to the row's height; a card's own flex column pins its price/CTA to the bottom (Phase 1C). -------------------------------------------------------------------------- */ .th-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--th-grid-gap); align-items: stretch; } .th-grid--lg { gap: var(--th-grid-gap-lg); } @media (min-width: 768px) { .th-grid--2, .th-grid--3, .th-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .th-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .th-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 6. Media with a declared ratio The ratio belongs to the component role, not to the uploaded file, so one grid never mixes image heights. object-position stays centred; a template may set --th-focus (e.g. "50% 30%") when a subject sits high in the frame. -------------------------------------------------------------------------- */ .th-media { position: relative; overflow: hidden; aspect-ratio: var(--th-ratio, var(--th-ratio-card)); background: var(--thui-n-100); } .th-media > img, .th-media > picture > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--th-focus, 50% 50%); } .th-media--cinematic { --th-ratio: var(--th-ratio-hero-mobile); } @media (min-width: 768px) { .th-media--cinematic { --th-ratio: var(--th-ratio-cinematic); } } .th-media--gallery { --th-ratio: var(--th-ratio-gallery); } .th-media--compact { --th-ratio: var(--th-ratio-compact); } .th-media--square { --th-ratio: var(--th-ratio-square); }