/* ========================================
   NA MÍDIA — capa e card no mesmo padrão do blog (18/08/2026)
   A página é vitrine de imprensa: TODO card leva para FORA do site, para a
   matéria no veículo. Por isso o botão tem seta diagonal (↗), não a seta reta
   do blog (→) — a diagonal é a convenção de "abre em outro lugar".
   A grade (.grid-midia) já era idêntica à do blog: 3 → 2 → 1 colunas, gap 50px.
   O que muda aqui é a anatomia do card. Este arquivo carrega DEPOIS do CSS do
   Webflow e só toca em classes usadas exclusivamente na midia.html.
   ======================================== */

/* ---------- casca do card (igual .bloco-post do blog) ---------- */
.bloco-midia {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .3s ease, box-shadow .3s ease;
  opacity: 0;
  animation: midiaFadeIn .5s ease forwards;
}

.bloco-midia:hover {
  border-color: rgba(201, 162, 39, .3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

/* ---------- foto: mesma altura e recorte do card do blog ---------- */
.midia-image-container {
  position: relative;
  overflow: hidden;
}

.bloco-midia .img-midia {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  transition: transform 1.2s ease;
}

.bloco-midia:hover .img-midia {
  transform: scale(1.04);
}

/* ---------- veículo: onde a matéria saiu ----------
   Ele vetou a etiqueta sobre a foto ("aqui é diferente"). Como vários cards são o
   MESMO release publicado em veículos distintos (mesmo título e mesma foto), sem
   esta linha o leitor vê cards idênticos. Fica como chapéu discreto acima do título,
   fora da imagem. */
.bloco-midia .midia-veiculo {
  display: block;
  padding: 18px 20px 0;
  color: var(--dark-goldenrod, #aa7e32);
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 14px;
  text-transform: uppercase;
}

.bloco-midia .midia-veiculo + .titulo-midia {
  padding-top: 8px;
}

/* ---------- título (mesma tipografia do card do blog) ---------- */
.bloco-midia .titulo-midia {
  flex: 1 0 auto;
  margin: 0;
  padding: 20px 20px 16px;
  color: #1a1a1a;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- botão: pílula do blog + seta diagonal de link externo ---------- */
.bloco-midia .botao-midia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(201, 162, 39, .4);
  border-radius: 50px;
  color: #8a7621;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.bloco-midia .botao-midia:hover {
  background: #c9a227;
  border-color: #c9a227;
  color: #000;
  transform: none;
}

.bloco-midia .botao-midia svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

/* a seta sobe e sai — reforça que o link deixa o site */
.bloco-midia .botao-midia:hover svg {
  transform: translate(3px, -3px);
}

/* ---------- entrada escalonada, igual à do blog ---------- */
@keyframes midiaFadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bloco-midia:nth-child(1) { animation-delay: .05s; }
.bloco-midia:nth-child(2) { animation-delay: .10s; }
.bloco-midia:nth-child(3) { animation-delay: .15s; }
.bloco-midia:nth-child(4) { animation-delay: .20s; }
.bloco-midia:nth-child(5) { animation-delay: .25s; }
.bloco-midia:nth-child(6) { animation-delay: .30s; }
.bloco-midia:nth-child(7) { animation-delay: .35s; }
.bloco-midia:nth-child(8) { animation-delay: .40s; }
.bloco-midia:nth-child(9) { animation-delay: .45s; }

@media screen and (max-width: 767px) {
  .bloco-midia .botao-midia {
    font-size: 11px;
    padding: 12px;
  }
}


/* ========================================
   CAPA — mesmo padrão da capa do blog e da de Contatos (18/08/2026)
   Sai a capa cheia de 100vh do Webflow; entra a capa baixa, com a foto no
   ::before em zoom lento de 26s e véu escuro no ::after. A foto continua
   sendo a mesma que a página já usava.
   ======================================== */
.capa-hero.na-midia {
  position: relative;
  min-height: 0;
  height: auto;
  padding-top: 100px;
  padding-bottom: 80px;
  background-image: none;
  overflow: hidden;
  isolation: isolate;
}

.capa-hero.na-midia:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../assets/WhatsApp-Image-2025-06-16-at-17.29.16.webp') 50% 0% / cover no-repeat;
  /* topo alinhado: o rosto do Dr. André está a ~16% da altura da foto (1600x1066);
     centralizado (50% 50%) o quadro começava abaixo dele e cortava a cabeça. */
  transform: scale(1);
  animation: capaMidiaZoom 26s ease-in-out infinite alternate;
  will-change: transform;
}

.capa-hero.na-midia:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .72);
}

