/* ═══════════════════════════════════════════════════
   Kitchen Gallery — Front-end CSS v4.0
   Controls are positioned in the BLACK BARS outside
   the video container — they never overlap the iframe.
   iframe always has pointer-events:auto so YouTube's
   own play/pause/CC/settings always work normally.
═══════════════════════════════════════════════════ */

/* ── Grid & cards ── */
.kitchen-gallery-wrapper { position:relative; }
.kitchen-gallery-wrapper.clear::after { content:''; display:table; clear:both; }

.video-gallery-grid {
    display:grid;
    grid-template-columns:repeat(var(--bvg-columns,2),1fr);
    gap:30px; max-width:100%; margin:0 auto;
}
.video-gallery-item { display:flex; flex-direction:column; }

.video-thumbnail-link {
    display:block; position:relative; width:100%; aspect-ratio:16/9;
    overflow:hidden; border-radius:8px; text-decoration:none; cursor:pointer;
}
.video-thumbnail-link img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s cubic-bezier(.22,.68,0,1.2);
}
.video-thumbnail-link:hover img { transform:scale(1.04); }

.video-thumbnail-gradient {
    position:absolute; inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.45) 0%,transparent 55%);
    border-radius:8px; pointer-events:none;
}
.video-thumbnail-play-icon {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%;
    background:rgba(255,255,255,.94);
    display:flex; align-items:center; justify-content:center;
    z-index:2; box-shadow:0 4px 20px rgba(0,0,0,.18);
    transition:transform .3s cubic-bezier(.22,.68,0,1.4), box-shadow .3s;
}
.video-thumbnail-play-icon svg { width:20px; height:20px; fill:#111; margin-left:4px; }
.video-thumbnail-link:hover .video-thumbnail-play-icon {
    transform:translate(-50%,-50%) scale(1.1);
    box-shadow:0 8px 28px rgba(0,0,0,.28);
}
.video-gallery-title {
    margin:14px 0 0; text-align:center; font-weight:400;
}
.kg-empty { text-align:center; color:#888; font-style:italic; padding:40px 0; }

@media (max-width:640px) {
    .video-gallery-grid { grid-template-columns:1fr; gap:24px; }
    .video-thumbnail-play-icon { width:52px; height:52px; }
    .video-thumbnail-play-icon svg { width:17px; height:17px; }
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX BACKDROP
═══════════════════════════════════════════════════ */
#ytlb {
    position:fixed; inset:0; z-index:99999;
    background:#000; display:none;
    justify-content:center; align-items:center;
}
#ytlb.open { display:flex; }

/* ── Video container — sized to exact aspect ratio ── */
#ytlb-container {
    position:relative; overflow:hidden; background:#000;
    /* Container never fills full viewport — black bars exist around it.
       Our controls live in those bars, never over the iframe.          */
}
#ytlb-container.is-short {
    height:100vh; width:calc(100vh*(9/16)); max-width:100vw;
}
#ytlb-container.is-video {
    width:100vw; height:calc(100vw*(9/16)); max-height:100vh;
}
@media (max-aspect-ratio:16/9) {
    #ytlb-container.is-video {
        height:100vh; width:calc(100vh*(16/9));
    }
}

/* iframe — ALWAYS pointer-events:auto so YouTube controls work */
#ytlb-container iframe {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    border:none; background:#000;
    pointer-events:auto !important;  /* never disable — YouTube UI must work */
}

/* iOS: clip YouTube chrome */
@media (max-width:767px) {
    #ytlb-container iframe { top:-11% !important; height:122% !important; }
    #ytlb-container::before {
        content:''; position:absolute; top:0; left:0; right:0;
        height:11%; background:#000; z-index:5; pointer-events:none;
    }
    #ytlb-container::after { display:none !important; }
}

