/* ==================================================================
   SERCO — Közbeszerzés aloldal (kb- prefix)
   ==================================================================
   Két dolga van, és a kompozíció ezt a kettőt választja szét:
   hitelesség (bevezető split, hangulatképpel) és GYORS HASZNÁLAT
   (dokumentumtár). A dokumentumsorok a közös ActionRow `download`
   variánsát viselik (sections.css) — ez a fájl csak a szekciók
   kompozícióját adja, sor-stílust nem duplikál.

   Szín: csak Tier 3 tokenek. Térköz: csak var(--spacing-*). Betűfok:
   meglévő rampfokok, új fok nincs a fájlban.
   ================================================================== */

/* Minden tartalmi szekció ugyanazt a fenti-lenti --section-space
   térközt kapja (az .ai-section / .service-page-section konvenciója). */
.kb-intro > .content-container,
.kb-docs > .content-container,
.kb-sheets > .content-container {
  padding-block: var(--section-space);
}

/* ------------------------------------------------------------------
   01 · Bevezető — szerkesztőségi split
   -----------------------------------------------------------------
   Bal: állítás (statement-fok, ink-fill) + törzs + két művelet.
   Jobb: egyetlen hangulatkép, a főoldali blogkép-parallaxszal.
   A kép a próza felé súlyozva marad, hogy az állítás vigye a
   szekciót — nem 50-50 hasábpár.
   ------------------------------------------------------------------ */
.kb-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--spacing-4xl), 6vw, var(--spacing-10xl));
  align-items: center;
}

.kb-intro-copy {
  min-width: 0;
}

/* Az állítás a közös statement-nyelvtanon (a .ck-intro-lead /
   .activities-statement foka): az ink-fill opacitással tompítja, így
   a szerzői márka-kék a kitöltött állapot. Címfokot nem kap: ez
   állítás, nem szekciócím — a szekciócím-törvény statement-kivétele. */
.kb-intro-title {
  max-width: 26ch;
  text-wrap: pretty;
}

.kb-intro-body {
  margin: 0;
  color: var(--text-tertiary);
  max-width: 54ch;
  text-wrap: pretty;
}

.kb-intro-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--spacing-xl), 2.5vw, var(--spacing-3xl));
  margin-top: clamp(var(--spacing-2xl), 3vw, var(--spacing-4xl));
}

/* Hangulatkép: a márka-hatszög, a kereskedelem-oldali .ck-brand-media
   minden tekintetben — ugyanaz a geometria (356/411, --hex-clip),
   ugyanaz a felső méret (520) és ugyanaz a scroll-parallax. A
   clip-path vágja a driftet, ezért nincs külön overflow-szabály. */
.kb-intro-media {
  margin: 0;
  width: min(100%, 520px);
  aspect-ratio: 356 / 411;
  clip-path: var(--hex-clip);
  background: var(--bg-secondary);
  justify-self: center;
}

.kb-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   02 · Dokumentumtár
   -----------------------------------------------------------------
   A sorok a közös ActionRow-ból jönnek; itt csak a fej és a felület
   él. Storm mező: a fehér sor-kártyák így egy fokkal a mezőjük fölött
   ülnek — ugyanaz a lépcső, mint a kezdőoldali partnersoroknál.
   ------------------------------------------------------------------ */
.kb-docs {
  background: var(--bg-tertiary);
}

.kb-docs-head {
  max-width: 62ch;
  margin-bottom: clamp(var(--spacing-3xl), 4vw, var(--spacing-5xl));
}

.kb-docs-head .section-title {
  margin-bottom: 0;
}

.kb-docs-lead {
  margin-top: var(--spacing-2xl);
}

/* ------------------------------------------------------------------
   03 · Letölthető adatlapok
   -----------------------------------------------------------------
   A felső CTA valódi célpontja (korábban a keretszerződés-listára
   ugrott). Vászon-mező a storm után: a mezőváltás választja el a két
   listát — a sorok felülete így egy fokkal a mezőjük ALATT marad,
   ezért itt a keret hordozza a sor élét, nem a tónuskülönbség.
   ------------------------------------------------------------------ */
.kb-sheets {
  background: var(--bg-primary);
}

/* ------------------------------------------------------------------
   Kompakt asztali — a split egy hasábra vált, a kép a próza alá.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .kb-intro-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------
   Mobil — a hatszög a tartalmi konténer teljes szélességén: a
   kereskedelem-oldali .ck-brand-media mobil ágának mása. Az arány
   kötött (356/411), ezért orientációváltás nincs.
   ------------------------------------------------------------------ */
@media (max-width: 899.98px) {
  .kb-intro-media {
    width: 100%;
  }
}