/* ==========================================================================
   Africa Brand | page-work.css | Our Work page only, loaded after main.css
   Sticky filter band (spec 4.14), gallery grid additions (4.7), native
   <dialog> lightbox (4.12). Colours are tokens and the rgba() recipes that
   main.css already uses; every two-layer background follows Rule B1.
   ========================================================================== */

/* ---- 1. Compact hero: copy column only, the gallery is the visual; inner-page h1 size (spec 2.3) ---- */
.hero--compact h1 { font-size: var(--fs-h1); }
.hero--compact .hero__copy { max-width: 760px; }
.hero--compact .hero__lead { max-width: 62ch; }

/* ---- 2. Sticky filter band (4.14) ----
   The whole light band sticks under the compact bar (the .silk section itself is the sticky box, so it
   sticks for the full height of the gallery). Its own chrome lines travel with it; the page dividers
   stay at the seams. */
.filters-band { position: sticky; top: var(--nav-h-compact); z-index: var(--z-filterbar); padding: .7rem 0; }
.filters-band::before, .filters-band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 2; background: var(--chrome-line); opacity: .6; pointer-events: none; }
.filters-band::before { top: 0; }
.filters-band::after { bottom: 0; }
.filters-band .silk__wash { background: radial-gradient(70% 120% at 28% 50%, rgba(247,243,238,.9), transparent 70%); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.chip { --bevel-angle: 200deg; position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .9rem .5rem; border-radius: var(--r-pill); border: 1px solid rgba(74,10,18,.18); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box; font: 600 .8rem/1.2 var(--font-body); letter-spacing: .01em; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: color .25s, box-shadow .3s, transform .25s var(--ease), --bevel-angle .8s var(--ease); }
/* Molten underline: draws from the centre when the chip is pressed. */
.chip::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 0; height: 2px; border-radius: 2px; background: var(--grad-molten); transform: translateX(-50%); transition: width .3s var(--ease); }
.chip:hover { color: var(--ink); border-color: transparent; background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: 0 6px 16px -10px rgba(74,10,18,.4); }
.chip[aria-pressed="true"] { --bevel-angle: 560deg; color: var(--crimson); border-color: transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); }
.chip[aria-pressed="true"]::after { width: calc(100% - 1.9rem); }

/* ---- 3. Gallery (4.7 on Work) ----
   Cells: 19 landscape + the portrait card (two rows) + the billboard finale (three columns, 21:9) = 24 = eight full rows
   on desktop; below 1024 the finale is an ordinary card and the two-column grid closes at 22 cells (eleven rows). */
#gallery { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.gallery-grid { grid-auto-flow: dense; transition: opacity .25s var(--ease); }
.gallery-grid.is-filtering { opacity: 0; }
.gallery-grid .proj[hidden] { display: none; }
.gallery-grid .proj--portrait { grid-row: span 2; }
/* Deep links (work.html#<slug>) land below the sticky band, not under it. */
.gallery-grid .proj { scroll-margin-top: calc(var(--nav-h-compact) + 112px); }
/* No content-visibility on the cards (4.14 suggests it): paint containment on the figure would clip the halo that bleeds 9 percent
   outside every frame, and on the media box it left every card below the fold unpainted in full-page and print rendering. */
.gallery-grid .proj__open:hover .glow-frame, .gallery-grid .proj__open:focus-visible .glow-frame { box-shadow: var(--glow-img-hover); }
/* Light trails between rows: the three bars are full-width grid rows (after cards 6, 14 and 20), so they always run through
   a row gap and never behind a caption. main.css sweeps them 150vw over the section's --p; the section is about 3,900px tall
   at 1440, so each bar carries a left offset that centres it in the viewport while its own rows are on screen. */
.gallery-grid .fx-trail { position: relative; top: auto; grid-column: 1 / -1; margin: -13px 0; }
.gallery-grid .fx-trail--a { left: 63vw; }
.gallery-grid .fx-trail--b { left: 46vw; }
.gallery-grid .fx-trail--c { left: -5vw; }
.gallery-grid.is-filtered .fx-trail { display: none; }
@media (min-width: 1024px) {
  /* The row gap moves onto the cards so a trail row (2px, pulled into the gap by its margin) adds no height of its own. */
  .gallery-grid { row-gap: 0; }
  .gallery-grid > .proj { margin-bottom: 1.5rem; }
  .gallery-grid .proj--panorama { grid-column: 1 / -1; }
  .gallery-grid .proj--panorama .glow-frame__media { aspect-ratio: 21 / 9; flex: none; }
}

