/* Hero — docs/design-system.md §2/§7, docs/animation-spec.md §1.
 *
 * PHASE 2.4 REBUILD (approved visual-parity pass): three independent layers
 * matching the approved mockup composition —
 *   .nac-hero__media        z0  mural background, LEFT side, fades right
 *   .nac-hero__scrim        z1  cinematic left-dark gradient for legibility
 *   .nac-hero__illustration z2  city artwork, RIGHT side only (no more flat
 *                               full-bleed skyline)
 *   .nac-hero__inner        z3  copy (left) + planner panel (center-right)
 * Each layer is replaceable without touching the others: a real photo set
 * via hero_background_id overrides the temp mural automatically via
 * --nac-hero-bg; the illustration is a single self-contained inline SVG.
 */
.nac-hero {
  position: relative;
  /* H-D2V: reference hero band is ~630px of the 1054px design (~60vh),
     with cards immediately after — was min-height 760px + tall content. */
  min-height: clamp(540px, 60vh, 680px);
  background: var(--nac-bg-hero);
  color: var(--nac-white);
  overflow: hidden;
  padding-top: 80px;
}

/* Layer 0 — mural. Falls back to the clearly-temporary painted-mural SVG
 * (assets/img/hero-mural-temp.svg) until a real photo is uploaded via
 * wp-admin (hero_background_id -> --nac-hero-bg inline on .nac-hero). */
.nac-hero__media {
  position: absolute;
  inset: 0 auto 0 0;
  width: 64%;
  background-image: var(--nac-hero-bg, url('../img/hero-mural-temp.svg'));
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  opacity: 0;
  animation: nac-fade-in var(--nac-duration-hero) var(--nac-ease-out) forwards;
}
/* Right-edge blend into the hero base color — plain gradient overlay, works
 * in every browser (no mask-image dependency, Safari-safe). */
.nac-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,11,16,0) 55%, var(--nac-bg-hero) 97%);
}

/* Layer 1 — cinematic scrim. Darkest over the headline column, easing off
 * to the right so the illustration stays vivid. */
.nac-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,6,10,0.66) 0%, rgba(6,6,10,0) 22%),
    linear-gradient(90deg, rgba(6,6,10,0.78) 0%, rgba(6,6,10,0.46) 38%, rgba(6,6,10,0.1) 66%, rgba(6,6,10,0) 100%);
}

/* Layer 2 — city illustration, right side only. */
.nac-hero__illustration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(320px, 40%, 600px);
  opacity: 0;
  animation: nac-fade-in var(--nac-duration-hero) var(--nac-ease-out) forwards;
  animation-delay: 150ms;
  /* REQUIRED: the decorative city must never intercept clicks meant for
     the planner panel or any content below it. */
  pointer-events: none;
}
/* Soft left-edge blend so the artwork melts into the hero instead of
 * ending on a hard vertical line. */
.nac-hero__illustration::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 120px;
  background: linear-gradient(90deg, var(--nac-bg-hero) 0%, rgba(11,11,16,0) 100%);
  z-index: 1;
}
.nac-hero__illustration-svg { width: 100%; height: 100%; display: block; }

/* Layer 3 — content grid: copy | planner | breathing room for the city. */
/* H-D2V-R1 §10: stable two-column grid — copy left, planner right. This
 * REPLACES any viewport-centered planner placement; the planner is never
 * positioned with left:50%/translateX, so Safari can't jump it toward
 * center when the window is narrowed or moved partly off-screen. One
 * deliberate breakpoint (1023px) switches to stacked. */
.nac-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  /* H-D2V-R3 §3: planner column tightened to about the width the
     Morning/Afternoon/Evening row needs — removing the unused right strip.
     H-D2V-R4A (A3, revised): 300px outer card per Robert's measured target
     (~304px); matches planner.css. Fits comfortably now that the daypart
     grid is 3 columns and legacy-controls.css's wide .opt padding no longer
     applies to the tiles (one-line floor ≈235px). */
  grid-template-columns: minmax(0, 1fr) minmax(290px, 300px);
  gap: clamp(24px, 3vw, 48px);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--nac-space-6) var(--nac-space-8) var(--nac-space-10);
  align-items: start;
}
.nac-hero__copy { grid-column: 1; opacity: 0; transform: translateY(12px); animation: nac-fade-up var(--nac-duration-slow) var(--nac-ease-out) forwards; animation-delay: 100ms; }
.nac-hero__inner > .nac-glass-panel {
  grid-column: 2;
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  justify-self: end;
}

