/* ============================================================
   MÍDIA v2 (teste) — um mural só, com filtro, e área para a imprensa
   ============================================================ */

/* Cabeçalho do mural: título à esquerda, filtros à direita */
.mx-cabeca { align-items: end; }
.mx-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-filtros button {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; cursor: pointer;
  font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.mx-filtros button:hover { border-color: var(--latao); color: var(--texto); }
.mx-filtros button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--noite); }

/* Mural: o primeiro cartão é grande (2×2), os demais em volta */
.mx-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; }
.mx-card { display: flex; flex-direction: column; background: var(--noite); border: 1px solid var(--linha); transition: border-color .35s var(--ease); }
.mx-card[hidden] { display: none !important; }
.mx-card:hover { border-color: rgba(191, 165, 122, .5); }
.mx-img, .mx-img .figura { margin: 0; }
.mx-img .quadro { aspect-ratio: 16 / 10 !important; padding-top: 0 !important; }
.mx-texto { padding: 18px 20px 22px; }
.mx-tipo { margin: 0 0 8px; font: 500 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--latao); }
.mx-texto h3 { margin: 0 0 6px; font: 500 1.35rem/1.15 var(--serifa); }
.mx-texto p:not(.mx-tipo) { margin: 0; font-size: .88rem; font-weight: 300; color: var(--texto-2); }
.mx-texto .link-seta { display: inline-block; margin-top: 12px; }

.mx-card.mx-grande { grid-column: span 2; grid-row: span 2; }
.mx-card.mx-grande .mx-img { position: relative; flex: 1; min-height: 320px; }
.mx-card.mx-grande .mx-img > .figura, .mx-card.mx-grande .mx-img .figura { position: absolute; inset: 0; }
.mx-card.mx-grande .mx-img .quadro { height: 100%; aspect-ratio: auto !important; }
.mx-card.mx-grande .mx-texto { padding: 24px 28px 28px; }
.mx-card.mx-grande h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }

/* Para a imprensa: chamada em duas colunas */
.mx-kit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.mx-kit .ha-lead { margin: 0 0 26px; color: var(--texto-2); font-weight: 300; }

/* Tablet e celular */
@media (max-width: 900px) {
  .mx-grade { grid-template-columns: 1fr 1fr; }
  .mx-kit { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mx-cabeca { gap: 18px; }
  .mx-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .mx-filtros::-webkit-scrollbar { display: none; }
  .mx-filtros button { flex: 0 0 auto; }
  .mx-grade { grid-template-columns: 1fr; gap: 14px; }
  .mx-card.mx-grande { grid-column: auto; grid-row: auto; }
  .mx-card.mx-grande .mx-img { flex: none; min-height: 0; }
  .mx-card.mx-grande .mx-img > .figura, .mx-card.mx-grande .mx-img .figura { position: static; }
  .mx-card.mx-grande .mx-img .quadro { height: auto; aspect-ratio: 16 / 10 !important; }
  .mx-card.mx-grande .mx-texto { padding: 18px 20px 22px; }
}

/* Espaços vazios só aparecem no modo rascunho */
.mx-card.md-vazio { display: none; }
body.rascunho .mx-card.md-vazio { display: flex; border-style: dashed; border-color: rgba(191, 165, 122, .6); }
@media (max-width: 760px) { .ha-cabeca.mx-cabeca { display: flex; flex-direction: column; align-items: stretch; } .mx-filtros { width: auto; min-width: 0; } }
@media (min-width: 761px) { .mx-grade.mx-dupla { grid-template-columns: 1fr 1fr; } }

/* Tipo do conteúdo acima da foto, título e legenda embaixo */
.mx-card > .mx-tipo { margin: 0; padding: 14px 20px 12px; }
.mx-card.mx-grande > .mx-tipo { padding: 16px 28px 14px; }
.mx-texto h3 { color: var(--texto); }

/* Redes sociais: só o cartão do Instagram, numa faixa */
#redes .ha-midia { grid-template-columns: 1fr; }
@media (min-width: 761px) {
  #redes .ha-midia-insta { display: grid; grid-template-columns: auto 1fr auto; column-gap: 40px; align-items: center; }
  #redes .ha-midia-insta .ha-rotulo { grid-column: 1 / -1; }
  #redes .ha-midia-insta h3, #redes .ha-midia-insta p:not(.ha-rotulo) { margin: 0; }
}