/* Hero is (almost) always the page's first section, sitting directly below the
   sticky, transparent header. Two adjustments vs. the shared .zd-section rhythm:
   1. A negative top margin pulls the hero's box up behind the header by the
      header's own height, so the hero's chosen background (light/dark/peach)
      extends seamlessly behind the transparent header instead of showing a seam
      where the page's default background peeks through above it. The matching
      increase in padding-top cancels this out for the hero's actual content, which
      still lands at the same vertical position as before.
   2. Both top and bottom padding are smaller, fixed values instead of the full
      section rhythm (up to 160px on each edge at desktop) — a hero's content
      doesn't need that much breathing room below the header on top, or above
      whatever section follows on the bottom. */
.zd-hero {
  margin-top: calc(-1 * var(--zd-header-offset));
  padding-top: calc(var(--zd-header-offset) + var(--zd-space-xl));
  padding-bottom: var(--zd-space-xl);
}

.zd-hero__grid {
  display: grid;
  gap: var(--zd-space-lg);
  text-align: center;
}

.zd-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--zd-space-sm);
}

.zd-hero__mark {
  margin-bottom: var(--zd-space-sm);
}

.zd-hero__heading {
  display: flex;
  flex-direction: column;
}

/* The h1's line-height:1 (leading-none) can clip descenders (e.g. the "g" in
   "engineering") against the gradient-clipped accent line's line-box — background-
   clip:text paints strictly within that box, so a too-tight line-height reads as
   the letter being cut off. 1.15 gives enough room without visibly loosening the
   heading's rhythm. Applied to both lines so they stay evenly spaced. */
.zd-hero__heading-line {
  line-height: 1.15;
}

/* Gradient-clipped text, matching the production <HeadingAccent> highlight treatment
   exactly (the hero's "one-click onchain UX" line). Falls back to a flat, WCAG-safe
   accent color for browsers without background-clip:text support. */
.zd-hero__heading-line--accent {
  color: var(--zd-color-accent-dark);
  background-image: linear-gradient(90deg, var(--zd-color-brand-orange), var(--zd-color-solar-orange));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .zd-hero__heading-line--accent {
    background-image: none;
    color: var(--zd-color-accent-dark);
  }
}

/* Full-strength text color (not muted) and 800px max-width — matches the production
   hero description exactly, which reads at full charcoal rather than a reduced-opacity
   tone. */
.zd-hero__subhead {
  max-width: 800px;
  font-size: var(--zd-body-lg-size);
  line-height: var(--zd-body-lg-line-height);
  color: var(--zd-color-text);
  margin-top: var(--zd-space-xs);
}
[data-bg="dark"] .zd-hero__subhead {
  color: var(--zd-color-text-on-dark);
}

.zd-hero__proof {
  margin-top: var(--zd-space-lg);
  width: 100%;
}

/* Event countdown — plain text by default (the no-JS fallback); main.js replaces
   the fallback with four live day/hour/minute/second boxes when available. */
.zd-countdown {
  margin-top: var(--zd-space-xs);
}
.zd-countdown__fallback {
  font-size: var(--zd-body-lg-size);
  color: var(--zd-color-text-muted);
}
[data-bg="dark"] .zd-countdown__fallback {
  color: var(--zd-color-text-on-dark-muted);
}
.zd-countdown__boxes {
  display: flex;
  gap: var(--zd-space-sm);
}
.zd-countdown__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: var(--zd-space-sm) var(--zd-space-xs);
  border-radius: var(--zd-radius-sm);
  background-color: var(--zd-color-peach);
}
[data-bg="dark"] .zd-countdown__box {
  background-color: var(--zd-color-peach-translucent);
}
.zd-countdown__value {
  font-family: var(--zd-font-numeral);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}
.zd-countdown__unit {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--zd-color-text-muted);
}
[data-bg="dark"] .zd-countdown__unit {
  color: var(--zd-color-text-on-dark-muted);
}
.zd-countdown__ended {
  font-size: var(--zd-body-lg-size);
  font-weight: 500;
}

.zd-hero__media img {
  width: 100%;
  border-radius: var(--zd-radius-lg);
}

/* Split layout: content left-aligned, media beside it (desktop rules in responsive.css) */
.zd-hero[data-layout="split"] .zd-hero__content {
  text-align: left;
  align-items: flex-start;
}
.zd-hero[data-layout="split"] .zd-hero__heading {
  align-items: flex-start;
}