/* =====================================================
   WAY TV - Tema "novo"  ·  linguagem visual Movflx
   Activo apenas em /beta/  (ver THEME_BETA no config.php)

   Traz do Movflx: o amarelo #e4d804, os cinzentos-escuros,
   os botoes em pastilha com contorno, o antetitulo das
   seccoes, os cartoes mais quadrados e a Poppins.

   Carrega DEPOIS do style.css, por isso so escreve o que muda.
   Promover para o site todo: THEME_FORCE = 'novo' no config.php
   ===================================================== */

/* ── Poppins (auto-alojada, como as fontes da marca) ──────
   latin e latin-ext separados por unicode-range: o browser so
   descarrega o que a pagina usa. Em portugues e quase sempre
   so o ficheiro "latin" (~8 KB por peso).
   ---------------------------------------------------- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../fonts/poppins/Poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../fonts/poppins/Poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../../fonts/poppins/Poppins-400i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../../fonts/poppins/Poppins-400i-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../../fonts/poppins/Poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../../fonts/poppins/Poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../fonts/poppins/Poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../fonts/poppins/Poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../fonts/poppins/Poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../fonts/poppins/Poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../../fonts/poppins/Poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../../fonts/poppins/Poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../../fonts/poppins/Poppins-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../../fonts/poppins/Poppins-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }


/* ── Paleta e tipos ──────────────────────────────────── */
:root {
  /* Cinzentos do Movflx, do mais fundo ao mais claro */
  --bg:     #100e17;   /* fundo geral */
  --bg-2:   #1f1e24;   /* cartoes e barras (o cinzento dos cards do Movflx) */
  --bg-3:   #20212b;   /* campos e estados hover */
  --bg-4:   #2a2933;   /* elementos destacados */

  /* Cores da marca, amostradas do proprio logotipo
     (site/assets/img/logo-waytv.png): o gradiente vai de ciano
     a roxo, passando por azul.

     Em RGB porque a folha base usa estas componentes nas dezenas
     de rgba() de realce (brilhos, fundos suaves, contornos).
     Redefini-las aqui faz tudo seguir o tema de uma vez. */
  --accent-rgb:   12,204,240;   /* ciano #0cccf0 - a cor principal  */
  --accent-2-rgb: 72,132,216;   /* azul  #4884d8 - meio do gradiente */
  --accent-3-rgb: 120,72,204;   /* roxo  #7848cc - fim do gradiente  */

  /* O amarelo do Movflx fica como apontamento, nao como cor de
     marca: antetitulos de seccao, selos e a barra do slider. */
  --accent-warm: #e4d804;

  /* Sobre o ciano e o amarelo o texto tem de ser escuro.
     Branco sobre ciano da 1.92:1 e e ilegivel. */
  --on-accent: #0a1014;

  --text:   #ffffff;
  --text-2: rgba(255,255,255,.72);
  --text-3: rgba(255,255,255,.48);  /* 44% dava 4.27:1 sobre o cartao, abaixo do minimo AA para texto pequeno */
  --text-4: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.10);

  /* O gradiente da marca deriva sozinho das variaveis acima,
     por isso passa a amarelo sem ser preciso reescreve-lo. */

  /* Cantos rectos em todo o lado (paineis, cartoes, barras).
     Eram estes 4px/6px que ainda arredondavam o banner do
     direto, a grelha de ministerios e os cartoes do carrossel. */
  --radius:    0;
  --radius-lg: 0;

  /* Poppins em vez das fontes da marca (so no beta) */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-verse:   'Poppins', system-ui, -apple-system, sans-serif;
}

/* A Poppins e mais larga que a Salty Ages: sem o aperto de
   letras dos titulos originais o ar fica mais proximo do
   Movflx, que usa titulos largos e pesados. */
h1, h2, h3, h4 { letter-spacing: -.01em; }

/* ── Cantos: tudo quadrado ───────────────────────────────
   A folha base misturava pastilhas (50px/999px), cantos suaves
   (8px/10px) e circulos (50%), o que tirava coerencia.

   A lista saiu de duas passagens: primeiro do style.css, depois
   da propria pagina no browser, porque varios botoes usavam
   valores que o primeiro varrimento nao apanhava. */