/* V2 (approved-homepage parity): the headline is the approved serif
 * (Playfair Display, weight 700, mixed case) instead of Archivo Black —
 * Reference/approved-homepage.png. Georgia serves until the self-hosted
 * WOFF2 files are added (see nac_fonts_inline_css() in functions.php). */
.nac-hero__title {
  font-family: var(--nac-font-serif);
  font-size: var(--nac-fs-hero-h1); /* caps at 34px desktop (tokens.css §3A) */
  font-weight: 800; /* real Playfair Display 800 self-hosted, not synthetic */
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: var(--nac-space-3) 0;
  /* H-D2V-R1 §3A: preferred wrap "Build your / Nashville art crawl". At 34px
     Playfair 800, "Nashville art crawl" ~= 8.9em and "Build your Nashville"
     ~= 9.7em, so 9.3em forces the break after "your" and keeps line two
     whole without colliding with the planner. Re-tuned to the real font. */
  max-width: 9.3em;
}
/* "in seconds." accent run — the approved handwritten treatment (Caveat),
 * orange, slightly oversized relative to the serif line. font-style stays
 * normal: Caveat is inherently hand-drawn, and a synthetic oblique on the
 * cursive fallback looks broken. */
/* H-D2V-R1 §3B: "in seconds." is exactly 42px at the three desktop targets,
 * its own line, orange. Fixed 42px so it never computes below spec at
 * desktop/tablet; a mobile rule below the breakpoint scales it down.
 * INTERIM: renders the local Bradley Hand / cursive fallback until the
 * Adobe Fonts kit supplies itc-bradley-hand — NOT final visual parity. */
.nac-hero__accent {
  font-family: var(--nac-font-script);
  font-style: normal;
  font-size: 42px;
  line-height: 1.15;
  color: var(--nac-orange);
  display: block;
  margin-top: 4px;
  padding-bottom: 0.08em;
}
/* H-D2V-R1 §3B: scale the accent DOWN only below the desktop/tablet
 * breakpoint; the desktop rule above stays a fixed 42px and never computes
 * smaller at 1440/1492/2048. */
@media (max-width: 767px) {
  .nac-hero__accent { font-size: clamp(28px, 8vw, 42px); }
}
.nac-hero__subtitle { color: var(--nac-muted); max-width: 40ch; }

/* H-D2V-R2 §4: hero social-proof row. Avatar cluster omitted for now (empty
   .nac-social-proof__avatars slot reserved). Row = text + gold stars + score,
   sized to sit between the subtitle and the CTAs per the approved reference. */
