/**
 * Video cards
 *
 * Pôvodne WPCode snippet #60.
 */

.as-videos,
                .as-videos *,
                .as-videos *::before,
                .as-videos *::after {
                    box-sizing: border-box;
                }

                .as-videos {
                    position: relative;
                    width: 100%;
                    background: #000;
                    color: #fff;
                    overflow: hidden;
                    padding: clamp(28px, 4vw, 56px) 0;
                    isolation: isolate;
                }

                .as-videos::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    background:
                        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 30%),
                        linear-gradient(180deg, rgba(255,255,255,0.01), transparent 20%, transparent 80%, rgba(255,255,255,0.01));
                    z-index: 0;
                }

                .as-videos__inner {
                    position: relative;
                    z-index: 1;
                    width: min(calc(100% - 36px), 1480px);
                    margin: 0 auto;
                }

                .as-videos__grid {
                    display: grid;
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    gap: clamp(18px, 2vw, 28px);
                    align-items: start;
                    justify-items: center;
                    padding-top: 8px;
                }

                .as-videos__grid .as-videos__card:nth-child(1) {
                    transform: translateY(26px);
                }

                .as-videos__grid .as-videos__card:nth-child(2) {
                    transform: translateY(-10px);
                }

                .as-videos__grid .as-videos__card:nth-child(3) {
                    transform: translateY(42px);
                }

                .as-videos__card {
                    position: relative;
                    display: block;
                    width: 100%;
                    max-width: 390px;
                    aspect-ratio: 9 / 16;
                    border-radius: 22px;
                    overflow: hidden;
                    text-decoration: none;
                    color: #fff;
                    background: #090909;
                    box-shadow:
                        0 22px 60px rgba(0,0,0,0.44),
                        inset 0 1px 0 rgba(255,255,255,0.04);
                    isolation: isolate;
                    transition:
                        transform .45s cubic-bezier(.22,1,.36,1),
                        box-shadow .35s ease;
                }

                .as-videos__grid .as-videos__card:hover {
                    box-shadow:
                        0 30px 80px rgba(0,0,0,0.52),
                        inset 0 1px 0 rgba(255,255,255,0.06);
                }

                .as-videos__grid .as-videos__card:nth-child(1):hover {
                    transform: translateY(18px);
                }

                .as-videos__grid .as-videos__card:nth-child(2):hover {
                    transform: translateY(-18px);
                }

                .as-videos__grid .as-videos__card:nth-child(3):hover {
                    transform: translateY(34px);
                }

                .as-videos__media {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    background: #0a0a0a;
                }

                .as-videos__video {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                    background: #000;
                    transform: scale(1.015);
                    filter: saturate(.92) brightness(.76);
                    transition:
                        transform .95s cubic-bezier(.22,1,.36,1),
                        filter .45s ease;
                }

                .as-videos__thumbnail {
                    position: absolute;
                    inset: 0;
                    z-index: 2;
                    width: 100%;
                    height: 100%;
                    transition:
                        opacity .4s ease,
                        visibility .4s ease,
                        transform .8s cubic-bezier(.22,1,.36,1),
                        filter .4s ease;
                    pointer-events: none;
                }

                .as-videos__thumbnail img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                    transform: scale(1.01);
                }

                .as-videos__card.is-playing .as-videos__thumbnail,
                .as-videos__card.is-video-started .as-videos__thumbnail,
                .as-videos__card:hover .as-videos__thumbnail {
                    opacity: 0;
                    visibility: hidden;
                    transform: scale(1.04);
                    filter: blur(8px);
                }

                .as-videos__card:hover .as-videos__video,
                .as-videos__card.is-playing .as-videos__video,
                .as-videos__card.is-video-started .as-videos__video {
                    transform: scale(1.04);
                    filter: saturate(1) brightness(.98);
                }

                .as-videos__shade {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    z-index: 3;
                    background:
                        linear-gradient(
                            180deg,
                            rgba(0,0,0,0.08) 0%,
                            rgba(0,0,0,0.10) 18%,
                            rgba(0,0,0,0.18) 40%,
                            rgba(0,0,0,0.52) 70%,
                            rgba(0,0,0,0.86) 100%
                        );
                    transition:
                        opacity .42s ease,
                        filter .42s ease;
                }

                .as-videos__card:hover .as-videos__shade,
                .as-videos__card.is-playing .as-videos__shade,
                .as-videos__card.is-video-started .as-videos__shade {
                    opacity: 0;
                    filter: blur(8px);
                }

                .as-videos__overlay {
                    position: absolute;
                    inset: 0;
                    z-index: 4;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    pointer-events: none;
                }

                .as-videos__overlay-top {
                    padding: 18px 18px 0;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                }

                .as-videos__logo {
                    max-width: 138px;
                    max-height: 48px;
                    width: auto;
                    height: auto;
                    object-fit: contain;
                    display: block;
                    filter: brightness(0) invert(1);
                    opacity: .96;
                    transform: translateY(0);
                    transition:
                        transform .55s cubic-bezier(.22,1,.36,1),
                        opacity .38s ease,
                        filter .38s ease;
                }

                .as-videos__overlay-bottom {
                    position: relative;
                    width: 100%;
                    padding: 44px 26px 28px;
                    transform: translateY(0);
                    opacity: 1;
                    transition:
                        transform .6s cubic-bezier(.22,1,.36,1),
                        opacity .42s ease,
                        filter .42s ease;
                }

                .as-videos__overlay-bottom::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background:
                        linear-gradient(
                            180deg,
                            rgba(255,54,0,0) 0%,
                            rgba(255,54,0,0.03) 14%,
                            rgba(255,54,0,0.10) 30%,
                            rgba(255,54,0,0.20) 48%,
                            rgba(255,54,0,0.38) 72%,
                            rgba(255,54,0,0.58) 100%
                        );
                    backdrop-filter: blur(12px) saturate(145%);
                    -webkit-backdrop-filter: blur(12px) saturate(145%);
                    box-shadow:
                        inset 0 1px 0 rgba(255,255,255,0.035),
                        0 18px 40px rgba(0,0,0,0.18);
                    z-index: -1;
                    transition:
                        opacity .38s ease,
                        filter .38s ease;

                    -webkit-mask-image: linear-gradient(
                        180deg,
                        transparent 0%,
                        rgba(0,0,0,0.18) 10%,
                        rgba(0,0,0,0.45) 18%,
                        rgba(0,0,0,0.75) 30%,
                        rgba(0,0,0,1) 46%,
                        rgba(0,0,0,1) 100%
                    );
                    mask-image: linear-gradient(
                        180deg,
                        transparent 0%,
                        rgba(0,0,0,0.18) 10%,
                        rgba(0,0,0,0.45) 18%,
                        rgba(0,0,0,0.75) 30%,
                        rgba(0,0,0,1) 46%,
                        rgba(0,0,0,1) 100%
                    );
                }

                .as-videos__card:hover .as-videos__overlay-bottom,
                .as-videos__card.is-playing .as-videos__overlay-bottom,
                .as-videos__card.is-video-started .as-videos__overlay-bottom {
                    transform: translateY(120%);
                    opacity: 0;
                    filter: blur(8px);
                }

                .as-videos__card:hover .as-videos__overlay-bottom::before,
                .as-videos__card.is-playing .as-videos__overlay-bottom::before,
                .as-videos__card.is-video-started .as-videos__overlay-bottom::before {
                    opacity: 0;
                    filter: blur(10px);
                }

                .as-videos__card:hover .as-videos__logo,
                .as-videos__card.is-playing .as-videos__logo,
                .as-videos__card.is-video-started .as-videos__logo {
                    transform: translateY(-16px);
                    opacity: 0;
                    filter: brightness(0) invert(1) blur(4px);
                }

                .as-videos__heading {
                    margin: 0 0 16px;
                    font-size: clamp(28px, 2.6vw, 42px);
                    line-height: .94;
                    font-weight: 700;
                    letter-spacing: -0.05em;
                    color: #fff;
                    text-transform: none;
                    text-wrap: balance;
                }

                .as-videos__text {
                    margin: 0;
                    color: rgba(255,255,255,.95);
                    font-size: clamp(14px, 1.02vw, 16px);
                    line-height: 1.22;
                    letter-spacing: -0.02em;
                    max-width: 100%;
                }

                .as-videos__text p {
                    margin: 0;
                }

                .as-videos__play {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 78px;
                    height: 78px;
                    border-radius: 999px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background:
                        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
                    border: 1px solid rgba(255,255,255,0.18);
                    box-shadow:
                        inset 0 1px 0 rgba(255,255,255,0.12),
                        0 22px 44px rgba(0,0,0,0.22);
                    backdrop-filter: blur(14px) saturate(145%);
                    -webkit-backdrop-filter: blur(14px) saturate(145%);
                    z-index: 5;
                    opacity: 1;
                    transition:
                        opacity .35s ease,
                        transform .45s cubic-bezier(.22,1,.36,1),
                        filter .35s ease;
                    pointer-events: none;
                }

                .as-videos__play::before {
                    content: "";
                    width: 0;
                    height: 0;
                    border-top: 12px solid transparent;
                    border-bottom: 12px solid transparent;
                    border-left: 18px solid #fff;
                    margin-left: 5px;
                }

                .as-videos__card:hover .as-videos__play,
                .as-videos__card.is-playing .as-videos__play,
                .as-videos__card.is-video-started .as-videos__play {
                    opacity: 0;
                    transform: translate(-50%, -50%) scale(.84);
                    filter: blur(6px);
                }

                .as-videos__progress {
                    position: absolute;
                    left: 18px;
                    right: 18px;
                    bottom: 16px;
                    height: 6px;
                    z-index: 6;
                    border-radius: 999px;
                    background: rgba(255,255,255,0.14);
                    overflow: hidden;
                    opacity: 0;
                    transform: translateY(10px);
                    transition:
                        opacity .3s ease,
                        transform .3s ease;
                    pointer-events: none;
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                }

                .as-videos__card.is-playing .as-videos__progress,
                .as-videos__card.is-video-started .as-videos__progress {
                    opacity: 1;
                    transform: translateY(0);
                }

                .as-videos__progress-bar {
                    width: 0%;
                    height: 100%;
                    border-radius: inherit;
                    background: linear-gradient(90deg, #ff8403 0%, #ff3600 100%);
                    box-shadow: 0 0 18px rgba(255,54,0,0.38);
                    transition: width .08s linear;
                }

                .as-videos__fallback {
                    position: absolute;
                    inset: 0;
                    display: grid;
                    place-items: center;
                    padding: 24px;
                    text-align: center;
                    color: rgba(255,255,255,0.75);
                    font-size: 14px;
                    background:
                        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
                    z-index: 1;
                }

                .as-videos__carousel-wrap {
                    display: none;
                }

                .as-videos__carousel {
                    display: grid;
                    grid-auto-flow: column;
                    grid-auto-columns: 82%;
                    gap: 14px;
                    overflow-x: auto;
                    padding: 2px 2px 12px;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;
                }

                .as-videos__carousel::-webkit-scrollbar {
                    display: none;
                }

                .as-videos__carousel .as-videos__card {
                    scroll-snap-align: center;
                    max-width: none;
                    width: 100%;
                    aspect-ratio: 9 / 16;
                    transform: none !important;
                }

                .as-videos__dots {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    margin-top: 14px;
                }

                .as-videos__dot {
                    width: 10px;
                    height: 10px;
                    border-radius: 999px;
                    background: rgba(255,255,255,0.16);
                    border: 1px solid rgba(255,255,255,0.10);
                    transition:
                        width .25s ease,
                        background .25s ease,
                        opacity .25s ease;
                    opacity: .8;
                }

                .as-videos__dot.is-active {
                    width: 26px;
                    background: #ff3600;
                    opacity: 1;
                }

                @media (hover: hover) and (pointer: fine) {
                    .as-videos__card {
                        cursor: pointer;
                    }
                }

                @media (max-width: 1180px) {
                    .as-videos__inner {
                        width: min(calc(100% - 24px), 1480px);
                    }

                    .as-videos__grid {
                        gap: 14px;
                    }

                    .as-videos__grid .as-videos__card:nth-child(1) {
                        transform: translateY(14px);
                    }

                    .as-videos__grid .as-videos__card:nth-child(2) {
                        transform: translateY(-6px);
                    }

                    .as-videos__grid .as-videos__card:nth-child(3) {
                        transform: translateY(24px);
                    }

                    .as-videos__overlay-top {
                        padding: 16px 16px 0;
                    }

                    .as-videos__overlay-bottom {
                        padding: 38px 20px 22px;
                    }

                    .as-videos__heading {
                        font-size: clamp(22px, 2vw, 30px);
                        margin-bottom: 14px;
                    }

                    .as-videos__text {
                        font-size: 13px;
                    }

                    .as-videos__logo {
                        max-width: 124px;
                        max-height: 42px;
                    }
                }

                @media (max-width: 767px) {
                    .as-videos {
                        padding: 20px 0 28px;
                    }

                    .as-videos__grid {
                        display: none;
                    }

                    .as-videos__carousel-wrap {
                        display: block;
                    }

                    .as-videos__carousel {
                        grid-auto-columns: 84%;
                    }

                    .as-videos__heading {
                        font-size: clamp(24px, 6.8vw, 36px);
                        margin-bottom: 14px;
                    }

                    .as-videos__text {
                        font-size: 13px;
                        line-height: 1.18;
                    }

                    .as-videos__logo {
                        max-width: 128px;
                        max-height: 42px;
                    }

                    .as-videos__overlay-bottom {
                        padding: 40px 20px 22px;
                    }

                    .as-videos__play {
                        width: 72px;
                        height: 72px;
                    }

                    .as-videos__progress {
                        left: 14px;
                        right: 14px;
                        bottom: 14px;
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .as-videos__card,
                    .as-videos__video,
                    .as-videos__thumbnail,
                    .as-videos__shade,
                    .as-videos__overlay-bottom,
                    .as-videos__overlay-bottom::before,
                    .as-videos__logo,
                    .as-videos__play,
                    .as-videos__progress,
                    .as-videos__progress-bar,
                    .as-videos__dot {
                        transition: none !important;
                    }
                }