/* pastilhas e selos */
.nav-link.live, .nav-apoiar, .hero-btn, .live-epg-pill, .live-banner-btn a,
.cat-pill, .btn, .hero-cta, .cat-tab, .search-tag, .btn-outline,
.btn-gradient, .live-badge, .live-banner-cta, .od-search-form,
.donate-card__badge, .about-mission__pills span, .yt-live-banner__pill,
.live-badge-pill, .hero-cat, .a-card__cat, .prog-card__cat,
/* circulos e cantos suaves que escaparam ao primeiro varrimento */
.header-search-btn, .search-close, .nav-burger, .nav-dropdown__toggle,
.yt-carousel__arrow, .lc-carousel__arrow, .lc-card__live-badge,
.home-app-btn, .events-arrow, .od-arrow {
  border-radius: 0;
}

/* Menu, submenus e restantes controlos. Esta leva saiu de um
   varrimento a pagina INTEIRA (nao so aos botoes), depois de o
   .nav-link ter escapado as duas passagens anteriores. */
/* .header-nav .nav-link em vez de so .nav-link: com a mesma
   especificidade da regra base (0,1,0) o tema ganhava aqui mas
   nao no servidor, e a causa nao se reproduzia localmente.
   Subir para (0,2,0) resolve sem precisar de !important. */
.header-nav .nav-link, .nav-link,
.nav-dropdown__item, .nav-dropdown__panel-inner,
.newsletter-cta, .footer-social a,
.how-copy-btn, .donate-copy-btn, .copy-btn {
  border-radius: 0;
}

/* A biblia.php injecta o seu CSS por $extra_head, que o header.php
   imprime DEPOIS do tema. Como nos outros casos de estilo dentro da
   propria pagina, so o !important chega la. */
.verse-badge, .font-btn, .btn-chapter-nav { border-radius: 0 !important; }

/* Estes estao num <style> dentro do proprio index.php, que no
   documento vem DEPOIS das folhas ligadas e por isso ganha sempre ao
   tema. E o unico sitio onde o !important e mesmo necessario.
   (Se um dia esse bloco passar para o style.css, isto pode sair.) */
.lc-carousel__arrow,
.lc-card__live-badge,
.lc-card,
.lc-card__play-icon { border-radius: 0 !important; }

/* Paginas de transmissao (em-direto.php e tv.php). Tambem elas
   trazem o CSS num <style> dentro do proprio ficheiro, por isso
   precisam de !important. Lista tirada de um varrimento as
   paginas no browser, nao do codigo. */
.epg-row, .brc-card__thumb, .brc-card__play-btn, .brc-rail-arrow,
.lp-btn, .lp-q-btn, .lp-bigplay-btn, .lp-unmute, .lp-live-tag,
.brc-apps__btn, .brc-action, .brc-now-card__live,
.tv-card, .tv-card__thumb, .tv-rail-arrow, .tv-btn,
#lpRetry,                      /* "Tentar novamente" do leitor: so tem id */
.cookie-btn, .cookie-modal, .cookie-modal__actions button, .cookie-toggle__track {
  border-radius: 0 !important;
}

/* Ficam redondos de proposito: o anel do carregamento (e uma roda
   que gira) e os pontos de "no ar" (sao sinal de estado, nao
   decoracao; quadrados deixam de se ler como tal). */
.lp-spin-ring, .bible-loader-ring,
.live-dot, .lc-card__live-dot, .lc-card__live-dot,
.brc-now-card__live-dot, .verse-badge-dot { border-radius: 50% !important; }

/* ── Botoes ──────────────────────────────────────────────
   Rectos, com contorno na cor do logotipo, que se enche ao
   passar o rato. O texto sobre o ciano e escuro: branco daria
   1.92:1 e nao se lia. */
.btn {
  border: 2px solid var(--accent);
  background: transparent;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .78rem;
  padding: 13px 28px;
}
.btn:hover { background: var(--accent); color: var(--on-accent); opacity: 1; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: transparent; color: var(--accent); }

.btn-secondary { border-color: rgba(255,255,255,.22); background: transparent; }
.btn-secondary:hover { border-color: var(--accent); background: transparent; color: var(--accent); }

/* ── Titulos de seccao ───────────────────────────────────
   Antetitulo curto em maiusculas. Aqui fica o AMARELO como
   apontamento: destaca-se do ciano das accoes sem competir
   com ele. */
.section-label { color: var(--accent-warm); letter-spacing: .2em; }

/* ── Cartoes ─────────────────────────────────────────────
   No Movflx o cartao e um bloco cinzento plano, sem contorno,
   que ganha a cor de marca ao passar o rato. */
