/* Grillandia – Újdonságok szekció (2026-10-12)
   Világos, finom átmenetes háttér (a „Teljesen egyedi…” sáv színéből), előtte sötét, meleg tónusú kártyák.
   A teljes kártya egyetlen link (a cím linkje kifeszítve). Hoverre: a kártya megemelkedik, a kép lassan nagyobbodik,
   a kép közepén üveg kör jelenik meg nyíllal. Üveg = fehér 16 % + blur 10 px, körvonal nélkül (mint a kategória-kártyákon).
   Karusszel (2026-11-03, 5 kártya): végtelen karusszel: ≥900 px pontosan 3 kártya látszik (egy kilép, egy belép), tableten 2, mobilon 1 + a következő kilóg; nyilak, húzás, automata váltás.
   Belépő animáció: assets/js/ujdonsagok.js (azonos a kategória-kártyákéval). */

/* háttér: nagyon világos, enyhén elmosott konyhafotó (előre erősen elmosva, színtelenítve és világosítva, ~3 KB); felül a „Teljesen egyedi…” sáv színébe olvad */
/* 2026-10-12: háttérkép nélkül – az elmosott fotó sötét foltjai árnyéknak tűntek a kártyák mögött */
.uj { position:relative; padding:100px 0; overflow:hidden; overflow:clip; background:#fbf7f2; }   /* clip: a kilógó kártyák fókuszra sem görgethetik el a szekciót */
.uj-in { max-width:1200px; margin:0 auto; padding:0 15px; }

/* cím – egységes a főoldal többi H2-jével (Fira Sans 700 40/48, −0,5 px; mobilon 28 px) */
/* fejléc: cím + lapozó nyilak */
.uj-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.uj-head .uj-title { margin-bottom:0; }
.uj-nav { display:none; gap:10px; flex:none; }
/* lapozó nyíl: a kártyák sötét színe, hoverre réz; körvonal nélkül */
.uj-arrow { width:46px; height:46px; padding:0; border:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    background:#28282b; color:#fff; box-shadow:0 10px 24px -14px rgba(40,25,10,.6); transition:background-color .3s, opacity .3s, transform .3s; }
.uj-arrow:hover:not(:disabled) { background:#B87333; }
.uj-arrow:active:not(:disabled) { transform:scale(.94); }
.uj-arrow:focus { outline:none; }
.uj-arrow:focus-visible { outline:2px solid #B87333; outline-offset:3px; }
.uj-arrow:disabled { opacity:.3; cursor:default; }
.uj-title { margin:0 0 46px; font:700 40px/48px "Fira Sans", sans-serif; letter-spacing:-.5px; color:#212121; text-transform:none; }

/* JS nélküli tartalék: natív, vízszintesen görgethető sor (a JS-es karusszel az .uj-car osztállyal váltja le) */
.uj-list { list-style:none; margin:0; padding:4px 0 24px; display:flex; gap:26px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.uj-list::-webkit-scrollbar { display:none; }
.uj-item { margin:0; padding:0; display:flex; min-width:0; flex:0 0 calc((100% - 52px) / 3); scroll-snap-align:start; }

/* JS-es karusszel (assets/js/ujdonsagok.js teszi fel az .uj-car osztályt): saját, sima mozgás transform-mal;
   a nyilak, a húzás és az automata váltás ugyanazt a mozgást használják */
.uj-car .uj-nav { display:flex; }
.uj-car .uj-list { overflow:visible; scroll-snap-type:none; touch-action:pan-y;
    transform:translate3d(var(--uj-x, 0px), 0, 0); transition:transform .8s cubic-bezier(.22, .61, .36, 1); will-change:transform; }
.uj-car .uj-list.is-drag { transition:none; cursor:grabbing; user-select:none; -webkit-user-select:none; }
.uj-car .uj-list.is-drag .uj-card { cursor:grabbing; }
/* asztalon pontosan 3 kártya látszik: a tartalom szélein vág, függőlegesen nem (árnyék, hover-emelés) – egy kártya kilép, egy belép */
@media (min-width:900px) { .uj-in { clip-path:inset(-60px 0 -80px 0); } }

/* kártya: világos, fagyott üveg (körvonal és fényes él nélkül) – mögötte a világos háttérfotó dereng át
   (korábbi változatok mentése: Grillandia_archivum/mentes-2026-10-12-ujdonsagok/ujdonsagok-homok-kartya.css, …-sotet-kartya.css) */
.uj-card { position:relative; display:flex; flex-direction:column; width:100%; padding:12px 12px 26px; border-radius:14px; cursor:pointer;
    background:#fff;   /* 2026-10-12: tömör fehér, finom meleg árnyékkal (háttérkép nélkül az üveg beleolvadt a háttérbe) */
    box-shadow:0 1px 2px rgba(60,40,20,.05), 0 12px 32px -14px rgba(60,40,20,.22);
    transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }

.uj-media { position:relative; display:block; aspect-ratio:770 / 630; overflow:hidden; border-radius:10px; background:#1a1a1a; }
.uj-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
/* a fotó tetején finom sötétítés: a fehér címke világos képen is olvasható */
.uj-media::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,0) 40%); pointer-events:none; }

/* „Újdonság” címke: sötét üveg (körvonal nélkül), lüktető ponttal */
.uj-badge { position:absolute; left:12px; top:12px; z-index:1; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:6px;
    background:rgba(18,15,12,.42); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%);
    font:600 12px/1 "Fira Sans", sans-serif; letter-spacing:.6px; text-transform:uppercase; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
    transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.uj-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:#e08a3c; animation:uj-pulse 2.4s ease-out infinite; }
@keyframes uj-pulse { 0% { box-shadow:0 0 0 0 rgba(224,138,60,.55); } 70% { box-shadow:0 0 0 6px rgba(224,138,60,0); } 100% { box-shadow:0 0 0 0 rgba(224,138,60,0); } }

/* üveg kör nyíllal a kép közepén (hoverre jelenik meg; érintőképernyőn mindig látszik) */
.uj-go { position:absolute; left:50%; top:50%; z-index:1; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff;
    background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    opacity:0; transform:scale(.7); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.uj-go svg { transform:translateX(-4px); transition:transform .55s cubic-bezier(.2,.7,.2,1); }

.uj-body { display:flex; flex-direction:column; flex:1; padding:22px 12px 0; }
.uj-cat { margin:0 0 8px; font:600 13px/1.3 "Fira Sans", sans-serif; letter-spacing:.4px; text-transform:uppercase; color:#8f5627; }
/* a téma minden címsornak position:relative-ot, minden linknek overflow:hidden-t ad – ezeket itt felülírjuk,
   különben a kifeszített link-réteg csak a cím területét fedné le */
.uj-card h3 { position:static; margin:0; font:600 20px/1.3 "Fira Sans", sans-serif; letter-spacing:-.1px; color:#212121; text-transform:none; overflow-wrap:break-word; }
.uj-card h3 a { position:static; overflow:visible; color:inherit; text-decoration:none; }
.uj-card h3 a:hover, .uj-card h3 a:focus { color:inherit; text-decoration:none; }
/* a cím linkje kifeszítve a teljes kártyára → bárhová kattintható, de kártyánként egyetlen link van (SEO, akadálymentesség) */
.uj-card h3 a::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:14px; z-index:2; }
/* billentyűzetes fókusz: réz keret a kártya körül (egérkattintásnál nem) */
.uj-card h3 a:focus { outline:none; }
.uj-card:focus-within { outline:2px solid #B87333; outline-offset:3px; }
.uj-card:focus-within:not(:has(:focus-visible)) { outline:none; }

/* hover – csak egérrel (érintőképernyőn nem „ragad be”); billentyűzetes fókuszra a nyíl ugyanígy megjelenik */
@media (hover:hover) {
    .uj-card:hover { transform:translateY(-6px); box-shadow:0 2px 4px rgba(60,40,20,.06), 0 20px 40px -16px rgba(60,40,20,.28); }
    .uj-card:hover .uj-media img { transform:scale(1.06); }
    .uj-card:hover .uj-badge { transform:translateY(-2px); }
    .uj-card:hover .uj-go { opacity:1; transform:none; }
    .uj-card:hover .uj-go svg { transform:none; }
}
.uj-card:focus-within .uj-go { opacity:1; transform:none; }
.uj-card:focus-within .uj-go svg { transform:none; }
@media (hover:none) {
    .uj-go { opacity:1; transform:none; width:48px; height:48px; margin:-24px 0 0 -24px; }
    .uj-go svg { transform:none; }
}

/* belépő animáció – a kártyák alulról „kinyílnak”, 70 ms lépcsőzéssel
   (a JS csak akkor teszi fel a .uj-pre osztályt, ha a szekció még a képernyő alatt van → keresőrobot / JS nélkül mindig látszik) */
.uj-pre .uj-item { opacity:0; }
.uj-pre .uj-card { clip-path:inset(100% 0 0 0 round 14px); }
.uj-show .uj-item { opacity:1; }
.uj-show .uj-card { clip-path:inset(0 0 0 0 round 14px); transition:clip-path 1s cubic-bezier(.7,0,.2,1), transform .45s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i, 0) * 70ms), 0s; }

/* ===== reszponzív ===== */
/* kis asztali / nagy tablet */
@media (max-width:1199px) {
    .uj-list { gap:20px; }
    .uj-item { flex-basis:calc((100% - 40px) / 3); }
    .uj-card h3 { font-size:18px; }
}
/* 900 px alatt: a kártyák a tartalom bal széléhez igazodnak, a következő kilóg (a szekció vágja le) */
@media (max-width:899px) {
    .uj { padding:80px 0; }
    .uj-head { margin-bottom:22px; }
    .uj-list { gap:16px; margin:0 -15px; padding:4px 15px 24px; scroll-padding-left:15px; }
    .uj-item { flex:0 0 84%; }
    .uj-car .uj-list { margin:0; padding:4px 0 24px; }
}
/* tablet (600–899 px): két kártya látszik egészben, a harmadik kikandikál → jelzi, hogy húzható */
@media (min-width:600px) and (max-width:899px) { .uj-item { flex-basis:44%; } }
@media (max-width:767px) {
    .uj-title { font-size:28px; line-height:1.2em; }
}
@media (max-width:575px) {
    .uj { padding:64px 0; }
    .uj-head { margin-bottom:18px; }
    .uj-arrow { width:42px; height:42px; }
    .uj-card { padding:10px 10px 20px; }
    .uj-body { padding:16px 8px 0; }
    .uj-card h3 { font-size:17px; }
    .uj-cat { font-size:12px; }
    .uj-badge { left:10px; top:10px; padding:6px 10px; font-size:11px; }
}
/* nagyon keskeny (≤360 px) */
@media (max-width:360px) { .uj-item { flex-basis:88%; } }

/* ===== tartalék régi böngészőkre ===== */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) { .uj-card { background:rgba(255,255,255,.85); } .uj-badge { background:rgba(18,15,12,.7); } .uj-go { background:rgba(0,0,0,.42); } }
@supports not (aspect-ratio:1 / 1) { .uj-media { height:0; padding-top:81.82%; } .uj-media img { position:absolute; top:0; left:0; } }
@media (prefers-reduced-motion:reduce) {
    .uj-pre .uj-item { opacity:1; }
    .uj-pre .uj-card { clip-path:none; }
    .uj-card, .uj-media img, .uj-badge, .uj-go, .uj-go svg { transition:none; }
    .uj-badge::before { animation:none; }
}