/* ── Shared enine-* PNC chrome — print's real values ──────────────
   print already had a generic (non-per-code) mechanism for this too —
   the `[class^="pnc-"], [class*=" pnc-"]` attribute selectors below,
   same idea as pome's `[id][class*="pnc-"]`. Retired in favour of these
   six classes directly, for the same reason: scaffold's shared markup
   already carries them, so the attribute-selector workaround is no
   longer needed. This also fixes a real bug the old rule had: its
   generic `h4 { font-size: 1rem }` was meant for CHILD headings, but
   print's own kept m/0.html uses a bare, classless `<h4>` for its SELF
   title — the generic selector couldn't tell the two apart, so m/0's
   own title silently rendered at child-scale (1rem) instead of the
   intended self-scale (1.5rem). Now that self vs. child is which of
   these two classes gets applied, not which tag, that ambiguity is
   gone. Margin/weight are left undeclared (Bootstrap's own heading/
   paragraph defaults), matching print's real behaviour — it never
   overrode those, only font-size, opacity and section padding. */
.enine-section { padding-block: 1rem !important; }
.enine-section-title { font-size: 1.5rem; }
.enine-child-title { font-size: 1rem; }
.enine-section-tagline,
.enine-child-tagline { opacity: 0.75 !important; }
.enine-grid { --bs-gutter-x: 1.5rem; --bs-gutter-y: 3rem; }

/* print theme -- static, palette-agnostic CSS. Delta over `scaffold`
   (Theme.parent = scaffold). Print's identity is denser/quieter than
   scaffold's default: py-3 not py-5, h4-scale headings not h3, no
   alternating section backgrounds, links reset to plain color+no-underline
   rather than text-reset+text-decoration-none, opacity-75 not opacity-50
   on taglines.

   var(--bs-border-radius) is used throughout below but was never itself
   wired to a config override -- Bootstrap's own default (0.375rem) is
   fine as the fallback, but a configured --enine-radius had nothing to
   attach to without this. */
:root {
  --bs-border-radius: var(--enine-radius, 0.375rem);
}

/* Section padding + self/child title font-size + tagline opacity now
   come from .enine-section/.enine-section-title/.enine-child-title/
   .enine-section-tagline/.enine-child-tagline above — the same values,
   just no longer scoped by attribute selector. */
[class^="pnc-"] a, [class*=" pnc-"] a {
  color: inherit;
  text-decoration: none;
}
/* print never alternates section backgrounds -- .bg-secondary is !important
   in this project's Bootstrap build, so the override needs it too. */
[class^="pnc-"].bg-secondary, [class*=" pnc-"].bg-secondary {
  background-color: transparent !important;
}

/* i/0 -- print renders no icon badge for a childless icon-modality root. */
.pnc-i0 .enine_site_icon_badge { display: none; }

/* t/1/t, i/1/t -- 1-count, text child: stack (no split), plain bordered box
   instead of scaffold's unboxed second column. */
.pnc-t1t .col-lg-6, .pnc-i1t .col-lg-6 { width: 100%; }
.pnc-t1t .col-lg-6:last-child, .pnc-i1t .col-lg-6:last-child {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
}

/* m/1/t -- 1-count, self carries media: stack, and self's own media drops
   scaffold's aspect-ratio box for a plain bordered image (matches m/0's
   plain-figure treatment). */
.pnc-m1t .col-lg-6 { width: 100%; }
.pnc-m1t .col-lg-6:first-child .ratio {
  padding-top: 0 !important;
  position: static;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  background: #fff;
}
/* Bootstrap's own aspect-ratio box height comes from `.ratio::before`'s
   OWN padding-top (a pseudo-element, not the `.ratio` div's own padding)
   — `padding-top:0` on `.ratio` itself, above, never touched it. Left
   unfixed, `::before` still renders a ~56%-of-width tall empty block
   before the image in normal flow (confirmed: a ~626px gap above the
   image on a real render). Same Bootstrap `.ratio::before` gotcha
   already documented for brut this session — the fix here is to drop
   the pseudo-element's content entirely, not just its host's padding. */
