/* Cool Gool — hero photos, breadcrumbs, mobile-drawer scrim (2026-08-05)
   ------------------------------------------------------------------
   WHY THIS IS ITS OWN FILE AND NOT APPENDED TO style.css:
   it was, twice, and a concurrent pass rewriting style.css wholesale
   wiped it both times. These rules pair with functions.php
   (coolgool_hero_to_img / coolgool_breadcrumb_html) and coolgool.js,
   so they travel with that work rather than living in a file another
   pass owns end to end. Enqueued right after style.css and before
   skin-azure.css by coolgool_front_assets().
   ------------------------------------------------------------------ */

/* ---------- 1. HERO PHOTO AS AN ELEMENT (C-9, H-19..H-21, H-24)

   The photo used to be the bottom layer of an inline background-image
   on .page-hero-bg, under 4 gradient scrim layers. It is now a real
   <img> child (preload-scannable, responsive, WebP) and the gradients
   ride on a .cg-scrim sibling.

   The scrim HAD to move: an element's own background always paints
   below all of its children, so gradients left on .page-hero-bg would
   now sit UNDER the photo they exist to darken. This is the same
   arrangement .hero-bg/::before already uses on the homepage — see the
   long note beside it above.

   ::after is re-raised to z-index:2 because .cg-scrim (z-index:1) is a
   positioned child and would otherwise paint over it; ::after is the
   ember flare and must stay on top, exactly as it was when it sat above
   the element's own background.
   ---------- */
.page-hero-bg > picture,
.gc-media > picture{display:block}

.page-hero-bg > img,
.page-hero-bg picture img,
.gc-media > img,
.gc-media picture img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}

.cg-scrim{
  content:"";position:absolute;inset:0;z-index:1;
  display:block;pointer-events:none;
}

/* ---------- 1a. LOW-RESOLUTION HERO SOURCES (H12)

   .is-lowres is set by coolgool_hero_to_img() when the widest WebP rung for a
   hero photo is under 1000px — see the note beside it for the list, and for why
   no re-export is possible. object-fit:cover on a 480x100 banner across a
   1440px band is a 3x upscale of the LCP element, and it looks it.

   So: stop covering. The image drops out of inset:0 and sits at its own size in
   the bottom-right corner, over the gradient the hero already had, capped so it
   can never be scaled UP. The scrim, the ember flare and every page's own
   background-position are untouched — only this one class changes anything, and
   only for as long as the source stays small.
   ---------- */
.page-hero-bg.is-lowres > img,
.page-hero-bg.is-lowres picture img{
  inset:auto 0 0 auto;
  width:auto;height:auto;
  max-width:min(42vw,520px);
  max-height:58%;
  margin:0 clamp(20px,5vw,48px) clamp(18px,3.5vw,40px) 0;
  object-fit:contain;
  border-radius:8px;
  /* Above .cg-scrim (z-index:1), not under it. A cover photo WANTS the scrim on
     top -- that is the whole point of it -- but a contained image is content,
     and the azure skin's mix-blend-mode:screen scrim bleaches a 480x100 banner
     to almost nothing when it paints over one. */
  z-index:2;
}
/* skin-azure.css subdues every photo hero with
   `.page-hero-bg[style]{filter:brightness(1.12) contrast(.68) saturate(.42)}`
   so dark copy stays readable over a full-bleed photograph. A filter applies to
   the element's CHILDREN too, and it cannot be cancelled from inside — so the
   contained image inverts it back on itself. The parent still gets the last
   word (child filter first, parent's after), which is why these are the exact
   reciprocals, applied in reverse order: 1/.42, 1/.68, 1/1.12.
   Nothing to undo on the dark default skin, so this is scoped to azure only. */
body.cgm-skin-azure .page-hero-bg.is-lowres > img,
body.cgm-skin-azure .page-hero-bg.is-lowres picture img{
  filter:saturate(2.38) contrast(1.47) brightness(.893);
}
@media (max-width:760px){
  /* Behind the copy rather than beside it on a phone: 42vw of a 390px screen is
     164px, which is not a picture of anything. */
  .page-hero-bg.is-lowres > img,
  .page-hero-bg.is-lowres picture img{
    max-width:min(68vw,340px);
    max-height:30%;
    /* Back under the scrim on a phone: the copy runs the full width here, so a
       fully opaque image in the corner would sit on top of the meta line. */
    z-index:0;
    opacity:.55;
  }
}

.page-hero-bg::after,
.gc-media::after{z-index:2}