/* ---- 4. Portfolio call to action (L) ---- */
.pcta .sec-head { margin-bottom: 2rem; }
.pcta__disclaimer { max-width: 78ch; margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-line); color: var(--text-on-light-3); line-height: 1.6; }

/* ---- 5. Lightbox (4.12): native dialog in the top layer ---- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-on-dark); overflow: hidden; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(10,4,6,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.lightbox-open { overflow: hidden; }
.lightbox__inner { position: relative; width: min(100% - 2 * var(--gutter), 1240px); display: flex; flex-direction: column; align-items: center; padding: 3.75rem 0 1.25rem; }
.lightbox__fig { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; touch-action: pan-y; }
/* The frame fits the viewport height with room for the caption; --lb-ar is written by work.js from the card's width/height. */
.lightbox__frame { --lb-ar: 1.3333; width: min(100%, calc((100svh - 250px) * var(--lb-ar))); }
.lightbox__frame .glow-frame__media { aspect-ratio: var(--lb-ar); }
.lightbox__frame img { transition: opacity .2s; }
.lightbox__frame.is-loading img { opacity: 0; }
.lightbox__frame:hover img { transform: none; }
.lightbox__meta { padding: 1.1rem .25rem 0; text-align: center; max-width: 64ch; }
.lightbox__meta .proj__title { font-size: 1.1rem; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__prev, .lightbox__next { position: absolute; top: calc(50% - 22px); }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
/* Counter: centred above the frame on desktop; between the arrows in the phone nav row. */
.lightbox__count { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); margin: 0; font: 700 .74rem/1 var(--font-body); letter-spacing: .18em; white-space: nowrap; color: var(--text-on-dark-3); }
.lightbox__nav { display: contents; }

/* ---- 6. Responsive ---- */
@media (max-width: 1279px) {
  /* Below 1280 the nine chips would need three rows: one scrolling row instead (like the hero capability strip), no wrap,
     hidden scrollbar, right-edge fade as the affordance. The band then stays about 62px tall under the bar. */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: -6px calc(-1 * var(--gutter)) -6px -6px; padding: 6px var(--gutter) 6px 6px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
@media (max-width: 1023px) {
  .filters-band { top: var(--nav-h-mobile); }
  .lightbox__inner { padding-top: 4rem; }
  /* Two-column grid: no trail rows (they would leave the 22 cells one short of a full row); main.css hides them below 768 anyway.
     The billboard is an ordinary card here so the grid closes on eleven rows (the hidden trail rows shift its child index, which
     would otherwise trip main.css's odd-last-card rule and stretch it full width). */
  .gallery-grid .fx-trail { display: none; }
  .gallery-grid > .proj.proj--panorama:last-child { grid-column: auto; grid-row: auto; }
  .gallery-grid > .proj.proj--panorama:last-child .glow-frame__media { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 767px) {
  /* Mobile raster block (3.10): no backdrop blur; the ambient halo is already swapped for the flat radial by main.css. */
  .lightbox::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,4,6,.96); }
  .lightbox__nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; }
  .lightbox__prev, .lightbox__next, .lightbox__count { position: static; transform: none; }
  .lightbox__frame { width: min(100%, calc((100svh - 330px) * var(--lb-ar))); }
  .lightbox__meta { padding-top: .8rem; }
}
@media (max-width: 639px) {
  .chip { padding: .4rem .8rem .45rem; font-size: .74rem; }
  .chip::after { bottom: 4px; }
  .pcta__disclaimer { margin-top: 1.5rem; padding-top: 1rem; font-size: .8rem; }
  /* The portrait card keeps its two-row span in the two-up phone grid so the 22 cells close on eleven rows; its own
     intrinsic crop stays 3:4 (main.css flattens .work-grid media to 16:10 on phones) for the rows it defines when filtered. */
  .gallery-grid .proj--portrait .glow-frame__media { aspect-ratio: 3 / 4; }
  .gallery-grid > .proj.proj--panorama:last-child .glow-frame__media { aspect-ratio: 16 / 10; }
}