.nac-social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nac-space-2) var(--nac-space-3);
  margin-top: var(--nac-space-4);
}
.nac-social-proof__avatars:not([hidden]) {
  display: inline-flex;
  align-items: center;
}
.nac-social-proof__text { color: var(--nac-white); font-weight: var(--nac-fw-medium); font-size: var(--nac-fs-small); }
.nac-social-proof__stars { display: inline-flex; align-items: center; gap: 2px; color: #f9b21f; line-height: 0; }
.nac-social-proof__star { display: block; }
.nac-social-proof__score { color: var(--nac-white); font-weight: var(--nac-fw-medium); font-size: var(--nac-fs-small); }

.nac-hero__ctas { display: flex; gap: var(--nac-space-3); margin-top: var(--nac-space-4); flex-wrap: wrap; }
/* H-D2V: reference CTA scale. */
.nac-hero .nac-btn { min-height: 40px; padding: 10px 22px; font-size: var(--nac-fs-small); }
/* H-D2V-R4A (A3): the planner's Build My Crawl CTA keeps its approved 48px
 * height — the 40px hero-CTA scale above was out-specifying planner.css's
 * .nac-plan-cta (0-2-0 vs 0-1-0) and silently shrinking it to 40px. */
.nac-hero .nac-btn.nac-plan-cta { min-height: 48px; }

/* H-D2V: decorative route ribbon + pins over the photo's street area,
 * per Reference/approved-homepage.png. Photo mode only; pure decoration
 * (aria-hidden, pointer-events none); NO fabricated distance text — the
 * real route chip (below) still appears only after an actual build. */
.nac-hero__route-overlay {
  display: none;
  position: absolute;
  right: 4%;
  bottom: 16%;
  width: min(38%, 540px);
  height: 56%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.92;
}
.nac-hero--photo .nac-hero__route-overlay { display: block; }

/* V2.1 (approved hero media): photo mode. With a real Media Library image
 * configured (nac-hero--photo on the section), the media layer goes
 * full-bleed and the <img> covers it with a tunable focal point
 * (--nac-hero-focal inline from the hero_focal_point option, default
 * 38% 45%). The decorative SVG skyline is hidden — the photograph IS the
 * skyline — and the scrim strengthens on the left for headline legibility
 * with a bottom fade into the navy band, per Reference/approved-homepage.png.
 * All fallback-mode rules above are untouched: with no photo,
 * hero-mural-temp.svg still serves exactly as before. */
.nac-hero__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nac-hero-focal, 38% 45%);
  display: block;
}
.nac-hero--photo .nac-hero__media {
  width: 100%;
  /* H-D1: with a real photo present, drop the CSS fallback background
   * entirely so the temp SVG is never fetched behind the covering <img>. */
  background-image: none;
}
.nac-hero--photo .nac-hero__media::after {
  background: linear-gradient(180deg, rgba(7, 11, 20, 0) 55%, var(--nac-bg-hero) 98%);
}
.nac-hero--photo .nac-hero__scrim {
  background:
    linear-gradient(180deg, rgba(7, 11, 20, 0.6) 0%, rgba(7, 11, 20, 0) 26%),
    linear-gradient(90deg, rgba(7, 11, 20, 0.82) 0%, rgba(7, 11, 20, 0.5) 34%, rgba(7, 11, 20, 0.12) 62%, rgba(7, 11, 20, 0.08) 100%);
}
.nac-hero--photo .nac-hero__illustration { display: none; }

/* H-D2V-BG: the approved homepage hero background is now a committed THEME
 * ASSET (assets/images/hero/approved-homepage-bg.png, 1492x1054 — the
 * scene from Reference/approved-homepage.png with the route pins/path
 * baked into the artwork), layered via CSS per the approved direction.
 * The HTML layer structure is unchanged; this block simply:
 *   - paints the asset as the media layer's background in every mode;
 *   - hides the Media-Library <img> path (hero_background_id should be
 *     set to 0 at the deploy content step so it stops rendering at all);
 *   - retires the decorative SVG skyline AND the SVG route overlay (the
 *     asset already contains skyline, route path, and pins — keeping the
 *     overlay would double the pins);
 *   - applies the strong left scrim + bottom navy fade unconditionally
 *     (they were previously gated on photo mode).
 * Declared last in this file so it wins the cascade at equal specificity.
 * The photo-mode selector is included explicitly: H-D1's
 * `.nac-hero--photo .nac-hero__media { background-image: none }` is
 * two-class specific, so the asset must match it to win while
 * hero_background_id is still set (pre-content-step states). */
.nac-hero__media,
.nac-hero--photo .nac-hero__media {
  width: 100%;
  /* H-D2V: optimized progressive sRGB JPEG (q84, 305KB vs the 2.4MB PNG
   * master kept in Reference/). Preloaded on the front page only — see
   * nac_preload_hero_background() in functions.php. */
  background-image: url('../images/hero/approved-homepage-bg.jpg');
  background-size: cover;
  /* H-D2V-R4A (A1, revised per Robert's staging review): the image TOP EDGE
   * always aligns with the hero's top edge — `center top`, not a tunable
   * focal percentage. With `cover` on a wide hero the scale is width-driven,
   * so a top-anchored image never moves, recrops, or rescales when the hero
   * height changes: only the bottom crop extends/trims (under the navy fade
   * below). `contain` was rejected: it would letterbox ~240px of blank hero
   * at 1440px. The companion geometry fix (planner.css .nac-sunhint reserved
   * line) removes the hero-height change itself — see that comment. The
   * <=1023px stacked rule further down keeps its deliberate 18% horizontal
   * bias and adopts the same top anchor. */
  background-position: center top;
}
/* H-D2V-R1 §5: remove the strong full-width bottom navy fade — only a
 * whisper of it remains to seat the hero on the navy card band. */
