/* ===================================================================
   Home videos section + lightweight native/video-iframe viewer
=================================================================== */

.cw-videos {
    max-width: calc(var(--container) + 48px);
    margin-inline: auto;
    padding-inline: 20px;
}

.cw-videos__inner {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px 20px;
    background: var(--white);
}

.cw-videos__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cw-videos__title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.cw-videos__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: 20px;
    margin-inline: -20px;
    padding-bottom: 4px;
}

.cw-videos__viewport::-webkit-scrollbar { display: none; }

.cw-videos__track {
    display: flex;
    gap: 8px;
    width: max-content;
}

.cw-video-card {
    width: 232px;
    height: 334px;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(33, 28, 27, .045);
}

.cw-video-card__cover {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--surface);
}

.cw-video-card__cover > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.cw-video-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .55) 0%,
        rgba(0, 0, 0, .22) 24%,
        rgba(0, 0, 0, 0) 55%
    );
    pointer-events: none;
}

.cw-video-card__play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 104px;
    height: 104px;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    transition: transform .18s ease, filter .18s ease;
}

.cw-video-card:hover .cw-video-card__play {
    transform: translate(-50%, -50%) scale(1.06);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
}

.cw-video-card__play img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cw-video-card__title-wrap {
    position: absolute;
    right: 12px;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    text-align: right;
}

.cw-video-card__title {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cw-video-card__title span {
    display: inline;
    padding: .01em .32em .02em;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, .76);
    background-image: url("../../main/svg/video-title-pencil.svg");
    background-repeat: repeat;
    background-size: 28px 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* The dialog itself is only the video surface; native dialog backdrop does
   the dimming, while the media keeps its own natural aspect ratio. */
.cw-video-viewer {
    --cw-video-width: min(94vw, 1120px);
    --cw-video-height: min(70vh, 630px);
    width: var(--cw-video-width);
    height: var(--cw-video-height);
    max-width: 94vw;
    max-height: 70vh;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    overflow: visible;
    box-shadow: none;
}

.cw-video-viewer::backdrop {
    background: rgba(12, 10, 10, .78);
    backdrop-filter: blur(4px);
}

.cw-video-viewer__shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: transparent;
}

.cw-video-viewer__close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
}

.cw-video-viewer__close:hover { background: rgba(0, 0, 0, .72); }

.cw-video-viewer__video,
.cw-video-viewer__iframe {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 94vw;
    max-height: 70vh;
    border: 0;
    background: transparent;
    object-fit: contain;
}

.cw-video-viewer__video {
    min-width: 0;
    min-height: 0;
}

.cw-video-viewer__iframe[hidden],
.cw-video-viewer__video[hidden] {
    display: none;
}

@media (max-width: 991px) {
    .cw-videos { padding-inline: 14px; }
    .cw-videos__inner { padding-inline: 14px; }
    .cw-videos__viewport { padding-inline: 14px; margin-inline: -14px; }
    .cw-video-card { width: 204px; height: 313px; }
    .cw-video-card__play { width: 92px; height: 92px; }
}

@media (max-width: 560px) {
    .cw-videos { padding-inline: 14px; }
    .cw-videos__inner { padding: 16px 12px 18px; }
    .cw-videos__viewport { padding-inline: 12px; margin-inline: -12px; }
    .cw-video-card { width: 204px; height: 313px; }
    .cw-video-card__play { width: 92px; height: 92px; }
}