/* ==========================================================================
   components/media.css — the Media components: MediaCover, MediaFeature,
   MediaRow, the MediaStack that lays a feature beside or above its rows, and
   MediaTile in its .media-tiles grid (places: a site, a library).

   Picture-led cards on Home (the visual widgets, 2026-10-16): a featured
   record with its cover — or the brand band (BrandBandHelper#brand_band_gradient)
   when it has none — then rows with a thumbnail. Partials: shared/media/_cover,
   _feature, _row, _tile (desktop) and mobile/shared/media/* (phone, Tailwind — the /m/
   layout never loads this file). Registered in config/design_system_component_map.yml
   and src/docs/REUSABLE_COMPONENTS.md; the Claude Design component is Media.

   SIZED BY THE CONTAINER, NOT THE VIEWPORT. One dashboard width setting spans
   436–884px (half) or 209–433px (quarter) across 1024–1920px screens, so the
   stack queries its own width. .media-stack is the query container; it sits in
   a card body 46px narrower than the card, so 300 / 560 / 860px here are cards
   of 340 / 600 / 900px: compact below 340, standard to 599, wide to 899, the
   feature beside its rows from 900.

   Colour reads theme variables; the only literals are white ink and chips that
   sit on a photo or the brand band, in either theme.
   ========================================================================== */

.media-stack { container-type: inline-size; margin-bottom: .5rem; }
.media-stack__split { display: flex; flex-direction: column; gap: .75rem; }
.media-stack__divider { height: 1px; background: var(--bs-border-color-translucent, rgba(0, 0, 0, .08)); }
.media-stack__rows { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }

/* MediaCover — the picture slot. */
.media-cover { position: relative; height: 120px; border-radius: .625rem; overflow: hidden; background: var(--bs-tertiary-bg, #f8f9fa); }
/* Not positioned: a headline on the band carries the feature's stretched
   link, which must reach the whole feature, and a positioned band would
   contain it. The glyph and chip place against the feature, whose top-left is
   the band's. */
.media-cover--band { position: static; display: flex; flex-direction: column; justify-content: flex-end; padding: .875rem 1rem; }
.media-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-cover__glyph { position: absolute; top: .5rem; right: .75rem; font-size: 4rem; color: rgba(255, 255, 255, .16); pointer-events: none; } /* contrast-exempt: decorative glyph on the brand band */ /* theme-exempt: decorative glyph on the brand band */
.media-cover__headline { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
/* !important and three classes: a light-theme rule paints every h1–h6
   #212529 !important, which read as dark text on the band (measured 2026-10-16). */
.media-stack .media-cover--band .media-cover__headline { color: #fff !important; /* theme-exempt: white on the brand band, whose stops BusinessTheme.brand_band_stops measures for white text */ }
.media-cover__chip { position: absolute; top: .625rem; left: .625rem; z-index: 1; font-size: var(--type-caption, 12px); font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: #fff; color: #1f2329; /* theme-exempt: a light chip on a photo or the brand band, in either theme */ }
.media-cover__chip--live { background: var(--bs-danger, #dc3545); color: var(--bs-on-danger, #fff); }
.media-cover__chip--warning { background: var(--bs-warning, #ffc107); color: var(--bs-on-warning, #212529); }

/* MediaFeature — cover, headline, byline, trailing action. */
.media-feature { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.media-feature__headline { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.media-feature__byline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; font-size: var(--type-small, 13px); color: var(--bs-secondary-color, #6c757d); }
.media-feature__by { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.media-feature__avatar { display: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.media-feature__avatar--initials { align-items: center; justify-content: center; background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary-text-emphasis, var(--bs-primary)); font-size: 10px; font-weight: 700; }

/* MediaRow — thumbnail, title, meta, trailing action. */
.media-row { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.media-row__thumb { display: block; flex-shrink: 0; width: 44px; height: 34px; border-radius: .375rem; object-fit: cover; background: var(--bs-tertiary-bg, #f8f9fa); }
.media-row__thumb--band { display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; /* theme-exempt: white glyph on the brand band */ }
.media-row__text { flex: 1 1 auto; min-width: 0; }
.media-row__title { font-size: 14px; font-weight: 600; }
.media-row__meta { font-size: var(--type-caption, 12px); color: var(--bs-secondary-color, #6c757d); }

/* MediaTile — a place with a cover, an icon tile and a name, in a .media-tiles
   grid that is its own query container (the same 300 / 860px body widths as
   the stack). Compact: a list of icon + name. Standard: cover tiles two across
   (four tiles fill two rows; three across left one orphaned). Extra wide: four
   across, taller covers. The icon is
   .site-icon-tile (custom.css) with TintedIconHelper's opaque wash. */
.media-tiles { container-type: inline-size; margin-bottom: .5rem; }
.media-tiles__grid { display: flex; flex-direction: column; gap: .75rem; }
.media-tile { position: relative; display: flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; text-decoration: none; border-radius: .625rem; }
a.media-tile:hover, a.media-tile:focus-visible { color: inherit; }
.media-tile__band { display: none; }
.media-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-tile__icon { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
.media-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.media-tile__name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-tile__meta { font-size: var(--type-caption, 12px); color: var(--bs-secondary-color, #6c757d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-tile__chip { margin-left: auto; flex-shrink: 0; font-size: var(--type-caption, 12px); font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--bs-border-color, #dee2e6); background: var(--bs-tertiary-bg, #f8f9fa); color: var(--bs-body-color, #212529); }

/* A date — MediaRow's `date:` tile in place of the thumbnail, MediaCover's
   `date:` card top left: the month over the day, the month on the record's
   own wash (BrandBandHelper#media_tint_style → TintedIconHelper's opaque tile,
   whose inks are measured on that wash). The tile is .site-icon-tile (custom.css)
   for the wash; the card stays white in either theme, like the chip. */
.media-date { flex-direction: column; gap: 2px; width: 48px; height: 48px; border-radius: 10px; color: var(--tint-ink); }
:root[data-theme="dark"] .media-date { color: var(--tint-ink-dark, var(--tint-ink)); }
.media-date__month { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.media-date__day { font-size: 19px; font-weight: 700; }
.media-cover__date { position: absolute; top: .625rem; left: .625rem; z-index: 1; display: flex; flex-direction: column; width: 52px; border-radius: 10px; overflow: hidden; text-align: center; line-height: 1; box-shadow: 0 2px 8px rgba(16, 24, 40, .2); background: #fff; color: #1f2329; /* theme-exempt: a light date card on a photo or the brand band, in either theme */ }
.media-cover__date-month { display: block; padding: 4px 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--tint-wash); color: var(--tint-ink); }
.media-cover__date-day { display: block; padding: 6px 0 7px; font-size: 22px; font-weight: 700; }
.media-cover__date ~ .media-cover__chip { left: auto; right: .625rem; }

/* The trailing column (an inline action, a Sample chip) sits above the
   stretched link so it stays clickable on its own. */
.media-trail { position: relative; z-index: 2; display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }

@container (min-width: 300px) {
  .media-cover { height: 160px; }
  .media-cover__headline { font-size: 18px; }
  .media-feature__headline { font-size: 17px; }
  .media-feature__avatar { display: inline-flex; }
  .media-row__thumb { width: 64px; height: 48px; border-radius: .5rem; }
  .media-row__thumb--band { font-size: 1.05rem; }
  .media-row__meta { font-size: var(--type-small, 13px); }
  .media-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; }
  .media-tile { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1)); background: var(--bs-card-bg, #fff); }
  a.media-tile:hover { border-color: rgba(var(--bs-primary-rgb), .45); }
  .media-tile__band { display: block; position: relative; height: 84px; background: var(--bs-tertiary-bg, #f8f9fa); }
  .media-tile__icon { position: absolute; left: .75rem; top: 64px; box-shadow: 0 1px 4px rgba(16, 24, 40, .18); }
  .media-tile__text { padding: 1.75rem .75rem .75rem; }
  .media-tile__chip { position: absolute; top: .625rem; left: .625rem; z-index: 1; margin: 0; border-color: transparent; background: #fff; color: #1f2329; /* theme-exempt: a light chip on a photo or the brand band, in either theme */ }
}
@container (min-width: 560px) {
  .media-cover { height: 200px; }
  .media-cover__headline { font-size: 20px; }
  .media-feature__headline { font-size: 19px; }
  .media-stack__rows { gap: .75rem; }
}
@container (min-width: 860px) {
  .media-stack__split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.75rem; align-items: start; }
  .media-stack__divider { display: none; }
  .media-cover { height: 230px; }
  .media-cover__headline { font-size: 22px; }
  .media-feature__headline { font-size: 21px; }
  .media-stack__rows { gap: 1rem; }
  .media-row__thumb { width: 112px; height: 80px; }
  /* A list with no feature beside it keeps the standard thumbnail. */
  .media-stack--list .media-row__thumb { width: 64px; height: 48px; }
  .media-tiles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .media-tile__band { height: 104px; }
  .media-tile__icon { top: 84px; }
}