/* =========================
   GALLERY – TISZTA VERZIÓ
   ========================= */

/* ---- Alap változók ---- */
:root {
    --gallery-overlay-h: 140px; /* alsó felirat panel magasság */
    --text-secondary: #ef7417;
}

/* ---- Konténer (desktop) ---- */
.gallery {
    container-type: inline-size;
    container-name: gallery;

    position: relative;
    height: 1224px; /* az eredeti desktop layout miatt */
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    overflow: hidden;
}

/* ---- Nagy háttér logók (desktop) ---- */
.gallery-vass-logo1 {
    position: absolute;
    top: 314px;
    left: -795px;
    width: calc(100% + 1590px);
    max-width: 1120px;
}
.gallery-vass-logo2 {
    position: absolute;
    top: -152px;
    right: -889px;
    width: calc(100% + 1778px);
    max-width: 1120px;
}

/* ---- Cím blokk (desktop) ---- */
.gallery-title {
    position: absolute;
    top: 209px;
    left: 172px;
    width: calc(100% - 344px);
    max-width: 540px;
    height: 351px;
    color: var(--primary);
    font-size: 58px;
    line-height: 1.517;
}

/* ---- Featured kártya/videó (desktop) ---- */
.card-news-featured {
    position: absolute;
    top: 120px;
    right: 170px;
    width: calc(100% - 340px);
    max-width: 889px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.812;
    letter-spacing: -1px;

    background: url(/assets/card-news-featured.png) top left / cover no-repeat;
    padding: 352px 54px 36px 45px;
    border-radius: 30px;
}
.card-news-featured-rect {
    position: absolute;
    inset: 199px 8px 0 0;
    height: 240px;
    border-radius: 30px;
}
.card-news-featured-subtitle {
    position: relative;
    z-index: 2;
    margin-top: 13px;
    max-width: 480px;
}
.card-news-featured-circle {
    position: relative;
    z-index: 1;
    width: 59px;
    height: 59px;
    flex-shrink: 0;
    padding: 12px 7px 13px;
    border: 5px solid #fff;
    border-radius: 50%;
}
.card-news-featured-graphic {
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

/* ---- A 4 benefit kártya sora (desktop) ---- */
.gallery-row {
    position: absolute;
    top: 732px;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 19px;
    width: max-content; /* a kártyák szélessége határozza meg */
    color: var(--white);
    font-size: 28px;
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    text-align: center;
}
/* gyerekek (desktop szélesség) */
.gallery-row > * {
    min-width: 0;
    flex: 0 0 379px;
}

/* ---- Egy kártya (desktop) ---- */
.gallery-item-1,
.item-1-activated {
    position: relative;
    width: 379px;
    max-width: 379px;
    height: calc(246px + var(--gallery-overlay-h));
    border-radius: 20px;
    overflow: hidden;
}
.gallery-mask-group,
.item-1-activated-mask-group {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 246px;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 0;
}

/* ---- Alsó overlay panelek ---- */
.card1,
.card2,
.card3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0 17px 16px; /* oldal + alul */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-image: linear-gradient(
        148deg,
        rgba(255, 76, 0, 0.28) 18%,
        rgba(121, 51, 0, 0.67) 80%
    );
    z-index: 1;
}

