/* ── Auto Launch Masonry Gallery Block ───────────────────────────────────── */

.al-masonry-gallery {
    --al-mg-cols:   3;
    --al-mg-gap:    12px;
    --al-mg-radius: 6px;
    --al-mg-height: auto;

    column-count: var(--al-mg-cols);
    column-gap:   var(--al-mg-gap);
    width: 100%;
}

/* ── Items ─────────────────────────────────────────────────────────────── */
.al-mg-item {
    break-inside:  avoid;
    margin-bottom: var(--al-mg-gap);
    border-radius: var(--al-mg-radius);
    overflow:      hidden;
    position:      relative;
    cursor:        pointer;
    display:       block;
}

.al-mg-item img {
    width:         100%;
    height:        var(--al-mg-height);
    object-fit:    cover;
    display:       block;
    border-radius: var(--al-mg-radius);
    transition:    transform 0.3s ease, filter 0.3s ease;
    backface-visibility: hidden;
}

.al-mg-item:hover img {
    transform: scale(1.03);
    filter:    brightness(0.88);
}

/* ── Caption ────────────────────────────────────────────────────────────── */
.al-mg-caption {
    position:   absolute;
    bottom:     0; left: 0; right: 0;
    background: rgba(0,0,0,0.52);
    color:      #fff;
    font-size:  13px;
    font-weight: 500;
    padding:    10px 12px;
    line-height: 1.3;
    transition: opacity 0.25s ease;
}

[data-caption-mode="hover"] .al-mg-caption { opacity: 0; }
[data-caption-mode="hover"] .al-mg-item:hover .al-mg-caption { opacity: 1; }
[data-caption-mode="always"] .al-mg-caption { opacity: 1; }
[data-caption-mode="none"]   .al-mg-caption { display: none; }

/* ── Responsive — always 2 columns on mobile ────────────────────────────── */
@media (max-width: 768px) {
    .al-masonry-gallery:not(.al-mg-carousel) { column-count: 2 !important; }
}
@media (max-width: 360px) {
    .al-masonry-gallery { column-count: 1 !important; }
}

/* ── Show More ──────────────────────────────────────────────────────────── */
.al-mg-item.al-mg-hidden {
    display: none !important;
}

.al-mg-show-more-wrap {
    column-span: all;
    text-align: center;
    padding: 20px 0 4px;
    width: 100%;
}

/* Chain parent for specificity to beat GP's button:focus/active { color:#fff; background:#3f4047 } */
.al-masonry-gallery ~ .al-mg-show-more-wrap .al-mg-show-more-btn,
.al-mg-show-more-wrap .al-mg-show-more-btn,
.al-mg-show-more-wrap .al-mg-show-more-btn:link,
.al-mg-show-more-wrap .al-mg-show-more-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    background: transparent !important;
    color: #111 !important;
    border: 2px solid #111 !important;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s;
}
.al-mg-show-more-wrap .al-mg-show-more-btn:hover {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}
.al-mg-show-more-wrap .al-mg-show-more-btn:focus,
.al-mg-show-more-wrap .al-mg-show-more-btn:active {
    background: transparent !important;
    color: #111 !important;
    border-color: #111 !important;
    box-shadow: none !important;
    outline: 2px solid #111 !important;
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Lightbox
═══════════════════════════════════════════════════════════════════════════ */
.al-mg-lb {
    position: fixed;
    inset:    0;
    z-index:  99999;
    display:  flex;
    align-items: center;
    justify-content: center;
}

.al-mg-lb-backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.86);
}

.al-mg-lb-inner {
    position:      relative;
    z-index:       1;
    max-width:     92vw;
    max-height:    92vh;
    display:       flex;
    flex-direction: column;
    border-radius: 10px;
    overflow:      hidden;
    box-shadow:    0 24px 80px rgba(0,0,0,0.6);
}

