/* ── Project Gallery — Frontend Styles ───────────────────────── */

:root {
    --pg-green:     #1A3D2B;
    --pg-sage:      #52B788;
    --pg-cream:     #F8F8F8;
    --pg-parchment: #F2EDE6;
    --pg-gold:      #C9A96E;
    --pg-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── 12-column masonry grid ──────────────────────────────────── */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}

/* Grid span classes */
.gc-8  { grid-column: span 8;  height: 380px; }
.gc-4  { grid-column: span 4;  height: 380px; }
.gc-6  { grid-column: span 6;  height: 300px; }
.gc-3  { grid-column: span 3;  height: 300px; }
.gc-5  { grid-column: span 5;  height: 300px; }
.gc-7  { grid-column: span 7;  height: 300px; }
.gc-4s { grid-column: span 4;  height: 260px; }

/* ── Gallery item ────────────────────────────────────────────── */
.pg-item {
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    background: var(--pg-parchment);
    cursor: pointer;
}
.pg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--pg-ease), filter .5s;
}
.pg-item:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
}
.pg-item:focus {
    outline: 2px solid var(--pg-sage);
    outline-offset: 2px;
}

/* Hover overlay */
.pg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 61, 43, .4);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .4s;
}
.pg-item:hover .pg-overlay { opacity: 1; }
.pg-overlay svg {
    color: rgba(248, 248, 248, .85);
    width: 28px;
    height: 28px;
}
@media (hover: none) {
    .pg-overlay { opacity: 1; }
}

/* ── Lightbox ────────────────────────────────────────────────── */
.pg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(10, 14, 10, .96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.pg-lb-img-wrap {
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-lb-img-wrap img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
    transition: opacity .2s, transform .2s;
}

/* Close button */
.pg-lb-close {
    position: fixed;
    top: 28px;
    right: 36px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid rgba(248, 248, 248, .2);
    background: transparent;
    color: rgba(248, 248, 248, .6);
    font-size: 1.2rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .3s, color .3s, background .3s;
    z-index: 100000;
}
.pg-lb-close:hover {
    border-color: var(--pg-sage);
    color: var(--pg-sage);
    background: rgba(82, 183, 136, .1);
}

/* Prev / Next */
.pg-lb-prev,
.pg-lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(248, 248, 248, .15);
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .3s, background .3s;
    z-index: 100000;
}
.pg-lb-prev { left: 28px; }
.pg-lb-next { right: 28px; }
.pg-lb-prev:hover,
.pg-lb-next:hover {
    border-color: var(--pg-sage);
    background: rgba(82, 183, 136, .1);
}
.pg-lb-prev svg,
.pg-lb-next svg {
    stroke: rgba(248, 248, 248, .7);
    width: 18px;
    height: 18px;
    fill: none;
}

/* Counter */
.pg-lb-counter {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(248, 248, 248, .35);
    z-index: 100000;
    font-family: -apple-system, sans-serif;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pg-section { padding: 64px 40px 80px; }
}

@media (max-width: 768px) {
    .pg-section { padding: 56px 16px 72px; }
    .pg-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pg-header p { text-align: left; max-width: 100%; }
    .pg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .gc-8, .gc-4, .gc-6, .gc-3, .gc-5, .gc-7, .gc-4s {
        grid-column: span 2 !important;
        height: 220px;
    }
    .pg-item:nth-child(1) { grid-column: span 2 !important; height: 260px; }
    .pg-item:nth-child(2),
    .pg-item:nth-child(3) { grid-column: span 1 !important; height: 180px; }
    .pg-lightbox { padding: 20px; }
    .pg-lb-prev { left: 8px; }
    .pg-lb-next { right: 8px; }
}

@media (max-width: 480px) {
    .pg-grid { grid-template-columns: 1fr; }
    .pg-item { grid-column: span 1 !important; height: 220px !important; }
    .gc-8, .gc-4, .gc-6, .gc-3, .gc-5, .gc-7, .gc-4s { height: 200px; }
}