/**
 * Auto Launch — Thumbnail Gallery Block
 */
.al-thumb-gallery {
    --al-tg-accent:       #EC0400;
    --al-tg-radius:       10px;
    --al-tg-gap:          10px;
    --al-tg-main-height:  460px;
    --al-tg-thumb-height: 90px;
    --al-tg-thumb-cols:   4;

    width: 100%;
}

/* Main image */
.al-tg-main {
    width: 100%;
    border-radius: var(--al-tg-radius);
    overflow: hidden;
    margin-bottom: var(--al-tg-gap);
}

.al-thumb-gallery .al-tg-main:last-child {
    margin-bottom: 0;
    margin-top: var(--al-tg-gap);
}

.al-tg-main-img {
    width: 100%;
    height: var(--al-tg-main-height);
    object-fit: cover;
    display: block;
    border-radius: var(--al-tg-radius);
    transition: opacity 0.2s ease;
}

/* Thumbnail row */
.al-tg-thumbs {
    display: grid;
    grid-template-columns: repeat(var(--al-tg-thumb-cols), 1fr);
    gap: var(--al-tg-gap);
}

.al-tg-thumb {
    position: relative;
    padding: 0;
    margin: 0;
    border: 3px solid transparent;
    border-radius: calc(var(--al-tg-radius) - 2px);
    overflow: hidden;
    cursor: pointer;
    background: none;
    line-height: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.al-tg-thumb img {
    width: 100%;
    height: var(--al-tg-thumb-height);
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.al-tg-thumb:hover img {
    opacity: 0.85;
}

.al-tg-thumb-active {
    border-color: var(--al-tg-accent);
}

.al-tg-thumb:focus-visible {
    outline: 2px solid var(--al-tg-accent);
    outline-offset: 2px;
}

/* Responsive: fewer columns on small screens */
@media (max-width: 600px) {
    .al-tg-thumbs {
        grid-template-columns: repeat(min(var(--al-tg-thumb-cols), 4), 1fr);
    }
}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.al-tg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.al-tg-lightbox-open {
    opacity: 1;
    pointer-events: auto;
}

.al-tg-lightbox-dark  { background: rgba(0, 0, 0, 0.9); }
.al-tg-lightbox-light { background: rgba(255, 255, 255, 0.95); }

.al-tg-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.al-tg-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 40px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.al-tg-lightbox-light .al-tg-lightbox-close { color: #111; }
.al-tg-lightbox-close:hover { opacity: 1; }