/* Homepage 4-card row — V2 (approved-homepage parity): DARK cards with
 * per-card colored eyebrows on a deep-navy band, replacing the old light
 * pastel tints (Reference/approved-homepage.png). The section itself
 * carries the navy background so the hero flows into the card band the way
 * the reference composition does; sections below (Explore, Kids) are
 * unchanged in V2. */
.nac-cards { background: var(--nac-navy-900); }
/* DESKTOP OVERFLOW FIX (2026-09-13): tracks are minmax(0, 1fr), not bare
 * 1fr (= minmax(auto, 1fr)). With an `auto` minimum each column could not
 * shrink below its card's min-content width, and in landscape (every
 * desktop) .nac-card__media's `aspect-ratio: 4/1` + `min-height: 84px`
 * transfers to a 336px min-content width, i.e. a 338px floor per card ->
 * 4 x 338 + 3 x 16 = 1400px of tracks. Below a ~1464px viewport the row
 * overflowed the 1440px container to the right (Sponsor Stops past the
 * edge, horizontal page scroll, hero/body edge exposed). A 0 minimum lets
 * the tracks share the container width; the media strip's used size is
 * unchanged (min/max-height still clamp it). */
.nac-cards__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nac-space-4);
  max-width: 1440px;
  margin: 0 auto;
  /* H-D2V: reference card band is compact (~225px tall). */
  padding: var(--nac-space-8) var(--nac-space-8);
}
.nac-card {
  /* H-D2V-R3 §7: flex column so every card's CTA sits on a common bottom
     baseline regardless of how many lines the title/description take. Grid
     already stretches all four cards to equal height (align-items:stretch);
     the CTA uses margin-top:auto to push to the bottom of that shared height. */
  display: flex;
  flex-direction: column;
  /* DESKTOP OVERFLOW FIX: grid items default to min-width:auto; 0 stops the
     card from ever forcing its track wider than its share of the row. */
  min-width: 0;
  border-radius: var(--nac-radius-md);
  padding: var(--nac-space-4);
  background: var(--nac-card-bg-dark);
  border: 1px solid var(--nac-card-border-dark);
  color: var(--nac-white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: box-shadow var(--nac-duration-base) var(--nac-ease-standard), transform var(--nac-duration-base) var(--nac-ease-standard);
  opacity: 0;
  transform: translateY(12px);
}
/* The CTA is the last direct child of every card (a .nac-btn); margin-top:auto
   absorbs the flexible space so all four buttons align on one baseline. Images
   and button colors are unchanged. */
.nac-card > .nac-btn { margin-top: auto; }
.nac-card.nac-reveal--visible { opacity: 1; transform: translateY(0); transition: opacity var(--nac-duration-base) var(--nac-ease-out), transform var(--nac-duration-base) var(--nac-ease-out); }
.nac-card:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.16); }
/* Per-card colored eyebrow labels (tokens.css). */
.nac-card--murals   .nac-card__eyebrow { color: var(--nac-eyebrow-murals); }
.nac-card--kids     .nac-card__eyebrow { color: var(--nac-eyebrow-kids); }
.nac-card--guides   .nac-card__eyebrow { color: var(--nac-eyebrow-guides); }
.nac-card--sponsors .nac-card__eyebrow { color: var(--nac-eyebrow-sponsors); }
/* PHASE 2.2 ADDITION (docs/phase-2-2-visual-parity-report.md §F): real photo
   (Explore Murals) / generic icon (Kids, Guides, Sponsors) media block, so
   each card has real visual content instead of text-only. */
.nac-card__media {
  /* H-D2V: compact banner strip instead of a tall header block.
     H-D2V-R4B (revised): portrait and default keep the accepted R4A fixed
     84px strip. The intrinsic-ratio sizing lives in the landscape-only
     query below — an unconditional aspect-ratio + max-height clamp made
     real iPhones retain the landscape-clamped geometry after rotating
     back to portrait (horizontal page overflow); a plain fixed height on
     portrait re-resolves deterministically on every rotation. */
  height: 84px;
  flex-shrink: 0;
  margin: calc(var(--nac-space-4) * -1) calc(var(--nac-space-4) * -1) var(--nac-space-3);
  border-radius: var(--nac-radius-md) var(--nac-radius-md) 0 0;
  background-size: cover;
  background-position: center;
}
/* H-D2V-R4B: landscape-only intrinsic-ratio strip. A fixed 84px height
   flattened the photos on wide landscape-phone cards (1-col ≤767px ≈ 7.5:1
   crop). 4:1 tracks card width; the min pins the accepted 84px strip at the
   approved 4-col desktop width; the max caps full-width landscape. */
