/* Media page (/media/) — no design/ prototype; built to Colin's mockup
   (docs/DECISIONS.md 2026-08-09) on the README section grammar.
   Namespace: everything here is m*-prefixed — .story* belongs to
   home.css/aziz-story, and bare kicker/note/title/label collide with the
   nav/footer partials. Reused site.css primitives: .eyebrow,
   .section-header/.summary, .photo/.photo__img, .play, .lightbox. */

.mwrap { padding: 78px var(--gutter) 96px; background: #fff; }
.mwrap .eyebrow { margin-bottom: 26px; }

/* Masthead — h1 variant of .section-header (site.css only styles its h2).
   Explicit line-height: the site body's 1.6 taxes serif headings. */
.mmast { margin-bottom: 40px; }
.mmast h1 { margin: 0; font-family: var(--font-serif); font-weight: 300; font-size: 60px; line-height: 1.06; letter-spacing: -.022em; color: var(--ink); text-wrap: pretty; }
.mmast .summary { max-width: 380px; }

/* Filter tabs — give-band draw-in underline recipe in the ink/deep-teal
   colorway. Not tablist ARIA: this filters one grid, it doesn't switch
   panels (aria-pressed group, give-band precedent). */
.mtabs { display: flex; flex-wrap: wrap; gap: 8px 30px; margin-bottom: 38px; }
.mtab { background: none; border: 0; cursor: pointer; padding: 0 0 8px; font: 600 11.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: rgba(41, 42, 60, .6); background-image: linear-gradient(var(--deep-teal), var(--deep-teal)); background-repeat: no-repeat; background-size: 0 2px; background-position: 100% 100%; transition: background-size 280ms var(--ease-swift), color var(--t-fast) var(--ease); }
.mtab:hover, .mtab.is-active { color: var(--ink); background-size: 100% 2px; background-position: 0 100%; }
.mtab__n { font-size: 9.5px; color: rgba(41, 42, 60, .5); margin-inline-start: .35em; }

/* Grid — whole-grid fade on refilter (give-tiers-in recipe); the global
   prefers-reduced-motion block in site.css zeroes it. */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 26px; }
.mcard[hidden] { display: none; } /* guard: filtering relies on [hidden] */
.mgrid.is-refiltered { animation: mgrid-in var(--t-med) var(--ease); }
@keyframes mgrid-in { from { opacity: 0; } }

/* Card — 3px ink top rule flush on the thumbnail (mockup) */
.mcard { border-top: 3px solid var(--ink); }
.mcard__media { aspect-ratio: 16 / 9; } /* .photo supplies position/overflow/ink bg; .photo__img the B&W-to-color reveal */
.mcard__media:focus-visible .photo__img { filter: grayscale(0) contrast(1.02); } /* mirror hover on keyboard focus */
.mcard__playchip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .8); background: rgba(20, 21, 30, .45); transition: background-color var(--t-med) var(--ease); }
.mcard__media:hover .mcard__playchip, .mcard__media:focus-visible .mcard__playchip { background: rgb(20, 21, 30); }
.mcard__time { position: absolute; right: 12px; bottom: 12px; background: rgba(20, 21, 30, .78); padding: 7px 11px; font: 600 10.5px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; } /* .story__chip recipe, duplicated on purpose — no home.css lift */
/* deep teal, not the mockup's bright teal — --teal on white fails AA at 11px
   (.story__meta precedent; deviation logged in DECISIONS) */
.mcard__channel { margin-top: 16px; font: 600 11px var(--font-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--deep-teal); }
.mcard__title { margin: 10px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.mcard__meta { margin-top: 10px; font: 500 12.5px var(--font-sans); color: rgba(41, 42, 60, .7); } /* .62 → .7: AA contrast (Wave A5) */

/* Empty state — ships whenever mediaVideos.js is empty (.hempty recipe) */
.mempty { padding: 46px 0 10px; border-top: 1px solid rgba(41, 42, 60, .5); }
.mempty__title { font-family: var(--font-serif); font-weight: 300; font-size: 30px; line-height: 1.2; color: var(--ink); max-width: 520px; }
.mempty p { margin: 12px 0 0; max-width: 480px; font: 400 16px/1.6 var(--font-serif); color: rgba(41, 42, 60, .74); }
.mempty p a { color: var(--deep-teal); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.mempty p a:hover { color: var(--ink); }

@media (max-width: 1032px) {
  .mwrap { padding-block: 58px 72px; }
  .mmast h1 { font-size: clamp(36px, 6vw, 60px); } /* reaches 60 below 1032 — no jump */
  .mcard__title { font-size: clamp(22px, 2.6vw, 26px); }
  .mgrid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
}

@media (max-width: 743px) {
  .mwrap { padding-block: 48px 56px; }
  .mmast { margin-bottom: 30px; }
  .mtabs { gap: 4px 24px; margin-bottom: 26px; }
  .mtab { padding: 19px 4px 9px; } /* 44px hit target; underline stays near the text */
  .mgrid { grid-template-columns: 1fr; gap: 40px; }
}