/* =====================================================
   YT Gallery Manager — Frontend Styles
   ===================================================== */

.ytgm-gallery-wrap { width: 100%; margin: 24px 0; }

/* ---- Grid ---- */
.ytgm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .ytgm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ytgm-grid { grid-template-columns: 1fr; } }

/* ---- Item ---- */
.ytgm-item {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
    transition: transform .25s ease, box-shadow .25s ease, outline .2s ease;
    background: #000;
    outline: 3px solid transparent;
}
.ytgm-item:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(220,108,79,.5);
    outline-color: #dc6c4f;
}

.ytgm-thumb-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background: #111;
}

.ytgm-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease, opacity .3s ease;
    z-index: 1;
}
.ytgm-item:hover .ytgm-thumb-img { transform: scale(1.06); }
.ytgm-item.ytgm-previewing .ytgm-thumb-img { opacity: 0; }

/* ---- Hover preview ---- */
.ytgm-hover-preview {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    background: #000;
}
.ytgm-hover-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: none;
    display: block;
    pointer-events: none; /* el clic pasa al .ytgm-item */
}
.ytgm-item.ytgm-previewing .ytgm-hover-preview { opacity: 1; pointer-events: none; }

/* Overlay naranja */
.ytgm-hover-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(220,108,79,.2);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.ytgm-item:hover .ytgm-hover-overlay { opacity: 1; }

/* Play button */
.ytgm-play-btn {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.15);
    transition: background .25s, opacity .3s;
}
.ytgm-item:hover .ytgm-play-btn { background: rgba(0,0,0,.3); }
.ytgm-item.ytgm-previewing .ytgm-play-btn { opacity: 0; pointer-events: none; }
.ytgm-play-btn svg {
    width: 60px; height: 42px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
    transition: transform .25s;
}
.ytgm-item:hover .ytgm-play-btn svg { transform: scale(1.12); }

/* Title overlay */
.ytgm-overlay-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 5;
    padding: 28px 12px 10px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s, transform .25s;
}
.ytgm-item:hover .ytgm-overlay-title { opacity: 1; transform: translateY(0); }

/* =====================================================
   Lightbox — NO usar display:flex aquí, el JS lo maneja
   ===================================================== */
.ytgm-lightbox {
    /* display se controla solo via JS (style="display:none / flex") */
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}
/* Solo aplicar flex cuando el JS lo abre */
.ytgm-lightbox[style*="flex"] {
    align-items: center;
    justify-content: center;
}

.ytgm-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.92);
    cursor: pointer;
}
.ytgm-lb-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 960px;
    padding: 0 60px;
    box-sizing: border-box;
}
.ytgm-lb-iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #000;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.ytgm-lb-iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: none;
    display: block;
    border-radius: 10px;
}

/* X sobre el video */
.ytgm-lb-close {
    position: absolute !important;
    top: -16px !important;
    right: -16px !important;
    z-index: 10 !important;
    background: #dc6c4f !important;
    color: #fff !important;
    border: 3px solid rgba(0,0,0,.35) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, transform .2s !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.5) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ytgm-lb-close:hover {
    background: #b94f35 !important;
    transform: scale(1.14) !important;
}

.ytgm-lb-content { flex: 1; min-width: 0; }
.ytgm-lb-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 2px;
    gap: 10px;
}
.ytgm-lb-title {
    color: #f1f1f1;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ytgm-lb-counter { color: #aaa; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

/* Botones prev / next */
.ytgm-lb-prev,
.ytgm-lb-next {
    position: absolute !important;
    top: calc(50% - 20px) !important;
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    border: none !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, transform .2s !important;
    backdrop-filter: blur(4px) !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ytgm-lb-prev { left: 10px !important; }
.ytgm-lb-next { right: 10px !important; }
.ytgm-lb-prev:hover,
.ytgm-lb-next:hover {
    background: #dc6c4f !important;
    transform: translateY(-50%) scale(1.1) !important;
}
.ytgm-lb-prev:disabled,
.ytgm-lb-next:disabled {
    opacity: .25 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Animaciones */
.ytgm-lightbox.ytgm-lb-open { animation: ytgm-lb-fade .25s ease both; }
@keyframes ytgm-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.ytgm-lb-content.ytgm-lb-slide { animation: ytgm-lb-slide-in .2s ease both; }
@keyframes ytgm-lb-slide-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* Responsive */
@media (max-width: 700px) {
    .ytgm-lb-container { padding: 0 44px; }
    .ytgm-lb-prev { left: 4px !important; width: 38px !important; height: 38px !important; font-size: 16px !important; }
    .ytgm-lb-next { right: 4px !important; width: 38px !important; height: 38px !important; font-size: 16px !important; }
    .ytgm-lb-close { top: -13px !important; right: -13px !important; width: 32px !important; height: 32px !important; font-size: 18px !important; }
    .ytgm-lb-title { font-size: 12px; }
}

body.ytgm-lock { overflow: hidden; }