/* ---------- 1b. /profile/ (page 70) mobile hero — B3 follow-up

   The B3 block further up re-declares .page-hero-bg's background-image
   with url(bright.jpg) !important to swap the desktop horizontal scrim
   for a vertical one on small screens. There is no background photo to
   re-declare any more, and leaving it would have the browser download
   bright.jpg a SECOND time (once as the <img>, once as a background
   nobody can see). The scrim swap it exists for is re-pointed at the
   .cg-scrim span here; everything else about B3 — the 210px of headroom
   that clears Malcolm's face, the ::after opacity — is untouched and
   still applies. background-position is unchanged at 38% 28%; the <img>
   carries it as object-position, which behaves identically under cover.
   ---------- */
@media (max-width:760px){
  body.page-id-70 .page-hero-bg{background-image:none !important}
  body.page-id-70 .page-hero-bg .cg-scrim{
    background-image:
      linear-gradient(180deg,
        rgba(8,6,5,.62) 0%,
        rgba(8,6,5,.26) 8%,
        rgba(8,6,5,.04) 14%,
        rgba(8,6,5,.04) 28%,
        rgba(8,6,5,.40) 34%,
        rgba(10,7,5,.78) 40%,
        rgba(10,7,5,.90) 50%,
        rgba(10,7,5,.95) 100%),
      radial-gradient(70vw 30vh at 82% 6%, rgba(255,90,30,.20), transparent 62%);
  }
}

/* ---------- 2. VISIBLE BREADCRUMBS (M-19)
   BreadcrumbList JSON-LD has been on every interior page since launch
   with nothing rendered for it to annotate. Built by
   coolgool_breadcrumb_html() from the same source as the JSON-LD.
   Styled as a quieter sibling of .kicker. ---------- */
.crumbs{margin:0 0 18px}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
  font-family:"Space Mono",monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-dim);
}
.crumbs li{display:flex;align-items:center;gap:8px}
.crumbs li + li::before{content:"/";opacity:.45}
.crumbs a{
  color:var(--bone-dim);
  border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ember);border-bottom-color:var(--ember)}
.crumbs [aria-current="page"]{color:var(--bone)}

/* ---------- 3. ANCHOR OFFSET (L-38) — NOT HERE.
   scroll-padding-top:90px landed on the html rule near the top of this
   file in the same pass. Deliberately not repeated here. ---------- */

/* ---------- 4. MOBILE DRAWER: SCRIM + SCROLL LOCK (L-37)
   The drawer opened over a page that was still scrollable, with no
   backdrop and no tap-outside-to-close. .nav-scrim is created by
   coolgool.js; z-index 850 puts it above the page and below
   header.nav (900), which holds the drawer. ---------- */
.nav-scrim{
  position:fixed;inset:0;z-index:850;
  background:rgba(8,6,5,.62);
  backdrop-filter:blur(2px);
}
.nav-scrim[hidden]{display:none}
html.nav-open,
html.nav-open body{overflow:hidden}
@media (min-width:761px){
  .nav-scrim{display:none}
}

/* ---------- 5. AZURE SKIN (the live public default)

   skin-azure.css dissolves the near-black scrim baked into each photo
   hero with background-blend-mode:screen so dark ink can sit on the
   recovered photograph. That worked when the four scrim gradients and
   the photo were five layers of ONE background-image on .page-hero-bg.

   They are not any more — the photo is an <img> child and the gradients
   are on .cg-scrim. Reproducing that single blend pass now takes two
   folds, both screen, both required (the same pair .hero-bg::before
   already uses):

     1. background-blend-mode:screen folds .cg-scrim's own gradient
        layers together;
     2. mix-blend-mode:screen folds that result against the <img>
        behind it.

   Compositing is a strict bottom-to-top fold, so pausing after the four
   gradients and resuming with the photo as the next layer is identical
   to folding all five at once — but fold 1 must be screen too, or the
   gradients would merge with each other by plain alpha-over first and
   only the RESULT would screen against the photo. Not the same sum.

   Scoped on body.cgm-skin-azure (set by cgm-skin-preview.php) rather
   than living in skin-azure.css, for the same ownership reason as above.
   .gc-media needs no equivalent: its scrim was a single gradient with no
   blend mode, so moving it to a child span composites identically.
   ---------- */
body.cgm-skin-azure .page-hero-bg > .cg-scrim{
  background-blend-mode:screen;
  mix-blend-mode:screen;
}