/* Stand-Up page: six Squarespace "image card" blocks (image left, card text right).
   Every value below was measured on the live Momentum page 2026-09-07
   (reference/probes_2026-09-07/standup_desktop.json, mobile_probes_summary.md,
   reference/momentum_rules_extract.css lines 470-588, and the per-width DevTools probes in
   reference/screenshots/_standup_r1/cdp_live_<width>_geom.json). Loaded AFTER /assets/css/site.css.
   Class names mirror Squarespace's image-block-v2 "card" layout so the harvested CSS
   stays easy to cross-reference.

   Breakpoints (three, not two):
     >736px            desktop column (1000/64), two-column card
     447px..736px      mobile column (padding 16px) but STILL a two-column card: Squarespace only
                       adds .sqs-narrow-width when the block content is <=414px, i.e. viewport <=446
     <=446px           stacked card (image above the text) */

/* ---------- page column ----------
   Live: #mainContent 1000px / padding 64px / margin 0 auto 86px (desktop, same as site.css);
   mobile (<=736px): padding 16px (1em), margin-bottom 43px. Stated here so the page does not
   depend on whatever the shared `main` rule does on mobile. */
body[data-page="stand-up"] main {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto 86px;
  padding: 64px;
  background: #000;
}

/* Hidden page title (live: <h1 id="page-title"> is display:none; keep it for SEO/a11y) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- blocks ----------
   Live: .sqs-row margin 0 -15px + .sqs-block padding 15px cancel horizontally, so each block
   is exactly the 872px content column with 15px above/below; the first block has no top padding. */
.standup-block { padding: 15px 0; }
.standup-block:first-child { padding-top: 0; }

/* ---------- the card figure (two columns: image | 2% gap | card) ---------- */
.standup-figure {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

/* image column: calc(50% - 1%) = 427.27px at 1440; the img keeps its own 16:9 ratio
   (width 100%, height auto), i.e. 427 x 240 */
.standup-figure .image-inset {
  display: block;
  width: calc(50% - 1%);
  position: relative;
  text-decoration: none;
}
.standup-figure .image-inset img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* George, 2026-09-19: a thin white frame on every thumbnail so the dark ones (the stage photo
     up top) stop melting into the black page. border-box keeps the image inside its column. */
  box-sizing: border-box;
  border: 2px solid #fff;
}

/* card column: same width, margin-left 2% (17.44px), black, stretches to the row height and
   centres the text block vertically. `container-type` lets the title and subtitle scale with
   the card width exactly like Squarespace's dynamic text (see the container queries at the end). */
.image-card-wrapper {
  position: relative;
  width: calc(50% - 1%);
  margin: 0 0 0 2%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  container-type: inline-size;
}
.image-card {
  position: relative;
  width: 100%;
  padding: 10% 0;            /* 42.72px top/bottom on the 427px card */
}
.image-title-wrapper,
.image-subtitle-wrapper {
  padding: 0 10%;            /* 42.72px left/right */
}

/* Card text is Arial (Squarespace dynamic text), not Proxima Nova.
   Title: 40.9536px / 700 / line-height 1.1 (45.05px) / #fff, no letter-spacing.
   40.9536 / 427.266 = 9.585% of the card width (measured 0.0958-0.0960 at every probed width:
   33.12px on the 344.95px card at 736, 21.96px on 229.31 at 500, 32.85px on 343 at 375). */
