/* =====================================================================
   16 · midia — "Mídia espontânea". Tudo sob #midia.
   Grafismo de telejornal: recortes de imprensa como textura (dessaturada,
   atrás de véu forte, correndo na horizontal), número-herói em contador de
   transmissão, três frentes em cartões e a tarja AO VIVO com letreiro.
   ===================================================================== */
/* --md-w: a faixa do conteúdo. Com o texto 10% maior (--ts) ela cresce junto em tela larga (1320 → 1452 px, com
   ≥ 60 px de margem fora do gutter); abaixo de 1440 e com ?ts=1 é exatamente a do núcleo. A tarja segue a mesma borda. */
#midia .md-stage { --strap-h: clamp(46px, 6vh, 58px); --md-w: max(var(--maxw), min(calc(var(--maxw) * var(--ts, 1)), 100% - 120px)); background: #120b17; }

/* ---------- textura dos recortes ---------- */
#midia .md-press { position: absolute; inset: 0; overflow: hidden; background: #150e1a; opacity: .92; }
#midia .md-press__track { position: absolute; top: -2%; bottom: -2%; left: 0; display: flex; width: max-content; will-change: transform; }
#midia .md-press__tile {
  --paper: #1b1420;
  position: relative; flex: none; height: 100%; aspect-ratio: 1600 / 649;
  /* reserva sem a imagem: papel de jornal abstrato (colunas, manchetes, fotos, linhas de texto) */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 26px), var(--paper) calc(25% - 26px) 25%),
    linear-gradient(rgba(245, 238, 224, .2) 0 0) 3% 8% / 38% 3.2% no-repeat,
    linear-gradient(rgba(245, 238, 224, .15) 0 0) 3% 13% / 24% 3.2% no-repeat,
    linear-gradient(160deg, rgba(125, 85, 150, .36), rgba(40, 5, 50, .55)) 3% 26% / 21% 32% no-repeat,
    linear-gradient(160deg, rgba(245, 238, 224, .2), rgba(125, 85, 150, .22)) 53% 10% / 21% 42% no-repeat,
    linear-gradient(rgba(245, 238, 224, .18) 0 0) 53% 63% / 44% 3.2% no-repeat,
    linear-gradient(rgba(245, 238, 224, .13) 0 0) 53% 68% / 30% 3.2% no-repeat,
    linear-gradient(160deg, rgba(244, 178, 35, .16), rgba(40, 5, 50, .4)) 97% 88% / 21% 22% no-repeat,
    linear-gradient(160deg, rgba(245, 238, 224, .14), rgba(40, 5, 50, .4)) 28% 92% / 21% 26% no-repeat,
    repeating-linear-gradient(180deg, rgba(245, 238, 224, .11) 0 2px, transparent 2px 9px),
    var(--paper);
}
#midia .md-press__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.9) brightness(.5) blur(max(4.2px, .8vh)); transform: scale(1.03); }
#midia .md-scan { position: absolute; inset: 0; pointer-events: none; opacity: .55; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 4px); }
#midia .md-veil { background: rgba(14, 7, 19, .64); }
#midia .md-scrim-l { background: linear-gradient(90deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .7) 30%, rgba(40, 5, 50, .3) 56%, rgba(40, 5, 50, 0) 76%); }
#midia .md-scrim-b { background: linear-gradient(0deg, rgba(14, 7, 19, .92) 0%, rgba(14, 7, 19, .55) 14%, rgba(14, 7, 19, 0) 32%); }

/* ---------- composição ---------- */
#midia .md-wrap { position: relative; z-index: 3; height: 100%; max-width: var(--md-w); }
#midia .md-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 22px); }
#midia .md-lay {
  position: relative; height: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: center;
  padding-top: calc(var(--hud-h) + clamp(40px, 6.5vh, 72px));
  padding-bottom: calc(var(--strap-h) + clamp(44px, 8vh, 84px));
}
#midia .md-col { grid-column: 1 / 8; container-type: inline-size; }
#midia .md-lead { width: fit-content; max-width: 100%; display: grid; justify-items: start; gap: clamp(12px, 2.2vh, 22px); will-change: transform; }
#midia .md-fronts { grid-column: 8 / 13; display: grid; gap: clamp(10px, 1.6vh, 16px); }

