/* =========================================================
   work.css — the /work index page: hero, project groups,
   and the catch-all gallery.
   Depends on site.css (tokens, nav, cards, buttons, footer).
   Individual case studies use case-study.css instead.
   ========================================================= */

/* ---------- HERO ---------- */
.work-hero { padding: 9rem var(--gutter) 3rem; }
.work-hero .section-inner { max-width: var(--measure); }
.work-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 6.5vw, 4.75rem);
    font-weight: 400; line-height: 1.06;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}
.work-hero p {
    font-size: 1.15rem; line-height: 1.7;
    color: var(--text-secondary); max-width: 620px;
}

/* ---------- PROJECT GROUPS ---------- */
.work-index { padding-top: 2rem; }

/* each context group is its own block: a label, then its own grid */
.work-group { margin-bottom: 4rem; }
.work-group:last-child { margin-bottom: 0; }

.work-group-label {
    font-family: var(--font-sans);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-light);
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--stone-mid);
}

/* ---------- CATCH-ALL GALLERY ---------- */
/* Built on the same card language as the work cards: image on top,
   caption on its own ground underneath. The old treatment burned the
   caption into the image over a black gradient, which was the only
   place on the site that put white type on a scrim. */
.gallery { border-top: 1px solid var(--stone-mid); }
.gallery .section-inner { max-width: var(--measure); }

/* the group label needs air above it; it sits under the section intro
   rather than directly under a heading like the ones on the work index */
.gallery .work-group-label { margin-top: 2.75rem; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem; margin-top: 2.5rem;
}
.gallery-item { margin: 0; display: flex; }
.gallery-item > .gallery-trigger { display: flex; flex-direction: column; width: 100%; }
.gallery-item .gallery-meta { flex: 1; }

/* the whole card is the trigger — it opens the viewer, so it's a button */
.gallery-trigger {
    display: block; width: 100%; padding: 0;
    font: inherit; text-align: left; cursor: zoom-in;
    background: var(--cream);
    border: 1px solid var(--stone-mid);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.gallery-trigger:hover {
    border-color: var(--terracotta);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.gallery-shot {
    /* 4:3 is the compromise ratio: the set mixes square social posts with
       16:9 device mockups, and this crops least from either. The lightbox
       shows every image whole, so the thumb is an entry point, not the
       presentation. */
    display: block;                 /* it's a <span>; inline ignores both below */
    aspect-ratio: 4 / 3;
    overflow: hidden; background: #fff;
    border-bottom: 1px solid var(--stone-mid);
    transition: border-color 0.3s ease;
}
.gallery-trigger:hover .gallery-shot { border-color: var(--terracotta); }
.gallery-shot img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease;
}
.gallery-trigger:hover .gallery-shot img { transform: scale(1.03); }

.gallery-meta {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.gallery-eyebrow {
    font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-light);
    transition: color 0.3s ease;
}
.gallery-trigger:hover .gallery-eyebrow { color: var(--terracotta); }
.gallery-title {
    font-family: var(--font-serif);
    font-size: 1.15rem; font-weight: 400;
    letter-spacing: -0.01em; color: var(--text-primary);
}
.gallery-cue {
    /* bottom-aligned so the cues line up across the row even when an
       eyebrow wraps to two lines and its title drops */
    margin-top: auto; padding-top: 0.55rem;
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--terracotta);
    transition: gap 0.3s ease;
}
.gallery-trigger:hover .gallery-cue { gap: 0.75rem; }
.gallery-cue svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .work-hero { padding: 7rem var(--gutter-mobile) 2rem; }
}