/* ==================================================================
   SERCO — Rólunk / Referenciák (rf- prefix)
   ==================================================================
   A REFERENCIAFAL. 124 ügyfél 16 ágazatban — a régi oldalon egy hosszú,
   címsorokkal tagolt logórács. Itt a Díjak-lap díjfalának grammatikája:
   bal hasábon a RAGADÓS ágazatnév (görgetéskor a következő ágazat
   kitolja — korszakváltás CSS-ből), jobbra az ügyfelek kártyái.

   A logók SZÍNES raszterképek fehér háttéren (jpg/png, nem SVG), ezért
   nem a futósáv mask-technikája jön, hanem fehér kártya, amin a logó
   NYUGALOMBAN SZÜRKE (grayscale), hoverre/fókuszra színes: a fal így
   egységes tónusú marad, a kiválasztott ügyfél viszont előlép. Ez a
   „gazdagabb interakció", amit a grafikus a partner-résznél kért.

   Ugrósor: a 16 ágazat horgonyai pill-formában. Ezek LINKEK, nem
   chipek (a chip nem navigáció) — a forma azért pill, mert 16 tétel
   egymás mellett csak így fér el olvashatóan.

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

/* ------------------------------------------------------------------
   01 · Bevezető — kéthasábos fej + számolt mutatók
   ------------------------------------------------------------------ */
.rf-intro > .content-container {
  padding-block: var(--section-space);
}

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

.rf-metrics {
  margin: clamp(var(--spacing-5xl), 6vw, var(--spacing-9xl)) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--spacing-lg), 2vw, var(--spacing-2xl));
}

.rf-metric {
  display: grid;
  gap: var(--spacing-xl);
  align-content: start;
}

.rf-metric-value {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-brand-primary);
  font-variant-numeric: tabular-nums;
}

.rf-metric-label {
  margin: 0;
  text-transform: uppercase;
  color: var(--text-brand-tertiary);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------
   02 · A fal — storm-mező, ugrósor, ragadós ágazatnév, logókártyák
   ------------------------------------------------------------------ */
.rf-wall {
  background: var(--bg-tertiary);
}

.rf-wall > .content-container {
  padding-block: var(--section-space);
}

.rf-wall-head {
  margin-bottom: clamp(var(--spacing-3xl), 4vw, var(--spacing-6xl));
}

/* ------------------------------------------------------------------
   Ágazat-ugrók — asztalon címkesor, mobilon tartalomjegyzék
   -----------------------------------------------------------------
   Asztalon több sorba folyó CÍMKESOR, mobilon alapból ÖSSZECSUKOTT
   tartalomjegyzék egy nyitóvezérlő mögött (a prototípus 2026-09-09-i
   frissítése a referenciák lapon; a megrendelő mind a két lapra
   kérte). A lista UGYANAZ a <ul> — a mobil változat nem másolat,
   tehát a tartalom nem csúszhat szét a kettő között.

   A felület a közös `.pill` primitív (sections.css); itt csak az
   elrendezés, az állapotok és a töréspont él. A fokot a markup viszi
   (`label-xs` asztalon, `body-lg` mobilon), a cserét a
   js/jump-nav.js — CSS-ből fokot váltani tilos (a tipográfiai
   tulajdonságokat kizárólag a type.css deklarálhatja).

   A mobil összecsukás PROGRESSZÍV BŐVÍTÉS: a CSS alapállapota a
   hagyományos folyam — nyitóvezérlő nélkül, kibontott listával. A
   vezérlőt a modul mutatja meg, és csak 900 px alatt.
   ------------------------------------------------------------------ */
.rf-jump [hidden] {
  display: none !important;
}

/* A szekció-térköz a NAV-on van, nem a listán: mobilon a lista
   összecsukott (`hidden`), és egy display:none elem margója nem
   számít — a nyitóvezérlő így a fal fejére tapadt (mérve). */
.rf-jump {
  display: block;
  margin-bottom: clamp(var(--spacing-5xl), 6vw, var(--spacing-9xl));
}

.rf-jump-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* A .ck-chips térköze — a pill-sor kanonikus gapje. */
  gap: var(--spacing-sm);
}

