/* Home page — hero built; still to add: services marquee, intro, services, why-mava, CTA */

.hero {
  position: relative;
  padding-top: calc(var(--nav-height) + 40px);
  padding-bottom: 64px;
}

.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hero__left {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.hero__left-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero__wordmark {
  /* sized off its own column's width (not the viewport) so it can't outgrow
     the column when the page is wider than --container-max */
  font-size: clamp(4rem, 28.6cqw, 60rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  /* trims the box to the glyphs' actual cap-height/baseline instead of the
     font's full line-box, so top-aligning this element lines up the visual
     top of the letters, not the (taller, ascent-inclusive) line box */
  text-box: trim-both cap alphabetic;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}

.hero__intro {
  max-width: 42ch;
  font-size: 16px;
  color: var(--color-text-muted);
}

.hero__right {
  position: relative;
}

.hero__index {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

/* Carousel viewport: one slide's worth of width/height showing at a time,
   .hero__track (flex row, one .hero__project per 100%-wide slide) slides
   horizontally inside it via transform — see assets/js/hero-carousel.js. */
.hero__media-stack {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.hero__track {
  display: flex;
  width: 100%;
  transition: transform 0.6s var(--ease-out);
}

.hero__project {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}

.hero__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-raised) 65%, rgba(0, 53, 128, 0.28) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__media--soon {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-raised) 100%);
}

.hero__media-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-raised) 65%, rgba(0, 53, 128, 0.28) 100%);
}

.hero-shot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__view-work {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 84px;
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 4px;
  transition: transform 0.3s var(--ease-out);
}

.hero__view-work:hover {
  transform: scale(1.06);
}

.hero__view-work.is-disabled {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  pointer-events: none;
}

.hero__project-meta {
  margin-top: 16px;
}

.hero__project-name {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 4px;
}

.hero__project-desc {
  font-size: 14px;
  max-width: 46ch;
}

/*
 * Desktop (≥861px): reproduces the old hero--pinned static layout exactly
 * (full-bleed panel, text-over-image overlay, absolute wordmark/index) —
 * previously only reached via JS (hero.js) confirming GSAP + motion allowed
 * + a scroll pin. That's gone; this is now the plain, unconditional desktop
 * CSS, and assets/js/hero-carousel.js drives which slide shows via
 * .hero__track's transform instead of a scroll-scrubbed timeline. Mobile
 * (the rules above this block) is untouched: square card, meta text in
 * normal flow below it, no overlay.
 */
@media (min-width: 861px) {
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-bottom: 0;
    --hero-container-offset: max(0px, calc((100vw - var(--container-max)) / 2));
    --hero-content-w: calc(min(100vw, var(--container-max)) - 2 * var(--container-pad));
    --hero-left-col-w: calc(var(--hero-content-w) * 0.32);
    --hero-panel-left: calc(var(--hero-container-offset) + var(--container-pad) + var(--hero-left-col-w) + 48px);
    --hero-wordmark-inset: calc(var(--hero-container-offset) + var(--nav-left-inset));
    --hero-wordmark-gap: 12px;
    --hero-panel-top: var(--nav-height);
  }

  .hero__inner {
    flex-direction: row;
  }

  /* Matches the size the old hero--pinned scaleY transform gave the
     wordmark — unconditional now instead of JS/GSAP-gated. */
  .hero__wordmark {
    transform: scaleY(1.35);
    transform-origin: left top;
    margin-bottom: 0.4em;
  }

  /* Escapes .hero__inner's flex row (and its max-width/padding) entirely —
     positioned relative to .hero itself, which spans the true viewport
     width, so the panel below can run edge-to-edge. */
  .hero__left {
    position: absolute;
    top: calc(var(--nav-height) + 12px);
    left: var(--hero-wordmark-inset);
    width: calc(var(--hero-panel-left) - var(--hero-wordmark-inset) - var(--hero-wordmark-gap));
    height: calc(100vh - var(--nav-height) - 8px);
  }

  .hero__right {
    position: absolute;
    top: var(--hero-panel-top);
    left: var(--hero-panel-left);
    right: 0;
    height: calc(100vh - var(--hero-panel-top));
  }

  /* Absolute in both the old pinned AND non-pinned desktop layouts (see
     original comment) — normal flow would push the panel down by its own
     line-height, breaking the top-alignment with the wordmark. */
  .hero__index {
    position: absolute;
    top: 24px;
    left: 24px;
    margin-bottom: 0;
    z-index: 2;
  }

  .hero__media-stack {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: 1px solid var(--color-border);
  }

  .hero__track {
    height: 100%;
  }

  .hero__project {
    position: relative;
  }

  .hero__media {
    aspect-ratio: unset;
    width: 100%;
    height: 100%;
  }

  /* Scrim behind the bottom-left text overlay, sized to clear the
     view-work circle on the right (140px ≈ its 96px + margins). A
     pseudo-element instead of a separate div, same as the plain-color
     .hero__media--soon placeholders don't need one either. */
  .hero__media::after {
    content: '';
    position: absolute;
    inset: auto 140px 0 0;
    height: 50%;
    background: linear-gradient(to top, rgba(12, 12, 14, 0.75) 0%, rgba(12, 12, 14, 0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .hero__project-meta {
    position: absolute;
    left: 24px;
    right: 140px;
    bottom: 24px;
    margin-top: 0;
    z-index: 2;
  }

  .hero__view-work {
    width: 96px;
    height: 96px;
    z-index: 2;
  }
}