/* photo.css — photo-cuts-260913. Three layouts for a piece's stills, ONE DOM.
 *
 * Thom picks from cuts, not prose (ruled 9/10), so the three are the same markup restyled:
 * a reader comparing ?cut=1 with ?cut=3 is comparing layout, not two different builds.
 *   cut 1  Sequence  one column, full content width, magazine spread, nothing to click
 *   cut 2  Wall      2-col staggered grid, tap opens the image inline at full width
 *   cut 3  Split     2-up rhythm, alternating one wide / two narrow, credits above
 * No ?cut= is cut 1: until Thom picks, the page shows the simplest of the three rather
 * than hiding 23 photographs behind a query param it also emits JSON-LD for.
 */
.pgal{margin:clamp(40px,6vw,80px) 0 0}
/* round4c fix r1 F10 (J3): the TYPE on this rule is gone, only the margin stays. It was a
   pre-WF-1-v9 11px uppercase label rule, same specificity as work.css `.psh` (one class each)
   but photo.css loads AFTER work.css on a job page - so it won, and "Photography" rendered as
   small caps while "More from this campaign" (.jalth, margin only) correctly rendered as the
   serif h2 + small-caps count. Both headings are `<h2 class="psh ...">`; `.psh` and
   `.psh small` are the approved rule and now govern both. */
.pgalh{margin:0 0 18px}
.pgal figure{margin:0}
.pgal img{display:block;width:100%;height:auto;background:var(--hair)}
.pgal figcaption{font-size:13px;line-height:1.5;color:var(--muted-sm);padding:8px 0 0}
/* The stills credit block. Same <dl> shape as the piece credits so the page has one
   credit design, not two. cut 3 puts it between the film and the stills; 1 and 2 keep it
   directly under the gallery heading, which is the same place in reading order. */
.pgcred{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--hair);font-size:13px}
.pgcred div{display:flex;gap:8px}
.pgcred dt{color:var(--muted-sm);letter-spacing:.06em;text-transform:uppercase;font-size:11px;align-self:center}
.pgcred dd{margin:0}

/* ---- cut 1 · Sequence (also the no-param default) ---- */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,40px)}

/* ---- cut 2 · Wall ---- */
[data-cut="2"] .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
/* The mood board's cut b stagger: every 5th image runs full width, every 7th runs tall.
   Driven off nth-child so it follows the sheet's order and needs no per-image class. */
[data-cut="2"] .pgrid figure:nth-child(5n+1){grid-column:1/-1}
[data-cut="2"] .pgrid figure:nth-child(7n+3) img{aspect-ratio:4/5;object-fit:cover}
[data-cut="2"] .pgrid figure{cursor:zoom-in}
[data-cut="2"] .pgrid figure.open{grid-column:1/-1;cursor:zoom-out}
[data-cut="2"] .pgrid figure.open img{aspect-ratio:auto}
[data-cut="2"] .pgal figcaption{opacity:0;height:0;overflow:hidden;padding:0}
[data-cut="2"] .pgrid figure.open figcaption{opacity:1;height:auto;padding:8px 0 0}

/* ---- cut 3 · Split ---- */
[data-cut="3"] .pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,24px)}
/* one wide / two narrow, alternating: 1 wide, 2+3 narrow, 4 wide, 5+6 narrow ... */
[data-cut="3"] .pgrid figure:nth-child(3n+1){grid-column:1/-1}
@media(max-width:767px){
.pgal{margin-top:32px}
[data-cut="2"] .pgrid,[data-cut="3"] .pgrid{grid-template-columns:minmax(0,1fr)}
[data-cut="2"] .pgal figcaption{opacity:1;height:auto;padding:8px 0 0}
[data-cut="3"] .pgcred{margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){
.pgal figure,.pgal img{transition:none}
}

/* round3b-260916 B8. The hero is the job's own headline photograph, so it is not cropped to
   the 16:9 the tile poster was cut to -- it keeps the aspect the photographer framed. */
.pherophoto{width:100%;height:auto;display:block}
/* The lightbox. Fixed, above everything, its own scroll lock. Controls are 44px targets and
   real buttons; the counter is the live region a screen reader hears when the set advances. */
.lbxon{overflow:hidden}
.lbx{position:fixed;inset:0;z-index:99;background:rgba(14,14,14,.94);display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,48px)}
.lbx[hidden]{display:none}
.lbx-img{max-width:100%;max-height:86vh;width:auto;height:auto;object-fit:contain;background:#0d0d0d}
.lbx button{position:absolute;border:0;background:rgba(14,14,14,.55);color:#fff;cursor:pointer;min-width:48px;min-height:48px;font:400 26px/1 "Inter Tight",system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center}
.lbx button:hover{background:rgba(14,14,14,.85)}
.lbx button:focus-visible{outline:2px solid var(--green,#4ce07f);outline-offset:2px}
.lbx-x{top:12px;right:12px}
.lbx-p{left:12px;top:50%;transform:translateY(-50%)}
.lbx-n{right:12px;top:50%;transform:translateY(-50%)}
.lbx-c{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;color:rgba(255,255,255,.75);font:400 12px/1 "Inter Tight",system-ui,sans-serif;letter-spacing:.14em}
@media(max-width:480px){.lbx-p{left:4px}.lbx-n{right:4px}}