.nac-hero__media::after {
  background: linear-gradient(180deg, rgba(7, 11, 20, 0) 82%, var(--nac-bg-hero) 100%);
}
.nac-hero__media-img { display: none; }
/* H-D2V-R1 §5: single subtle LEFT gradient for headline legibility — no
 * second overlapping scrim, no global darkening over the skyline/planner. */
.nac-hero__scrim {
  background: linear-gradient(90deg, rgba(4, 9, 18, 0.34) 0%, rgba(4, 9, 18, 0.18) 28%, rgba(4, 9, 18, 0) 48%);
}
.nac-hero__illustration,
.nac-hero__route-overlay,
.nac-hero--photo .nac-hero__route-overlay { display: none; }

/* V2: "Scroll to explore" cue, bottom-center of the hero
 * (Reference/approved-homepage.png). Pure CSS mouse glyph — no asset.
 * The wheel-dot bob animation is disabled under prefers-reduced-motion
 * (both by the global kill-switch in tokens.css and explicitly below). */
.nac-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--nac-space-5);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nac-space-2);
  color: var(--nac-muted);
  text-decoration: none;
  font: var(--nac-fw-bold) var(--nac-fs-micro) var(--nac-font-display);
  text-transform: uppercase;
  letter-spacing: var(--nac-tracking-eyebrow);
}
.nac-hero__scroll-cue:hover { color: var(--nac-white); }
.nac-hero__scroll-cue-mouse {
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  position: relative;
}
.nac-hero__scroll-cue-mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: currentColor;
  animation: nac-scroll-cue-bob 1.8s var(--nac-ease-standard) infinite;
}
@keyframes nac-scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(9px); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .nac-hero__scroll-cue-mouse::after { animation: none; }
}

/* V2: route-summary chip, bottom-right of the hero
 * (Reference/approved-homepage.png "12 Stops • 2.7 Miles"). Rendered with
 * the [hidden] attribute until a route has actually been built; then
 * assets/js/route-chip.js fills it with the REAL stop count and distance
 * route-app.js computed (never a hardcoded number) and reveals it. */
.nac-route-chip {
  position: absolute;
  right: var(--nac-space-8);
  bottom: var(--nac-space-6);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--nac-space-2);
  padding: var(--nac-space-2) var(--nac-space-4);
  border-radius: var(--nac-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--nac-ink);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font: var(--nac-fw-bold) var(--nac-fs-small) var(--nac-font-display);
  text-decoration: none;
}
.nac-route-chip[hidden] { display: none; }
.nac-route-chip__icon { color: var(--nac-orange); display: inline-grid; place-items: center; }

/* H-D2V-R3 §4: on tablet/phone the hero stacks and the planner fills the
   column, so the absolute bottom-center "Scroll to explore" cue and the
   bottom-right route-summary pill collided with the bottom of the planner.
   Hide the decorative cue below the desktop breakpoint, and drop the route
   chip out of absolute positioning so it flows centered BELOW the planner
   instead of overlapping it. (The chip stays [hidden] until a route builds.) */
@media (max-width: 1023px) {
  .nac-hero__scroll-cue { display: none; }
  .nac-route-chip {
    position: static;
    align-self: center;
    right: auto; bottom: auto;
    margin: var(--nac-space-4) auto 0;
  }
}

/* One-time SVG route draw: the dashed decorative path animates from
   invisible to fully drawn once on load, then stays static. */
#nacRoutePath path {
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  animation: nac-route-draw 2.2s var(--nac-ease-out) 600ms forwards;
}
@keyframes nac-route-draw { to { stroke-dashoffset: 0; } }

