/* Complementos dos catálogos. A base bl-* é compartilhada com o Blog em global.css. */
/* Capas editoriais contêm texto: mostrar a arte inteira sem mudar a altura
   do destaque. Restrito a Materiais; Blog e Podcasts mantêm seus recortes. */
#materiais-home.uc-page .bl-destaque__capa {
  background:#fff;border:1px solid #d6dade;box-sizing:border-box;
}
#materiais-home.uc-page .bl-destaque__capa img {
  object-fit:contain;object-position:center;
}
/* E-books e guias precisam manter o texto inteiro, inclusive ao passar o
   mouse. As miniaturas de vídeo continuam com o comportamento anterior. */
#materiais-home.uc-page .uc-card--editorial .bl-card__capa {background:#f4f5f6}
#materiais-home.uc-page .uc-card--editorial .bl-card__capa img {
  object-fit:contain;object-position:center;transform:none;
}
:is(#podcast-home, #materiais-home).uc-page .uc-sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:is(#podcast-home, #materiais-home).uc-page .bl-pill {flex-shrink:0;min-height:44px}
:is(#podcast-home, #materiais-home).uc-page .bl-busca {min-width:0;min-height:48px}
:is(#podcast-home, #materiais-home).uc-page .bl-busca input {font-size:16px}
/* Sem o contorno vermelho no campo ao clicar: o foco já aparece na própria
   barra de busca (.bl-busca:focus-within, em global.css, clareia a borda).
   O [type="search"] dá a especificidade para vencer a regra de foco de
   identidade-2026.css, que tem o mesmo peso e carrega depois deste arquivo. */
:is(#podcast-home, #materiais-home).uc-page .bl-busca input[type="search"]:is(:focus, :focus-visible) {outline:none}
:is(#podcast-home, #materiais-home).uc-page .bl-busca button {
  color:#fff;background:transparent;border:0;font-family:inherit;font-size:14px;font-weight:600;
  min-height:44px;padding:0 8px;cursor:pointer;flex-shrink:0;
}
:is(#podcast-home, #materiais-home).uc-page .bl-card__capa {position:relative}
:is(#podcast-home, #materiais-home).uc-page .uc-play {
  position:absolute;bottom:14px;right:14px;display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;background:#cf1b33;color:#fff;font-size:18px;
}
:is(#podcast-home, #materiais-home).uc-page .uc-placeholder {
  display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(130deg,#2c3a41,#121719);
  color:#fff;font-size:clamp(24px,4vw,42px);font-weight:600;
}
:is(#podcast-home, #materiais-home).uc-page .uc-description {
  margin:12px 0 0;color:#5c5c5c;font-size:15px;line-height:1.65;
}
:is(#podcast-home, #materiais-home).uc-page .uc-action {
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  margin-top:8px;color:#cf1b33;font-size:14px;font-weight:600;
}
:is(#podcast-home, #materiais-home).uc-page .uc-count {order:2;margin:0;color:#5c5c5c;font-size:14px}
:is(#podcast-home, #materiais-home).uc-page .uc-summary {margin:0 0 24px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
:is(#podcast-home, #materiais-home).uc-page .uc-summary a {display:inline-block;color:#cf1b33;text-decoration:underline;min-height:44px}
:is(#podcast-home, #materiais-home).uc-page .uc-pagination {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin-top:40px;font-size:14px}
:is(#podcast-home, #materiais-home).uc-page #uc-resultados {scroll-margin-top:100px}
:is(#podcast-home, #materiais-home).uc-page .bl-ranking__lista {text-align:left}
:is(#podcast-home, #materiais-home).uc-page .bl-topo__grade > * {min-width:0}
:is(#podcast-home, #materiais-home).uc-page :is(h1,h2,h3,a) {overflow-wrap:anywhere}
:is(#podcast-home, #materiais-home).uc-page :is(a,button):focus-visible {outline:2px solid #cf1b33;outline-offset:4px}
:is(#podcast-home, #materiais-home).uc-page .bl-intro button:focus-visible {outline-color:#fff}
@media (max-width:767.98px) {
  :is(#podcast-home, #materiais-home).uc-page .bl-intro {padding-top:120px}
  :is(#podcast-home, #materiais-home).uc-page .bl-h1 {font-size:clamp(30px,7vw,42px)}
  :is(#podcast-home, #materiais-home).uc-page .bl-lede {font-size:16px}
  :is(#podcast-home, #materiais-home).uc-page .bl-destaque__t {font-size:24px}
  :is(#podcast-home, #materiais-home).uc-page .bl-card__t {font-size:18px}
  :is(#podcast-home, #materiais-home).uc-page .bl-h2 {font-size:24px;flex-shrink:1}
  :is(#podcast-home, #materiais-home).uc-page .bl-destaque__d {font-size:16px}
  :is(#podcast-home, #materiais-home).uc-page .bl-todos__cabeca {flex-wrap:wrap}
  :is(#podcast-home, #materiais-home).uc-page .uc-pagination .bl-btn {width:auto}
}


/* Capas dos cards de Materiais (08/10/2026)
   As capas de e-book são faixas 2:1. Num card 16:9 com "contain" sobrava
   cinza em cima e embaixo. Agora todos os cards desta página usam 2:1 e
   "cover": a capa ocupa o card inteiro, sem sobra, e os vídeos acompanham
   a mesma altura para as linhas ficarem alinhadas. */
#materiais-home.uc-page .bl-card__capa img,
#materiais-home.uc-page .uc-card--editorial .bl-card__capa img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
}
#materiais-home.uc-page .uc-card--editorial .bl-card__capa { background: transparent; }

/* Vídeo no destaque de Materiais (26/10/2026)
   Com a ordenação por data, um vídeo pode virar o destaque. A miniatura do
   YouTube (hqdefault) é 4:3 com tarjas pretas, e o "contain" das capas
   editoriais a mostrava inteira, com sobra branca. Só para vídeos: "cover"
   recorta as tarjas e preenche o quadro. Capas de e-book seguem com "contain". */
#materiais-home.uc-page .bl-destaque__capa img[src*="img.youtube.com"] {
  object-fit: cover;
  object-position: center;
}
#materiais-home.uc-page .bl-destaque__capa:has(img[src*="img.youtube.com"]) {
  background: transparent;
}

/* Profundidade nas capas de Materiais (26/10/2026)
   Destaque e cards da grade usam a mesma sombra, sem contorno. O fundo da
   capa fica transparente: o cinza-escuro de base vazava nos cantos
   arredondados e aparecia como uma linha preta em volta da imagem. */
#materiais-home.uc-page :is(.bl-destaque__capa, .bl-card__capa) {
  border: 0;
  background: transparent;
  box-shadow: 0 2px 6px rgba(13,13,13,.06), 0 18px 40px -12px rgba(13,13,13,.28);
}

/* Selo "Em destaque" em vidro fosco (liquid glass)
   Branco translúcido com desfoque do que está atrás, brilho na borda de cima
   e sombra só difusa (a sombra curta e escura desenhava um contorno preto).
   O letter-spacing deixa um espaço sobrando depois da última letra; o padding
   da direita desconta esse espaço para o texto ficar no centro da pill. */
#materiais-home.uc-page .bl-destaque__selo {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px calc(16px - 1.2px) 8px 16px;
  line-height: 1;
  color: var(--bl-red-ink);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.25),
    0 8px 24px -6px rgba(13,13,13,.25);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #materiais-home.uc-page .bl-destaque__selo {
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.58));
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
  }
}

/* Cards da grade (26/10/2026)
   1. Alinhamento: os cards de uma linha têm a mesma altura e a descrição
      para em 3 linhas. No Podcast, o "Assistir" fica no rodapé, na mesma
      altura; em Materiais o card não tem texto de ação.
   2. Card inteiro clicável: o link do título se estende sobre o card todo
      (::after). Há um único link por card; a capa é só visual.
      O foco do teclado contorna o card inteiro.
   3. Etiqueta: tipo · mês da publicação, com o selo "Novo" nos últimos 30 dias. */
:is(#podcast-home, #materiais-home).uc-page .bl-grade {align-items:stretch}
:is(#podcast-home, #materiais-home).uc-page .uc-card {
  position:relative;display:flex;flex-direction:column;border-radius:var(--bl-radius);
}
:is(#podcast-home, #materiais-home).uc-page .uc-card .bl-card__t a::after {
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
}
:is(#podcast-home, #materiais-home).uc-page .uc-card .bl-card__t a:focus-visible {outline:none}
:is(#podcast-home, #materiais-home).uc-page .uc-card:has(.bl-card__t a:focus-visible) {
  outline:2px solid var(--bl-red);outline-offset:6px;
}
:is(#podcast-home, #materiais-home).uc-page .uc-card:hover .bl-card__t a {color:var(--bl-red-ink)}
:is(#podcast-home, #materiais-home).uc-page .uc-card .uc-description {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
:is(#podcast-home, #materiais-home).uc-page .uc-card .uc-action {margin-top:auto;padding-top:8px;align-self:flex-start}
:is(#podcast-home, #materiais-home).uc-page .uc-card:hover .uc-action span {transform:translate(2px,-2px)}
:is(#podcast-home, #materiais-home).uc-page .uc-action span {display:inline-block;transition:transform .2s ease}
:is(#podcast-home, #materiais-home).uc-page .uc-meta {
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 .5rem;
}
:is(#podcast-home, #materiais-home).uc-page .uc-meta .bl-cat {margin:0}
:is(#podcast-home, #materiais-home).uc-page .uc-data {font-size:13px;line-height:1.3;color:var(--bl-muted)}
:is(#podcast-home, #materiais-home).uc-page .uc-novo {
  padding:3px 8px;border-radius:100px;background:var(--bl-red);color:#fff;
  font-size:10px;font-weight:700;line-height:1.2;letter-spacing:1px;text-transform:uppercase;
}
/* Ao passar o mouse, o card sobe um pouco e a sombra da capa cresce. */
@media (prefers-reduced-motion: no-preference) {
  :is(#podcast-home, #materiais-home).uc-page .uc-card {transition:transform .25s ease}
  :is(#podcast-home, #materiais-home).uc-page .uc-card .bl-card__capa {transition:box-shadow .25s ease}
  :is(#podcast-home, #materiais-home).uc-page .uc-card:hover {transform:translateY(-4px)}
}
#materiais-home.uc-page .uc-card:hover .bl-card__capa {
  box-shadow: 0 4px 10px rgba(13,13,13,.08), 0 26px 50px -14px rgba(13,13,13,.36);
}
@supports not selector(:has(*)) {
  :is(#podcast-home, #materiais-home).uc-page .uc-card .bl-card__t a:focus-visible {outline:2px solid var(--bl-red);outline-offset:3px}
}

/* Tipo acima de cada título do "Explore também": os títulos não trazem mais
   "E-book" ou "Guia" no nome. */
#materiais-home.uc-page .uc-explore-tipo {
  display:block;margin-bottom:2px;
  font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;color:var(--bl-muted);
}

/* Botão de play dos vídeos de Materiais (26/10/2026)
   Menor e em vidro escuro translúcido, para cobrir menos a pessoa que
   costuma aparecer no canto da miniatura. Fica vermelho no hover do card. */
#materiais-home.uc-page .uc-play {
  bottom:10px;right:10px;width:36px;height:36px;padding-left:2px;box-sizing:border-box;
  font-size:13px;line-height:1;
  background:rgba(13,13,13,.45);border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s ease;
}
#materiais-home.uc-page .uc-card:hover .uc-play {background:var(--bl-red);border-color:transparent}

/* Card compacto no celular (26/10/2026)
   Miniatura à esquerda e, à direita, só etiqueta e título, sem a descrição;
   o card inteiro é o link. Todos os cards têm
   a mesma altura (grid-auto-rows: 1fr iguala as linhas pela maior), para as
   miniaturas seguirem um ritmo regular na rolagem. O título para em 3
   linhas para a altura comum não crescer por causa de um título longo. */
@media (max-width:767.98px) {
  #materiais-home.uc-page .bl-grade {gap:20px;grid-auto-rows:1fr}
  #materiais-home.uc-page .uc-card {
    display:grid;grid-template-columns:40% minmax(0,1fr);grid-template-rows:auto 1fr;
    column-gap:12px;align-items:start;
  }
  #materiais-home.uc-page .uc-card .bl-card__capa {grid-column:1;grid-row:1 / span 2;margin:0}
  #materiais-home.uc-page .uc-card > :not(.bl-card__capa) {grid-column:2}
  #materiais-home.uc-page .uc-card .uc-description {display:none}
  #materiais-home.uc-page .uc-card .uc-meta {margin:0 0 4px;gap:4px}
  #materiais-home.uc-page .uc-card .bl-card__t {
    font-size:15px;line-height:1.35;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
  }
  #materiais-home.uc-page .uc-play {bottom:6px;right:6px;width:28px;height:28px;font-size:10px}
  #materiais-home.uc-page .uc-card:hover {transform:none}
}
/* Em telas de toque, o "hover" fica preso no card tocado (título vermelho,
   play vermelho). Ali os efeitos de passar o mouse não se aplicam. */
@media (hover:none) {
  :is(#podcast-home, #materiais-home).uc-page .uc-card:hover {transform:none}
  :is(#podcast-home, #materiais-home).uc-page .uc-card:hover .bl-card__t a {color:inherit}
  #materiais-home.uc-page .uc-card:hover .uc-play {background:rgba(13,13,13,.45);border-color:rgba(255,255,255,.35)}
}