/* ── Dark theme (default) ── */
.al-mg-lb-dark .al-mg-lb-inner  { background: #111; }
.al-mg-lb-dark .al-mg-lb-img-wrap { background: #0a0a0a; }
.al-mg-lb-dark .al-mg-lb-footer { background: #000; border-top: 1px solid rgba(255,255,255,0.08); color: #fff; }
.al-mg-lb-dark .al-mg-lb-close,
.al-mg-lb-dark .al-mg-lb-prev,
.al-mg-lb-dark .al-mg-lb-next  { background: #fff !important; color: #111 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.al-mg-lb-dark .al-mg-lb-close:hover, .al-mg-lb-dark .al-mg-lb-close:focus, .al-mg-lb-dark .al-mg-lb-close:active,
.al-mg-lb-dark .al-mg-lb-prev:hover,  .al-mg-lb-dark .al-mg-lb-prev:focus,  .al-mg-lb-dark .al-mg-lb-prev:active,
.al-mg-lb-dark .al-mg-lb-next:hover,  .al-mg-lb-dark .al-mg-lb-next:focus,  .al-mg-lb-dark .al-mg-lb-next:active
{ background: #e8e8e8 !important; color: #111 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }

/* ── Light theme ── */
.al-mg-lb-light .al-mg-lb-backdrop { background: rgba(255,255,255,0.88); }
.al-mg-lb-light .al-mg-lb-inner    { background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,0.18); }
.al-mg-lb-light .al-mg-lb-img-wrap { background: #f0f0f0; }
.al-mg-lb-light .al-mg-lb-footer   { background: #f5f5f5; border-top: 1px solid #e0e0e0; color: #111; }
.al-mg-lb-light .al-mg-lb-close,
.al-mg-lb-light .al-mg-lb-prev,
.al-mg-lb-light .al-mg-lb-next    { background: #fff !important; color: #111 !important; border: 1px solid #ddd; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.al-mg-lb-light .al-mg-lb-close:hover, .al-mg-lb-light .al-mg-lb-close:focus, .al-mg-lb-light .al-mg-lb-close:active,
.al-mg-lb-light .al-mg-lb-prev:hover,  .al-mg-lb-light .al-mg-lb-prev:focus,  .al-mg-lb-light .al-mg-lb-prev:active,
.al-mg-lb-light .al-mg-lb-next:hover,  .al-mg-lb-light .al-mg-lb-next:focus,  .al-mg-lb-light .al-mg-lb-next:active
{ background: #e8e8e8 !important; color: #111 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; }

/* ── Image wrap ── */
.al-mg-lb-img-wrap {
    position:   relative;
    display:    flex;
    align-items: center;
    justify-content: center;
    max-height: 78vh;
    overflow:   hidden;
    background: #000;
}

.al-mg-lb-img {
    max-width:  100%;
    max-height: 78vh;
    object-fit: contain;
    display:    block;
    opacity:    1;
    transition: opacity 0.2s ease;
}

/* ── Footer ── */
.al-mg-lb-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 16px;
    min-height:      44px;
    gap:             12px;
}

.al-mg-lb-caption {
    font-size:   14px;
    line-height: 1.4;
    flex:        1;
}

.al-mg-lb-counter {
    font-size:   12px;
    opacity:     0.6;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Buttons ── */
.al-mg-lb-close {
    position:      absolute;
    top:           10px;
    right:         10px;
    z-index:       2;
    width:         34px;
    height:        34px;
    border-radius: 50%;
    border:        none;
    font-size:     16px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s;
    font-family:   inherit;
}

.al-mg-lb-prev,
.al-mg-lb-next {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%);
    z-index:       2;
    width:         42px;
    height:        42px;
    border-radius: 50%;
    border:        none;
    font-size:     28px;
    line-height:   1;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.15s;
    font-family:   inherit;
    padding:       0 0 3px;
}

.al-mg-lb-prev { left:  10px; }
.al-mg-lb-next { right: 10px; }

@media (max-width: 540px) {
    .al-mg-lb-prev,
    .al-mg-lb-next { width: 34px; height: 34px; font-size: 22px; }
    .al-mg-lb-footer { padding: 8px 12px; }
}

/* ── Masonry Block — Carousel Layout ──────────────────────────────────────── */
.al-mg-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    --al-mg-accent: #EC0400;
    --al-mg-radius: 6px;
    --al-mg-height: 300px;
    --al-mg-per-view: 3;
    /* Override the base masonry multi-column layout */
    column-count: initial !important;
    column-gap: initial;
    display: block;
}

.al-mg-carousel-track-wrap {
    overflow: hidden;
    width: 100%;
    border-radius: var(--al-mg-radius);
}

.al-mg-carousel-track {
    display: flex;
    gap: var(--al-mg-gap, 12px);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.al-mg-carousel .al-mg-item {
    /* flex-basis is set inline by JS based on images-per-view */
    flex: 0 0 calc((100% - (var(--al-mg-per-view, 3) - 1) * var(--al-mg-gap, 12px)) / var(--al-mg-per-view, 3));
    max-width: 100%;
    margin: 0 !important;
    break-inside: auto;
    position: relative;
    border-radius: var(--al-mg-radius);
    overflow: hidden;
    cursor: pointer;
    display: block;
}

.al-mg-carousel .al-mg-item img {
    width: 100%;
    height: var(--al-mg-height);
    object-fit: cover;
    display: block;
}

.al-mg-carousel .al-mg-item:hover img {
    transform: none;
    filter: none;
}

.al-mg-carousel .al-mg-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
    font-size: 14px;
}

/* Arrows */
.al-mg-carousel-prev,
.al-mg-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: var(--al-mg-accent);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    padding: 0;
}

.al-mg-carousel-prev { left: 14px; }
.al-mg-carousel-next { right: 14px; }

.al-mg-carousel-prev:hover,
.al-mg-carousel-next:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

.al-mg-carousel-prev:disabled,
.al-mg-carousel-next:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Dots */
.al-mg-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 0 4px;
}

.al-mg-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--al-mg-accent);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.al-mg-carousel-dot-active,
.al-mg-carousel-dot:hover {
    background: var(--al-mg-accent);
    transform: scale(1.2);
}

@media (max-width: 600px) {
    .al-mg-carousel-prev,
    .al-mg-carousel-next {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    .al-mg-carousel-prev { left: 8px; }
    .al-mg-carousel-next { right: 8px; }
}