/* ==========================================================================
   BEL-AIR public site (Mockup 02) — Discover pages and the homepage "Explore Bel-Air" grid.
   The homepage was one 31-screen page reached through #anchors; its sections
   now live on nine pages of their own (BRD UX-02). The sections
   keep their homepage styles (site.css); this file only joins them to the
   inner-page header and draws the grid of cards that leads to them.
   ========================================================================== */

/* ---------------------------------------------------------------- Discover pages */
/* the page header already opens the page: the first section does not need a full section's space above it */
.discover .page-hero + .section { padding-top: clamp(2.5rem, 2rem + 2.5vw, 5rem); }
.discover .page-hero + .wipe .wipe__head { padding-top: clamp(2.5rem, 2rem + 2.5vw, 5rem); }

/* ---------------------------------------------------------------- homepage spacing
   The homepage sections use the inner pages' spacing (the .paper padding in inner.css), so the homepage stays
   within 5 laptop screens (BRD UX-03). The hero keeps its full screen. */
body:not(.inner) > main > .section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }

/* ---------------------------------------------------------------- homepage: Explore Bel-Air */
.explore { background: var(--night-2); overflow: clip; }
.explore .glow--leaf { width: 44vw; height: 44vw; right: -16vw; top: 6%; }
.explore__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 2.5rem; }

.explore__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1rem; }
.explore__grid > li { display: grid; }
.explore__feature { grid-column: span 2; grid-row: span 2; }

.xcard { position: relative; display: block; overflow: hidden; border-radius: var(--r-photo); color: var(--white); text-decoration: none; isolation: isolate; }
.xcard .photo { aspect-ratio: 4 / 3; height: 100%; border-radius: 0; }
.explore__feature .xcard .photo { aspect-ratio: auto; min-height: 100%; }
.xcard .photo img { transition: transform 1.2s var(--ease-premium); }
.xcard:hover .photo img, .xcard:focus-visible .photo img { transform: scale(1.04); }
.xcard .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, .05) 25%, rgba(7, 11, 20, .55) 55%, rgba(7, 11, 20, .94)); }
.xcard__cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; display: grid; gap: .3rem; }
.xcard__cap small { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.xcard__cap b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.05; }
.xcard__cap b::after { content: " →"; color: var(--gold); transition: margin-left var(--d-micro) var(--ease-premium); }
.xcard:hover .xcard__cap b::after { margin-left: .25rem; }
.explore__feature .xcard__cap { left: 1.5rem; right: 1.5rem; bottom: 1.4rem; }
.explore__feature .xcard__cap b { font-size: var(--t-2xl); }