@media (orientation: landscape) {
  .nac-card__media {
    height: auto;
    aspect-ratio: 4 / 1;
    min-height: 84px;
    max-height: 150px;
  }
}
.nac-card__icon {
  width: 56px; height: 56px;
  margin-bottom: var(--nac-space-4);
}
.nac-card__icon svg { width: 100%; height: 100%; display: block; }
.nac-card__eyebrow { display: block; font: var(--nac-fw-bold) var(--nac-fs-micro) var(--nac-font-display); text-transform: uppercase; letter-spacing: var(--nac-tracking-eyebrow); margin-bottom: var(--nac-space-2); }
.nac-card__title { font-size: 1rem; color: var(--nac-white); }
/* V2: body copy on the dark card surface. */
.nac-card__stat, .nac-card__desc { color: var(--nac-muted-on-dark); font-size: var(--nac-fs-micro); margin-bottom: var(--nac-space-3); }
/* H-D2V: compact card CTAs per the reference. */
.nac-card .nac-btn { min-height: 32px; padding: 6px 14px; font-size: var(--nac-fs-micro); }
/* The guides card's district <select> sits on the dark surface now. */
.nac-card .nac-field {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nac-card-border-dark);
  color: var(--nac-white);
  border-radius: var(--nac-radius-sm);
  padding: var(--nac-space-2) var(--nac-space-3);
  margin-bottom: var(--nac-space-3);
}
.nac-card .nac-field option { color: var(--nac-ink); }
/* Outline CTA variant needs its light-surface colors flipped on dark. */
.nac-card .nac-btn--teal-outline { color: var(--nac-eyebrow-guides); border-color: var(--nac-eyebrow-guides); }
/* H-D2V-R4A (C1): tile CTA consistency, existing tokens only.
   - Explore Murals: its CTA joins the tile's gold eyebrow family
     (--nac-gold). White text on #f5c518 fails AA, so the label uses the
     card-surface navy (--nac-navy-800 on gold ~= 10:1).
   - Neighborhood Guides: the only outline CTA becomes a solid fill of the
     SAME approved token it already used for its outline
     (--nac-eyebrow-guides), matching the visual weight of the other three
     solid CTAs; label navy for the same contrast reason.
   Hover/active intentionally match the other tinted card CTAs (the card
   itself carries the hover lift); the global :focus-visible ring
   (base.css, --nac-focus-ring sky blue) is clearly visible on both fills.
   Scoped to .nac-card — the base --teal/--teal-outline variants elsewhere
   are unchanged. These are links, so no disabled state exists. */
.nac-card .nac-btn--teal { background: var(--nac-gold); color: var(--nac-navy-800); }
.nac-card .nac-btn--teal-outline {
  background: var(--nac-eyebrow-guides);
  border-color: var(--nac-eyebrow-guides);
  color: var(--nac-navy-800);
}

.nac-sponsor-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--nac-space-6);
  max-width: 1440px; margin: 0 auto;
  padding: var(--nac-space-10) var(--nac-space-8);
  border-top: 1px solid #eee;
}
.nac-sponsor-strip__logos { display: flex; gap: var(--nac-space-8); align-items: center; flex-wrap: wrap; }
.nac-sponsor-logo img { max-height: 32px; width: auto; }

/* OWNER REVISION (2026-09-13): responsive grid steps. 4 columns on wide
 * desktop (>=1280px), 2 columns on narrower desktop / tablet landscape
 * (768-1279px; was 4 columns down to 1024px, i.e. 228px cards at 1024),
 * 1 column at <=767px (unchanged — every iPhone portrait/landscape width
 * keeps the presentation it has today). Tracks stay minmax(0, 1fr) so no
 * width can ever push a card past the container. */
@media (max-width: 1279px) {
  .nac-cards__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .nac-cards__inner { grid-template-columns: minmax(0, 1fr); padding: var(--nac-space-10) var(--nac-space-4); }
  .nac-sponsor-strip { flex-direction: column; align-items: flex-start; overflow-x: auto; }
}

/* D0 CORRECTIONS (2026-09-13): secondary link under the guides card picker. */
.nac-card__more { display: inline-block; margin-top: var(--nac-space-3); color: var(--nac-orange); font: var(--nac-fw-medium) var(--nac-fs-small) var(--nac-font-display); text-decoration: none; }
.nac-card__more:hover, .nac-card__more:focus-visible { text-decoration: underline; }