/* ==========================================================================
   AURELLE ATELIER — home.css
   S312 Stage 3 (w3a). Linked from index.html ONLY.
   Home-page-specific layout: art-directed hero split, values support lines,
   atelier-motion video band, quiet-caps CTA labels.
   Tokens come from main.css :root — nothing is redefined here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — asymmetric editorial split (desktop).
   The client-designated hero image is 1142w portrait — below full-bleed
   desktop resolution. >=1025px: display type on raw wine (left) + portrait
   image column (right). <=1024px: main.css default full-bleed hero with
   bottom scrim (1142w is ample there).
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  .hero--split {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  }

  .hero--split .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    overflow: hidden; /* parallax scale(1.16) headroom stays clipped */
  }

  .hero--split .hero__scrim {
    display: none; /* type sits on raw wine, not on the photo */
  }

  /* Quiet wine gradient at the top of the photo column so the
     transparent header's nav labels stay legible over the pale image */
  .hero--split .hero__media::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(62, 11, 30, 0.55), transparent);
    pointer-events: none;
  }

  .hero--split .hero__content {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: auto;
    margin: 0;
    padding-block: var(--space-6);
    /* left edge aligns with the global container when viewport > grid */
    padding-inline: max(var(--space-4), calc((100vw - var(--width-grid)) / 2))
      var(--space-6);
  }
}

.hero__subline {
  margin-top: var(--space-3);
  color: var(--color-ink);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   2. VALUES BAND — word + quiet support line pairs
   (main.css spaces sibling .type-display; the pair wrapper takes over)
   -------------------------------------------------------------------------- */

.values-band .value + .value {
  margin-top: var(--space-5);
}

.values-band .value__support {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--type-body);
  letter-spacing: var(--track-body);
}

/* --------------------------------------------------------------------------
   3. ATELIER MOTION — portrait behind-the-scenes clip as a centered
   editorial insert on raw wine (720x1280 source; never stretched wide)
   -------------------------------------------------------------------------- */

.atelier-motion__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.atelier-motion__frame {
  grid-column: 5 / span 4;
  aspect-ratio: 9 / 16;
}

@media (max-width: 1024px) {
  .atelier-motion__frame {
    grid-column: 4 / span 6;
  }
}

@media (max-width: 640px) {
  .atelier-motion__frame {
    grid-column: 2 / span 10;
  }
}

/* --------------------------------------------------------------------------
   4. EDITORIAL BAND — prose spans full width below the desktop offset
   (main.css sets .band__text .grid-12 > * to cols 7-12 at >=1025 only)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .band__text .grid-12 > * {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   5. QUIET-CAPS CTA LABELS (copy deck: CTAs render uppercase via CSS)
   -------------------------------------------------------------------------- */

.cta-caps {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}

/* Card VIEW cue — inherits .link-draw; draw the underline when the whole
   card (the wrapping <a>) is hovered or focused, not just the label */
.card__cta {
  display: inline-block;
  margin-top: var(--space-2);
}

.card:hover .card__cta.link-draw::after,
.card:focus-visible .card__cta.link-draw::after {
  transform: scaleX(1);
}