.pnc-m1t .col-lg-6:first-child .ratio::before { content: none; }
.pnc-m1t .col-lg-6:first-child .ratio > * { position: static !important; }

/* t/1/m, i/1/m, m/1/m -- 1-count, media child: stack the outer split, float
   the child's own media inside its own column so the child's own text wraps
   around it (verified: the media div is nested inside the flex-item column,
   not itself a flex item -- float applies normally, see
   THEME_REHAUL_PLAYBOOK.md for the full mechanism). */
.pnc-t1m .col-lg-6, .pnc-i1m .col-lg-6, .pnc-m1m .col-lg-6 { width: 100%; }
.pnc-t1m .col-lg-6:last-child .ratio,
.pnc-i1m .col-lg-6:last-child .ratio,
.pnc-m1m .col-lg-6:last-child .ratio {
  float: right;
  width: 41.67%;
  margin: 0 0 0.75rem 1rem;
}
.pnc-t1m .col-lg-6:last-child::after,
.pnc-i1m .col-lg-6:last-child::after,
.pnc-m1m .col-lg-6:last-child::after {
  content: "";
  display: block;
  clear: both;
}

/* t/n/t -- n-count, text children: bordered cards on the existing card box
   (the `.clickable` wrapper already exists in scaffold's markup). */
.pnc-tnt .clickable {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
}

/* i/n/t -- n-count, text children: plain stacked list, no grid, no card
   box (distinct from t/n/t -- print doesn't box this one). Neuter
   scaffold's grid to full-width stacked. */
.pnc-int .row { display: block; }
.pnc-int .row > div { width: 100%; margin-bottom: 1rem; }

/* i/n/m -- n-count, media children: scaffold's plain stacked ratio-box card
   already matches; no override needed beyond the shared rules above. */

/* m/n/t, m/n/i -- n-count, self carries media: self's own media (rendered
   directly inside .container, NOT inside a flex item -- scaffold's m/n/t
   puts it there as a plain block child) floats left with self's own intro
   text wrapping around it. */
.pnc-mnt .container > .ratio, .pnc-mni .container > .ratio {
  float: left;
  width: 33.33%;
  margin: 0 1rem 0.75rem 0;
}
.pnc-mnt .container::after, .pnc-mni .container::after {
  content: "";
  display: block;
  clear: both;
}

/* t/1/i, i/1/i, m/1/i -- 1-count, icon child: stack the outer split;
   icon+heading sit inline on the child column, tagline/content each get
   their own full-width line below via a forced flex-wrap break
   (flex-basis:100% forces a new row). Verified against a real render on
   scaffold-proto.localhost: DOM structure confirmed (icon-div, h4, p, div
   are siblings, direct children of the child .col-lg-6) before trusting
   the flex-wrap-break mechanic. */
.pnc-t1i .col-lg-6, .pnc-i1i .col-lg-6, .pnc-m1i .col-lg-6 { width: 100%; }
.pnc-t1i .col-lg-6:last-child,
.pnc-i1i .col-lg-6:last-child,
.pnc-m1i .col-lg-6:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.pnc-t1i .col-lg-6:last-child .enine_site_icon_badge,
.pnc-i1i .col-lg-6:last-child .enine_site_icon_badge,
.pnc-m1i .col-lg-6:last-child .enine_site_icon_badge { flex: 0 0 auto; margin-bottom: 0 !important; }
.pnc-t1i .col-lg-6:last-child h4,
.pnc-i1i .col-lg-6:last-child h4,
.pnc-m1i .col-lg-6:last-child h4 { flex: 0 1 auto; margin-bottom: 0 !important; }
.pnc-t1i .col-lg-6:last-child p, .pnc-t1i .col-lg-6:last-child > div,
.pnc-i1i .col-lg-6:last-child p, .pnc-i1i .col-lg-6:last-child > div,
.pnc-m1i .col-lg-6:last-child p, .pnc-m1i .col-lg-6:last-child > div {
  flex: 1 1 100%;
  margin-top: 0.25rem;
}

