/* Lior video-review fixes (docs/reviews/2026-08-28-lior-video-review.md) - superpowers stream.
   Loads AFTER the generated page.css; survives port-page.mjs regeneration.

   Scope: the "Superpower" sections on /super-bdm/ (.sp-art), /super-pm/ (.sp-image)
   and /super-broker/ (.sp-imgcard) - review rows V2 + V3.

   Root causes (measured with puppeteer + sharp, 2026-08-28):
   - V2a (image not vertically centered) + V3 (Super PM Superpower 02 image bleeds past
     the frame's bottom edge): page.css positions the image absolute with
     inset:32px + width/height calc(100% - 64px), but base.css's W04 layer
     ("body .sp-art img, ...") overrides the box to a fixed width (520px at >=1280)
     with aspect-ratio 302/279 and height:auto. An absolutely positioned box with
     top:32px and a determined height ignores `bottom`, so the image pins to the
     TOP of the frame: top gap fixed at 32px while the bottom gap grows with the
     frame (48-73px measured) - and on Super PM Superpower 02, whose 4-item
     accordion makes the frame only 480px tall, the 480px-tall image OVERFLOWS the
     frame bottom by 32px on every feature image.
   - V2c (frame shadow reads abruptly cut on the LEFT, bottom fades smoothly): no
     clipping ancestor exists (verified); the cause is the shadow geometry itself.
     Super BDM's --bh-shadow-lift layers are offset -4px/+14..24px DOWNWARD with all
     the alpha in the downward layers, so the fade below the frame runs 70px+ while
     the lateral fade dies within ~25px inside the bh-grain noise - reading as a hard
     stop. Super PM / Super Broker used --bh-shadow-card (4px/12px) with the same
     asymmetry at smaller scale.
   - V2b (white rounded corners on the FIRST image of each superpower) is an ASSET
     defect, fixed in public/assets/: the 8 first-images were 1208x1116 exports with
     the Figma image-card's rounded-corner mask baked in (white corner arcs + a 3-4px
     frame-grey ring). They are cropped 24px per side to full-bleed 1160x1068;
     originals in reports/port/fixes/superpowers/originals/. */

/* V2a + V3 - center the artwork in the frame on both axes, and never let it escape.
   The image stays absolutely positioned (so it cannot inflate the CSS grid rows -
   the frame keeps tracking the accordion, review E2); with the full inset plus
   margin:auto the over-constrained box centers vertically AND horizontally, and
   max-height caps it to the frame's content box so a short frame (Super PM
   Superpower 02) cover-crops the artwork instead of bleeding past the bottom edge.
   Scoped to each page's DESKTOP band (Super BDM's grid runs >=1024, Super PM's
   >=768): in the stacked mobile layouts the images are static and full-panel-width,
   and a percentage max-width would bind there (container widths are always
   definite) and wrongly shrink them - measured at 390 before scoping. */
@media (min-width: 1024px) {
  body .sp-art img {
    inset: var(--bh-space-32);
    margin: auto;
    max-width: calc(100% - 2 * var(--bh-space-32));
    max-height: calc(100% - 2 * var(--bh-space-32));
  }
}
@media (min-width: 768px) {
  body .sp-image img {
    inset: var(--bh-space-32);
    margin: auto;
    max-width: calc(100% - 2 * var(--bh-space-32));
    max-height: calc(100% - 2 * var(--bh-space-32));
  }
  /* Super Broker's image is a static flex child of the (stretched) frame - already
     centered by the flexbox; it only needs the same overflow guard. */
  body .sp-imgcard img {
    max-height: 100%;
  }
}

/* V2c - one outer-card shadow for all three superpower frames, with the lateral
   fade the downward-only tokens lacked: the 4px/22px ambient layer gives the left
   and right edges a soft ~25px falloff, and the downward layers keep the original
   lift character (the -4px leftward offset of --bh-shadow-lift's first layer is
   dropped - it stacked the densest band against the frame's left edge).
   Desktop band only: below 1024 the page.css mobile layers restyle these frames
   into merged panel cards with their own borders/shadows (Super BDM's W04/T14 seam
   fix sets box-shadow:none) and must win unchanged. */
@media (min-width: 1024px) {
  body .sp-art,
  body .sp-image,
  body .sp-imgcard {
    box-shadow:
      0px 4px 22px rgba(27, 8, 8, 0.05),
      0px 14px 33px rgba(27, 8, 8, 0.06),
      0px 20px 55px rgba(27, 8, 8, 0.05),
      0px 24px 78px rgba(27, 8, 8, 0.03);
  }
}

/* Lior follow-up review 2026-08-28 - lock the gray image frame's height per section.
   Root cause (measured with puppeteer at 1440, followup-matrix-before-1440.json):
   every page's frame is a grid item spanning the accordion(+training) rows with
   `align-self: stretch` (super-bdm.css .sp-art, super-pm.css .sp-image,
   super-broker.css .sp-imgcard) - so the frame's height IS the accordion column's
   height, and an open feature whose body wraps one line more than its siblings
   grows the column and the frame with it (super-bdm SP02/SP03: 585.3px on the
   3-line first feature vs 561.3px on every 2-line sibling - a 24px jump on
   feature switch).

   Lior: the frame must hold the height it has in the MOST COMMON feature state
   (the 2-line bodies) and never resize when switching features; a taller feature
   may grow only the content column. Implementation: drop the stretch and pin each
   frame to the width/height ratio measured in its 2-line state at 1440
   (frame widths: bdm 590, pm/broker 580). aspect-ratio instead of a px height so
   the lock holds at EVERY desktop width - the frame's height still adapts to its
   column width but is a pure function of it, so switching features can never move
   it; at 1440 it renders exactly the former common-state height. The earlier
   centering fix above keeps working: the absolutely-positioned artwork centers via
   inset+margin:auto inside the now-fixed frame box.
   Bands match each page's 2-column grid (super-bdm >=1024; super-pm and
   super-broker >=768) - the stacked mobile layouts keep natural image flow. */
@media (min-width: 1024px) {
  body .sp-art {
    align-self: start;
    aspect-ratio: 590 / 561.3; /* all three /super-bdm/ sections: 2-line state = 561.3 */
  }
}
@media (min-width: 768px) {
  body .sp-image {
    align-self: start;
    aspect-ratio: 580 / 554; /* /super-pm/ superpower-1 and -3 (5-item accordions) */
  }
  body #superpower-2 .sp-image {
    aspect-ratio: 580 / 480; /* /super-pm/ superpower-2 (4-item accordion) */
  }
  body .sp-imgcard {
    align-self: start;
    aspect-ratio: 580 / 548.5; /* both /super-broker/ sections */
  }
}