/* School Media Embed KB — галерея, изображение, видео, лайтбокс (грузится только при использовании шорткодов) */

/* ---------- Галерея (сетка) ---------- */
.sme-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin: 0 0 20px;
}

.sme-gallery-columns-1 { grid-template-columns: minmax(0, 1fr); }
.sme-gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sme-gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sme-gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sme-gallery-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sme-gallery-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.sme-gallery-gap-none { gap: 0; }
.sme-gallery-gap-small { gap: 5px; }
.sme-gallery-gap-medium { gap: 15px; }
.sme-gallery-gap-large { gap: 30px; }

.sme-gallery.alignleft,
.sme-gallery.alignright { max-width: 50%; }

.sme-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    margin: 0;
}

.sme-gallery-item > a { display: block; }

.sme-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.sme-gallery-item:hover img { transform: scale(1.05); }

/* Пропорции плиток */
.sme-gallery-ratio-square .sme-gallery-item img { aspect-ratio: 1 / 1; object-fit: cover; }
.sme-gallery-ratio-4-3 .sme-gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }
.sme-gallery-ratio-3-2 .sme-gallery-item img { aspect-ratio: 3 / 2; object-fit: cover; }
.sme-gallery-ratio-16-9 .sme-gallery-item img { aspect-ratio: 16 / 9; object-fit: cover; }

.sme-gallery-caption {
    display: block;
    padding: 6px 4px;
    font-size: 0.85em;
    line-height: 1.4;
    text-align: center;
    color: #555;
}

/* Старый готовый HTML галерей (без классов ratio): прежний вид — фото заполняют ячейку */
.sme-gallery:not([class*="sme-gallery-ratio-"]):not(.sme-gallery-tiles) .sme-gallery-item img {
    height: 100%;
    object-fit: cover;
}
/* ---------- Плитки фиксированного размера (совместимость со старым [su_custom_gallery]) ---------- */
.sme-gallery-tiles { display: flex; flex-wrap: wrap; }
.sme-gallery-tiles .sme-gallery-item { flex: 0 0 auto; max-width: 100%; }
.sme-gallery-tiles .sme-gallery-item > a { height: 100%; }
.sme-gallery-tiles .sme-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.sme-gallery-justify-left { justify-content: flex-start; }
.sme-gallery-justify-center { justify-content: center; }
.sme-gallery-justify-right { justify-content: flex-end; }

.sme-tile-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 8px;
    font-size: 0.85em;
    line-height: 1.3;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.sme-tile-title-hover { opacity: 0; transition: opacity 0.25s; }
.sme-gallery-item:hover .sme-tile-title-hover { opacity: 1; }

.sme-notice {
    padding: 8px 12px;
    background: #fff8e5;
    border-left: 4px solid #dba617;
    font-size: 0.9em;
}

/* ---------- Одиночное изображение ---------- */
.sme-image { margin: 0 0 1em; }
.sme-image.aligncenter { margin-left: auto; margin-right: auto; }
.sme-image.alignleft,
.sme-image.alignright { max-width: 50%; }
.sme-image a { display: block; }
.sme-image-img { display: block; max-width: 100%; height: auto; }
.sme-image-caption {
    padding: 0.5em 0;
    font-size: 0.9em;
    line-height: 1.5;
    text-align: center;
    color: #666;
}

/* ---------- Адаптивное видео ---------- */
.sme-video { margin: 0 0 1em; max-width: 100%; }
.sme-video.aligncenter { margin-left: auto; margin-right: auto; }
.sme-video.alignleft,
.sme-video.alignright { width: 50%; }
.sme-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* ---------- Лайтбокс ---------- */
.sme-lb {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sme-lb.sme-lb-active { opacity: 1; visibility: visible; }

.sme-lb-figure {
    position: relative;
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sme-lb-img {
    display: block;
    max-width: 92vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s;
}
.sme-lb-img.sme-lb-loading { opacity: 0.25; }

.sme-lb-caption {
    margin-top: 10px;
    max-width: 80vw;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}
.sme-lb-caption[hidden] { display: none; }

.sme-lb-counter {
    position: absolute;
    top: 14px;
    left: 16px;
    color: #fff;
    font-size: 14px;
    opacity: 0.85;
}

.sme-lb-btn {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font: 28px/1 Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s;
}
.sme-lb-btn:hover,
.sme-lb-btn:focus { background: rgba(255, 255, 255, 0.35); outline: 2px solid #fff; outline-offset: 1px; }
.sme-lb-close { top: 12px; right: 12px; font-size: 32px; }
.sme-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.sme-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.sme-lb-single .sme-lb-prev,
.sme-lb-single .sme-lb-next,
.sme-lb-single .sme-lb-counter { display: none; }

html.sme-lb-open { overflow: hidden; }

/* ---------- Мобильные ---------- */
@media (max-width: 600px) {
    .sme-gallery-columns-3,
    .sme-gallery-columns-4,
    .sme-gallery-columns-5,
    .sme-gallery-columns-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sme-gallery.alignleft,
    .sme-gallery.alignright,
    .sme-image.alignleft,
    .sme-image.alignright,
    .sme-video.alignleft,
    .sme-video.alignright { float: none; max-width: 100%; width: auto; margin-left: 0; margin-right: 0; }

    .sme-lb-prev { left: 6px; }
    .sme-lb-next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .sme-gallery-item img,
    .sme-lb,
    .sme-lb-img { transition: none; }
    .sme-gallery-item:hover img { transform: none; }
}