/* ── Poster overlay (inside container, above iframe) ── */
#ytlb-poster {
    position:absolute; inset:0; z-index:10;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
}
#ytlb-poster.visible { opacity:1; }
#ytlb-poster::after {
    content:''; position:absolute; top:50%; left:50%;
    width:42px; height:42px; margin:-21px 0 0 -21px;
    border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
    border-radius:50%; animation:kg-spin .8s linear infinite;
}
@keyframes kg-spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════
   CONTROLS — live in the black bars OUTSIDE the iframe
   They use position:fixed and are placed at the true
   viewport edges so they never sit over the video.

   Strategy:
   • Close  → top-right corner (always black bar area)
   • Prev   → left edge (black bar beside video)
   • Next   → right edge (black bar beside video)
   • Counter→ top-left (always black bar area)
   • Caption→ bottom (below video or over black bar)
   • Mobile controls → bottom-center (below video)

   Because these elements sit in the black padding area
   (not over the iframe), pointer-events work naturally
   on all devices with no tricks needed.
═══════════════════════════════════════════════════ */

/* Close — top right, always in black bar */
#ytlb-close {
    position:fixed; top:12px; right:12px; z-index:100002;
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.85); border:1.5px solid rgba(255,255,255,.15);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; pointer-events:all;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    transition:background .2s; user-select:none; -webkit-user-select:none;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
#ytlb-close:hover, #ytlb-close:active { background:rgba(180,0,0,.9); }

/* Prev — left edge */
#ytlb-prev {
    position:fixed; top:50%; left:8px; transform:translateY(-50%); z-index:100002;
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.85); border:1.5px solid rgba(255,255,255,.15);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; pointer-events:all;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    transition:background .2s, opacity .2s; user-select:none; -webkit-user-select:none;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

/* Next — right edge */
#ytlb-next {
    position:fixed; top:50%; right:8px; transform:translateY(-50%); z-index:100002;
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.85); border:1.5px solid rgba(255,255,255,.15);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; pointer-events:all;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    transition:background .2s, opacity .2s; user-select:none; -webkit-user-select:none;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

#ytlb-prev:hover, #ytlb-prev:active,
#ytlb-next:hover, #ytlb-next:active { background:rgba(255,255,255,.15); }

/* Hide class — use visibility so layout stays stable */
#ytlb-prev.hide, #ytlb-next.hide {
    opacity:0; pointer-events:none !important; cursor:default;
}

/* Caption — bottom, below video */
#ytlb-caption {
    position:fixed; bottom:0; left:0; right:0; z-index:100002;
    padding:14px 20px; background:rgba(0,0,0);
    color:#fff; text-align:center;
    font-size:.88rem; pointer-events:none; font-family:'Inter',sans-serif;
}

/* Counter — top left, black bar area */
#ytlb-counter {
    position:fixed; top:18px; left:16px; z-index:100002;
    color:rgba(255,255,255,.6); font-size:.82rem;
    pointer-events:none; font-family:'Inter',sans-serif;
}

/* Mobile controls bar — below video in black bar */
#ytlb-mobile-controls {
    position:fixed; bottom:55px; left:50%; transform:translateX(-50%);
    z-index:100002; display:flex; gap:12px; align-items:center;
}
.mc-btn {
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,.85); border:1.5px solid rgba(255,255,255,.15);
    color:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; pointer-events:all;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    transition:background .2s; user-select:none; -webkit-user-select:none;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.mc-btn:hover, .mc-btn:active { background:rgba(255,255,255,.15); }
.mc-btn svg {
    width:18px; height:18px; fill:#fff;
    display:block; flex-shrink:0; pointer-events:none;
}

@media (max-width:767px) {
    #ytlb-close  { width:40px; height:40px; top:10px; right:10px; }
    #ytlb-close svg { width:22px; height:22px; }
    #ytlb-prev   { width:40px; height:40px; left:4px; }
    #ytlb-next   { width:40px; height:40px; right:4px; }
    #ytlb-mobile-controls { gap:10px; }
    .mc-btn      { width:40px; height:40px; }
    .mc-btn svg  { width:16px; height:16px; }
}
@media (min-width:768px) {
    #ytlb-mobile-controls { display:none; }
}

/* ── Hide play button while video is playing ──
   display:none when playing, display:flex when paused/stopped.
   Zero effect on playback, autoplay, or mobile controls. ── */
#ytlb.kgp-playing #mc-play-visual {
    display: none;
}
#ytlb:not(.kgp-playing) #mc-play-visual {
    display: flex;
}