/* t/n/i, i/n/i, m/n/i -- n-count, icon children: same inline-then-break
   trick as above, applied to each card's `.clickable` wrapper instead of
   a `.col-lg-6` (same sibling shape: icon-div, h4, p, div inside
   `.clickable`, per scaffold's t/n/i.html). */
.pnc-tni .clickable, .pnc-ini .clickable, .pnc-mni .clickable {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.pnc-tni .clickable .enine_site_icon_badge,
.pnc-ini .clickable .enine_site_icon_badge,
.pnc-mni .clickable .enine_site_icon_badge { flex: 0 0 auto; margin-bottom: 0 !important; }
.pnc-tni .clickable h4, .pnc-ini .clickable h4, .pnc-mni .clickable h4 { flex: 0 1 auto; margin-bottom: 0 !important; }
.pnc-tni .clickable p, .pnc-tni .clickable > div,
.pnc-ini .clickable p, .pnc-ini .clickable > div,
.pnc-mni .clickable p, .pnc-mni .clickable > div {
  flex: 1 1 100%;
  margin-top: 0.25rem;
}

/* t/n/m, m/n/m -- asymmetric 5/7 split per card. Checked the actual DOM
   before writing this (good thing -- first draft was wrong): `.ratio`
   (the media) is a SIBLING of `.clickable`, not nested inside it -- both
   are direct children of the per-card wrapper div (itself a flex item of
   `.row`, per scaffold's t/n/m.html). Floating `.ratio` still works via
   the same mechanism (it's a grandchild of `.row`, not a flex item
   itself); `.clickable` follows it in DOM order as a normal-flow sibling,
   which is exactly what lets it wrap around the float with no clearfix
   needed at that boundary. The clearfix instead goes on the shared
   *parent* (the per-card wrapper), so the card's own height doesn't
   collapse. STILL UNVERIFIED BY RENDER -- confirm before deleting
   print's t/n/m.html / m/n/m.html. */
.pnc-tnm .row > div > .ratio, .pnc-mnm .row > div > .ratio {
  float: right;
  width: 41.67%;
  margin: 0 0 0.75rem 1rem;
}
.pnc-tnm .row > div::after, .pnc-mnm .row > div::after {
  content: "";
  display: block;
  clear: both;
}

/* ── Artifact image gallery — progressive-reveal grid ────────
   One grid holds every ArtifactImage; each breakpoint just raises how
   many are visible (3/6/9/12 at 3 columns, then 16 at 4 columns) rather
   than reflowing what's already shown. */
.artifact-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.artifact-gallery-item {
  display: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bs-body-bg);
  border: 1px solid color-mix(in srgb, var(--bs-body-color), transparent 90%);
  border-radius: var(--bs-border-radius);
}
.artifact-gallery-item:nth-child(-n+3) { display: block; }
.artifact-gallery-img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 576px) {
  .artifact-gallery-item:nth-child(-n+6) { display: block; }
}
@media (min-width: 768px) {
  .artifact-gallery-item:nth-child(-n+9) { display: block; }
}
@media (min-width: 992px) {
  .artifact-gallery-item:nth-child(-n+12) { display: block; }
}
@media (min-width: 1200px) {
  .artifact-gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .artifact-gallery-item:nth-child(-n+16) { display: block; }
}

/* ── Gallery lightbox — full-viewport image viewer ────────────
   Same shared markup/classes as every theme (built once by
   common/js/site.js); kept unadorned here — no button background at
   all, just the icon — matching print's own thin, minimal identity. */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
}
.gallery-lightbox.is-open { display: flex; }
body.gallery-lightbox-locked { overflow: hidden; }

.gallery-lightbox-stage {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.gallery-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: fixed;
  border: none;
  background: transparent;
  color: #fff;
  opacity: 0.7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { opacity: 1; }

.gallery-lightbox-close { top: 1.5rem; right: 1.5rem; width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
.gallery-lightbox-prev,
.gallery-lightbox-next { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.375rem; }
.gallery-lightbox-prev { left: 1rem; }
.gallery-lightbox-next { right: 1rem; }