/**
 * AC Faculty Blog — Gallery Styles
 *
 * Card Image Gallery layout for inline content galleries on single blog posts.
 *
 * @package AC_Faculty_Blog
 */

/* ============================================================
   DESIGN TOKENS & BASE
   ============================================================ */

.acfb-gallery {
    --acfb-green:      #006341;
    --acfb-green-dark: #004e33;
    --acfb-white:      #ffffff;
    --acfb-font:       'Metropolis', Arial, Helvetica, sans-serif;

    width: 100%;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0;
    font-family: var(--acfb-font);
}

.acfb-gallery *,
.acfb-gallery *::before,
.acfb-gallery *::after {
    box-sizing: border-box;
}

/* Viewport */
.acfb-gallery__viewport {
    position: relative;
    width: 100%;
}

/* Hidden pages occupy zero space */
.acfb-gallery__page[hidden],
.acfb-gallery__page:not(.acfb-gallery__page--active) {
    display: none !important;
}

/* Active page layout (2 columns: Left feature, Right 2x2 grid) */
.acfb-gallery__page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    width: 100%;
}


/* ============================================================
   SINGLE IMAGE LAYOUT (1 image total)
   ============================================================ */

.acfb-gallery--single .acfb-gallery__page {
    display: flex;
    justify-content: center;
    max-width: 670px;
    margin: 0 auto;
}

.acfb-gallery--single .acfb-gallery__feature {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 32px;
    overflow: hidden;
}


/* ============================================================
   FEATURE TILE (Left column)
   ============================================================ */

.acfb-gallery__feature {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 32px;
    overflow: hidden;
    background: #000000;
}

.acfb-gallery__feature img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: filter 0.3s ease;
}

.acfb-gallery__feature img:hover {
    filter: brightness(1.05);
}


/* ============================================================
   SMALL IMAGE GRID (2×2, Right column)
   ============================================================ */

.acfb-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.acfb-gallery__grid-item {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 32px;
    overflow: hidden;
    background: #000000;
}

.acfb-gallery__grid-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: filter 0.3s ease;
}

.acfb-gallery__grid-item img:hover {
    filter: brightness(1.05);
}


/* ============================================================
   NAVIGATION (Prev / Next buttons)
   ============================================================ */

.acfb-gallery__nav {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 24px auto 0 auto !important;
    padding: 8px 0 !important;
    background: transparent !important;
    float: none !important;
    clear: both !important;
}

.acfb-gallery__nav-btn {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: var(--acfb-green) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.acfb-gallery__nav-btn:hover {
    background-color: #f4f8f5 !important;
    border-color: var(--acfb-green) !important;
    color: var(--acfb-green-dark) !important;
}

.acfb-gallery__nav-btn:focus-visible {
    outline: 2px solid var(--acfb-green) !important;
    outline-offset: 3px !important;
}

.acfb-gallery__nav-btn[aria-disabled="true"] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.acfb-gallery__nav-btn svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
}


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
    .acfb-gallery__page {
        gap: 14px;
    }

    .acfb-gallery__grid {
        gap: 14px;
    }

    .acfb-gallery__feature,
    .acfb-gallery__grid-item {
        border-radius: 24px;
    }
}

@media (max-width: 768px) {
    .acfb-gallery__page {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .acfb-gallery__page[hidden],
    .acfb-gallery__page:not(.acfb-gallery__page--active) {
        display: none !important;
    }

    .acfb-gallery__feature {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .acfb-gallery__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        gap: 12px !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .acfb-gallery__grid-item {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .acfb-gallery__nav {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 16px !important;
        padding: 0 !important;
        background: transparent !important;
        float: none !important;
    }
}