/* Styles of /media/ only (moved out of its <style> block on 2026-11-10).
   Loaded after the shared sheets, at the same place the block was, so the
   cascade is unchanged. Rules shared by several pages go in /css. */

/* Media page only. Not a case: it borrows the side column (rule + head) of the
   case template (css/case-page.css) and lays its own sections on the shared
   grid (css/grid.css). Desktop: contents on columns 4-12, first line on row 2.
   Tablet (8 columns) and phone (4 columns): stacked under the head. */
body.case-page .md-flow {
  display: grid;
  grid-template-columns: repeat(var(--g-cols), minmax(0, 1fr));
  column-gap: var(--g-gutter);
  row-gap: var(--cp-gap);
  padding-inline: var(--cp-inset);
  padding-bottom: var(--cp-gap);
  box-sizing: border-box;
}
body.case-page .md-flow > * { min-width: 0; }

/* Each section sits on the same columns as its parent and draws its top line
   exactly from the first to the last column. */
body.case-page .md-section {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  border-top: 1px solid var(--black, #1f1f29);
  padding-top: var(--v-gutter);
}
body.case-page .md-section > h2 {
  grid-column: 1 / -1;
  margin: 0 0 var(--v-gutter);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--black, #1f1f29);
}

/* Podcast: the Spotify player takes all the columns of the section. */
body.case-page .md-embed { grid-column: 1 / -1; margin: 0; }
body.case-page .md-embed iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }

/* Articles: one row per piece, on the column lines, no list indent.
   Desktop: image 2 columns, text 5, meta 2 (of the 9 columns of the section). */
body.case-page .media-list {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
body.case-page .media-list li,
body.case-page .media-list a {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
body.case-page .media-list li { border-top: 1px solid rgba(31, 31, 41, 0.16); }
body.case-page .media-list li:first-child { border-top: 0; }
body.case-page .media-list a {
  align-items: start;
  padding-block: calc(var(--v-gutter) * 1.5);
  color: var(--black, #1f1f29);
  text-decoration: none;
  transition: opacity 200ms ease;
}
body.case-page .media-list li:first-child a { padding-top: 0; }
body.case-page .media-list a:hover { opacity: 0.6; }
body.case-page .media-list a:focus-visible { outline: 2px solid var(--black, #1f1f29); outline-offset: 4px; }

body.case-page .media-list__thumb { grid-column: 1 / span 2; aspect-ratio: 1 / 1; margin: 0; }
body.case-page .media-list__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; background: rgba(31, 31, 41, 0.04); }
body.case-page .media-list__body { grid-column: 3 / span 5; min-width: 0; }
body.case-page .media-list__title {
  margin: 0 0 calc(var(--v-gutter) / 2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black, #1f1f29);
}
body.case-page .media-list__text {
  margin: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--black, #1f1f29);
}
body.case-page .media-list__meta {
  grid-column: 8 / span 2;
  justify-self: start;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--black, #1f1f29);
}
body.case-page .media-list__meta > span { display: block; }
body.case-page .media-list__meta > span + span { margin-top: 4px; opacity: 0.5; }

/* Other media: two squares and a landscape, each on whole columns. */
body.case-page .md-fig { margin: 0 0 var(--v-gutter); }
body.case-page .md-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.case-page .md-fig--sq-a { grid-column: 1 / span 4; aspect-ratio: 1 / 1; }
body.case-page .md-fig--sq-b { grid-column: 6 / span 4; aspect-ratio: 1 / 1; }
body.case-page .md-fig--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-bottom: 0; }

/* DESKTOP, 12 columns: the head is the sticky side; contents on columns 4-12,
   the first line on row 2 (row 1 is the menu bar). */
@media (min-width: 64em) {
  body.case-page .md-flow { grid-column: 1; grid-row: 1; padding-top: var(--v-pitch); }
  body.case-page .md-section { grid-column: 4 / -1; }
}

/* TABLET, 8 columns: image 2, text 4 beside it; the meta goes under the text. */
@media (max-width: 63.99em) {
  body.case-page .md-flow { padding-top: 0; }
  body.case-page .media-list__body { grid-column: 3 / -1; }
  body.case-page .media-list__meta { grid-column: 3 / -1; margin-top: var(--v-gutter); }
  body.case-page .md-fig--sq-a { grid-column: 1 / span 4; }
  body.case-page .md-fig--sq-b { grid-column: 5 / span 4; }
}

/* PHONE, 4 columns: image 1, text 3; squares 2 + 2. */
@media (max-width: 37.49em) {
  body.case-page .md-embed iframe { height: 232px; }
  body.case-page .media-list__thumb { grid-column: 1; }
  body.case-page .media-list__body,
  body.case-page .media-list__meta { grid-column: 2 / -1; }
  body.case-page .md-fig--sq-a { grid-column: 1 / span 2; }
  body.case-page .md-fig--sq-b { grid-column: 3 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  body.case-page .media-list a { transition: none; }
}
/* Text 14px from 2026-11-09; 12px on a phone, where js/a11y.js scales it to 16. */
@media (max-width: 39.99em) {
  body.case-page .md-section > h2,
  body.case-page .media-list__title,
  body.case-page .media-list__text { font-size: 12px; }
}