/* netspaces-ds v0.16.0 */
/* ============================================================
   MÓDULO "NA MÍDIA" — copiado do netspaces.org no ar.
   Regras extraídas do CSS de produção do site (Tailwind compilado)
   e reescopadas em #midia, para não vazar utilitários genéricos
   (flex, w-full, mt-10...) para o resto das páginas.
   O Swiper vem do bundle vendorizado em assets/vendor/.
   ============================================================ */
#midia .container{width:100%}
@media (min-width:375px){
#midia .container{max-width:375px}
}
@media (min-width:768px){
#midia .container{max-width:768px}
}
@media (min-width:1024px){
#midia .container{max-width:1024px}
}
@media (min-width:1440px){
#midia .container{max-width:1440px}
}
#midia .absolute{position:absolute}
#midia .relative{position:relative}
#midia .left-\[1\%\]{left:1%}
#midia .right-\[1\%\]{right:1%}
#midia .right-\[30px\]{right:30px}
#midia .top-\[20\%\]{top:20%}
#midia .mx-auto{margin-left:auto;margin-right:auto}
#midia .my-\[30px\]{margin-top:30px;margin-bottom:30px}
#midia .mr-\[10px\]{margin-right:10px}
#midia .mt-10{margin-top:2.5rem}
#midia .flex{display:flex}
#midia .hidden{display:none}
#midia .h-\[270px\]{height:270px}
#midia .h-auto{height:auto}
#midia .w-6{width:1.5rem}
#midia .w-\[16px\]{width:16px}
#midia .w-\[203px\]{width:203px}
#midia .w-full{width:100%}
#midia .rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
#midia .rotate-180{--tw-rotate:180deg}
#midia .flex-col{flex-direction:column}
#midia .items-center{align-items:center}
#midia .justify-center{justify-content:center}
#midia .gap-2{gap:.5rem}
#midia .divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}
#midia .divide-neutral-60>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(137 137 137/var(--tw-divide-opacity))}
#midia .overflow-hidden{overflow:hidden}
#midia .border-y-8{border-top-width:8px;border-bottom-width:8px}
#midia .border-l-8{border-left-width:8px}
#midia .border-r-8{border-right-width:8px}
#midia .border-neutral-20{--tw-border-opacity:1;border-color:rgb(242 242 242/var(--tw-border-opacity))}
#midia .bg-neutral-10{--tw-bg-opacity:1;background-color:rgb(249 249 249/var(--tw-bg-opacity))}
#midia .px-\[10px\]{padding-left:10px;padding-right:10px}
#midia .px-\[20px\]{padding-left:20px;padding-right:20px}
#midia .pb-10{padding-bottom:2.5rem}
#midia .pl-\[10px\]{padding-left:10px}
#midia .pt-\[50px\]{padding-top:50px}
#midia .text-center{text-align:center}
#midia .font-garamond{font-family:var(--font-garamond)}
#midia .font-manrope{font-family:var(--font-manrope)}
#midia .font-roboto{font-family:var(--font-roboto)}
#midia .text-\[16px\]{font-size:16px}
#midia .text-\[18px\]{font-size:18px}
#midia .font-bold{font-weight:700}
#midia .font-extrabold{font-weight:800}
#midia .italic{font-style:italic}
#midia .leading-120{line-height:120%}
#midia .leading-150{line-height:150%}
#midia .tracking-01{letter-spacing:-.01rem}
#midia .tracking-\[-0\.02em\]{letter-spacing:-.02em}
#midia .tracking-widest{letter-spacing:.1em}
#midia .text-netspaces-digital-blue{--tw-text-opacity:1;color:rgb(85 142 255/var(--tw-text-opacity))}
#midia .text-neutral-50{--tw-text-opacity:1;color:rgb(160 160 160/var(--tw-text-opacity))}
@media (min-width:768px){
#midia .md\:left-\[6\%\]{left:6%}
#midia .md\:right-\[6\%\]{right:6%}
#midia .md\:top-\[30\%\]{top:30%}
#midia .md\:mr-5{margin-right:1.25rem}
#midia .md\:block{display:block}
#midia .md\:w-\[30px\]{width:30px}
#midia .md\:w-\[471px\]{width:471px}
#midia .md\:px-5{padding-left:1.25rem;padding-right:1.25rem}
#midia .md\:px-\[30px\]{padding-left:30px;padding-right:30px}
#midia .md\:pl-5{padding-left:1.25rem}
#midia .md\:pt-\[45px\]{padding-top:45px}
#midia .md\:text-\[20px\]{font-size:20px}
#midia .md\:text-\[28px\]{font-size:28px}
}
@media (min-width:1024px){
#midia .lg\:right-\[90px\]{right:90px}
#midia .lg\:w-\[628px\]{width:628px}
#midia .lg\:px-\[90px\]{padding-left:90px;padding-right:90px}
#midia .lg\:pt-\[65px\]{padding-top:65px}
#midia .lg\:text-\[22px\]{font-size:22px}
#midia .lg\:text-\[32px\]{font-size:32px}
}
@media (min-width:1440px){
#midia .xl\:right-\[120px\]{right:120px}
#midia .xl\:w-\[832px\]{width:832px}
#midia .xl\:px-\[120px\]{padding-left:120px;padding-right:120px}
}