.a-card, .prog-card { border-color: transparent; background: var(--bg-2); }
.a-card:hover, .prog-card:hover { border-color: var(--accent); }

/* Selos de categoria: AMARELO, o outro apontamento. Ficam a
   saltar a vista sobre as fotografias sem repetir o ciano. */
.a-card-cat, .hero-cat-badge {
  background: var(--accent-warm);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
}

/* Pastilhas de filtro ganham o contorno do template */
.cat-pill:hover { border-color: var(--accent); color: var(--accent); }

/* ── Menu: compensar a largura da Poppins ────────────────
   A Poppins e mais larga que a Xenon Nue e o menu de 14 itens
   crescia ~60px, encostando ao logotipo em ecras de portatil.
   Aperta-se um pouco o espacamento para o beta ficar com a
   mesma caixa da raiz e poderem comparar-se lado a lado.

   Nota: mesmo assim o menu sobrepoe-se ao logotipo entre 769px
   e ~1150px, mas isso ja acontece na raiz e nao e deste tema. */
.nav-link { padding-left: 10px; padding-right: 10px; font-size: .8rem; }

/* O emblema do cartao destacado tinha texto branco sobre a cor de
   marca. Com o ciano passava; sobre amarelo dava 1.6:1 e ficava
   ilegivel. Passa a texto escuro. */
/* Este emblema assenta em var(--grad), que agora vai do ciano ao
   roxo. Nem branco nem escuro se leem bem ao longo do gradiente
   todo (o roxo da 3.28:1), por isso leva amarelo solido como os
   restantes selos. */
.donate-card__badge {
  background: var(--accent-warm);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
}

/* =====================================================
   LAYOUT  ·  o cartao do Movflx adaptado ao 16:9

   O template usa cartazes verticais, mas as imagens da Way TV
   sao todas 16:9 (verificado: 26 de 26 na homepage). Forca-las
   ao vertical cortava caras e texto, por isso mantem-se o 16:9
   e traz-se tudo o resto: imagem a mandar, sem texto de resumo,
   dados sobrepostos, play ao passar o rato e grelhas mais densas.

   As familias de cartao da homepage partilham a mesma anatomia
   (__thumb-wrap / __img-wrap, __play, __body, __title), por isso
   as regras apanham-nas todas de uma vez.
   ===================================================== */

/* ── O cartao: bloco plano, sem contorno, cantos rectos ── */
.vid-card, .prog-card, .yt-card, .blog-card, .event-card, .feat-card, .a-card {
  /* background-color, nao "background": a abreviatura apagaria as
     imagens de fundo que alguns cartoes trazem em style inline. */
  background-color: var(--bg-2);
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: transform .25s var(--ease);
}

/* Nem todos os artigos tem imagem. Numa grelha que vive de imagens
   um cartao so com texto abre um buraco e desalinha a linha, por
   isso ganha um painel na cor de marca com a altura da imagem que
   lhe falta, e a grelha volta a bater certo. */
.prog-card:not(:has(.prog-card__img-wrap))::before,
.feat-card:not(:has(.feat-card__img))::before,
.vid-card:not(:has(.vid-card__thumb-wrap))::before {
  content: '';
  display: block;
  aspect-ratio: 16/9;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb),.14), transparent 65%),
    var(--bg-3);
  border-bottom: 2px solid rgba(var(--accent-rgb),.35);
}
.vid-card:hover, .prog-card:hover, .yt-card:hover,
.blog-card:hover, .event-card:hover, .feat-card:hover, .a-card:hover {
  transform: translateY(-4px);
  border: none;
}

/* ── A imagem manda: ocupa tudo e aproxima-se ao passar ── */
.vid-card__thumb-wrap, .prog-card__img-wrap,
.yt-card__thumb, .blog-card__img-wrap, .a-card__img-wrap {
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.vid-card__thumb, .prog-card__img, .yt-card__thumb img,
.blog-card__img, .event-card__img, .feat-card__img, .a-card__img {
  transition: transform .5s var(--ease), filter .3s;
}
.vid-card:hover .vid-card__thumb,
.prog-card:hover .prog-card__img,
.yt-card:hover .yt-card__thumb img,
.blog-card:hover .blog-card__img,
.feat-card:hover .feat-card__img,
.a-card:hover .a-card__img {
  transform: scale(1.06);
  filter: brightness(.55);
}

/* Veu escuro no fundo da imagem, para os dados sobrepostos
   se lerem sobre qualquer fotografia. */
.vid-card__thumb-wrap::after, .prog-card__img-wrap::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  pointer-events: none; opacity: .9;
}