@media (max-width: 1100px) { .explore__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 601–1100 px (a 768 px tablet): the three-column cards are narrow, so the small caption wraps to two lines and rises into
   the light part of the shade (2.29–6.75:1, scan A-2); the shade is deeper there so the caption keeps 7:1 over any photo */
@media (min-width: 601px) and (max-width: 1100px) {
  .xcard .photo::after { background: linear-gradient(180deg, rgba(7, 11, 20, .1) 0%, rgba(7, 11, 20, .8) 38%, rgba(7, 11, 20, .94)); }
}
@media (max-width: 600px) {
  .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .explore__feature { grid-row: span 1; }
  .explore__feature .xcard .photo { aspect-ratio: 16 / 9; }
  .xcard .photo { aspect-ratio: 1; }
  .xcard__cap { left: .8rem; right: .8rem; bottom: .75rem; }
  .xcard__cap small { display: none; }
  .explore__feature .xcard__cap small { display: block; }
  .xcard__cap b, .explore__feature .xcard__cap b { font-size: var(--t-lg); }
}
@media (prefers-reduced-motion: reduce) { .xcard .photo img { transition: none; } }

/* ---------------------------------------------------------------- production port (wave W6, the Razor Discover pages)
   What the mock wrote as style="" attributes is a class here: the pages carry no inline styles (CSP, BRD M2-NFR-56). */

/* reveal delays (the mock's style="--delay:…ms") */
.dl-60 { --delay: 60ms; } .dl-80 { --delay: 80ms; } .dl-100 { --delay: 100ms; } .dl-120 { --delay: 120ms; }
.dl-140 { --delay: 140ms; } .dl-160 { --delay: 160ms; } .dl-180 { --delay: 180ms; } .dl-200 { --delay: 200ms; }
.dl-220 { --delay: 220ms; } .dl-240 { --delay: 240ms; } .dl-260 { --delay: 260ms; } .dl-280 { --delay: 280ms; }
.dl-300 { --delay: 300ms; } .dl-320 { --delay: 320ms; } .dl-340 { --delay: 340ms; } .dl-360 { --delay: 360ms; }
.dl-380 { --delay: 380ms; } .dl-400 { --delay: 400ms; } .dl-420 { --delay: 420ms; } .dl-480 { --delay: 480ms; }
.dl-500 { --delay: 500ms; } .dl-800 { --delay: 800ms; }

/* the background glows' drift, per section (the mock's style="--d:…;--gx:…;--gy:…") */
.hero .glow--gold { --d: 26s; --gx: 5vw; --gy: -3vw; }
.hero .glow--teal { --d: 32s; --dl: -12s; --gx: -4vw; --gy: 3vw; }
.explore .glow--leaf, .meet .glow--leaf { --d: 28s; --gx: 4vw; --gy: 5vw; }
.live .glow--sky { --d: 30s; --gx: -5vw; --gy: 4vw; }
.business .glow--sky { --d: 34s; --gx: 6vw; --gy: -4vw; }
.community .glow--gold { --d: 30s; --gx: -5vw; --gy: 4vw; }
.exp-section .glow--rose { --d: 30s; --gx: -4vw; --gy: 5vw; }
.gallery .glow--teal { --d: 36s; --gx: 5vw; --gy: 3vw; }

/* the Related row at the end of each Discover page (M2-DISC-03, the _RelatedRow partial) */
.related { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
.related--glass { padding: 1rem 1.25rem; max-width: 30rem; }
.wipe__foot { padding-block: 2.5rem; }
.wipe__foot .related { margin-top: 0; }
.afterdark .related { margin-top: 2rem; }
.meet__copy .lede { margin-top: 1.25rem; }
.afterdark__cta { margin-top: 1.5rem; }

/* homepage: the Track / Check fields say what is missing under the field (M2-HOME-26, -27) */
.quick .field-error { margin-top: .35rem; }

/* Neighbourhoods: every district's words show without scripts; with scripts one panel at a time (M2-HOME-16) */
.hoodpanel__district + .hoodpanel__district { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--hairline); }
html.js .hoodpanel__district:not(.is-current) { display: none; }
html.js .hoodpanel__district + .hoodpanel__district { margin-top: 0; padding-top: 0; border-top: 0; }
.hoodpanel__district .photo figcaption { position: static; padding: .6rem 0 0; background: none; }

/* the map's fallback (M2-HOME-44): shown when the map library or its tiles cannot load, and with scripts blocked */
.map__fallback { display: grid; align-content: center; gap: .75rem; min-height: 12rem; padding: 1.5rem; border-radius: var(--r-photo); border: 1px solid var(--glass-line); background: var(--night-2); }
.map__fallback p { max-width: 40ch; }
.map.is-fallback .osm, .map.is-fallback .map__legend { display: none; }
html:not(.js) .map .osm, html:not(.js) .map .map__legend { display: none; }
html:not(.js) .map__fallback[hidden] { display: grid !important; }

/* Gallery: the strip's chips need a script; without one every photograph shows (§ 45.4) */
html:not(.js) #gallery-chips, html:not(.js) .gallery__hint .nav-arrows { display: none; }

/* Gallery: the album list (M2-MED-01, Gap A-22) and an album page (M2-MED-02) */
.albums { background: var(--night); }
.albums__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 2rem; }
.albums__chips a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-weight: 600; text-decoration: none; }
.albums__chips a:hover { border-color: var(--ink); }
.albums__chips a[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.albums__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.albums__grid > li { display: grid; }
.albums__grid .xcard .photo { aspect-ratio: 3 / 2; }
.albums__grid .xcard__cap small { display: block; } /* an album's date and count stay on a phone (full-width cards) */
/* the two-line caption sits higher on the photo: the scrim darkens sooner (7:1 at A++ on a phone, DR-40) */
.albums__grid .xcard .photo::after { background: linear-gradient(180deg, rgba(7, 11, 20, .05) 10%, rgba(7, 11, 20, .72) 42%, rgba(7, 11, 20, .94)); }
.albums .pager { margin-top: 2rem; }
.album { background: var(--night-2); }
.album__meta { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-2); }
.album__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.album__grid figure { margin: 0; }
.album__grid button { display: block; width: 100%; text-align: left; color: inherit; }
.album__grid .photo { aspect-ratio: 3 / 2; }
.album__grid figcaption { margin-top: .6rem; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 1100px) { .albums__grid, .album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .albums__grid, .album__grid { grid-template-columns: 1fr; } }