/* Model-page "Gallery" section (includes/model-gallery.php): build photos grouped by van — model + chassis header per group (each header collapses / reopens its grid), a van-selector dropdown in the head toolbar, and tiles that launch the shared fullscreen viewer (service-detail-gallery.css / .js) — plus the model-page flavor of that viewer (immersive near-black backdrop, no thumb strip, "current / total" counter; see the --models section below). The section title reuses .models-intro__heading from models-bg.css, so its rod dividers match the "Choose Your Build" heading exactly. */ /* On :root (not .s-model-gallery) because the fullscreen viewer is re-parented to on init and still needs the token. */ :root { --mg-tile-radius: 22px; /* matches .model-gallery__group's shell radius */ } .s-model-gallery { max-width: 90rem; /* match .s-compare so both headings' rods span alike */ margin: 0 auto; padding: 0 1.25rem 4.5rem; /* Local dark palette — same recipe as the compare table's shell. */ --mg-panel: #0e0f11; --mg-tile: #0a0b0d; --mg-line: rgba(255, 255, 255, 0.09); --mg-line-soft: rgba(255, 255, 255, 0.05); --mg-text: rgba(255, 255, 255, 0.85); --mg-text-dim: rgba(255, 255, 255, 0.6); /* Steel accent — the section's only accent color (deliberately not the brand red), shared by the chassis label, chip surfaces, and icon. */ --mg-accent: #9db2c7; --mg-chip-line: rgba(157, 178, 199, 0.28); --mg-chip-bg: rgba(157, 178, 199, 0.1); } /* Detail pages: the gallery rides inside its own dark band section (`$galleryWrap` in model-gallery.php). The band supplies the vertical padding — mirroring the nested compare table's treatment — and hugs the section above it (the Options list's bottom padding already separates them). */ .s-options.dark-bg.s-options--gallery { padding-top: 0; } .s-options.dark-bg .s-model-gallery { padding-top: 0; padding-bottom: 0; } .model-gallery__head { text-align: center; /* keeps the rod-divider heading centered */ margin-bottom: 1.4rem; } /* Toolbar row under the heading: intro copy anchored left, van selector on the right — replaces the old centered intro + wrapping pill wall. */ .model-gallery__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.1rem; text-align: left; } /* Shared recipe with .compare-intro (models-compare.css) — keep the two in sync: fluid size (compact on phones, up to 1rem on wide screens), the same 50rem measure, orphan-avoiding wrap. */ .model-gallery__intro { flex: 1 1 30rem; max-width: min(50rem, 100%); margin: 0; color: var(--c3); line-height: 1.55; font-size: clamp(0.84rem, 0.79rem + 0.3vw, 1rem); text-wrap: pretty; } /* ---- van selector ---- One compact control however many builds a family has (the pill row wrapped into a wall of buttons). Ghost-glass shell on the cta.css tokens; the native dropdown list gets a dark surface via the