/* ── Botao de play ───────────────────────────────────────
   Atencao: .X-card__play nao e o botao, e um veu com inset:0
   que cobre a imagem toda e centra um <svg> la dentro. O que
   leva o tratamento do Movflx e o svg, nao o veu. */
.vid-card__play, .prog-card__play {
  background: transparent;   /* o escurecimento ja vem do filter na imagem */
}
.vid-card__play svg, .prog-card__play svg, .yt-card__play svg {
  background: var(--accent);
  color: var(--on-accent);
  fill: currentColor;
  border: none;
  border-radius: 0;          /* quadrado, para bater certo com o resto */
  width: 46px; height: 46px;
  padding: 12px;
  box-sizing: border-box;
  transform: scale(.75);
  transition: transform .28s var(--ease);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.vid-card:hover .vid-card__play svg,
.prog-card:hover .prog-card__play svg,
.yt-card:hover .yt-card__play svg {
  transform: scale(1);
}

/* ── Selos sobre a imagem, como os HD/4K do template ───── */
.vid-card__dur, .yt-card__badge {
  border: 2px solid rgba(255,255,255,.9);
  background: transparent;
  color: #fff;
  border-radius: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  backdrop-filter: blur(6px);
}
.prog-card__cat {
  background: var(--accent-warm);
  color: var(--on-accent);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .1em;
}

/* ── Corpo do cartao: so titulo e dados ─────────────────── */
.vid-card__body, .prog-card__body, .yt-card__body,
.blog-card__body, .event-card__body, .feat-card__body {
  padding: 14px 4px 4px;
  background: transparent;
}
.vid-card__title, .prog-card__title, .yt-card__title,
.blog-card__title, .event-card__title, .feat-card__title {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  transition: color .2s;
}
.vid-card:hover .vid-card__title, .prog-card:hover .prog-card__title,
.yt-card:hover .yt-card__title, .blog-card:hover .blog-card__title,
.event-card:hover .event-card__title, .feat-card:hover .feat-card__title {
  color: var(--accent);
}

/* Nos cartoes com imagem forte (video, programa) o Movflx deixa
   a imagem e o titulo fazer o trabalho e dispensa o resumo.
   Os cartoes de blog nao tem imagem nenhuma: o resumo e o
   conteudo, por isso fica. */
.a-card:has(img) .a-card__excerpt,
.a-card:has(img) .a-card-excerpt { display: none; }

/* Cartao de blog: sem imagem, vive da tipografia. Ganha um risco
   na cor de marca a esquerda, como as listas do template. */
.blog-card {
  border-left: 3px solid transparent;
  padding-left: 16px;
  transition: border-color .25s, transform .25s var(--ease);
}
.blog-card:hover { border-left-color: var(--accent); transform: translateX(3px); }
.blog-card__excerpt {
  font-size: .82rem; line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* O selo ja e inline-block no original, mas o __body e um flex em
   coluna e por omissao os filhos esticam-se a largura toda. E por
   isso que a etiqueta aparecia como uma barra. align-self resolve. */
.blog-card .a-card__cat,
.prog-card__cat,
.a-card__cat {
  align-self: flex-start;
  border-radius: 0;
  background: var(--accent-warm);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
}

.vid-card__meta, .vid-card__views, .prog-card__time,
.yt-card__date, .blog-card__time, .a-card__time {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── Grelhas mais densas ─────────────────────────────────
   Com 16:9 cabem quatro por linha sem os cartoes ficarem
   pequenos, que e a densidade a que o Movflx trabalha. */
.blog-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.od-grid   { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.prog-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; }

@media (max-width: 1100px) {
  .blog-grid, .od-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .blog-grid, .od-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   HEROI / SLIDER  ·  o impacto do banner do Movflx
   ===================================================== */

/* O veu estava preso ao azul-escuro antigo (rgba(9,9,15,...)),
   o que destoava do fundo do tema. Passa a derivar dele. */
.hero-slide .hero-overlay {
  background:
    linear-gradient(to right, rgba(16,14,23,.94) 0%, rgba(16,14,23,.70) 42%, rgba(16,14,23,.15) 100%),
    linear-gradient(to top,   rgba(16,14,23,.92) 0%, transparent 58%);
}

/* O titulo ia no maximo a 27px num heroi de 774px de altura.
   O Movflx trabalha o banner a 60px: e dai que lhe vem o impacto. */
.hero-slide .hero-title {
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.hero-slide .hero-content > * { max-width: 680px; }

/* Antetitulo em maiusculas com o risco da marca, como as
   seccoes do template. */
.hero-slide .hero-cat {
  background: var(--accent-warm);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
  border-radius: 0;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 11px;
}
/* Selo dos slides de video (WTV+).
   O original tinha um gradiente roxo/azul fixo com !important.

   Atencao ao -webkit-text-fill-color: a regra acima poe-no escuro
   para o selo amarelo, e ele MANDA sobre o "color". Sem o repor
   aqui, o texto ficava escuro sobre fundo transparente e o selo
   desaparecia por cima da imagem. */
.hero-cat--video {
  background: transparent !important;
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  border: 2px solid var(--accent);
}

.hero-slide .hero-excerpt {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 24px;
}

/* Botao em pastilha, cheio de amarelo como o "WATCH NOW" */
.hero-cta {
  background: var(--accent);
  color: var(--on-accent);
  border: 2px solid var(--accent);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: .8rem;
  padding: 13px 30px;
  transition: background .2s, color .2s;
}
.hero-cta:hover { background: transparent; color: var(--accent); }

/* ── Setas: quadradas e discretas, amarelas ao passar ──── */
.hero-arrow {
  width: 46px; height: 46px;
  border-radius: 0;
  background: rgba(16,14,23,.55);
  border: 1px solid rgba(255,255,255,.18);
}
.hero-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: translateY(-50%);   /* sem o salto de escala do original */
}

/* ── Pontos ──────────────────────────────────────────────
   O tamanho visivel fica igual, mas cada ponto ganha uma area
   de toque de 24px com espacamento transparente: no telemovel
   eram alvos de 8px, impossiveis de acertar com o dedo. */
.hero-dots { gap: 2px; bottom: 26px; }
.hero-dot {
  background-clip: content-box;
  padding: 8px;
  width: 24px; height: 24px;
  border-radius: 0;
  background-color: rgba(255,255,255,.35);
}
.hero-dot.active {
  /* o style.css usa "background: #fff" (abreviatura) aqui, o que repoe
     o background-clip para border-box e fazia do ponto activo um
     borrao do tamanho da area de toque. E preciso reafirma-lo. */
  background-clip: content-box;
  background-color: var(--accent);
  width: 46px;
  border-radius: 0;
}

/* ── Barra de progresso dos 6 segundos ───────────────────
   O elemento vem do index.php sem estilo nenhum, por isso na
   raiz continua invisivel. Aqui ganha corpo. */
.hero-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; z-index: 10;
  background: rgba(255,255,255,.10);
}
.hero-progress span {
  display: block; height: 100%;
  background: var(--accent-warm);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .hero-progress { display: none; }
}

/* ── Heroi no telemovel ──────────────────────────────────
   Tres problemas que so aparecem aqui:
   1. O style.css forca .hero-title a 1.1rem com !important
      abaixo de 480px. E preciso !important para o vencer.
   2. O botao em pastilha ficava por cima dos pontos.
   3. O slider tem 240px de altura, apertado para titulo
      grande mais botao.
   ---------------------------------------------------- */
@media (max-width: 768px) {
  .hero-slider { height: clamp(300px, 64vw, 420px); }

  .hero-slide .hero-title { font-size: clamp(1.35rem, 5.6vw, 1.8rem) !important; }

  /* espaco em baixo para os pontos deixarem de colidir */
  .hero-slide .hero-content { padding-bottom: 60px; }

  .hero-cta { padding: 10px 22px; font-size: .72rem; }

  .hero-dots { bottom: 18px; gap: 0; }
  .hero-progress { height: 4px; }   /* mais visivel no telemovel */
}

@media (max-width: 480px) {
  .hero-slide .hero-title { font-size: 1.35rem !important; }
}

/* ── Titulo de seccao com o risco do template ──────────── */
.section-heading, .section-header { align-items: flex-end; }
.section-label::before {
  content: ''; display: inline-block;
  width: 26px; height: 2px; margin-right: 10px;
  background: var(--accent); vertical-align: middle;
}

/* ── O que NAO mudou, de proposito ───────────────────────
   O vermelho do "Em Direto" fica: e sinaletica de emissao ao
   vivo, e no Movflx tambem e vermelho.
   As fontes da marca continuam instaladas e activas na raiz
   do site; so o /beta/ corre em Poppins.
   ---------------------------------------------------- */