/* ============================================================
   Eadhi Portfolio Grid v2 – Stylesheet
   ── Customisation guide at the bottom of this file ──
   ============================================================ */

/* ── Design tokens – edit these to match your Divi theme ───── */
:root {
    --epg-accent:        #1a1a1a;      /* filter button active bg / border  */
    --epg-accent-text:   #ffffff;      /* text on active filter button       */
    --epg-overlay-bg:    rgba(0,0,0,0.65);
    --epg-overlay-title: #ffffff;
    --epg-overlay-cats:  rgba(255,255,255,0.72);
    --epg-btn-radius:    3px;
    --epg-gap:           10px;         /* card gutter (half applied as padding) */
    --epg-transition:    0.35s ease;
}

/* ── Wrapper ───────────────────────────────────────────────── */
.epg2-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* ── Filter nav ─────────────────────────────────────────────── */
.epg2-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
    justify-content: center;
}

/* ── Shared button base ──────────────────────────────────────── */
.epg2-btn {
    display: inline-block;
    padding: 9px 24px;
    border: 2px solid var(--epg-accent);
    background: transparent;
    color: var(--epg-accent);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--epg-btn-radius);
    line-height: 1.5;
    transition: background var(--epg-transition), color var(--epg-transition),
                opacity var(--epg-transition);
    -webkit-appearance: none;
    appearance: none;
}

.epg2-btn:hover {
    background: var(--epg-accent);
    color: var(--epg-accent-text);
}

.epg2-btn.is-active {
    background: var(--epg-accent);
    color: var(--epg-accent-text);
}

.epg2-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Grid region (wraps grid + loading indicator) ────────────── */
.epg2-grid-region {
    position: relative;
    min-height: 60px;  /* keeps region visible while loading */
}

/* ── Grid container ──────────────────────────────────────────── */
.epg2-grid {
    position: relative;
    /* height set by JS masonry */
    transition: opacity 0.25s ease;
}

.epg2-grid.is-loading {
    opacity: 0.35;
    pointer-events: none;
}

/* ── Individual card ─────────────────────────────────────────── */
.epg2-item {
    box-sizing: border-box;
    padding: calc( var(--epg-gap) / 2 );
    /* position:absolute + top/left/width set by JS */
}

.epg2-item__inner {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border-radius: 3px;
    background: #f0f0f0;
}

.epg2-item__inner img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.epg2-item__placeholder {
    width: 100%;
    padding-bottom: 65%;
    background: #e0e0e0;
}

/* ── Hover overlay ───────────────────────────────────────────── */
.epg2-item__overlay {
    position: absolute;
    inset: 0;
    background: var(--epg-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--epg-transition);
}

.epg2-item__overlay-body {
    text-align: center;
    padding: 20px 28px;
    transform: translateY(10px);
    transition: transform var(--epg-transition);
}

.epg2-item__inner:hover .epg2-item__overlay,
.epg2-item__inner:focus-visible .epg2-item__overlay {
    opacity: 1;
}

.epg2-item__inner:hover .epg2-item__overlay-body,
.epg2-item__inner:focus-visible .epg2-item__overlay-body {
    transform: translateY(0);
}

.epg2-item__inner:hover img {
    transform: scale(1.06);
}

.epg2-item__title {
    color: var(--epg-overlay-title);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.3;
}

.epg2-item__cats {
    display: block;
    color: var(--epg-overlay-cats);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── Loading spinner ─────────────────────────────────────────── */
.epg2-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.epg2-grid-region.is-loading .epg2-loading {
    opacity: 1;
}

.epg2-spinner {
    display: block;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: var(--epg-accent);
    border-radius: 50%;
    animation: epg2Spin 0.7s linear infinite;
}

@keyframes epg2Spin {
    to { transform: rotate(360deg); }
}

/* ── Load More ───────────────────────────────────────────────── */
.epg2-load-more-wrap {
    text-align: center;
    margin-top: 48px;
}

.epg2-btn--more {
    min-width: 160px;
}

/* ── Item entrance animation ─────────────────────────────────── */
@keyframes epg2FadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.epg2-item {
    animation: epg2FadeUp 0.4s ease both;
}

/* Stagger new items appended by Load More */
.epg2-item[data-new] {
    animation-delay: calc( var(--epg2-idx, 0) * 60ms );
}

/* ── Responsive ──────────────────────────────────────────────── */
/* JS reduces column count at breakpoints; on mobile CSS takes over */
@media (max-width: 767px) {
    .epg2-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        position: relative !important;
    }

    .epg2-item {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }
}

/* ── Accessibility: reduce motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .epg2-item,
    .epg2-item[data-new],
    .epg2-item__inner img,
    .epg2-item__overlay,
    .epg2-item__overlay-body,
    .epg2-grid {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Hidden: used during region swap on filter change ───────── */
.epg2-grid.is-empty::after {
    content: 'No projects found.';
    display: block;
    text-align: center;
    padding: 40px 0;
    color: #888;
    font-size: 14px;
}

/*
 * ── Customisation quick-ref ──────────────────────────────────
 *
 *  Accent colour   → --epg-accent            (top :root block)
 *  Card gutter     → --epg-gap               (top :root block)
 *  Overlay colour  → --epg-overlay-bg        (top :root block)
 *  Button radius   → --epg-btn-radius        (top :root block)
 *  Hover scale     → .epg2-item__inner:hover img → transform: scale(X)
 *
 *  All variables work inside Divi's Custom CSS panel too.
 */