/* =========================================================
   Videos — Premium Stack Section
   Stable Video Rendering + Fabric Theme Sync
========================================================= */

.videos-section {
    position: relative;
    padding: var(--neta-section-padding, 112px 0 124px);

    background:
        radial-gradient(
            circle at 16% 18%,
            color-mix(in srgb, var(--neta-brass, #8f7b5d) 12%, transparent),
            transparent 34%
        ),
        radial-gradient(
            circle at 84% 82%,
            color-mix(in srgb, var(--neta-white, #fffaf1) 44%, transparent),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            var(--neta-paper, #eee6d8),
            var(--neta-paper-light, #fffaf1)
        );

    overflow: hidden;
    isolation: isolate;
}

.videos-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    left: 10%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--neta-line, rgba(36, 25, 15, 0.14)),
        transparent
    );

    pointer-events: none;
}

.videos-section::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;

    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--neta-white, #fffaf1) 38%, transparent)
    );

    pointer-events: none;
}

.videos-section .container {
    position: relative;
    z-index: 1;
}

/* =========================
   Head
========================= */

.videos-section__head {
    max-width: 840px;
    margin: 0 auto 58px;
    text-align: center;
}

.videos-section__head .section-label {
    width: fit-content;
    margin: 0 auto 18px;
    justify-content: center;
    color: var(--neta-brass, #8f7b5d);
}

.videos-section__head h2 {
    max-width: 780px;
    margin: 0 auto;

    color: var(--neta-walnut, #24190f);
    font-family: var(--font-display, serif);
    font-size: clamp(52px, 7vw, 96px);
    font-weight: 650;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.videos-section__head p:not(.section-label) {
    max-width: 660px;
    margin: 24px auto 0;

    color: var(--neta-walnut-soft, #493828);
    font-family: var(--font-body, sans-serif);
    font-size: 18.5px;
    line-height: 1.85;
}

/* =========================
   Stack
========================= */

.videos-stack {
    position: relative;
    width: 100%;
    max-width: 1180px;
    min-height: 600px;
    margin: 0 auto;
    padding: 78px 26px 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
    overflow: visible;
}

/* =========================
   Video Card
========================= */

.video-stack-card {
    position: relative;

    flex: 0 0 min(22vw, 270px);
    width: min(22vw, 270px);
    aspect-ratio: 9 / 16;

    margin-inline: -30px;

    border-radius: 30px;
    overflow: hidden;

    background: var(--neta-walnut, #24190f);
    border: 1px solid color-mix(in srgb, var(--neta-white, #fffaf1) 24%, transparent);

    box-shadow:
        0 28px 80px rgba(36, 25, 15, 0.2),
        inset 0 1px 0 color-mix(in srgb, var(--neta-white, #fffaf1) 26%, transparent);

    cursor: pointer;
    line-height: 0;

    transform-origin: center center;
    will-change: transform;

    transition:
        transform 0.35s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.35s ease,
        filter 0.35s ease,
        opacity 0.35s ease;

    z-index: 1;
}

.video-stack-card--1 {
    transform: rotate(4deg) translateY(30px);
}

.video-stack-card--2 {
    transform: rotate(-3deg) translateY(10px);
}

.video-stack-card--3 {
    transform: rotate(0deg) translateY(-14px);
    z-index: 2;
}

.video-stack-card--4 {
    transform: rotate(3deg) translateY(10px);
}

.video-stack-card--5 {
    transform: rotate(-4deg) translateY(30px);
}

/* =========================
   Video
========================= */

.video-stack-card__video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 9 / 16;

    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;

    background: var(--neta-walnut, #24190f);

    opacity: 1 !important;
    visibility: visible !important;

    filter: saturate(0.94) sepia(0.025) contrast(1.02);
}

.video-stack-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 2;

    border: 1px solid color-mix(in srgb, var(--neta-white, #fffaf1) 46%, transparent);
    border-radius: 20px;

    pointer-events: none;
}

.video-stack-card::after {
    content: "העבירו עכבר לצפייה";
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;

    padding: 9px 13px;
    border-radius: 999px;

    background: color-mix(in srgb, var(--neta-white, #fffaf1) 82%, transparent);
    color: var(--neta-walnut, #24190f);

    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* =========================
   Hover
========================= */

.video-stack-card:not(:hover) {
    opacity: 0.96;
}

.video-stack-card:hover {
    transform: rotate(0deg) translateY(-22px) scale(1.14);
    z-index: 10;

    box-shadow: 0 40px 110px rgba(36, 25, 15, 0.28);
    filter: none;
}

.video-stack-card:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.videos-stack:hover .video-stack-card:not(:hover) {
    opacity: 0.72;
    filter: saturate(0.86);
}

.videos-stack:hover .video-stack-card:hover {
    opacity: 1;
    filter: none;
}

/* =========================
   Sound Button
========================= */

.video-stack-card__sound,
.video-stack-card__sound:hover,
.video-stack-card__sound:focus,
.video-stack-card__sound:active {
    appearance: none !important;
    -webkit-appearance: none !important;

    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 5;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 999px !important;
    outline: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: color-mix(in srgb, var(--neta-white, #fffaf1) 86%, transparent) !important;
    color: var(--neta-walnut, #24190f) !important;

    box-shadow: 0 12px 30px rgba(36, 25, 15, 0.18) !important;

    cursor: pointer;
    line-height: 1 !important;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}

.video-stack-card:hover .video-stack-card__sound,
.video-stack-card.is-playing .video-stack-card__sound {
    opacity: 1;
    transform: translateY(0);
}

.video-stack-card__sound i {
    font-size: 22px;
    line-height: 1;
}

.video-stack-card.is-sound-on .video-stack-card__sound,
.video-stack-card.is-sound-on .video-stack-card__sound:hover,
.video-stack-card.is-sound-on .video-stack-card__sound:focus,
.video-stack-card.is-sound-on .video-stack-card__sound:active {
    background: var(--neta-walnut, #24190f) !important;
    color: var(--neta-white, #fffaf1) !important;
}

.video-stack-card__sound:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--neta-brass, #8f7b5d) 28%, transparent) !important;
    outline-offset: 4px;
}

/* =========================
   Tablet
========================= */

@media (max-width: 1100px) {
    .videos-section {
        padding: 92px 0 104px;
    }

    .videos-section__head {
        margin-bottom: 46px;
    }

    .videos-section__head h2 {
        font-size: clamp(46px, 7vw, 76px);
    }

    .videos-stack {
        min-height: 540px;
        padding: 68px 22px 64px;
    }

    .video-stack-card {
        flex-basis: min(24vw, 240px);
        width: min(24vw, 240px);
        margin-inline: -24px;
        border-radius: 26px;
    }

    .video-stack-card:hover {
        transform: rotate(0deg) translateY(-18px) scale(1.1);
    }
}

/* =========================
   Mobile
========================= */

@media (max-width: 760px) {
    .videos-section {
        padding: 58px 0 72px;
    }

    .videos-section__head {
        max-width: 430px;
        margin-bottom: 30px;
    }

    .videos-section__head .section-label {
        margin: 0 auto 14px;

        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.22em;
    }

    .videos-section__head .section-label::before {
        width: 26px;
    }

    .videos-section__head h2 {
        max-width: 390px;

        font-size: clamp(38px, 10vw, 54px);
        line-height: 1.03;
        letter-spacing: -0.05em;
    }

    .videos-section__head p:not(.section-label) {
        max-width: 380px;
        margin-top: 16px;

        font-size: 15.8px;
        line-height: 1.65;
    }

    .videos-stack {
        min-height: auto;
        padding: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;

        overflow: visible;
    }

    .video-stack-card,
    .video-stack-card:hover,
    .videos-stack:hover .video-stack-card:not(:hover),
    .videos-stack:hover .video-stack-card:hover {
        flex-basis: auto;
        width: 100%;
        min-height: auto;
        margin: 0;

        transform: none;
        opacity: 1;
        filter: none;

        border-radius: 22px;
    }

    .video-stack-card--1,
    .video-stack-card--2,
    .video-stack-card--3,
    .video-stack-card--4,
    .video-stack-card--5 {
        transform: none;
    }

    .video-stack-card::before {
        inset: 10px;
        border-radius: 15px;
    }

    .video-stack-card::after {
        content: "לחצו להפעלת קול";

        right: 12px;
        bottom: 12px;

        padding: 8px 10px;

        font-size: 11px;

        opacity: 1;
        transform: none;
    }

    .video-stack-card__sound,
    .video-stack-card__sound:hover,
    .video-stack-card__sound:focus,
    .video-stack-card__sound:active {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        left: 12px;
        bottom: 12px;

        opacity: 1;
        transform: none;
    }

    .video-stack-card__sound i {
        font-size: 20px;
    }
}

/* =========================
   Small Mobile
========================= */

@media (max-width: 430px) {
    .videos-section {
        padding: 52px 0 64px;
    }

    .videos-section__head {
        margin-bottom: 26px;
    }

    .videos-section__head .section-label {
        margin-bottom: 13px;
        font-size: 10.5px;
        letter-spacing: 0.2em;
    }

    .videos-section__head h2 {
        max-width: 350px;

        font-size: clamp(35px, 10vw, 46px);
        line-height: 1.04;
    }

    .videos-section__head p:not(.section-label) {
        max-width: 340px;
        margin-top: 14px;

        font-size: 15.2px;
        line-height: 1.62;
    }

    .videos-stack {
        gap: 10px;
    }

    .video-stack-card {
        border-radius: 18px;
    }

    .video-stack-card::before {
        border-radius: 13px;
    }

    .video-stack-card::after {
        font-size: 10.5px;
        padding: 7px 9px;
    }

    .video-stack-card__sound,
    .video-stack-card__sound:hover,
    .video-stack-card__sound:focus,
    .video-stack-card__sound:active {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
}

/* =========================
   Touch Devices
========================= */

@media (hover: none) {
    .video-stack-card:hover,
    .videos-stack:hover .video-stack-card:not(:hover),
    .videos-stack:hover .video-stack-card:hover {
        transform: none;
        opacity: 1;
        filter: none;
    }

    .video-stack-card__sound {
        opacity: 1;
        transform: none;
    }
}

/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce) {
    .video-stack-card,
    .video-stack-card::after,
    .video-stack-card__sound {
        transition: none !important;
    }

    .video-stack-card:hover {
        transform: none;
    }

    .videos-stack:hover .video-stack-card:not(:hover) {
        filter: none;
        opacity: 1;
    }
}