/* =============================================
   TERMÉKKATEGÓRIÁK SZEKCIÓ – Főoldal
   ============================================= */

.termekek {
    overflow: hidden; /* megakadályozza a vízszintes görgetést */
}

/* ── Szekcócím ──────────────────────────────── */
.termekek__title {
    margin: 0 0 48px;
}

/* ── Slider külső wrapper ─────────────────────
   Padding = container padding, nyilak a széleken,
   track-wrap kitölti a maradék helyet            */
.termekek__slider-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 var(--header-pad-x);
}

/* ─────────────────────────────────────────────
   NYÍL GOMBOK
   ───────────────────────────────────────────── */
.kateg-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 !important;
    line-height: 0;
    color: var(--color-text) !important;
    gap: 0 !important;
    font-size: inherit !important;
}

/* SVG vonalak alap színe */
.kateg-arrow circle,
.kateg-arrow path {
    stroke: #8C8880;
    transition: stroke 0.2s ease;
}

/* Hover: sötétebb szürke, csak a vonalakon */
.kateg-arrow:hover:not(:disabled) circle,
.kateg-arrow:hover:not(:disabled) path {
    stroke: #5C5852;
}

/* Disabled állapot: halványabb */
.kateg-arrow:disabled {
    opacity: 0.30;
    cursor: default;
}

/* Teljesen elrejtve, ha az összes kártya kifér (nincs mit lapozni) */
.kateg-arrow[hidden] {
    display: none !important;
}

/* Előző nyíl: vízszintesen tükrözve */
.kateg-arrow--prev svg {
    transform: scaleX(-1);
}

/* ─────────────────────────────────────────────
   TRACK WRAP – overflow clip
   A pontos szélességét (hány kártya fér ki) a JS számolja ki és állítja be
   inline style-ként minden töréspontnál – ez a flex:1 csak kezdeti/fallback
   érték, amíg a JS lefut.
   ───────────────────────────────────────────── */
.kateg__track-wrap {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    /* Függőleges "levegő", hogy a kártya hover-árnyéka/alja ne vágódjon le */
    padding: 12px 0;
}

/* ── Track – csúszó flexbox ─────────────────────
   FONTOS: justify-content MINDIG flex-start! Ha a track (5 kártya) szélesebb,
   mint a track-wrap (JS-sel pontosan kiszámolt) ablaka, egy "center"/"flex-end"
   érték a túllógást szimmetrikusan BAL és JOBB oldalra is levágná – emiatt az
   1. kártya is levágódna a bal szélen, nem csak az utolsó a jobbon. */
.kateg__track {
    display: flex;
    gap: 24px;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    justify-content: flex-start;
}

/* Ha nincs lapozó (a JS állítja be – minden kártya kifér egyszerre),
   1620px fölött a track-wrap teljes szélességében középre igazítjuk a
   kártyákat, hogy ne balra tapadva, üres jobb oldali sávval jelenjenek meg. */
@media only screen and (min-width: 1620px) {
    .kateg__track.kateg__track--kozepre {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────
   KÁRTYA
   ───────────────────────────────────────────── */
.kateg-card {
    flex: 0 0 260px;
    background: #FAF8F4;
    border-radius: 12px;
    border: 1px solid #C8C3B8;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    box-sizing: border-box;
    transition: box-shadow var(--transition);
}

.kateg-card:hover {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
}

/* ── Kép terület ─────────────────────────────── */
.kateg-card__img-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background: #D5D3CE;
}

.kateg-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.15s ease, transform 0.35s ease;
}

.kateg-card:hover .kateg-card__img-wrap img {
    transform: scale(1.04);
}

/* ── Szöveg terület ──────────────────────────── */
.kateg-card__body {
    padding: 0 4px 4px;
}

.kateg-card__title {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #4E4A45;
    margin: 0;
    line-height: 1.3;
}

/* ─────────────────────────────────────────────
   PONTJELZŐ
   ───────────────────────────────────────────── */
.kateg-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

/* Teljesen elrejtve, ha az összes kártya kifér (nincs mit lapozni) */
.kateg-dots[hidden] {
    display: none !important;
}

/* Egyetlen pötty elrejtése (ha kevesebb "megállási pont" van, mint 5) */
.kateg-dot[hidden] {
    display: none !important;
}

.kateg-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: var(--color-mid-gray);
    border: none !important;
    padding: 0 !important;
    display: block !important;
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
}

.kateg-dot--active {
    background: var(--color-terracotta);
}

/* ─────────────────────────────────────────────
   NAGY KÉPERNYŐ (≥ 1590px)
   ───────────────────────────────────────────── */
@media only screen and (min-width: 1590px) {
    .termekek__slider-outer {
        max-width: 1950px;
        margin: 0 auto;
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* ─────────────────────────────────────────────
   TABLET (≤ 1060px): 2 kártya látszik
   ───────────────────────────────────────────── */
@media only screen and (max-width: 1060px) {
    .termekek__title {
        margin-bottom: 40px;
    }

    .kateg-card {
        flex: 0 0 240px;
    }

    /* Lapozó nyilak: 40×40px tablettől lefelé (mobilon is, ld. lentebb) */
    .kateg-arrow {
        width: 40px;
        height: 40px;
    }

    .kateg-arrow svg {
        width: 40px;
        height: 40px;
    }
}

/* ─────────────────────────────────────────────
   TABLET KIS (≤ 980px): container padding = 60px
   ───────────────────────────────────────────── */
@media only screen and (max-width: 980px) {
    .termekek__slider-outer {
        padding: 0 var(--header-nav-h); /* 60px */
    }
}

/* ─────────────────────────────────────────────
   MOBIL (≤ 630px): 1 kártya látszik, padding 40px
   ───────────────────────────────────────────── */
@media only screen and (max-width: 630px) {
    .termekek {
        padding: 60px 0 48px;
    }

    .kateg-card {
        flex: 0 0 260px;
    }

    .termekek__slider-outer {
        padding: 0 40px;
        gap: 14px;
    }
}

/* ─────────────────────────────────────────────
   NAGYON KIS KÉPERNYŐ (≤ 450px): padding 20px
   ───────────────────────────────────────────── */
@media only screen and (max-width: 450px) {
    /* Szűkebb padding/gap, hogy a 260px kártya + 2×40px nyíl kiférjen
       a legkisebb kijelzőkön is */
    .termekek__slider-outer {
        padding: 0 10px;
        gap: 6px;
    }
}

/* ─────────────────────────────────────────────
   ULTRASZÉLES KIJELZŐ (≥ 3400px)
   FONTOS: a .kateg__track-wrap width-jét a JS (termek-kategoriak.js
   meretezes()) minden betöltéskor/resize-nál felülírja egy inline
   style-lal (a kártyák tényleges száma/szélessége alapján) – az itteni
   width:1945px ezért csak addig/csak akkor látszik, amíg a JS le nem
   futott, utána a JS-számított érték érvényesül.
   ───────────────────────────────────────────── */
@media only screen and (min-width: 3400px) {
    .kateg-card {
        flex: 0 0 320px;
    }

    .kateg-card__title {
        font-size: 20px;
    }

    .kateg__track-wrap {
        width: 1945px;
    }
}