.rf-jump-link,
.rf-jump-toggle {
  /* WCAG 2.2 · 2.4.11 (Focus Not Obscured): a fejléc `fixed`, és a
     Tab-bal odaérkező elemet a böngésző a fejléc alá görgetheti. A
     közös [id] szabály csak azonosítóval bíró elemekre hat; ezek a
     vezérlők nem azok, ezért saját offszetet kapnak. */
  scroll-margin-top: calc(var(--layout-header-height) + var(--spacing-4xl));
}

.rf-jump-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

/* Kéthangú sor: a kísérőadat egy tintafokkal halkabb. */
.rf-jump-count {
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  /* Az .action-row hovere: a nyugvó felület lapos és FEHÉR marad, a
     jelet a márka-keret és a márka-tinta viszi. Árnyék nincs. */
  .rf-jump-link:hover,
  .rf-jump-toggle:hover {
    border-color: var(--border-brand);
    color: var(--text-brand-secondary);
  }
}

/* A gyűrű a .dj-nav-year és az .action-row fókuszgyűrűje. */
.rf-jump-link:focus-visible,
.rf-jump-toggle:focus-visible {
  outline: var(--border-width-md) solid var(--border-brand);
  outline-offset: var(--spacing-xxs);
  border-color: var(--border-brand);
  color: var(--text-brand-secondary);
}

/* ---------- Mobil nyitóvezérlő ----------
   NAVIGÁCIÓS GOMB, nem adatbeviteli mező: <button>, a közös pill
   felületén és a rendszer érintési magasságán. Alapból hidden — a JS
   mutatja meg 900 px alatt. A felirat fokja pontosan az alatta álló
   soroké (`body-lg`), és CSAK a verzál különbözteti meg. */