/* Staggered pin entrance */
.nac-hero__pin {
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  transform-box: fill-box;
  transform-origin: center;
  animation: nac-pin-in 500ms var(--nac-ease-out) forwards;
}
.nac-hero__pin:nth-of-type(1) { animation-delay: 1000ms; }
.nac-hero__pin:nth-of-type(2) { animation-delay: 1250ms; }
.nac-hero__pin:nth-of-type(3) { animation-delay: 1500ms; }
.nac-hero__pin:nth-of-type(4) { animation-delay: 1750ms; }
@keyframes nac-pin-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Subtle parallax: hero-motion.js applies a small translateY via this
   custom property on scroll; defaults to 0 so the layer simply doesn't
   move if the script hasn't run (reduced motion / reduced data / JS off). */
.nac-hero__illustration-svg { transform: translateY(var(--nac-parallax-y, 0px)); }

@keyframes nac-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nac-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .nac-hero__media, .nac-hero__copy, .nac-hero__illustration, .nac-hero__pin { opacity: 1; transform: none; animation: none; }
  #nacRoutePath path { stroke-dashoffset: 0; animation: none; }
}
/* Reduced-data / lite mode (assets/js/reduced-motion.js toggles this class
   on <html>) gets the same static treatment. */
.nac-lite-mode .nac-hero__pin,
.nac-lite-mode .nac-hero__media,
.nac-lite-mode .nac-hero__illustration { opacity: 1; transform: none; animation: none; }
.nac-lite-mode #nacRoutePath path { stroke-dashoffset: 0; animation: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  /* H-D2V-R4A (A3): planner column follows the 300px panel width. */
  .nac-hero__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--nac-space-8); }
  .nac-hero__illustration { width: clamp(260px, 34%, 420px); opacity: 0.9; }
}
@media (max-width: 1023px) {
  /* Stacked order: content first, city illustration as the closing banner.
     Flex + order fixes the DOM order (illustration sits above __inner in
     the markup for the desktop absolute-positioning composition). */
  .nac-hero { display: flex; flex-direction: column; }
  .nac-hero__inner { grid-template-columns: 1fr; width: 100%; }
  .nac-hero__inner > .nac-glass-panel { grid-column: 1; max-width: 560px; width: 100%; justify-self: stretch; }
  /* The temporary painted-mural SVG crops grotesquely at stacked aspect
     ratios, so it is dropped here — a REAL photo set via hero_background_id
     (--nac-hero-bg) still shows, photos crop gracefully. */
  /* H-D2V-R1 §4: the approved JPEG must stay visible at every width. This
     used to reset background-image to var(--nac-hero-bg, none) — with
     hero_background_id=0 that resolved to NONE and the mural vanished below
     768px. Keep the approved asset and crop toward the Titans mural (left)
     via a deliberate mobile focal point; skyline/route may crop out. */
  /* H-D2V-R4A: same top anchor as desktop; 18% horizontal bias (Titans
     mural focus) unchanged. In stacked layouts cover is usually
     height-driven (full image height visible), so the vertical anchor only
     matters for shorter stacked cases — kept consistent with desktop. */
  .nac-hero__media { width: 100%; background-image: url('../images/hero/approved-homepage-bg.jpg'); background-position: 18% top; }
  .nac-hero__media::after { background: linear-gradient(180deg, rgba(7,11,20,0) 78%, var(--nac-bg-hero) 100%); }
  .nac-hero__scrim { background: linear-gradient(180deg, rgba(4,9,18,0.42) 0%, rgba(4,9,18,0.12) 46%, rgba(4,9,18,0) 72%); }
  /* Illustration becomes a full-width banner strip below the content. */
  .nac-hero__illustration { position: static; order: 99; width: 100%; height: 240px; margin-top: var(--nac-space-8); }
  .nac-hero__illustration::before { display: none; }
}
/* R4C: allow the planner to fill its hero container on phone-landscape viewports. */
@media (max-width: 1023px) and (max-height: 480px) and (orientation: landscape) {
  .nac-hero__inner > .nac-glass-panel {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 767px) {
  .nac-hero { padding-top: 80px; }
  .nac-hero__inner { padding: var(--nac-space-10) var(--nac-space-4); }
  .nac-hero__illustration { height: 180px; }
  /* preserveAspectRatio="xMidYMax slice" keeps the Batman Building +
     river/bridge focal point at this height; edges crop, nothing squeezes. */
}