/* =============================================================================
   Iktató — KÁRTYÁK: általános kártya, kártyarácsok, KPI-csempe.
   Átvéve a far360 cards.css-éből (a képzés-kártya és az ár-blokk nélkül).

   A kártya: átlátszatlan fehér, 22 px sugár, halk szegély és LÁGY mélység. Üveg
   SZÁNDÉKOSAN nincs rajta: egy nézetben legfeljebb 3-4 üvegréteg lehet (a
   backdrop-filter drága), és a kártya TARTALMAT hordoz, nem kezelőszerv.
   ============================================================================= */
.f-kartya {
  padding: 1.5rem;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: var(--r-card);
  box-shadow: var(--glass-depth-1);
}

.f-kartya--kiemelt {
  border-color: var(--f-primary);
  box-shadow: var(--glass-depth-2);
}

/* Egymás alá sorolt kártya-szekciók (adatlapok, összegzések). */
.f-kartya--szekcio { margin-bottom: 1.25rem; }

/* Veszélyt jelző kártya (pl. selejtezés megerősítése). */
.f-kartya--veszely { border: 2px solid var(--f-danger); }

.f-kartyak-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* A minmax(0, 1fr) NEM kozmetika: az 1fr automatikus minimuma a tartalom min-content
   szélessége, és egy 343 px-es tartóban 368 px-es oszlop (oldalszintű görgetés) keletkezhet. */
.f-kartyak-grid--ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* -----------------------------------------------------------------------------
   KPI-csempék (vezetői áttekintés) — a csempe-sugárral (26 px), formák nélkül
   ----------------------------------------------------------------------------- */
.f-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.f-kpi {
  padding: 1.25rem;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: var(--r-tile);
  box-shadow: var(--glass-depth-1);
}
.f-kpi__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-grey);
}
.f-kpi__ertek {
  margin-top: 0.3rem;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--f-ink);
  font-variant-numeric: tabular-nums;
}
.f-kpi--akcent .f-kpi__ertek { color: var(--f-primary-ink); }

@media (max-width: 992px) {
  .f-kartyak-grid,
  .f-kartyak-grid--ketto { grid-template-columns: minmax(0, 1fr); }
  .f-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .f-kpi-grid { grid-template-columns: minmax(0, 1fr); }
  /* 11,52 px -> 12,8 px: a KPI-címke mondja meg, mit számol a szám alatta. */
  .f-kpi__label { font-size: 0.8rem; }
}

/* AUTO-KITÖLTŐ rácsok (a kártyák száma változik). A media-blokk UTÁN állnak, hogy a
   992 px alatti egyoszlopos szabály ne vegye el őket. */
.f-kartyak-grid--auto-240 { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.f-kartyak-grid--auto-280 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }