/*
 * responsive.css — breakpoint behaviour (brief §18)
 * Loaded after components.css. Breakpoints match tokens.css's documented
 * reference values (custom properties cannot be used inside @media, so
 * literal px is used here, same approach as base.css):
 *
 *   Small mobile:  320–479px (default / no media query)
 *   Mobile:        480–767px  → min-width: 480px
 *   Tablet:        768–1023px → min-width: 768px
 *   Desktop:       1024–1279px → min-width: 1024px
 *   Large desktop: >=1280px    → min-width: 1280px
 *
 * Scope (per task assignment): §18.2 Hero, §18.4 Principles/Venture tracks
 * grid, §18.5 Form column layout. §18.1 breakpoints are the literal values
 * used throughout. §18.3 Metrics responsive behaviour is intentionally out
 * of scope here — not listed in this file's assignment.
 */

/* ---------------------------------------------------------------------- */
/* Anchor scroll offset — accounts for the sticky header height (§6.3)     */
/* ---------------------------------------------------------------------- */

section[id] {
  scroll-margin-top: calc(var(--header-height-mobile) + 12px);
}

@media (min-width: 1024px) {
  section[id] {
    scroll-margin-top: calc(var(--header-height-desktop) + 12px);
  }
}

/* ---------------------------------------------------------------------- */
/* Hero — brief §18.2                                                     */
/* Contract (documented for the Hero-partial author, 03-hero.html):        */
/*   .hero-grid            — two-column layout wrapper                    */
/*   .hero-grid__content   — left column (text)                           */
/*   .hero-grid__visual    — right column (EvidenceFlowVisual)            */
/*   .hero-cta-group       — wraps primaryCta + secondaryCta               */
/* ---------------------------------------------------------------------- */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* Below 900px stays single column (brief §18.2 literal threshold, not one
   of the standard breakpoints). Tablet (768–1023) is split by this rule
   into a single-column sub-range (768–899) and a two-column sub-range
   (900–1023, 52/48 split). */
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 52fr 48fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 58fr 42fr; /* brief §18.2: 55–60% / 40–45% */
    gap: 48px;
  }
}

.hero-grid__visual {
  max-width: 100%;
  overflow: hidden; /* evidence graph must never cause horizontal scroll */
}

.hero-grid__visual svg {
  max-width: 100%;
  height: auto;
}

/* CTA row — vertical + full width on mobile, horizontal on tablet+ */
/* Hero text column: explicit vertical rhythm. Without this every child
   (eyebrow / h1 / supporting text / operating line / CTA row) sat flush
   against the next one, because the global reset zeroes all margins. */
.hero-grid__content > * + * {
  margin-top: 24px;
}

.hero-grid__content .hero-body {
  margin-top: 28px;
}

.hero-grid__content .hero-operating-line {
  margin-top: 16px;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.hero-cta-group .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .hero-cta-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-cta-group .btn {
    width: auto;
  }
}

/* ---------------------------------------------------------------------- */
/* Principles / Venture tracks grids — brief §18.4                        */
/* Verified against the actual partials (built in parallel by other        */
/* agents): 05-thesis.html uses `.thesis__principles` and                  */
/* 08-venture-tracks.html uses `.venture-tracks__grid`, both already        */
/* implemented with the correct 1 → 2 → suitable-desktop-grid collapse in   */
/* src/styles/sections.css. No generic `.principles-grid` /                */
/* `.venture-tracks-grid` wrapper exists in the markup, so no rule is       */
/* declared here — avoids shipping dead CSS that duplicates sections.css.  */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Partner form — brief §18.5                                              */
/* Verified against 11-partner-form.html (built in parallel): the section   */
/* is single-column throughout (content, then the mayBring/notAFit lists,   */
/* then the form — already reading top-to-bottom per §18.5's mobile         */
/* requirement). Brief §18.5 states the desktop two-column split is         */
/* permissive ("могут быть двумя колонками", not mandatory), and no         */
/* `.partner-form-layout`-style wrapper exists in the markup to hang a      */
/* column split on, so no rule is declared here (dito: avoids dead CSS).    */
/* Input/textarea sizing and inline error placement are form.css's          */
/* concern (§15.7/§15.8, hold at every breakpoint, not just some).          */
/* ---------------------------------------------------------------------- */