/* =========================================================
   Susan Yeung — Private Collection (gallery.php)
   Reference: Lumen Artspace /gallery — dark hero + a fixed
   background image running behind the whole main section
   (hero and grid scroll over it, the image itself stays put),
   works paired two-up with every 3rd centered, and each
   work's title overlaid on the top-right of its own image.
   ========================================================= */

/* Dark theme scoped to this page only — gallery.css is loaded
   just for gallery.php, so overriding tokens here doesn't
   touch the rest of the site (about, home, etc.) */
body.page-gallery { 
    background: var(--bg);
}

/* Whole main section shares one fixed background image — it
   does not scroll; the hero copy and the artwork grid scroll
   over the top of it. */
body.page-gallery main {
    overflow: clip;
    position: relative;
    background-image: url('../img/bg/bg_7.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Fallback for mobile Safari, which doesn't support
   background-attachment: fixed reliably. */
@supports (-webkit-touch-callout: none) {
    body.page-gallery main { background-attachment: scroll; }
}

/* ---- Hero ---- */
.gallery-hero {
    position: relative;
    padding-top: clamp(9rem, 16vw, 12rem);
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    text-align: center;
}

.gallery-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.gallery-hero-inner .eyebrow {
    display: block;
    color: var(--secondaryBg);
    margin-bottom: 1.2rem;
}

.gallery-hero-title {
    font-size: clamp(2.8rem, 6.4vw, 4.6rem);
    line-height: 1;
    letter-spacing: -.01em;
    margin-bottom: 1.8rem;
    color: var(--secondaryBg);
}

.gallery-hero-title em {
    font-style: italic;
    color: var(--secondaryBg);
}

.gallery-hero-intro {
    font-size: .9rem;
    line-height: 1.85;
    color: var(--secondaryBg);
    max-width: 46ch;
    margin: 0 auto;
}

/* ---- Collection: pairs in a row, every 3rd centered below ---- */
.gallery-grid-section {
    position: relative;
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(5rem, 10vw, 8rem);
}

.gallery-collection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: clamp(3.5rem, 8vw, 6rem);
}

/* Every 3rd work spans both columns and sits centered on its
   own row — grid auto-placement then wraps the next two works
   back into a side-by-side pair, repeating the rhythm. */
.gallery-item:nth-child(3n) {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
}

.gallery-item {
    transition: opacity .4s ease;
}

/* Hovering the collection dims every work except the one
   being hovered, drawing focus to it. */
.gallery-collection:hover .gallery-item { opacity: .4; }
.gallery-collection:hover .gallery-item:hover { opacity: 1; }

.gallery-link {
    display: flex;
    align-items: stretch;
    gap: clamp(1.2rem, 3vw, 1.4rem);
}

.gallery-thumb {
    position: relative;
    overflow: hidden;
    background: var(--bg-soft);
    flex: 0 0 auto;
    width: clamp(11rem, 20vw, 15.5rem);
    aspect-ratio: 1 / 1;
    box-shadow: 0 22px 55px rgba(0,0,0,.5);
    align-self: flex-start;
}

.gallery-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 35%, rgba(0,0,0,.2));
    pointer-events: none;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}

.gallery-link:hover .gallery-thumb img { transform: scale(1.045); }

/* Caption column: title sits at the top (level with the top
   of the image), medium/size sits at the bottom (level with
   the image's bottom edge). */
.gallery-caption {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.gallery-title {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--secondaryBg);
    margin: 0;
    transition: color .3s ease;
}

.gallery-link:hover .gallery-title { 
    color: var(--accent-gold);
}

.gallery-caption p {
    margin-top: auto;
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--secondaryBg);
    line-height: 1.7;
}

@media (max-width: 767px) {
    .gallery-collection {
        grid-template-columns: 1fr;
        row-gap: clamp(2.4rem, 6vw, 3.5rem);
    }
    .gallery-item:nth-child(3n) { justify-content: flex-start; }
    .gallery-link {
        flex-direction: column;
        align-items: flex-start;
    }
    .gallery-thumb { width: 100%; }
}