/* Grillandia – kategória-választó (3×3 képes kártyák) – 2026-10-12
   B terv: a kártya teljes képes, a felirat a kép alján; hoverre a kép lassan nagyobbodik, a felirat áttetsző üvegsávvá válik (körvonal nélkül),
   és megjelenik a nyíl. Belépéskor a kártyák egymás után, finoman „kinyílnak”. Nyugalmi állapot = kész kép (JS nélkül is teljes).
   Rács: ≥600 px 3 oszlop, alatta 2 oszlop (az első kártya teljes szélességű). A fehér felirat kontrasztja minden képen ≥4,5:1 (mérve). */
.kat-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.kat-card { margin:0; padding:0; }
.kat-card a { position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:14px; background:#0c0c0c; isolation:isolate; color:#fff; text-decoration:none; }
.kat-card a:hover, .kat-card a:focus { color:#fff; text-decoration:none; }
.kat-card a:focus { outline:2px solid #B87333; outline-offset:-4px; }
.kat-card a:focus:not(:focus-visible) { outline:none; }
.kat-media { position:absolute; top:0; right:0; bottom:0; left:0; inset:0; display:block; }
.kat-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s; }
/* sötétítés a felirat alatt: a felirat kontrasztja így minden képen ≥4,5:1 */
.kat-media::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.88) 100%); }

/* felirat: a kép alján; hoverre áttetsző üvegsáv (körvonal nélkül) */
.kat-label { position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0); transition:background-color .45s ease, transform .55s cubic-bezier(.2, .7, .2, 1), backdrop-filter .45s ease; }
.kat-t { min-width:0; font:600 18px/1.25 "Fira Sans", sans-serif; letter-spacing:-.1px; color:#fff; overflow-wrap:break-word; }
.kat-arr { display:inline-flex; flex:none; opacity:0; transform:translateX(-8px); transition:opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.kat-card a:hover .kat-media img, .kat-card a:focus-visible .kat-media img { transform:scale(1.08); filter:brightness(.92); }
.kat-card a:hover .kat-label, .kat-card a:focus-visible .kat-label { background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transform:translateY(-3px); }
.kat-card a:hover .kat-arr, .kat-card a:focus-visible .kat-arr { opacity:1; transform:none; }

/* régi böngészők (aspect-ratio nélkül): a kártya magasságát a felső térköz adja */
@supports not (aspect-ratio: 1 / 1) {
    .kat-card a { height:0; padding-top:75%; }
    .kat-card:first-child a { padding-top:75%; }
}

/* belépő animáció (csak ha a JS bekapcsolja: html.kat-js) */
.kat-js .kat-card { opacity:0; }
.kat-js .kat-card a { clip-path:inset(100% 0 0 0 round 14px); }
.kat-js .kat-in .kat-card { opacity:1; }
.kat-js .kat-in .kat-card a { clip-path:inset(0 0 0 0 round 14px); transition:clip-path 1s cubic-bezier(.7, 0, .2, 1); transition-delay:calc(var(--i, 0) * 70ms); }

/* tablet / kis asztali: kisebb felirat, hogy a hosszabb címek is elférjenek */
@media (max-width:991px) { .kat-t { font-size:16px; } }
/* mobil: 2 oszlop, az első kártya teljes szélességű */
@media (max-width:599px) {
    .kat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
    .kat-card:first-child { grid-column:1 / -1; }   /* 2026-10-12: az első (Modellek) kártya teljes szélességű */
    .kat-card:first-child a { aspect-ratio:16 / 9; }
    .kat-t { font-size:15px; }
    .kat-label { left:8px; right:8px; bottom:8px; padding:9px 10px; }
}
@media (max-width:599px) { @supports not (aspect-ratio: 1 / 1) { .kat-card:first-child a { padding-top:56.25%; } } }
@media (hover:none) { .kat-arr { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
    .kat-js .kat-card { opacity:1 !important; }
    .kat-js .kat-card a { clip-path:none !important; transition:none !important; }
    .kat-media img, .kat-label, .kat-arr { transition:none; }
}

/* ===== 8 kártyás változat (2026-10-12) – azokon a nyelvi oldalakon, ahol nincs „Tűzrakó rendszerek” kategória.
   ≥992 px: 4 oszlop (4×2), alatta 2 oszlop; mobilon NINCS teljes szélességű kártya (páros darabszám, 4×2 kártya). ===== */
.kat-grid--8 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.kat-grid--8 .kat-t { font-size:17px; }
@media (max-width:991px) { .kat-grid--8 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .kat-grid--8 .kat-t { font-size:16px; } }
@media (max-width:599px) {
    .kat-grid--8 .kat-card:first-child { grid-column:auto; }
    .kat-grid--8 .kat-card:first-child a { aspect-ratio:4 / 3; }
    .kat-grid--8 .kat-t { font-size:15px; }
}
@media (max-width:599px) { @supports not (aspect-ratio: 1 / 1) { .kat-grid--8 .kat-card:first-child a { padding-top:75%; } } }