/* ---- Felső sötét csík a panelen ---- */
.group {
    position: relative;
    height: 27px;
    flex-shrink: 0;
    margin: 0 -17px 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: linear-gradient(
        148deg,
        rgba(0, 0, 0, 0.21) 18%,
        rgba(0, 0, 0, 0.28) 80%
    );
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.group-graphic {
    position: absolute;
    top: 33%;
    left: 47%;
    width: 6%;
}

/* ---- Felirat a panelben ---- */
.card-subtitle,
.card-subtitle2 {
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.143;
    text-transform: none;
    margin: 0 17px;
}

/* ---- Szín helper ---- */
.sub-text-secondary {
    color: var(--text-secondary);
}

/* =========================
   TABLET (769–1000px): wrap
   ========================= */
@container gallery (width >= 769px) and (width < 1000px) {
    .gallery-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .gallery-row > * {
        flex: 0 1 45%;
        width: 45%;
        max-width: none;
    }
}
@media (min-width: 769px) and (max-width: 1000px) {
    .gallery-row {
        flex-wrap: wrap;
        justify-content: center;
    }
    .gallery-row > * {
        flex: 0 1 45%;
        width: 45%;
        max-width: none;
    }
}

/* =========================
   MOBIL (≤768px): slider
   ========================= */
@media (max-width: 768px) {
    :root {
        --gallery-overlay-h: 120px;
    } /* kicsit alacsonyabb overlay */
    /* opcionális: kényelmes oldalgutter */
    .gallery {
        --gutter: 16px;
    }

    /* konténer mobilon */
    .gallery {
        height: auto;
        padding: 24px var(--gutter) 28px;
        position: relative;
        overflow-x: clip; /* oldal ne scrolloljon vízszintesen */
        overflow-y: visible;
    }

    /* nagy logók elrejtése */
    .gallery-vass-logo1,
    .gallery-vass-logo2 {
        display: none;
    }

    /* cím mobilon */
    .gallery-title {
        position: static;
        width: 100%;
        max-width: none;
        height: auto;
        text-align: center;
        font-size: clamp(26px, 6.5vw, 34px);
        line-height: 1.25;
        margin: 8px 0 16px;
    }

    /* featured mobilon (kép → később videó) */
    .card-news-featured {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0 0 18px;
        border-radius: 18px;
        padding: 56vw 16px 18px 16px; /* ~16:9 borító */
        background-position: center;
        background-size: cover;
    }
    .card-news-featured-rect {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42%;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }
    .card-news-featured-subtitle {
        font-size: clamp(18px, 4.5vw, 20px);
        margin-top: 4px;
    }
    .card-news-featured-circle {
        width: 48px;
        height: 48px;
        border-width: 4px;
    }

    /* ---- SLIDER sor (start-snap, nincs gutter-matek) ---- */
    .gallery-row {
        width: 100% !important; /* leveri a max-content-et */
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px;

        box-sizing: border-box;
        padding: 0 var(--gutter); /* egyszerű belső margó */
        scrollbar-gutter: stable both-edges;

        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;

        scroll-snap-type: x mandatory; /* START snap → 1. kártya teljesen látszik */
        scroll-snap-stop: always;
        scroll-padding-left: var(--gutter);
        scroll-padding-right: var(--gutter);

        margin: 0 !important;
    }

    .gallery-row > * {
        /* egy dia ~86% – nyugodtan állítható 82–90% között */
        flex: 0 0 86% !important;
        width: 86% !important;
        min-width: 86% !important;
        max-width: 86% !important;

        scroll-snap-align: start; /* <<< kulcs */
        box-sizing: border-box;
    }

    /* kártya UI mobilon */
    .gallery-item-1,
    .item-1-activated {
        width: auto !important;
        max-width: none !important;
        height: calc(200px + var(--gallery-overlay-h));
        border-radius: 16px;
    }
    .gallery-mask-group,
    .item-1-activated-mask-group {
        height: 200px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    .card1,
    .card2,
    .card3 {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        padding: 0 14px 14px;
    }
    .group {
        margin: 0 -14px 10px;
        height: 24px;
    }
    .card-subtitle,
    .card-subtitle2 {
        min-height: 72px;
        font-size: clamp(16px, 4.2vw, 18px);
        margin: 0 10px;
    }

    /* pontok (ha használod) */
    .gallery-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
    }
    .gallery-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.25);
        border: 0;
        padding: 0;
        transition: all 0.2s ease;
    }
    .gallery-dots .dot.is-active {
        width: 20px;
        background: rgba(0, 0, 0, 0.6);
    }
}

/* (opcionális) általános kép overflow védelem */
.gallery img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Chrome mobil: featured overlay ne lógjon rá a sliderre --- */
@media (max-width: 768px) {
    /* ha a szürke háttér a bal/jobb nagy logóktól jönne, kényszerítsük elrejtésre */
    .gallery-vass-logo1,
    .gallery-vass-logo2 {
        display: none !important;
    }
}