/* famílias que o site no ar injeta via next/font */
#midia{--font-garamond:"EB Garamond",Georgia,serif;--font-manrope:"Manrope",ui-sans-serif,sans-serif;--font-roboto:"Roboto",ui-sans-serif,sans-serif}
/* as setas já são SVG no markup — desliga a seta que o Swiper desenha via ::after */
#midia .swiper-button-next::after,#midia .swiper-button-prev::after{display:none}
#midia .swiper-button-next,#midia .swiper-button-prev{margin-top:0}

/* defaults das variáveis de transform do Tailwind. No site no ar elas vêm de um
   reset global (*,::before,::after); aqui entram escopadas, senão o rotate-180
   da seta "anterior" não resolve e ela aponta para o lado errado. */
#midia *,#midia *::before,#midia *::after{
  --tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;
  --tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;
  --tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-divide-opacity:1;
}

/* Preflight do Tailwind (o reset global do site no ar). Sem ele, as utilitárias
   só definem border-WIDTH e o border-style fica "none" — resultado: as molduras
   [ ] e os filetes divisores renderizam com 0px. */
#midia *,#midia *::before,#midia *::after{border-width:0;border-style:solid;border-color:currentColor}
#midia img,#midia svg{display:block;vertical-align:middle}
#midia img{max-width:100%;height:auto}

/* classes que ficam na PRÓPRIA <section> (o escopo #midia é ela mesma) */
#midia.w-full{width:100%}
#midia.bg-neutral-10{background-color:rgb(249 249 249)}
#midia a{color:inherit;text-decoration:inherit}

/* ============================================================
   SETAS DO CARROSSEL — centradas nos parênteses laterais
   No original as setas usam top:20%/30%, porcentagem que depende
   da altura total do contêiner; qualquer diferença de altura
   desalinha. Medido: no site no ar o desvio é de 6px, no meu era
   de 29px — as setas caíam abaixo do centro dos parênteses.

   O ancestral posicionado das setas é o .swiper (position:relative),
   NÃO o .container onde vivem os parênteses. Por isso o topo é
   derivado assim:
       topo = centro do parêntese no contêiner
            − início do .swiper no contêiner
            − metade da altura da seta
   Medido por breakpoint (parênteses só existem a partir de md):
     md (768–1023): 180 − 129 − 15 = 36
     lg (≥1024)   : 200 − 151 − 15 = 34
   ============================================================ */
@media (min-width:768px){
  #midia .swiper-button-next,#midia .swiper-button-prev{top:36px}
}
@media (min-width:1024px){
  #midia .swiper-button-next,#midia .swiper-button-prev{top:34px}
}

/* ALTURA FIXA DA LINHA DE METADADOS
   Os logos têm proporções muito diferentes e largura fixa no markup: o g1
   (104x124) renderiza 26x31 e o Estadão (271x60) renderiza 60x13. Como a linha
   se ajustava ao conteúdo, o slide do Estadão ficava 200px contra 207px dos
   outros e o módulo pulava de altura ao trocar de notícia.
   Fixo a linha na altura da MAIOR marca (31px); as menores centralizam dentro. */
#midia .swiper-slide .flex.items-center{min-height:31px}
#midia .swiper-slide img{max-height:31px;object-fit:contain}