@keyframes capaMidiaZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .capa-hero.na-midia:before { animation: none; }
}

/* no desktop a navbar (~63px) fica POR CIMA da capa: 164/80 dá o mesmo
   espaço óptico em cima e embaixo, igual ao blog e a Contatos */
@media screen and (min-width: 992px) {
  .capa-hero.na-midia { padding-top: 164px; }
}


/* ========================================
   CARD INTEIRO CLICÁVEL (18/08/2026)
   O link continua sendo UM só — o próprio botão — esticado por cima do card
   com um ::after. Assim clicar em qualquer ponto abre a matéria no veículo,
   em nova aba, sem aninhar <a> dentro de <a> (que é HTML inválido).
   O texto do card segue selecionável, e o botão continua com foco de teclado.
   ======================================== */
.bloco-midia .botao-midia:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;          /* acima da foto e do título: o card inteiro vira área de clique */
}


.bloco-midia:hover .titulo-midia {
  color: #8a7621;
}

.bloco-midia .titulo-midia {
  transition: color .3s ease;
}

/* ========================================
   CLIPAGEM — release original em destaque + republicações (18/08/2026)
   Desenho pedido por ele: a matéria ORIGINAL (EGO Brazil) grande à esquerda,
   com foto; as republicações do mesmo release empilhadas à direita, SEM foto —
   porque é a mesma imagem em todos e repetir vira ruído.
   ======================================== */
.clipagem {
  display: grid;
  grid-template-columns: 40% 1fr;   /* pedido dele: 40% na esquerda, 60% na direita */
  gap: 50px;
  align-items: stretch;             /* a lista acompanha a altura do card, em vez de
                                       terminar no meio e deixar um vazio embaixo */
  margin-bottom: 60px;
}

/* ---------- destaque ---------- */
.clipagem__destaque {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.clipagem__destaque:hover {
  border-color: rgba(201, 162, 39, .3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

.clipagem__foto {
  overflow: hidden;
}

.clipagem__foto img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease;
}

.clipagem__destaque:hover .clipagem__foto img {
  transform: scale(1.04);
}

.clipagem__veiculo {
  padding: 22px 24px 0;
  color: #aa7e32;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 14px;
  text-transform: uppercase;
}

.clipagem__titulo {
  margin: 0;
  padding: 10px 24px 0;
  color: #1a1a1a;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.42;
  transition: color .3s ease;
}

.clipagem__destaque:hover .clipagem__titulo {
  color: #8a7621;
}

.clipagem__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 22px 24px 24px;
  padding: 13px 20px;
  border: 1px solid rgba(201, 162, 39, .4);
  border-radius: 50px;
  color: #8a7621;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

.clipagem__destaque:hover .clipagem__cta {
  background: #c9a227;
  border-color: #c9a227;
  color: #000;
}

/* ---------- lista de republicações ---------- */
.clipagem__lista {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* distribui as linhas na altura toda */
}

.clipagem__rotulo {
  padding-bottom: 14px;
  color: #8d887e;
  font-family: Montserrat, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 14px;
  text-transform: uppercase;
}

.clipagem__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1 auto;
  padding: 17px 4px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: #1a1a1a;
  text-decoration: none;
  transition: color .3s ease, padding-left .3s ease;
}

.clipagem__item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.clipagem__item-nome {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.clipagem__item:hover {
  color: #8a7621;
  padding-left: 8px;
}

.clipagem__cta svg,
.clipagem__item svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}

.clipagem__destaque:hover .clipagem__cta svg,
.clipagem__item:hover svg {
  transform: translate(3px, -3px);
}

@media screen and (max-width: 991px) {
  .clipagem {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .clipagem__foto img {
    height: 240px;
  }

  .clipagem__titulo {
    font-size: 19px;
  }
}