/* ===================================================================
   MÍDIA OFICIAL — midia.css
   Base from styles.css + temporada.css + hunter.css
   (.hn-card, .hn-card-grid, .hn-prose, .hn-manifesto, .chip-grid).
   =================================================================== */

/* —— Hero (font sized so the longest line never wraps; clean stack) —— */
.md-hero h1 { font-size: clamp(21px, 6vw, 30px); line-height: 1.06; }
.md-hero h1 .l { display: block; white-space: nowrap; }
.md-hero h1 .l:last-child { color: var(--accent); }
.md-hero { background: radial-gradient(130% 95% at 50% -5%, #16131a, #0b0b0d 62%); }

/* —— Play motif (símbolo da central de histórias) —— */
.md-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: 320px; height: 320px; color: var(--accent); opacity: .06; pointer-events: none; z-index: 1; }
.md-play svg { width: 100%; height: 100%; }
.md-play.fc { width: 280px; height: 280px; opacity: .055; transform: translate(-50%, -52%); }
.md-hero .hero-inner, .final-cta .fc-inner { position: relative; z-index: 2; }

/* —— Content card grid (produz) — número discreto no canto —— */
.hn-card-grid .hn-card .hc-ico { background: rgba(224,168,46,.1); }

/* —— "Mais" list (futuro da mídia) —— */
.md-mais { display: flex; flex-direction: column; gap: 8px; }
.md-mais .mm-row { display: flex; align-items: center; gap: 12px; background: var(--graphite); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; transition: border-color .22s, transform .22s; }
.md-mais .mm-row:hover { border-color: var(--accent); transform: translateX(3px); }
.md-mais .mm-row .mm-bar { flex: 0 0 4px; align-self: stretch; border-radius: 3px; background: linear-gradient(var(--accent), transparent); opacity: .6; }
.md-mais .mm-row span { font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: .01em; text-transform: uppercase; color: var(--txt); }

@media (max-width: 360px) {
  .hn-card-grid { grid-template-columns: 1fr; }
}