/* FC-18 Thick Business Cards — real-photography override layer (photo-loop worker, 2026-07-17).
   Wires Alicia's delivered photography into content-section photo slots per
   /page-add-photos Step 5 (product-thick.css itself is never edited — this file is
   additive/removable: delete it and the page reverts cleanly to its placeholder state).

   Slots covered:
     #combos .combo-img (x6, one photo per finish-combo tile: die-cut / edge-finishes /
       suede / foil / emboss / spot-uv, matched to each candidate's DOMINANT visual tell
       per the image-review rubric — several delivered shots showed two finishes at once).
     #edge .edge-visual (macro edge close-up — the section's own dev note named this
       exact asset; a fanned rainbow of colored card edges).
     #samples flows entirely through the shared inc/page/samples.php 'photo' variant +
       henry_coolgray.css (.samples--photo .cta-photo-img etc.) — no override needed here,
       only photo_base/photo_alt set in the curated $samples array in thick.php.

   NOT wired (left for the orchestrator — outside this worker's file boundary / needs a
   judgment call, see the digest):
     - 4 hero-gallery candidate stills optimized to www/i/henry/thick/hero/ but not added
       to the admin hero gallery (silk_product.pictures) — that's a Tier-3 shared-DB
       change, not a page-body edit.

   www/product.php already auto-loads this file if it exists (verified against the current
   gj-configurator tip, product.php:436-440) — no wiring change needed there.

   ── #why .cross-section (owner-directed 2026-07-17, orchestrator-added after the batch) ──
   Originally left unplaced: the one delivered candidate (a foiled-edge close-up of ~2
   standing cards) doesn't show literal bonded-ply construction the way the CSS bars +
   caption describe. Owner direction: lean toward USING what was delivered rather than
   holding it back — placed below, caption kept as-is (still broadly on-topic — the photo
   shows a real foiled/colored card edge), any reservation goes in a tracker comment, not a
   withheld photo. */

/* ── #combos — 6 finish-combo tiles, one photo each ─────────────────────────────────────── */
.combo-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.combo-img-label{display:none} /* "Image slot" dev placeholder text — superseded by the real photo; reverts automatically if this file is ever removed */

/* ── #edge — macro edge close-up ─────────────────────────────────────────────────────────── */
.edge-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.edge-visual .card-edge,.edge-visual .edge-label{display:none} /* CSS cross-section illustration + "Recommended production asset" dev note — superseded by the real macro photo */

/* ── #why .cross-section — real photo above the (now-hidden) illustration bars, caption stays ──
   NOT a photo-crop problem — a SECTION-UX problem (owner-caught 2026-07-17): the tall
   aspect-ratio box (was 7/13, ~900px+ tall at column width) made the .split grid's
   align-items:center push the LEFT column's shorter text down into a big empty gap, and
   pushed this panel's own heading/paragraph + caption out of easy view. Fixed height
   instead of a tall aspect-ratio keeps this panel proportional to the left column and to
   the rest of the page (matches the ~300-420px scale other section visuals use, e.g.
   #edge .edge-visual's min-height:420px).

   RESOLVED 2026-07-18 (session `build-central Photos`) — the real fix was the SOURCE ORIENTATION,
   not the box height. The delivered photo was portrait 1400x2600 with the card standing on its
   edge, so (a) the customer read the name SIDEWAYS and (b) any height that showed the card well
   made this panel far taller than the left column. Rotating the source 90deg CCW ->
   `foiled-edges-land-*.webp` (2600x1400) makes the cards lie flat, runs both foiled edges
   lengthwise, and puts the name upright — and a landscape photo is naturally short at column
   width (~264px vs 420px), which shrinks the panel/left-column height mismatch at the source
   instead of trading against it. So the box needs NO fixed height any more: `height:auto` shows
   the whole frame, uncropped.

   FINAL LAYOUT = SINGLE COLUMN + FULL-WIDTH PHOTO BAND + EXPLAINER BELOW THE IMAGE
   (owner-directed 2026-07-18). This is a DELIBERATE divergence from Henry's locked mockup, which
   specifies a 2-column `.split` with the photo inside `.built-panel` > `.cross-section`. The
   owner reviewed both live and chose the band, then asked for the two refinements now built in:
   drop to one column, and move "What makes this different…" BELOW the photo. `.built-panel`,
   `.cross-section` and the ply-bars are retired from #why; all three were thick-only, so blast
   radius is this page.

   (History, so this isn't re-litigated: the band was briefly reverted to the mockup structure
   mid-session on a MISREAD of the owner's intent — an ambiguous either/or question bundled
   "fix it now" with "rebuild to the mockup". The owner had already approved the band. Restored.)

   NOTE for a future product-page session: Henry's mockup carries "production replaces this CSS
   illustration with a real MACRO EDGE photo. The edge is the hero proof for this page." What
   Alicia delivered for this slot ("2. What makes this different from 'ultra thick' paper?" ->
   Foil+foiled edges.png) is a card shot showing foiled edges — on-topic, but not literally a
   macro of the ply stack. Placed as delivered per the place-lean rule; flag to Alicia only if
   the owner wants the literal macro. */
/* Both text blocks span the full section width (owner-directed 2026-07-18) — the dark
   .why-band around the photo + caption is unchanged. Needs three overrides because the
   mockup caps the measure in two other places: #why-title at 560px and #why .lead at
   600px (product-thick.css), which would otherwise keep the intro narrow regardless. */
.why-intro,.why-explainer{max-width:none}
#why-title{max-width:none}
#why .lead{max-width:none}
/* The light gray panel Henry's mockup wrapped around BOTH the photo and the explainer
   (his `.built-panel`), kept full-width here. Same tokens as the mockup: --cream bg,
   --line border, --radius-xl corners, 42px pad. */
.why-panel{margin-top:38px;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-xl);padding:42px}
.why-band{border-radius:26px;background:#14181D;padding:22px;box-shadow:var(--shadow)}
.why-band-photo{display:block;width:100%;height:380px;object-fit:cover;object-position:center 55%;border-radius:16px}
.why-band .caption{margin-top:14px}
.why-explainer{margin-top:38px}
.why-explainer h3{margin:0}
.why-explainer p{margin-top:14px}
@media(max-width:640px){.why-band-photo{height:230px}}