/* =========================================================
   FBL GALLERY - grid / carousel / masonry views
   Token-driven; falls back gracefully if a token is absent
   ========================================================= */

.fbl-gallery {
    margin: var(--fbl-space-lg, 2rem) 0;
}

.fbl-gallery-error {
    padding: 0.75rem 1rem;
    background: #fff3f3;
    border-left: 4px solid #dc3232;
    font-size: 0.9rem;
}

.fbl-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fbl-radius, 8px);
}

.fbl-gallery-link {
    display: block;
    overflow: hidden;
    border-radius: var(--fbl-radius, 8px);
}

.fbl-gallery-link .fbl-gallery-image {
    transition: transform 0.3s ease;
}

.fbl-gallery-link:hover .fbl-gallery-image {
    transform: scale(1.04);
}

.fbl-gallery-caption {
    padding: 0.4rem 0.25rem 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--fbl-color-text-muted, #666);
    text-align: center;
}

.fbl-gallery--carousel .fbl-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 3.5rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 1;
}
/* ---------------- GRID ---------------- */

.fbl-gallery--grid {
    display: grid;
    grid-template-columns: repeat(var(--fbl-gallery-columns, 3), 1fr);
    gap: var(--fbl-space-md, 1rem);
}

.fbl-gallery--grid .fbl-gallery-image {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------------- MASONRY ---------------- */

.fbl-gallery--masonry {
    columns: var(--fbl-gallery-columns, 3);
    column-gap: var(--fbl-space-md, 1rem);
}

.fbl-gallery--masonry .fbl-gallery-item {
    break-inside: avoid;
    margin-bottom: var(--fbl-space-md, 1rem);
}

/* ---------------- CAROUSEL ---------------- */

.fbl-gallery--carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--fbl-radius, 8px);
}

.fbl-gallery--carousel .fbl-gallery-item {
    display: none;
}

.fbl-gallery--carousel .fbl-gallery-item.is-active {
    display: block;
    animation: fbl-gallery-fade 0.6s ease;
}

.fbl-gallery--carousel .fbl-gallery-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
}

.fbl-gallery--fit-contain.fbl-gallery--carousel .fbl-gallery-image {
    object-fit: contain;
    background: var(--fbl-color-surface-dark, #1a1a1a);
}

.fbl-gallery--fit-contain.fbl-gallery--grid .fbl-gallery-image {
    object-fit: contain;
    background: var(--fbl-color-surface-dark, #1a1a1a);
}

@keyframes fbl-gallery-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fbl-gallery-prev,
.fbl-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    transition: background 0.2s ease;
}

.fbl-gallery-prev:hover,
.fbl-gallery-next:hover {
    background: var(--fbl-color-primary, rgba(0, 0, 0, 0.75));
}
/* Contain mode: keep the grey circle with a white arrow (matches cover mode) */
.fbl-gallery--fit-contain .fbl-gallery-prev,
.fbl-gallery--fit-contain .fbl-gallery-next {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.fbl-gallery--fit-contain .fbl-gallery-prev:hover,
.fbl-gallery--fit-contain .fbl-gallery-next:hover {
    background: var(--fbl-color-primary, rgba(0, 0, 0, 0.75));
    color: #fff;
}
.fbl-gallery-prev { left: 12px; }
.fbl-gallery-next { right: 12px; }

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 980px) {
    .fbl-gallery--grid    { grid-template-columns: repeat(2, 1fr); }
    .fbl-gallery--masonry { columns: 2; }
}

@media (max-width: 600px) {
    .fbl-gallery--grid    { grid-template-columns: repeat(1, 1fr); }
    .fbl-gallery--masonry { columns: 1; }

    .fbl-gallery-prev,
    .fbl-gallery-next {
        width: 36px;
        height: 36px;
    }
}
/* Arrow glyphs are SVG with stroke="currentColor" — force white regardless of
   any inherited button color from Divi/resets. */
.fbl-gallery-prev svg,
.fbl-gallery-next svg,
.fbl-gallery--fit-contain .fbl-gallery-prev svg,
.fbl-gallery--fit-contain .fbl-gallery-next svg {
    stroke: #fff !important;
    color: #fff !important;
}