/* ── 01 Hero — layout only ─────────────────────────────────────────────────
   Structure: flat 3-sibling grid under .hero-row (= .container):
     h1.hero-headline
     img.hero-visual
     div.hero-subblock

   Desktop ≥1024: 2-col grid
     col 1 row 1 → headline
     col 1 row 2 → subblock
     col 2 rows 1–2 → visual (spans)
     column-gap: 0 (visual is a transparent cut-out, sits flush)
     row-gap: var(--spacing-group)

   ≤1023: 1-col, natural order → headline → visual → subblock
   ≤767:  token overrides (spacing + type) + centering + L→M button
   (Button L→M swap lives in components.css; hero.css is layout only.)
   ────────────────────────────────────────────────────────────────────────── */

/* .section--hero: no vertical padding — .header-hero wrapper owns padding-top
   and gap; body gap handles spacing to the next section. */

/* ── hero-row — desktop 2-col grid ── */
.hero-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: var(--spacing-group);
  align-items: start;
}

/* ── Headline — col 1 row 1 ── */
.hero-headline {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  max-width: 737px; /* Figma: w-full max-w-[737px] on headline node */
}

/* ── Visual — col 2, spans both rows ── */
.hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: 543px; /* manifest fluid max */
  height: auto;     /* H hug — tracks image's own intrinsic ratio, no letterbox */
  display: block;
  align-self: start;
}

/* ── Subblock — col 1 row 2 (body text + CTA) ── */
.hero-subblock {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-block); /* 64px desktop / 40px mobile via token */
}

/* ── Body text ── */
.hero-body {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--t-body-l-size);
  line-height: var(--t-body-l-lh);
  letter-spacing: var(--t-body-l-ls);
}

/* ── CTA row ── */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-element);
}

.hero-note {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-ls);
  flex: 1 0 0;
  min-width: 343px;
}

/* ── 1024 reflow ───────────────────────────────────────────────────────────
   1-col grid, natural DOM order: headline (1) → visual (2) → subblock (3)
   row-gap → spacing-element (16px)
   Confirmed from Figma Клод 1024 frame (200:3794): hero-row = flex-col.     */
@media (max-width: 1024px) {
  .hero-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--spacing-element);
  }

  /* Reset 2-col placements to natural single-column stacking */
  .hero-headline { grid-column: 1; grid-row: 1; max-width: 100%; }
  .hero-visual   { grid-column: 1; grid-row: 2; grid-row-end: auto; }
  .hero-subblock { grid-column: 1; grid-row: 3; }

  /* Restore manifest fluid constraints for single-column display */
  .hero-visual {
    min-width: min(343px, 100%);
    max-width: min(543px, 100%);
    margin-inline: auto;
  }
}

/* ── 767 mobile ─────────────────────────────────────────────────────────────
   Spacing + type tokens already switched via :root @media override.
   Button L→M swap lives in components.css.                                 */
@media (max-width: 767px) {
  .hero-headline {
    text-align: center;
  }

  .hero-subblock {
    align-items: center;
  }

  .hero-body {
    text-align: center;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .hero-note {
    text-align: center;
    flex: none;
    min-width: unset;
    white-space: normal;
  }
}