/* ============================================================
   media.css — styles for the Media & Insights page (media.jsx) ONLY.
   The page reuses the .flw dossier chrome from story.css (head, body,
   eyebrow, title, seg filter, cta). These rules are the additive
   card-grid layer that has no equivalent in the existing sheets.
   Included by build.mjs alongside story.css / aces-dossiers.css.
   ============================================================ */

/* the 6-pill category filter can wrap on narrow viewports */
.mediax-seg { flex-wrap: wrap; }

.mediax-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-content: start; padding-bottom: 8px; }

.mediax-card { display: flex; flex-direction: column; gap: 8px; background: var(--paper-0); border: 1.5px solid var(--ink-1000); border-radius: var(--radius-md); box-shadow: var(--shadow-ink-sm); padding: 18px 20px; }
/* card thumbnail — fixed frame so mixed source aspect ratios stay tidy; cards
   without an image simply start at .mediax-meta and keep the same rhythm */
.mediax-thumb { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1.5px solid var(--ink-1000); border-radius: calc(var(--radius-md) - 4px); margin-bottom: 4px; background: var(--paper-0); display: block; }
.mediax-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.mediax-tag { color: var(--red-600); }
.mediax-h { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.22; margin: 0; color: var(--ink-900); }
.mediax-outlet { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); }
.mediax-sum { font-size: 13.5px; line-height: 1.55; color: var(--ink-700); margin: 0; flex: 1 1 auto; }
.mediax-link { align-self: flex-start; font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--red-600); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.mediax-link:hover { color: var(--red-500); }
/* honest non-link state for items whose original URL is still being supplied */
.mediax-link--soon { color: var(--ink-400); border-bottom: 0; cursor: default; }
/* secondary "also covered by" links under the primary Read-the-original link */
.mediax-more { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 2px; }
.mediax-more-link { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); text-decoration: none; border-bottom: 1px solid var(--ink-300); padding-bottom: 1px; }
.mediax-more-link:hover { color: var(--red-600); border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .mediax-grid { grid-template-columns: 1fr; }
}