/* número-herói: contador → tarja */
#midia .md-title { display: grid; justify-items: start; gap: .2em; font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; }
#midia .md-hero { position: relative; display: inline-grid; font-size: calc((min(19.5cqi, 172px)) * var(--ts, 1)); line-height: 1.04; letter-spacing: -.01em; padding-top: .1em; color: var(--honey); font-variant-numeric: tabular-nums; }
#midia .md-count, #midia .md-final { grid-area: 1 / 1; display: flex; align-items: flex-start; white-space: nowrap; }
#midia .md-final { clip-path: inset(-30% 100% -20% 0); }
#midia .md-cur { font-size: .46em; line-height: 1; margin: .2em .2em 0 0; color: var(--offwhite); }
#midia .md-digits { line-height: 1.04; }
#midia .md-digits .odo__col { padding-right: .05em; margin-right: -.05em; }
#midia .md-dot { display: inline-block; width: .2em; }
#midia .md-wipe { position: absolute; top: -.04em; bottom: -.02em; left: 0; width: .3em; z-index: 2; margin-left: -.15em; background: linear-gradient(180deg, var(--honey-2), var(--honey)); box-shadow: 0 0 28px rgba(244, 178, 35, .55); opacity: 0; pointer-events: none; }
#midia .md-sub { font-size: calc((clamp(24px, 5.4cqi, 46px)) * var(--ts, 1)); font-weight: 800; line-height: 1.12; letter-spacing: .01em; color: var(--offwhite); }

/* veículos */
#midia .md-outlets { display: grid; gap: 10px; justify-items: start; margin-top: clamp(4px, 1vh, 12px); }
#midia .md-outlets__k { color: var(--text-2); }
#midia .md-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
#midia .md-chips .tag { font-size: calc((clamp(15px, .45vw + 10px, 19px)) * var(--ts, 1)); letter-spacing: .04em; }

/* três frentes */
#midia .md-card { --bar: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 1.4vw, 22px); align-items: start; padding: clamp(14px, 2.2vh, 24px) clamp(16px, 1.6vw, 26px) clamp(14px, 2.2vh, 24px) clamp(20px, 1.8vw, 30px); }
#midia .md-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--honey); transform-origin: 50% 0; transform: scaleY(var(--bar)); }
#midia .md-card__i { font-size: calc(13px * var(--ts, 1)); font-weight: 700; letter-spacing: .12em; color: var(--honey); padding-top: .55em; }
#midia .md-card__t { display: grid; gap: 6px; }
#midia .md-card .h3 { font-size: calc((clamp(20px, 1.45vw, 27px)) * var(--ts, 1)); text-wrap: balance; }
#midia .md-card .body { font-size: calc((clamp(15px, .3vw + 11.5px, 17px)) * var(--ts, 1)); line-height: 1.45; }

/* ---------- tarja de telejornal ---------- */
#midia .md-strap {
  position: absolute; z-index: 4; right: 0; bottom: clamp(20px, 4vh, 40px); height: var(--strap-h);
  left: max(var(--gutter), calc(50% - var(--md-w) / 2 + var(--gutter)));
  display: flex; align-items: stretch; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .5));
}
#midia .md-live { position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 26px 0 18px;
  background: var(--signal); color: #fff; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(18px, .7vw + 10px, 24px)) * var(--ts, 1)); line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#midia .md-live i { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: live 1.4s ease-in-out infinite; }
#midia .md-slug { position: relative; z-index: 2; flex: none; display: flex; align-items: center; margin: 0 0 0 -14px; padding: 0 28px 0 30px;
  background: var(--honey); color: var(--acai-dark); font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(16px, .6vw + 9px, 21px)) * var(--ts, 1)); line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
#midia .md-crawl { position: relative; flex: 1; min-width: 0; margin-left: -14px; overflow: hidden; display: flex; align-items: center; background: var(--offwhite); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%); }
#midia .md-crawl::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 56px; z-index: 1; background: linear-gradient(90deg, var(--offwhite) 30%, rgba(245, 238, 224, 0)); }
#midia .md-crawl__track { display: flex; width: max-content; will-change: transform; animation: md-crawl var(--dur, 40s) linear infinite paused; }
#midia .md-crawl__run { flex: none; display: flex; align-items: center; margin: 0; white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(16px, .55vw + 10px, 21px)) * var(--ts, 1)); line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-text); }
#midia .md-crawl__run span { padding: 0 24px; }
#midia .md-crawl__run b { font-weight: 800; color: var(--acai); margin-right: .35em; }
#midia .md-crawl__run i { flex: none; width: 8px; height: 8px; background: var(--violet); transform: rotate(45deg); }
@keyframes md-crawl { to { transform: translateX(-50%); } }
#midia.is-live .md-crawl__track { animation-play-state: running; }
.reduced #midia .md-crawl__track, .reduced #midia .md-live i { animation: none; }

/* ---------- tablet em pé / janela estreita: herói em cima, frentes em três colunas ---------- */
@media (orientation: portrait), (max-width: 980px) {
  #midia .md-lay { grid-template-rows: auto auto; row-gap: clamp(32px, 5vh, 56px); }
  #midia .md-col { grid-column: 1 / -1; }
  #midia .md-hero { font-size: calc((min(16cqi, 150px)) * var(--ts, 1)); }
  #midia .md-sub { font-size: calc((clamp(26px, 4.4cqi, 44px)) * var(--ts, 1)); }
  #midia .md-fronts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  #midia .md-card { grid-template-columns: 1fr; row-gap: 10px; align-content: start; }
}