.rf-jump-toggle {
  display: flex;
  text-transform: uppercase;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  width: 100%;
  min-height: var(--layout-button-height);
  /* A .form-file-trigger vezérlő-paddingja. */
  padding-inline: var(--spacing-xl);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

/* A chevron a NYITOTT/ZÁRT állapot jele: nincs saját tintája, a
   vezérlő szövegszínét örökli, és a forgás alakváltozás — az
   információt nem csak szín hordozza. */
.rf-jump-toggle svg {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.rf-jump-toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* ---------- Asztali: címkesor ----------
   A pill-címke szerepe: a verzál ide tartozik, nem a formához. */
@media (min-width: 900px) {
  .rf-jump-link {
    text-transform: uppercase;
  }
}

/* ---------- Mobil ----------
   Egy oszlop, teljes szélességű sorok, NORMÁL írásmód: a lista itt
   tartalomjegyzék, nem címkesor. */
@media (max-width: 899.98px) {
  .rf-jump-list {
    display: grid;
    gap: var(--spacing-sm);
  }

  /* A nyitóvezérlő és a lista közé ugyanaz a sor-térköz kerül, amit a
     lista a saját elemei közé tesz. */
  .rf-jump-toggle + .rf-jump-list {
    margin-top: var(--spacing-sm);
  }

  .rf-jump-link {
    /* Teljes szélességű sor: az érintési felület a teljes hasáb. */
    width: 100%;
    /* A hosszú név több sorba törhet: a baseline-igazítás ilyenkor a
       kísérőadatot az ELSŐ sorhoz kötné, ezért a doboz közepéhez
       igazodnak. */
    align-items: center;
    justify-content: space-between;
    /* Padló, nem fix magasság: szövegnagyításnál és két soros névnél a
       sor NŐ, nem vág. */
    min-height: var(--layout-button-height);
  }

  .rf-jump-name {
    /* Semmi nem rövidül és semmi nem csonkul. */
    min-width: 0;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  .rf-jump-count {
    flex: none;
  }
}

.rf-sectors {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(var(--spacing-5xl), 7vw, var(--spacing-9xl));
}

/* Egy ágazat: név bal, kártyák jobb — a díjfal rácsa. */
.rf-sector {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(var(--spacing-3xl), 4vw, var(--spacing-7xl));
  align-items: start;
}

/* A RAGADÓS ÁGAZATNÉV: a fejléc alá tapad, amíg az ágazat kártyái
   görgetnek; a következő ágazat feje kitolja. */
.rf-sector-head {
  position: sticky;
  top: calc(var(--layout-header-height) + var(--spacing-3xl));
  transition: top var(--duration-fast) var(--ease-out);
}

/* A fejléc lefelé görgetve elcsúszik (header.js: .is-hidden): az
   ágazatnév kövesse, ne hagyjon fejlécnyi üres sávot maga fölött. */
body:has(.site-header.is-hidden) .rf-sector-head {
  top: var(--spacing-3xl);
}

.rf-sector-name {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-brand-secondary);
  text-wrap: balance;
}

.rf-sector-count {
  margin: var(--spacing-md) 0 0;
  text-transform: uppercase;
  color: var(--text-quaternary);
  font-variant-numeric: tabular-nums;
}

/* Logókártyák — auto-fill rács: annyi fér egy sorba, amennyi 180px-nél
   nem keskenyebb; egyetlen kártya sem nyúlik szét. */
.rf-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(var(--spacing-md), 1.5vw, var(--spacing-xl));
}

.rf-card-item {
  min-width: 0;
}

/* A kártya: fehér, a storm fölött egy lépcső; a link az EGÉSZ kártya. */
.rf-card {
  display: grid;
  gap: var(--spacing-md);
  height: 100%;
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl);
  text-decoration: none;
  color: var(--text-tertiary);
  transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

a.rf-card:hover,
a.rf-card:focus-visible {
  transform: translateY(-2px);
  color: var(--text-brand-secondary);
}

/* A logó doboza 2:1 (a fájlok 600×300 / 300×150 aránya), a kép
   belefér (contain). Nyugalomban szürke és visszavett, hoverre színes. */
.rf-logo {
  display: block;
  aspect-ratio: 2 / 1;
}

.rf-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

a.rf-card:hover .rf-logo img,
a.rf-card:focus-visible .rf-logo img {
  filter: none;
  opacity: 1;
}

.rf-name {
  display: block;
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   Álló tablet és telefon (<900) — az ágazat egy hasáb: a név a kártyák
   fölé kerül és NEM ragadós (mobilon nincs saját hasábja, ahol
   lebeghetne — a fejléc alatt réssel állna és takarna; megrendelői
   észrevétel, 2026-09-02). Egyszerű fejezetcím.
   ------------------------------------------------------------------ */
@media (max-width: 899.98px) {
  .rf-sector {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .rf-sector-head {
    position: static;
  }

  .rf-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Telefon — a mutatók egymás alá. */
@media (max-width: 720px) {
  .rf-metrics {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   2026-09-28 — a megrendelő végleges listájának HOSSZÚ NEVEI
   („Agrár- és Élelmiszergazdaságért Felelős Minisztérium", „Magyar
   Fejlesztésösztönző Iroda"): a leghosszabb szó a kártya min-content
   szélességét 174 px-re tolta, és a 375 px-es kétoszlopos rács 13 px-t
   túlfolyt (compare/shot.mjs + probe-overflow.mjs mérte). A rács
   oszlopa ezért zsugorodhat a szó alá (min-width: 0), a név pedig
   elválasztással törik — a böngésző előbb a szótári elválasztást
   próbálja (hyphens), és csak ha az sincs, tör bárhol (anywhere).
   Rövid neveknél semmi nem változik: a törés csak ott jön, ahol a szó
   nem fér ki.
   ------------------------------------------------------------------ */
.rf-card {
  min-width: 0;
  /* A kártya EGY oszlopa a kártya szélessége, nem a név max-contentje: az
     auto sáv a kétsoros nevek (text-wrap: balance) szélességére nőtt, és a
     logó + a név kilógott a kártyából (mérve: 139–174 px a 121,5 px-es
     tartalmi szélesség helyett). */
  grid-template-columns: minmax(0, 1fr);
}

.rf-name {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}