/* Churchill Video Area Block — cvab- prefix, no conflicts with existing .video block */

.cvab-section { padding: 60px 0; width: 100%; }
.cvab-container { max-width: 1400px; margin: 0 auto; padding: 0 30px; }

/* Grid */
.cvab-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }
.cvab-grid.cvab-count-one .cvab-item { width: 100%; max-width: 800px; }
.cvab-grid.cvab-count-two .cvab-item { flex: 1 1 45%; max-width: 600px; }

/* Width modifiers */
.cvab-width-small  .cvab-item { max-width: 480px  !important; }
.cvab-width-medium .cvab-item { max-width: 700px  !important; }
.cvab-width-large  .cvab-item { max-width: 960px  !important; }
.cvab-width-full   .cvab-item { max-width: 100%   !important; }

/* Card */
.cvab-item { display: flex; flex-direction: column; align-items: center; }

/* Wallpaper / thumbnail */
.cvab-wallpaper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    background: #1a1a1a;
}
.cvab-thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.cvab-thumb-placeholder {
    width: 100%;
    padding-top: 56.25%;
    background: #ddd;
    border-radius: 20px;
}
.cvab-wallpaper:hover .cvab-thumb,
.cvab-wallpaper:focus .cvab-thumb {  filter: brightness(0.72); }
.cvab-wallpaper:focus { outline: 3px solid var(--orange, #f26522); outline-offset: 3px; }

/* Play button */
.cvab-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90px; height: 90px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 2;
    transition: transform 0.3s ease;
}
.cvab-play-btn img {
    width: 90px; height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    transition: filter 0.3s ease;
}
.cvab-wallpaper:hover .cvab-play-btn,
.cvab-wallpaper:focus .cvab-play-btn { transform: translate(-50%, -50%) scale(1.12); }
.cvab-wallpaper:hover .cvab-play-btn img,
.cvab-wallpaper:focus .cvab-play-btn img {
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5))
            invert(52%) sepia(90%) saturate(5461%) hue-rotate(10deg) brightness(96%) contrast(104%);
}

/* Description */
.cvab-desc { margin-top: 14px; font-size: 0.95rem; text-align: center; max-width: 80%; }
.cvab-desc--1 { color: var(--orange, #f26522); }
.cvab-desc--2 { color: var(--green,  #2e7d32); }

/* Popup overlay */
.cvab-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cvab-popup.cvab-popup--open { opacity: 1; }

/* Popup inner — spring scale-in */
.cvab-popup-inner {
    position: relative;
    width: 90vw; max-width: 1000px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.cvab-popup.cvab-popup--open .cvab-popup-inner { transform: scale(1); }

/* Close button */
.cvab-close {
    position: absolute;
    top: -46px; right: -10px;
    background: none; border: none;
    font-size: 58px; line-height: 1;
    color: var(--orange, #f26522);
    cursor: pointer;
    z-index: 10; padding: 0;
    transition: transform 0.4s ease, color 0.3s ease, top 0.3s ease;
}
.cvab-close:hover { transform: rotate(180deg); color: var(--magenta, #e91e8c); top: -42px; }
.cvab-close:focus { outline: 2px solid var(--orange, #f26522); border-radius: 4px; }

/* 16:9 video wrap */
.cvab-video-wrap { position: relative; padding-top: 56.25%; width: 100%; height: 0; }
.cvab-video-wrap iframe,
.cvab-video-wrap video { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* Scroll lock */
body.cvab-noscroll { overflow: hidden; }

/* Responsive */
@media (max-width: 900px) {
    .cvab-grid.cvab-count-two .cvab-item { flex: 1 1 100%; }
    .cvab-play-btn, .cvab-play-btn img { width: 64px; height: 64px; }
}
@media (max-width: 600px) {
    .cvab-container { padding: 0 16px; }
    .cvab-close { top: -40px; right: 0; font-size: 44px; }
    .cvab-popup-inner { width: 95vw; }
}
@media (max-width: 400px) {
    .cvab-play-btn, .cvab-play-btn img { width: 50px; height: 50px; }
}