/* Our Work page styles — Exterior Services LLC
   Shared components (nav, buttons, sections, mosaic, footer) are in base.css.
   This file covers: work hero, gallery filter + grid.
   .ba-slider promoted to base.css (Brief 6b). */

/* ══════════════════════════════════════════════════════════════════════════════
   WORK HERO — ~52vh, single .ph panel, no CTA
   Mobile Hero Law: at ≤880px image band first (natural ratio), text band below.
   Mirrors .svc-hero mobile pattern from service.css.
   ══════════════════════════════════════════════════════════════════════════════ */
.work-hero {
  position: relative;
  /* Brief 29 took this 52vh -> 64vh (60% of HRD-045 retained). Brief 35 applies
     the homepage's whole-photo ruling here too: band 3:2 to match HRD-045's
     native 1.500, capped at the viewport. At 1440x900 the cap binds at 836px =
     a 1.722 box keeping 87.1% — up from 60% — and the full pavilion ceiling is
     back. The 64vh floor stays so short windows never collapse the hero. The
     ≤880px block below still zeroes this out — mobile keeps its 4:3 band. */
  /* height, not aspect-ratio: ratio transfer would shrink the band's width
     (see home.css). 64vh floor retained for short windows. */
  height: min(calc(100vw / 1.5), calc(100svh - var(--nav-h)));
  min-height: 64vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.work-hero__img {
  position: absolute; inset: 0;
}
.work-hero__img .shot { height: 100%; border-radius: 0; }
.work-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 30%, transparent) 0%,
      color-mix(in srgb, var(--ink) 12%, transparent) 40%,
      color-mix(in srgb, var(--ink) 72%, transparent) 100%);
}
.work-hero__body {
  position: relative; z-index: 2;
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  text-align: center;
}
/* CONTAINED LEGIBILITY WASH (Brief 27 pt C.4). Measured on glyph pixels, this hero
   was failing AA at 1440 BEFORE the HRD-045 swap and independently of it: H1 1.99:1,
   eyebrow 1.75:1 against HRD-005. The cause is structural, not photographic — the
   .work-hero__scrim above is a whole-frame gradient that is only ~25% ink where the
   centred text actually sits (roughly 53% down the band), so any pale surface behind
   the words wins. Raising that scrim was rejected for the same reason Brief 19
   rejected it on the homepage: it darkens the entire photograph to fix one band.
   This wash is anchored to the TEXT BLOCK instead — it covers .work-hero__body only,
   is transparent at its top edge so there is no hard horizontal line across the
   photo, and leaves the upper third of the frame at full brightness.
   It is tuned to the TEXT ZONE, not to HRD-045, so it survives the next hero swap.
   TUNING LEVER: the 34%/62% stops are the wash's reach up the text block; the 55/78/82
   percentages are its depth. Do not raise beyond what legibility needs. */
.work-hero__body::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--ink) 55%, transparent) 34%,
    color-mix(in srgb, var(--ink) 78%, transparent) 62%,
    color-mix(in srgb, var(--ink) 82%, transparent) 100%);
}
/* The eyebrow sits on a dark surface at BOTH breakpoints — over the washed photo at
   desktop, over the solid --char text band at 390 — but .eyebrow's base colour is
   --green, which is the on-paper value. That is why it measured 1.75:1 at 1440 and
   2.47:1 at 390 before this brief: a pre-existing fault the homepage never showed
   because Brief 19b deleted its hero eyebrow. Scoped to this hero only.
   --green-lt (the site's established on-dark eyebrow colour) was measured FIRST and
   is not enough here: it clears 390 at 5.43:1 but only reaches 2.19:1 at 1440, and
   the arithmetic says the wash would have to run ~78% ink at the eyebrow line to
   carry a 12px green glyph to 4.5:1 — which crushes the lower two-thirds of the
   photograph to fix one 12px line. --paper clears 4.5:1 against the wash as already
   tuned, so the photo keeps its brightness. Same colour at both widths: one element
   that changes colour at a breakpoint is the more fragile answer. */
.work-hero .eyebrow { color: var(--paper); }
.work-hero .eyebrow::before,
.work-hero .eyebrow::after { background: color-mix(in srgb, var(--sand) 55%, transparent); }

.work-hero__h1 {
  margin-top: var(--sp-4);
  color: var(--paper);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600;
  max-width: 20ch; margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TRANSFORMATION GRID — two sliders side by side
   ══════════════════════════════════════════════════════════════════════════════ */
.trans-grid {
  margin-top: var(--sp-7);
  width: min(76rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALLERY FILTER CHIPS
   ══════════════════════════════════════════════════════════════════════════════ */
.gallery-filters {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3);
}
.gallery-chip {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
  background: transparent; color: var(--mut-d);
  font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.gallery-chip:hover {
  border-color: var(--green-lt); color: var(--green-lt);
}
.gallery-chip--active {
  background: var(--green); border-color: var(--green); color: var(--paper);
}
.gallery-chip--active:hover {
  background: var(--green-lt); border-color: var(--green-lt); color: var(--ink);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALLERY GRID — 16 tiles, 4 per category
   ══════════════════════════════════════════════════════════════════════════════ */
.gallery-grid {
  margin-top: var(--sp-7);
  width: min(76rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.gallery-tile .shot {
  aspect-ratio: 4 / 3;
  transition: translate 0.25s, box-shadow 0.25s;
}
.gallery-tile:hover .shot {
  translate: 0 -4px;
  box-shadow: var(--shadow-card);
}
.gallery-tile[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — ≤880px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* MOBILE HERO LAW — image band first at natural ratio, text band below */
  /* height:auto — the desktop min() height must not constrain the stacked band */
  .work-hero { display: block; height: auto; min-height: 0; }
  .work-hero__img {
    position: relative; inset: auto;
    aspect-ratio: 4 / 3; height: auto; overflow: hidden;
  }
  .work-hero__img .shot { height: 100%; }
  .work-hero__scrim { display: none; }
  .work-hero__body {
    background: var(--char); text-align: center;
    padding: var(--sp-6) var(--gutter);
  }
  /* The stacked band is already a solid --char panel, so the wash has nothing to do
     here — and a z-index:-1 child paints OVER its parent's own background, which
     would only darken the panel for no gain. Off below 880. */
  .work-hero__body::before { display: none; }
  .work-hero__h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .trans-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}