/* ============================================================================
   Showcase — every video the site publishes, grouped by category.

   Own file, own `sh-` prefix, at her instruction that a page which needs its own
   look carries its own stylesheet rather than growing site.css. Only the site's
   own tokens are used (--ink, --body, --muted, --paper, --accent, --r-lg,
   --f-display), so the page belongs to the site and not to a second design.

   The one rule that shapes everything here is hers: a clip plays IN PLACE, its
   three controls (Play with sound, Pause, Full screen) sit BELOW the picture and
   never over it, and a vertical clip is framed vertical - never cropped.
   ========================================================================= */

/* ------------------------------------------------------------------ the head */
.sh-hero { padding-bottom: clamp(10px, 1.6vw, 22px) }

.sh-note {
  max-width: 62ch;
  margin: 18px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--muted);
}

.sh-lead { max-width: 46ch }

/* ------------------------------------------------------------- the clip rows */
/* One run per shape. Landscape clips read at two to a row; vertical ones at three,
   so a wide clip never stands beside a tall one with a pool of nothing beneath it. */
.sh-band + .sh-band { border-top: 1px solid var(--line-2) }

.sh-row {
  display: grid;
  gap: clamp(16px, 2.6vw, 30px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* Every row that is not all-vertical: mixed shapes, or landscape clips. Its column weights arrive
   as `--cols` in proportion to each clip's own ratio (runs_for in app.py - the same `--cols` the
   home page's rows use), so a 16:9 film beside a 2.35:1 one beside a 9:16 short come out the same
   height, the row fills the width, and no frame is stretched or cropped. The fallback below is a
   plain row of equals for the moment before that style arrives. */
.sh-row--ratio { grid-template-columns: var(--cols, repeat(2, minmax(0, 1fr))) }
/* A lone landscape clip gets the width to itself, capped so a 2.35:1 film cannot run the whole
   width of a monitor and read as a banner rather than a card. */
.sh-row--ratio.sh-row--solo { grid-template-columns: minmax(0, 1fr); max-width: 880px }
@media (max-width: 899px) {
  /* One clip per row on a phone: at proportional widths a 9:16 clip in a mixed row lands about
     82px wide, which leaves its three controls nowhere to sit. */
  .sh-row--ratio { grid-template-columns: minmax(0, 1fr) }
}
.sh-row--tall { grid-template-columns: repeat(3, minmax(0, 1fr)) }
/* Four vertical clips in one shelf: two rows of two, capped to the same card width as a
   three-up row (1180 / 3 x 2 + the gap), because the alternative is a 373x663 frame sitting
   alone on its second line with 373x663 of nothing beside it. Vertical clips need the height,
   so a two-up row keeps its cards the size of the rest of the page rather than blowing them up. */
.sh-row--tall.sh-row--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px }
/* A category that holds one vertical clip: the same cap as a lone landscape clip, so it sits
   as a card rather than as one column of an empty three-up row. */
.sh-row--tall.sh-row--solo { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-inline: auto }

.sh-row + .sh-row { margin-top: clamp(20px, 3.2vw, 36px) }

/* ------------------------------------------------------------------ one clip */
.sh-card {
  margin: 0;
  display: grid;
  gap: 10px;
  /* The controls follow the CARD's width, not the window's: a card in a three-up row
     is narrower than one in a two-up row at the same window size, and the labels have
     to answer to the space the card actually has or the row wraps onto two lines. */
  container-type: inline-size;
}

/* The frame takes the clip's own pixel ratio, so `contain` crops nothing: at the
   clip's own ratio there is nothing left to letterbox. In a row of vertical clips the
   ratio is shared by the whole row (see app.py), and `contain` letterboxes the odd one
   by well under a percent while keeping the row a line of equals. */
.sh-frame {
  position: relative;
  aspect-ratio: var(--sh-ar);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #0D0D0D;
  box-shadow: 0 14px 34px rgba(10, 10, 10, .16);
}

.sh-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

/* ------------------------------------------------------- the controls, under it */
.sh-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 2px;
}

.sh-btn {
  font: inherit;
  font-size: clamp(10.5px, 1.6vw, 12px);
  font-weight: 700;
  white-space: nowrap;          /* a wrapped pill grows tall and reaches the other one */
  padding: 8px 11px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sh-btn:hover { background: var(--ink); color: var(--surface) }
.sh-btn--quiet { border-color: rgba(10, 10, 10, .28) }
.sh-btn--quiet:hover { background: var(--ink); color: var(--surface) }
.sh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* The long label only fits where the card has the room. Saying "Play" is the same
   promise - it unmutes and plays - and it keeps the three buttons on ONE line. */
.sh-lbl--short { display: none }

@container (max-width: 359px) {
  .sh-lbl--long { display: none }
  .sh-lbl--short { display: inline }
  .sh-bar { gap: 6px }
  .sh-btn { font-size: 11.5px; padding: 7px 9px; border-width: 1px }
}
@container (max-width: 250px) {
  .sh-bar { gap: 4px }
  .sh-btn { font-size: 10.5px; padding: 5px 7px }
}
@container (max-width: 205px) {
  .sh-bar { gap: 3px }
  .sh-btn { font-size: 10px; padding: 4px 5px; border-width: 1px }
}

/* ------------------------------------------------------------------- the words */
.sh-cap {
  display: block;
  margin-top: 2px;
  padding: 0 4px;
  text-align: center;
}
.sh-cap__title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--ink);
}
.sh-cap__meta {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: clamp(11px, 1.05vw, 12.5px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.sh-cap__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  font-size: clamp(14px, 1.2vw, 15.5px);
  line-height: 1.55;
  color: var(--body);
}

/* ------------------------------------------------------------------ narrower */
@media (max-width: 899px) {
  .sh-row--wide { grid-template-columns: minmax(0, 1fr) }
  /* Two vertical clips to a row on a phone, which is the call she made for these same six
     clips on the workshop page: one clip per row is what she sends back, and three 9:16
     frames across a 390px screen leaves each about 110px wide - too small to see. The
     labels step down through the container queries above, so the three controls still sit
     on ONE line in a card this narrow. */
  .sh-row--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
}
@media (max-width: 559px) {
  .sh-cap__blurb { -webkit-line-clamp: 2 }
}

/* ------------------------------------------------------- the size-out view */
/* site.js's own full-window view: the clip whole at its own ratio, on black, with the
   site's three controls below it. `contain` and never `cover` - nothing of hers is
   stretched or cropped at full size. */
.fs-overlay .sh-video { object-fit: contain }