.image-title {
  /* font set on the container (not only the inline p) so the line strut matches the text;
     otherwise the body's 16px/27.2px Proxima strut stretches each title line by ~1.6px */
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 40.95px;        /* fallback for browsers without container units */
  line-height: 1.1;
  letter-spacing: normal;
  color: #fff;
}
.image-title p {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Subtitle: 15.0163px / 500 / line-height 1.5 / letter-spacing .01em (0.15px) / #fff on desktop
   (15.0163 / 427.266 = 3.5145% of the card width), 13px on narrower cards; the exact rule is in
   the container queries at the end of the file. Sits 4% (of the wrapper's content width =
   13.67px) below the title. */
.image-title-wrapper + .image-subtitle-wrapper .image-subtitle { margin-top: 4%; }
.image-subtitle {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 500;
  font-size: 15px;           /* fallback for browsers without container queries */
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #fff;
}
.image-subtitle p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Links inside the card: #fcfcfc, no underline (Squarespace card layout). On hover the live site
   shows George's custom `p a:hover { color: #f297ee !important }` (rgb 242,151,238) at the card
   layout's opacity .8, still without an underline. The `!important` + extra specificity beat
   site.css's `p a:hover` (which adds an underline). */
.image-card a,
.image-card p a {
  display: inline;
  color: #fcfcfc !important;
  text-decoration: none !important;
}
.image-card a:hover,
.image-card p a:hover {
  color: #f297ee !important;
  text-decoration: none !important;
  opacity: 0.8;
}

/* ---------- mobile page column (<=736px) ----------
   Live at 736 and below: main padding 16px, margin-bottom 43px, blocks padding 15px (first block
   too). The card itself stays TWO-COLUMN down to 447px (measured at 736: image 344.95x194 at
   x=16, card margin-left 14.08 (2%), title 33.12px, subtitle 13px, docH 1466; at 500: image
   229x129, title 21.96px, docH 1076), so the flex figure above stays in force here. */
@media only screen and (max-width: 736px) {
  body[data-page="stand-up"] main {
    width: auto;
    padding: 16px;
    margin-bottom: 43px;
  }
  /* live main is 32px taller than its blocks at every width <=736 (2424 at 375: the blocks +
     padding + margin account for 2392); this pad reproduces that black strip under the last card */
  .standup-layout { padding-bottom: 32px; }

  .standup-block:first-child { padding-top: 15px; }
}

/* ---------- stacked card (<=446px) = Squarespace's .sqs-narrow-width ----------
   Squarespace adds .sqs-narrow-width when the block content is <=414px (viewport 446 = 414 + 32).
   Measured at 375: image 343x193, card below with margin-top 2% (6.86px), padding 10% 0 (34.3px),
   title 32.85px / lh 36.1px, subtitle 13px / lh 19.5px, text wrappers padding 0 10% (34.3px);
   block heights 437/385/401/365/364/365, document height 2424. At 446 (the last stacked width):
   image 414x232.66, card margin-top 8.27px, title 39.71px, docH 2855; at 447 it is two-column again. */
@media only screen and (max-width: 446px) {
  .standup-figure { display: block; }
  .standup-figure .image-inset { width: 100%; }

  .image-card-wrapper {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 2% 0 0;
  }

  /* measured mobile sizes as the no-container-query fallback; the container queries below win */
  .image-title    { font-size: 32.85px; }
  .image-subtitle { font-size: 13px; }
}

/* ---------- container-query sizing (LAST so it beats the fallbacks above) ----------
   Title: 9.585% of the card width at every width.
   Subtitle: Squarespace's dynamic text clamps at 13px until 3.5145% of the card width reaches
   14px, then follows the ratio (measured: card 398 -> 13px, 400 -> 14.066, 408 -> 14.326,
   413 -> 14.509, 427.27 -> 15.016). 398.4px = 14 / 0.035145. Two-column cards are under that
   threshold up to a 941px viewport (card = 0.49 x (viewport - 128)), stacked cards from 432. */
.image-title { font-size: 9.585cqw; }
@container (width >= 398.4px) {
  .image-subtitle { font-size: 3.5145cqw; }
}
@container (width < 398.4px) {
  .image-subtitle { font-size: 13px; }
}

/* Desktop library: large covers with captions underneath, in two generous columns. */
@media (min-width: 1000px) {
  body[data-page="stand-up"] main { width: 100%; padding: 24px; }
  .standup-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .standup-block, .standup-block:first-child { padding: 0; min-width: 0; }
  .standup-figure { display: block; }
  .standup-figure .image-inset { width: 100%; }
  .standup-figure .image-inset img { aspect-ratio: 16 / 9; object-fit: cover; border-width: 4px; }
  .image-card-wrapper { display: block; width: 100%; min-height: 0; margin: 0; }
  .image-card { padding: 16px 0 0; }
  .image-title-wrapper, .image-subtitle-wrapper { padding: 0; }
  .image-title { font-size: clamp(24px, 2vw, 32px); line-height: 1.15; }
  .image-subtitle { font-size: 15px; }
  .image-title-wrapper + .image-subtitle-wrapper .image-subtitle { margin-top: 8px; }
}

/* Odd card count on desktop (George, 2026-09-29): the empty bottom-right cell gets the logo figure,
   cut out of its white background with a white outline, set on black, centred on a full-width white line.
   It is 16:9 like the covers, so its flat bottom edge lines up with the neighbouring thumbnail.
   It only shows after an odd-numbered card, so adding or removing a card needs no edit here.
   A background image (not an <img>) so phones, where it stays display:none, never download it.
   Source: /assets/photos/006_haydesktop.jpg; the cutout is made by
   scripts/make_standup_logo_filler.py. */
.standup-filler { display: none; }
@media (min-width: 1000px) {
  .standup-block:nth-of-type(odd) + .standup-filler {
    display: block;
    aspect-ratio: 16 / 9;
    /* a flat white line the full width of the cell, lined up with the neighbouring cover's 4px
       bottom border, and the figure standing on it in the middle (George, 2026-09-29: pushed
       right with a full line, then a short line under him, both looked off; centred is the keeper) */
    box-sizing: border-box;
    border-bottom: 4px solid #fff;
    background: #000 url(/assets/standup/logo-filler.png?v=2) center bottom / contain no-repeat;
  }
}