/* =========================================================================
   minutta.css — ÚNICO CSS próprio do projeto.
   Carregado DEPOIS de style.css e responsive.css.
   Nenhum arquivo do template Amiso foi alterado.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Identidade visual da Minutta
   Sobrescreve só as variáveis de cor do template.
   O vermelho do Amiso (--theme-color2) vira o azul da Minutta.
   Verificado: #ff3838 e #e42b2b aparecem apenas dentro de :root em style.css,
   ou seja, não há seletor com a cor "chumbada" para corrigir.
   ------------------------------------------------------------------------- */
:root {
  --theme-color2: #005c89;
  --theme-color2-rgb: 0, 92, 137;
  --theme-color4: #00446a;              /* hover / estado ativo do azul */
  --theme-color4-rgb: 0, 68, 106;

  --minutta-logo-azul: #00557f;         /* o azul exato do logo (rgb 0 85 127) */
  --minutta-yellow: #ffca00;            /* acento (nunca cor de botão) */
  --minutta-border: #e6e8eb;
  --minutta-topo-bg: #f6f6f6;           /* faixa do banner + menu */
  --minutta-ultimas-bg: #ebebeb;        /* ultimas noticias da home + faixa abaixo */

  /* O tema respira 120px acima de cada `section > .container` (style.css).
     Num portal de noticias isso e espaco morto: empurra a materia para baixo
     da dobra. 40px e o meio termo - com menos que isso a capa da noticia cola
     no menu. Sobrescrito aqui, e nao no style.css, para o tema seguir
     intocado. */
  --container-pt: 40px;
}


/* -------------------------------------------------------------------------
   2. Header
   ------------------------------------------------------------------------- */
/* A logo de 2026 e o SVG tirado do MINUTTA_LOGO_2026.ai da cliente: vetor,
   nitido em qualquer tamanho (o PNG de 1920px, reduzido pelo navegador para
   ~56px de altura, saia serrilhado). A pagina tem 1920x622 com margem
   transparente; o desenho ocupa ~1786x356 no centro. O cover centralizado
   corta so essa margem, para as alturas abaixo valerem para o desenho. O
   painel repete a regra em resources/views/filament/brand-logo-style.blade.php. */
.main-header .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img,
.main-footer .about-widget .logo img {
  aspect-ratio: 1786 / 356;
  object-fit: cover;
}

.main-header .logo img {
  max-height: 56px;
  width: auto;
}

.sticky-header .logo img {
  max-height: 40px;
  width: auto;
}

.mobile-menu .nav-logo img {
  max-height: 48px;
  width: auto;
}

/* --- Header claro (header-style-two) ----------------------------------------
   O template já traz o header claro pronto (style.css: position:relative,
   background #fff, sem o ::before de gradiente escuro e sem o .header-lower
   absoluto), e é ele que usamos — o header-style-one era escuro e flutuava
   sobre o conteúdo.

   Só que o template deixou #ffffff CHUMBADO em dois estados do menu:

     .main-menu .navigation > li > a:hover   { color: #ffffff }   (style.css 2122)
     .main-menu .navigation > li.current > a { color: #ffffff }   (style.css 2125)

   O .header-style-two redefine apenas a cor BASE do link. O seletor do
   .current tem a mesma especificidade e vem DEPOIS no arquivo, então vencia:
   no fundo branco o item ativo ficava branco no branco (invisível) e o hover
   apagava o link. Corrigido aqui — é bug do template, não do nosso CSS.
   -------------------------------------------------------------------------- */
.header-style-two .main-menu .navigation > li > a:hover,
.header-style-two .main-menu .navigation > li.current > a {
  color: var(--theme-color2);
}

/* Item ativo em negrito e sublinhado, nos tres menus (topo, fixo e mobile).
   E a UNICA marca de em que pagina o leitor esta: nenhuma pagina tem mais a
   faixa preta com o titulo (o antigo PageTitle.vue). Na noticia, a marcada e
   a categoria dela (SiteLayout.vue). */
.main-menu .navigation > li.current > a,
.mobile-menu .navigation li.current > a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* O tema ja desenhava uma barra (li::before) sob o item ativo do menu de
   cima - somada ao sublinhado, virava linha dupla. No ativo fica so o
   sublinhado, que e o mesmo nos tres menus; a barra continua no hover dos
   demais itens. */
.main-menu .navigation > li.current:before {
  display: none;
}

/* --- Menu em caixa alta -----------------------------------------------------
   As editorias em maiuscula dao ao menu o peso de secao de jornal e separam o
   header da massa de titulos logo abaixo, que sao em caixa mista.

   Os dois seletores cobrem as tres listas: .main-menu pega o menu do topo e o
   do sticky; a do menu mobile precisa de regra propria porque o template
   chumba `text-transform: capitalize` nela (style.css 2747).

   O corpo cai de 16px para 15px com um respiro entre as letras: em caixa alta
   o texto cresce cerca de 10% na largura, e o menu ja estava ajustado para
   caber as seis editorias numa linha so dentro dos 1200px do container (ver a
   margem de 30px na secao 2.1). Sem isso, a primeira editoria nova quebraria
   o menu em duas linhas.
   -------------------------------------------------------------------------- */
.main-menu .navigation > li > a,
.mobile-menu .navigation li > a {
  text-transform: uppercase;
}

.main-menu .navigation > li > a {
  font-size: 15px;
  letter-spacing: 0.02em;
}

/* O topo (banner + menu) fica numa faixa cinza, e o conteudo comeca no branco
   logo abaixo. O menu fixo nao entra: o .sticky-header tem fundo branco
   proprio (style.css) e aparece sobre o conteudo, nao sobre a faixa. */
.header-style-two {
  background-color: var(--minutta-topo-bg);
}

/* separa o header do conteúdo (a borda do template era translúcida,
   feita para aparecer sobre o gradiente escuro do header-style-one) */
.header-style-two .header-lower {
  border-bottom: 1px solid var(--minutta-border);
}

/* o divisor vertical antes da lupa era rgba(255,255,255,.1): some no branco */
.header-style-two .outer-box .ui-btn-outer {
  border-left-color: var(--minutta-border);
}

/* -------------------------------------------------------------------------
   3. Publicidade
   Estrutura mantida do site atual, com menos posições.
   Cada bloco tem data-publi para o Laravel preencher depois.
   ------------------------------------------------------------------------- */
.bloco-publi {
  padding: 20px 0;
}

.bloco-publi + .bloco-publi {
  padding-top: 0;
}

/* Faixa de publicidade entre duas secoes.

   O olho compara a distancia da mancha cinza ate o TEXTO de cima e ate a faixa
   colorida de baixo - nao ate os limites invisiveis das secoes. Acima da mancha
   ja existem 82px que vem de outro lugar e nao da para remover sem mexer no
   card: 35px de padding do proprio card, 30px de margem entre linhas e 17px do
   rotulo "Publicidade", que mora dentro do bloco. Por isso o respiro de cima e
   zerado aqui e a base recebe os mesmos 82px.

   Vale so quando existe uma secao DEPOIS da faixa (o caso da home). Em
   categoria e pesquisa ela e o ultimo bloco antes do rodape e mantem o
   espacamento padrao. */
.bloco-publi--faixa {
  padding: 20px 0;
}

.news-section:has(+ .bloco-publi--faixa) + .bloco-publi--faixa {
  padding: 0 0 82px;
}

/* O respiro de 90px da secao de cima somava aos 82px e jogava o banner para
   longe dos cards. O proprio banner ja separa as duas secoes. */
.news-section:has(+ .bloco-publi--faixa) {
  padding-bottom: 0;
}

/* Cabecalho alinhado ao conteudo.

   O tema usa container-fluid no topo, entao o menu ia de ponta a ponta enquanto
   as noticias paravam nos 1200px do .auto-container - o menu parecia de outro
   site. Aqui os dois (menu e menu fixo) passam a respeitar a mesma largura e o
   mesmo recuo lateral do conteudo. */
.header-style-two .header-lower .container-fluid,
.sticky-header .auto-container {
  max-width: var(--container-width);
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

/* Vao entre os itens do menu, o de cima e o fixo.

   Com o cabecalho limitado a 1200px, os 60px do tema (pensados para largura
   total) quebravam o menu em duas linhas. Medido com Home + 5 editorias +
   Contato: os textos somam ~420px, e o menu de cima tem ~600px livres nos dois
   pontos mais apertados - a partir de 1440px, quando aparece o "Fale conosco",
   e em 1024px, a menor largura em que ele ainda aparece. Com 30px (e o ultimo
   item tambem levando a margem) pedia 629px e quebrava; 24px sem margem no
   ultimo pede ~565px e sobra folga para uma editoria de nome curto.

   O menu fixo mora dentro do mesmo .header-style-two, entao herdava os 30px a
   direita somados aos 40px a esquerda do tema (style.css, .sticky-header):
   70px por item, que ja quebravam o menu fixo abaixo de ~1190px. Aqui ele
   passa a usar o mesmo vao, so que do lado esquerdo - la o ultimo item encosta
   na borda direita. */
.header-style-two .main-menu .navigation > li {
  margin-right: 24px;
}

.header-style-two .main-menu .navigation > li:last-child {
  margin-right: 0;
}

.header-style-two .sticky-header .main-menu .navigation > li {
  margin: 0 0 0 24px;
}

.header-style-two .header-lower .logo-box {
  margin-right: 20px;
}

/* Lupa no menu fixo, depois do ultimo item (e antes do hamburguer no
   celular). O .nav-outer do sticky nao era flex: sem isso a lupa caia para a
   linha de baixo. O margin-left repete o vao de 24px entre os itens. */
.sticky-header .nav-outer {
  display: flex;
  align-items: center;
}

.header-style-two .sticky-header .search-btn {
  margin-left: 24px;
  font-size: 22px;
}

/* O popup da busca tem z-index 99 no tema e o menu fixo 9999: aberto com o
   menu fixo na tela, o menu ficava por cima do popup, cobrindo o X de fechar. */
.search-popup {
  z-index: 100000;
}

/* Telefone e redes no header, no de cima e no fixo: o mesmo .social-icon-two
   do rodape, encolhido para caber na linha do menu. No de cima, o vao ate a
   lupa e o mesmo que o antigo botao "Fale conosco" tinha, curto para sobrar
   espaco para uma editoria nova; no fixo, e o vao de 24px dos itens e da lupa.

   Some abaixo de 1439px, como o botao antigo (responsive.css escondia o
   .info-btn nessa faixa): entre 1024 e 1439 o menu de cima ja tem "Contato",
   e abaixo disso as redes estao no menu mobile. */
.header-style-two .header-lower .redes-header {
  margin-left: 10px;
}

.header-style-two .sticky-header .redes-header {
  margin-left: 24px;
}

.header-style-two .redes-header li,
.contact-details .redes-contato li {
  margin-left: 8px;
}

.header-style-two .redes-header li:first-child,
.contact-details .redes-contato li:first-child {
  margin-left: 0;
}

.header-style-two .redes-header li a,
.contact-details .redes-contato li a {
  height: 32px;
  width: 32px;
  line-height: 32px;
  font-size: 13px;
}

/* As bolinhas das redes (header, rodape, contato) sao do azul do logo, e nao do
   preto do tema (.social-icon-two usa --bg-theme-color1). O hover do tema iria
   para --bg-theme-color2, um azul quase igual: o escurecido do projeto deixa a
   mudanca visivel. */
.header-style-two .redes-header li a,
.contact-details .redes-contato li a,
.main-footer .social-icon-two li a {
  background-color: var(--minutta-logo-azul);
}

.header-style-two .redes-header li a:hover,
.contact-details .redes-contato li a:hover,
.main-footer .social-icon-two li a:hover {
  background-color: var(--theme-color4);
}

@media only screen and (max-width: 1439px) {
  .header-style-two .redes-header {
    display: none;
  }
}

/* Banner do topo, primeiro bloco da pagina. Respira menos que os demais slots,
   senao o menu desce e a noticia principal sai da dobra - mas o respiro de cima
   e maior que o de baixo: os 12px daqui eram o vao ATE a barra de contato que
   existia acima; sem ela, colavam na borda da janela. */
.bloco-publi--header {
  padding: 20px 0 8px;
  background-color: var(--minutta-topo-bg);
}

/* O banner do topo e o maior espaco do site: 1140x257, proporcao ~4,4:1 -
   bem mais alto que os 120px de uma faixa comum. A altura fica no CSS, e nao
   so no atributo da imagem, para o espaco ja estar reservado antes de a
   imagem carregar. */
.publi--header-topo img {
  width: 100%;
  max-width: 1140px;
  aspect-ratio: 1140 / 257;
  -o-object-fit: contain;
     object-fit: contain;
}

.publi {
  text-align: center;
}

.publi img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Dupla abaixo dos destaques: lado a lado no desktop, empilhada no celular
   (as colunas vêm do Bootstrap). A margem separa as duas quando empilham. */
.bloco-publi--destaque .publi {
  margin-bottom: 20px;
}

/* slot dentro da sidebar da notícia */
.sidebar__single .publi {
  text-align: center;
}

/* Carrossel: dois ou mais anuncios ativos na mesma posicao (AdCarrossel.vue).

   As bolinhas ficam logo ABAIXO da peca, numa faixa de 20px: em cima dela
   caiam sobre o texto do anunciante - no celular a faixa tem menos de 50px de
   altura. As setas ficam sobre a peca, centralizadas na altura dela (o
   top-offset desconta a faixa das bolinhas).

   Setas menores que os 44px do Swiper: os banners de destaque tem 155px de
   altura e a lateral 274px de largura - no tamanho padrao a seta cobria um
   pedaco grande da arte. O circulo branco garante que ela apareca sobre
   qualquer cor de peca.

   `.publi .publi-carrossel`, e nao so a classe: o CSS do Swiper vem pelo Vite,
   depois deste arquivo, e o `.swiper { padding: 0 }` dele venceria. */
.publi .publi-carrossel {
  margin: 0 auto;
  padding-bottom: 20px;
  --swiper-theme-color: var(--theme-color2);
  --swiper-navigation-size: 32px;
  --swiper-navigation-sides-offset: 8px;
  --swiper-navigation-top-offset: calc(50% - 10px);
  --swiper-navigation-color: var(--theme-color2);
  --swiper-pagination-bottom: 2px;
  --swiper-pagination-bullet-inactive-color: #b8bec5;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
}

.publi-carrossel .swiper-button-prev,
.publi-carrossel .swiper-button-next {
  /* o padding encolhe o icone, que ocupa 100% da caixa */
  padding: 9px 11px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background-color 200ms ease;
}

.publi-carrossel .swiper-button-prev:hover,
.publi-carrossel .swiper-button-next:hover {
  background: #fff;
}

@media only screen and (max-width: 767px) {
  .publi .publi-carrossel {
    --swiper-navigation-size: 22px;
    --swiper-navigation-sides-offset: 4px;
  }

  .publi-carrossel .swiper-button-prev,
  .publi-carrossel .swiper-button-next {
    padding: 6px 8px;
  }
}


/* -------------------------------------------------------------------------
   4. Card de notícia (news-block do template + badge de categoria)
   ------------------------------------------------------------------------- */

/* todas as capas em 16:9, igual ao padrão do painel novo (1600x900) */
.news-block .image-box .image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* badge da categoria sobre a foto
   (.news-block .image-box já é position:relative no style.css) */
.news-block__cat {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  background: var(--theme-color2);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 10px;
  border-radius: 3px;
}

.news-block__cat:hover {
  background: var(--theme-color4);
  color: #fff;
}

/* a cidade entra no lugar do "by Admin" do template */
.news-block .content-box .post-info i {
  margin-right: 4px;
}

/* Cards da mesma altura, com a foto sempre igual
   ------------------------------------------------
   O que desalinhava os cards era o texto, nao a foto: a capa ja e 16:9 (acima),
   mas a .content-box e uma caixa branca opaca que sobe -65px sobre a imagem
   (style.css). Sem limite de linhas no titulo, cada caixa tinha uma altura
   diferente, cobria um pedaco diferente da foto e o "Ler mais" parava num ponto
   diferente. Aqui a altura vira a mesma para todos os cards da linha e o titulo
   ganha um numero fixo de linhas. */

/* A coluna precisa ser flex para o height:100% do .inner-box ter referencia:
   .row ja estica as colunas (align-items:stretch do bootstrap), mas
   .news-block e .inner-box sao estaticos no style.css. */
.news-block {
  display: flex;
}

.news-block .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* a caixa branca ocupa a sobra da coluna, entao todas terminam na mesma linha.
   O margin-top:-65px do style.css continua valendo: e a sobreposicao sobre a
   foto que o layout aprovado tem. */
.news-block .content-box {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* titulo em 3 linhas.
   A altura e fixada em px arredondados para cima em vez de
   calc(22px * 1.2em * 3): as 3 linhas dao 79.2px, que o navegador arredonda
   para uma caixa de 79px enquanto o texto precisa de 81px - o resultado era a
   terceira linha cortada mesmo em titulos que cabiam. 81px = 3 * 27px.
   O tamanho do titulo tambem e limitado no painel (NewsForm::TITULO_MAX). */
.news-block .content-box .title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 81px;
}

/* o resumo ja vem cortado em 110 caracteres no servidor (News::getExcerptAttribute),
   mas ainda quebra em 2 ou 3 linhas conforme a largura da coluna. */
.news-block .content-box .text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 90px; /* 3 * 30px (--body-line-height) */
}

/* empurrado para a base: o "Ler mais" fica na mesma altura em todos os cards */
.news-block .content-box .read-more {
  margin-top: auto;
}

/* Card em 4 por linha (ultimas e mais lidas da home)
   Com 4 colunas o card tem ~260px; com o recuo de 30px e o padding de 40px
   do template sobravam ~150px de texto. Aqui a caixa branca encolhe as
   margens e a fonte desce 2px no titulo e 1px no resumo. So vale de 1200px
   para cima: abaixo disso o grid volta a 2 por linha e o card padrao cabe. */
@media only screen and (min-width: 1200px) {
  .news-grid--4 .news-block .content-box {
    margin-left: 15px;
    padding: 22px 20px 26px;
  }

  .news-grid--4 .news-block .content-box .date {
    padding: 5px 14px;
  }

  /* 3 linhas de 24px (20px * 1.2em) */
  .news-grid--4 .news-block .content-box .title {
    font-size: 20px;
    height: 72px;
  }

  /* 3 linhas de 25px */
  .news-grid--4 .news-block .content-box .text {
    font-size: 15px;
    line-height: 25px;
    height: 75px;
  }
}

/* No celular as duas secoes mostram 4 noticias, e nao 8: empilhadas uma por
   linha, 8 cards empurravam a faixa de publicidade e o resto da home para
   muito longe. O servidor continua mandando 8 - o desktop usa todas. */
@media only screen and (max-width: 767px) {
  .news-grid--4 > .news-block:nth-child(n+5) {
    display: none;
  }
}


/* -------------------------------------------------------------------------
   5. Acento amarelo (só em sub-títulos, nunca em botão)
   ------------------------------------------------------------------------- */
.sec-title .sub-title.is-yellow {
  color: var(--minutta-yellow);
}

/* Secao cujo titulo nao tem sub-titulo.
   O template dimensionou .news-section (padding: 120px 0 90px) e o
   .sec-title (margin-bottom: 50px) para o bloco de duas linhas: sub-titulo
   em cima ("Em alta", "Fique por dentro") e o h2 embaixo. Nas secoes da home
   que dispensaram o sub-titulo sobra so o h2, e o resultado eram 120px de vao
   acima do titulo contra 50px ate os cards - o titulo colava embaixo.

   A classe e explicita, e nao um :has(), porque `:not(:has(...))` nem sempre
   e aceito: onde o navegador rejeita o seletor ele descarta a regra inteira,
   e o ajuste simplesmente nao acontece. */
.news-section--titulo-simples {
  padding-top: 50px;
}

.news-section--titulo-simples .sec-title {
  margin-bottom: 50px;
}

/* Ultimas noticias da home: o padrao do template (bg-pattern-6) continua no
   topo e o cinza fica por baixo dele, preenchendo o resto da secao. A faixa
   de publicidade logo abaixo entra no mesmo fundo - o cinza vai ate a secao
   das mais lidas. So a home tem esse par; em categoria e pesquisa a faixa
   continua sem fundo. */
.news-section--cinza,
.news-section--cinza + .bloco-publi--faixa {
  background-color: var(--minutta-ultimas-bg);
}

/* A imagem termina num degrau: a borda de baixo vai de #e0e0e0 a #f9f9f9 ao
   longo da largura e a ultima linha e mais clara que o resto. Nenhuma cor lisa
   casa com isso, entao a base da imagem se dissolve no cinza da secao. */
.news-section--cinza .bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
  mask-image: linear-gradient(to bottom, #000 50%, transparent);
}

/* Uma segunda copia no pe da secao, girada 180 graus: as bolinhas do canto
   superior esquerdo aparecem embaixo a direita, e o degrau claro da ultima
   linha vai para cima. Ela some nas duas pontas porque embaixo vem a faixa de
   publicidade, que e cinza liso - sem o fade de baixo, a borda da imagem
   apareceria ali. A mascara e simetrica, entao o giro nao a afeta. */
.news-section--cinza .bg--base {
  top: auto;
  bottom: 0;
  transform: rotate(180deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 65%, transparent);
}


/* -------------------------------------------------------------------------
   6. Paginação (markup do Bootstrap 5, tema Minutta)
   O template não tem paginação numerada.
   ------------------------------------------------------------------------- */
.news-pagination {
  margin-top: 20px;
}

.news-pagination .pagination {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.news-pagination .page-item {
  margin: 0;
}

.news-pagination .page-link {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 1px solid var(--minutta-border);
  border-radius: 0;
  background: #fff;
  color: var(--theme-color1);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.news-pagination .page-link:hover {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
  color: #fff;
}

.news-pagination .page-item.active .page-link {
  background: var(--theme-color2);
  border-color: var(--theme-color2);
  color: #fff;
}

.news-pagination .page-item.disabled .page-link {
  background: #fff;
  border-color: var(--minutta-border);
  color: #adb5bd;
}

.news-pagination .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--theme-color2-rgb), .25);
}


/* -------------------------------------------------------------------------
   7. Página da notícia
   ------------------------------------------------------------------------- */

/* a meta do template só previa <a>; aqui há <span> (cidade, data) */
.blog-details__meta li span {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
}

.blog-details__meta li span i,
.blog-details__meta li a i {
  margin-right: 6px;
  color: var(--theme-color2);
}

.blog-details__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* corpo do texto (o que vem do RichEditor do painel) */
.entry-content p {
  margin-bottom: 20px;
}

.entry-content h2 {
  font-size: 26px;
  line-height: 1.3;
  margin: 30px 0 15px;
}

.entry-content h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 25px 0 15px;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 20px 20px;
  padding-left: 15px;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: 8px;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  margin: 20px 0;
}

.entry-content figcaption,
.entry-content .fonte {
  font-size: 14px;
  color: #8a9098;
  margin-top: -10px;
  margin-bottom: 20px;
}

.entry-content a {
  color: var(--theme-color2);
  text-decoration: underline;
}

.entry-content a:hover {
  color: var(--theme-color4);
}

.entry-content blockquote {
  border-left: 4px solid var(--theme-color2);
  padding: 5px 0 5px 20px;
  margin: 25px 0;
  font-style: italic;
  color: var(--theme-color1);
}

/* título das seções extras (vídeo, galeria, anexos) */
.news-section-title {
  font-size: 20px;
  line-height: 1.3;
  margin: 40px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--theme-color2);
}

.news-section-title i {
  color: var(--theme-color2);
  margin-right: 8px;
}

/* vídeo do YouTube (campo video_code) — .ratio é do Bootstrap 5 */
.news-video .ratio {
  border-radius: 0;
  overflow: hidden;
}

/* galeria de fotos (fancyBox já vem inicializado no script.js do template) */
.news-gallery .gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 0;
}

.news-gallery .gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}

.news-gallery .gallery-item:hover img {
  transform: scale(1.06);
}

/* anexos para download */
.news-attachments__list li {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--minutta-border);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
}

.news-attachments__list li > i {
  font-size: 28px;
  color: var(--theme-color2);
  flex: 0 0 auto;
}

.news-attachments__list .info {
  flex: 1 1 auto;
  min-width: 0;
}

.news-attachments__list .info a {
  display: block;
  font-weight: 700;
  color: var(--theme-color1);
  word-break: break-word;
}

.news-attachments__list .info a:hover {
  color: var(--theme-color2);
}

.news-attachments__list .info small {
  display: block;
  font-size: 13px;
  color: #8a9098;
}

.news-attachments .theme-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  font-size: 13px;
}

.news-attachments .theme-btn .btn-title i {
  margin-right: 6px;
}

/* compartilhar (lugar do social-list do template) */
.news-share__label {
  display: inline-block;
  margin-right: 10px;
  font-weight: 700;
  color: var(--theme-color1);
}

.blog-details__bottom {
  flex-wrap: wrap;
  gap: 15px;
}


/* -------------------------------------------------------------------------
   8. Sidebar
   ------------------------------------------------------------------------- */
.sidebar__post-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* titulo longo esticava o item alem dos 80px da miniatura e quebrava o ritmo
   da lista; 3 linhas cabem na altura da foto (16px * 24px de line-height). */
.sidebar__post .sidebar__post-list .sidebar__post-content h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar__post-content-meta i {
  margin-right: 5px;
}


/* -------------------------------------------------------------------------
   9. Rodapé
   ------------------------------------------------------------------------- */
/* --- Ultimos videos do YouTube ----------------------------------------------
   Ocupa o lugar da antiga galeria de fotos do rodape. Nao reaproveita a
   .gallery-widget do tema de proposito: aquela e uma grade quadrada, e video e
   16:9 - herdar o `aspect-ratio: 1` cortaria a cabeca de todo mundo nas
   miniaturas.
   -------------------------------------------------------------------------- */
/* minmax(0, 1fr), e nao 1fr: o titulo de cada card e `nowrap`, e o minimo
   automatico de uma coluna de grade e o conteudo dela. Com `1fr` puro, um
   titulo longo empurrava a propria coluna e a grade vazava para fora do
   rodape - as colunas saiam com larguras diferentes, proporcionais ao tamanho
   do titulo. O minimo zero deixa o `text-overflow` fazer o trabalho dele. */
.videos-widget__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
}

.videos-widget__item {
  display: block;
  /* mesma razao do minmax acima: sem isto o link nao encolhe abaixo do texto */
  min-width: 0;
}

.videos-widget__thumb {
  position: relative;
  margin: 0 0 6px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.06);
}

.videos-widget__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 300ms ease;
}

/* O feed mistura Shorts (miniatura vertical) com videos normais. O corte pelo
   centro e o melhor palpite generico: no Short o assunto costuma estar no meio
   do quadro, e uma grade com alturas diferentes bagunçaria o rodape inteiro. */
.videos-widget__item:hover .videos-widget__thumb img {
  transform: scale(1.06);
}

.videos-widget__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 10px;
  /* O icone do play do Font Awesome e um triangulo: centrado pela caixa ele
     parece deslocado para a esquerda. */
  padding-left: 2px;
  opacity: 0.85;
  transition: all 300ms ease;
}

.videos-widget__item:hover .videos-widget__play {
  background-color: var(--theme-color2);
  opacity: 1;
}

/* Uma linha so. Os titulos do canal variam de tres palavras a uma frase
   inteira; deixar quebrar livre desalinharia as duas fileiras da grade. */
.videos-widget__titulo {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: #b7b7b7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 300ms ease;
}

.videos-widget__item:hover .videos-widget__titulo {
  color: #ffffff;
}

.videos-widget .widget-title a {
  color: inherit;
}

.videos-widget .widget-title a:hover,
.videos-widget__vazio a:hover {
  color: var(--theme-color2);
}

.videos-widget__vazio a {
  color: #b7b7b7;
  font-size: 14px;
}

.videos-widget__vazio i {
  margin-right: 6px;
}

.main-footer .about-widget .logo img {
  max-height: 52px;
  width: auto;
}

.main-footer .contacts-widget .contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}


/* -------------------------------------------------------------------------
   10. Responsivo dos componentes novos
   Breakpoints do template: 1439 / 1199 / 1023 / 767 / 599 / 424
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .news-attachments__list li {
    flex-wrap: wrap;
  }

  .news-attachments .theme-btn {
    width: 100%;
    text-align: center;
  }

  .news-section-title {
    font-size: 18px;
    margin-top: 30px;
  }
}

@media only screen and (max-width: 599px) {
  .news-pagination .pagination {
    gap: 5px;
  }

  .news-pagination .page-link {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
    padding: 0 5px;
  }

  .main-header .logo img {
    max-height: 44px;
  }
}


/* -------------------------------------------------------------------------
   11. Mosaico de destaques da home
   Substitui o destaque provisório (2 fotos gigantes) pelo formato aprovado
   com o cliente (a foto que ele mandou): 4 notícias em 3 colunas — uma alta
   à esquerda, a PRINCIPAL (maior) no meio, e duas menores empilhadas à
   direita.

   Alimentado por news.is_featured + news.featured_position (1 a 4) — o mesmo
   esquema do site antigo.

   O zoom do hover é o MESMO dos cards do template
   (.news-block .inner-box:hover .image-box img): scale(1.1) com
   transition: all 400ms ease, e overflow:hidden no contêiner.

   Não há overlay colorido: só um gradiente preto no rodapé da foto, para o
   título ler. (A referência que o cliente mandou tinha véu colorido, mas ele
   pediu explicitamente "não precisa efeito de cor".)
   ------------------------------------------------------------------------- */
.destaque-mosaico {
  position: relative;
  padding: 30px 0 10px;
}

.destaque-mosaico__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 240px;
  grid-template-areas:
    "principal alta"
    "peq1      peq2";
}

/* ≥992: as 3 colunas da referência. A do meio é a maior (a notícia
   principal, posição 1); a da esquerda é alta e estreita; a da direita
   guarda as duas menores, empilhadas. Todas as colunas têm a mesma altura
   (2 linhas), então o bloco fecha certinho. */
@media only screen and (min-width: 992px) {
  .destaque-mosaico__grid {
    grid-template-columns: 1fr 1.55fr 1fr;
    grid-template-rows: 245px 245px;
    grid-template-areas:
      "alta principal peq1"
      "alta principal peq2";
  }
}

/* posição 1 = a principal, no meio (é a que o editor marca como a manchete) */
.destaque-mosaico__card--1 { grid-area: principal; }
.destaque-mosaico__card--2 { grid-area: alta; }
.destaque-mosaico__card--3 { grid-area: peq1; }
.destaque-mosaico__card--4 { grid-area: peq2; }

/* Com menos de 4 destaques o grid não pode deixar buraco. */
.destaque-mosaico__grid--1 {
  grid-template-columns: 1fr;
  grid-template-rows: 420px;
  grid-template-areas: "principal";
}

.destaque-mosaico__grid--2 {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 400px;
  grid-template-areas: "principal alta";
}

.destaque-mosaico__grid--3 {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 245px 245px;
  grid-template-areas:
    "principal alta"
    "principal peq1";
}

/* --- o card --------------------------------------------------------------- */
.destaque-mosaico__card {
  position: relative;
  overflow: hidden;            /* segura o scale(1.1) da foto */
  border-radius: 0;            /* canto reto, como os cards (seção 16) */
  background-color: #1a1a1a;   /* enquanto a foto não carrega */
  min-width: 0;                /* título longo não estoura a coluna do grid */
}

.destaque-mosaico__image {
  position: absolute;
  inset: 0;
}

.destaque-mosaico__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 400ms ease;   /* idêntico ao card do template */
}

.destaque-mosaico__card:hover .destaque-mosaico__image img {
  transform: scale(1.1);        /* idêntico ao card do template */
}

/* Véu CLEAN: preto puro, só no rodapé, só para o texto ler. Sem matiz. */
.destaque-mosaico__card:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  /* sobe um pouco e fecha mais embaixo: título de 3-4 linhas sobre foto clara
     (bokeh, neve, céu) precisa disso para ler. Continua preto puro, sem matiz. */
  background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}

/* --- badge da categoria ----------------------------------------------------
   Reaproveita .news-block__cat (seção 4): mesma fonte, padding e raio. Aqui só
   entra o z-index, porque agora ele disputa com o véu. A cor de fundo vem do
   painel (categories.color), aplicada inline pelo componente; sem cor, vale o
   azul do .news-block__cat.
   -------------------------------------------------------------------------- */
.destaque-mosaico__cat {
  z-index: 3;
}

/* --- título + meta -------------------------------------------------------- */
.destaque-mosaico__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;                  /* acima do véu (z-index 1) */
  padding: 20px 22px;
}

.destaque-mosaico__title {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  /* título longo não pode empurrar a meta para fora do card */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.destaque-mosaico__title a {
  color: #fff;
  transition: color 300ms ease;
}

.destaque-mosaico__title a:hover {
  color: var(--minutta-yellow);
}

/* Faz o CARD INTEIRO clicável a partir do único link real do card: evita
   <a> dentro de <a> e mantém um só alvo para o leitor de tela. */
.destaque-mosaico__title a:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.destaque-mosaico__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
  /* cidade + data numa linha so: nos cards estreitos "Sao Lourenco do Oeste
     (SC) | 02 Set, 2026" quebrava e encostava na borda de baixo */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
}

.destaque-mosaico__meta li:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.destaque-mosaico__meta li:last-child {
  flex: none;
}

.destaque-mosaico__meta li {
  position: relative;
  margin-right: 12px;
  padding-right: 13px;
}

.destaque-mosaico__meta li:last-child {
  margin-right: 0;
  padding-right: 0;
}

.destaque-mosaico__meta li:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: rgba(255, 255, 255, .35);
}

.destaque-mosaico__meta li:last-child:after {
  display: none;
}

.destaque-mosaico__meta li i {
  margin-right: 5px;
}

/* a principal (meio) é a manchete: título bem maior. A da esquerda é alta,
   mas estreita — título intermediário. As duas da direita ficam no padrão. */
@media only screen and (min-width: 992px) {
  .destaque-mosaico__card--1 .destaque-mosaico__title {
    font-size: 28px;
    -webkit-line-clamp: 4;
  }

  .destaque-mosaico__card--1 .destaque-mosaico__content {
    padding: 28px 30px;
  }

  .destaque-mosaico__card--2 .destaque-mosaico__title {
    font-size: 20px;
    -webkit-line-clamp: 4;
  }

  /* as duas menores da direita sao baixas (245px): 3 linhas de titulo e o
     maximo que cabe junto com a meta */
  .destaque-mosaico__card--3 .destaque-mosaico__title,
  .destaque-mosaico__card--4 .destaque-mosaico__title {
    -webkit-line-clamp: 3;
  }
}

/* --- responsivo (breakpoints do template) --------------------------------- */
@media only screen and (max-width: 1199px) {
  .destaque-mosaico__grid {
    grid-template-rows: 215px 215px;
  }

  .destaque-mosaico__card--1 .destaque-mosaico__title {
    font-size: 24px;
  }
}

/* 768–991: sem o mosaico, vira 2x2 (o media query de ≥992 não vale aqui) */
@media only screen and (max-width: 991px) {
  .destaque-mosaico__grid,
  .destaque-mosaico__grid--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 225px 225px;
    grid-template-areas:
      "principal alta"
      "peq1      peq2";
  }

  /* com 1 ou 2 destaques o grid nao pode herdar as 2 linhas acima, senao
     sobra area vazia */
  .destaque-mosaico__grid--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 320px;
    grid-template-areas: "principal";
  }

  .destaque-mosaico__grid--2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 280px;
    grid-template-areas: "principal alta";
  }

  .destaque-mosaico__title,
  .destaque-mosaico__card--1 .destaque-mosaico__title,
  .destaque-mosaico__card--2 .destaque-mosaico__title {
    font-size: 18px;
    -webkit-line-clamp: 3;
  }

  .destaque-mosaico__content,
  .destaque-mosaico__card--1 .destaque-mosaico__content {
    padding: 16px 18px;
  }
}

/* <768: uma coluna, todos do mesmo tamanho */
@media only screen and (max-width: 767px) {
  .destaque-mosaico {
    padding-top: 20px;
  }

  .destaque-mosaico__grid,
  .destaque-mosaico__grid--1,
  .destaque-mosaico__grid--2,
  .destaque-mosaico__grid--3 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 210px);
    grid-template-areas:
      "principal"
      "alta"
      "peq1"
      "peq2";
    gap: 15px;
  }

  .destaque-mosaico__title,
  .destaque-mosaico__card--1 .destaque-mosaico__title,
  .destaque-mosaico__card--2 .destaque-mosaico__title {
    font-size: 19px;
  }
}

@media only screen and (max-width: 424px) {
  .destaque-mosaico__grid {
    grid-template-rows: repeat(4, 190px);
  }

  .destaque-mosaico__title,
  .destaque-mosaico__card--1 .destaque-mosaico__title {
    font-size: 17px;
  }
}


/* -------------------------------------------------------------------------
   12. Faixa CTA "Anuncie"
   .call-to-action já usa var(--bg-theme-color2) (o azul da Minutta), mas o
   template sobrepõe images/icons/pattern-8.jpg — um JPG VERMELHO, cor que não
   sai por variável. Como os arquivos do template não podem ser alterados,
   o pattern é escondido aqui e fica valendo o azul da própria seção.
   ------------------------------------------------------------------------- */
.call-to-action .bg.bg-pattern-8 {
  background-image: none;
}


/* -------------------------------------------------------------------------
   13. "Leia também"
   O bloco fica DENTRO da coluna de conteúdo. Já esteve fora das duas colunas,
   à largura do container, mas aí só começava depois da linha inteira: como a
   sidebar é mais alta que uma nota curta, sobrava um vão entre o fim do texto
   e o "Leia também". Dentro da coluna ele encosta na matéria sempre - em
   troca, são 2 cards por linha (col-md-6), que é o que cabe sem espremer.
   ------------------------------------------------------------------------- */
.news-related {
  margin-top: 20px;
}

/* o resumo é redundante logo abaixo da matéria que a pessoa acabou de ler */
.news-related .news-block .text {
  display: none;
}

/* No celular os banners da lateral saem da sidebar e cercam a matéria: um
   antes da capa, outro depois do compartilhar (Noticia.vue). */
.publi-noticia--antes {
  margin-bottom: 30px;
}

.publi-noticia--depois {
  margin-top: 30px;
}


/* -------------------------------------------------------------------------
   14. Lightbox da galeria
   Substitui o fancyBox do template: as páginas usavam só ele e o WOW do
   jquery, e os dois saíram junto com o jQuery. Aqui só o visual; a navegação
   (setas, Esc, clique no fundo) está em resources/js/composables/useLightbox.js.
   ------------------------------------------------------------------------- */
.minutta-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.92);
}

.minutta-lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

.minutta-lightbox__figure img {
  max-width: 100%;
  /* desconta a legenda e o respiro, senão a foto passa da tela */
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  border-radius: 0;
}

.minutta-lightbox__figure figcaption {
  margin-top: 12px;
  color: #cfcfcf;
  font-size: 14px;
}

.minutta-lightbox__close,
.minutta-lightbox__nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease;
}

.minutta-lightbox__close:hover,
.minutta-lightbox__nav:hover {
  background: var(--theme-color2);
}

.minutta-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

/* a galeria em si */
.news-gallery .gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 0;
}

.news-gallery .gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-gallery .gallery-item:hover img {
  transform: scale(1.06);
}

@media only screen and (max-width: 767px) {
  /* no celular as setas laterais roubariam a largura da foto */
  .minutta-lightbox {
    padding: 12px;
  }

  .minutta-lightbox__nav {
    position: absolute;
    bottom: 20px;
    z-index: 1;
  }

  .minutta-lightbox__nav--prev {
    left: 20px;
  }

  .minutta-lightbox__nav--next {
    right: 20px;
  }

  .minutta-lightbox__figure img {
    max-height: calc(100vh - 160px);
  }
}


/* -------------------------------------------------------------------------
   Cards de notícia em coluna única (celular)
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  /* Abaixo de 768px cai para 1 card por linha: nao ha card vizinho para
     alinhar, entao o min-height so reservaria espaco em branco. O clamp
     continua valendo, para o titulo nao estourar o card. */
  .news-block .content-box .title,
  .news-block .content-box .text {
    height: auto;
  }
}


/* -------------------------------------------------------------------------
   15. Cantos retos em fotos e cards
   O Amiso arredonda toda foto (14px no card, 10px na capa da matéria e nas
   miniaturas da sidebar) e ainda dá um raio assimétrico na caixa branca que
   sobrepõe a foto do card. A Minutta é jornal: foto e card são quadrados.

   Os seletores abaixo são cópia exata dos do style.css — mesma especificidade,
   e como este arquivo carrega depois, ganha o último. Sem !important.

   Fora do escopo de propósito (seguem arredondados): o badge de categoria
   (.news-block__cat), o botão azul da data, as caixas da sidebar, os campos de
   busca e os botões circulares do lightbox e do compartilhamento.
   ------------------------------------------------------------------------- */
.news-block .image-box .image,   /* foto do card (era 14px) */
.news-block .content-box,        /* caixa branca sobreposta (era 10px 0 10px 10px) */
.blog-details__img,              /* capa da matéria */
.blog-details__img img,
.sidebar__post .sidebar__post-list .sidebar__post-image > img {  /* miniatura 80px */
  border-radius: 0;
}


/* -------------------------------------------------------------------------
   16. Últimos vídeos — responsivo
   ------------------------------------------------------------------------- */

/* Entre 768 e 1199 o rodapé empilha as colunas, e a dos vídeos passa a ocupar a
   linha inteira. As 4 por linha continuam, mas presas por um max-width: soltas
   na largura toda, as miniaturas ficariam enormes ao lado de um título
   minúsculo. */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .videos-widget__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 560px;
  }
}

/* No celular a coluna ocupa a tela inteira. Duas por linha mantém a miniatura
   num tamanho em que ainda se enxerga o que é; as 8 viram quatro fileiras, que
   é o preço de não esticar o rodapé por oito telas. */
@media only screen and (max-width: 767px) {
  .videos-widget__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
  }
}


/* -------------------------------------------------------------------------
   17. Contato — dados sem ícone e formulário ao lado
   ------------------------------------------------------------------------- */

/* O tema empurra o texto 30px para a direita para abrir espaço ao círculo do
   ícone (.contact-details__info li .text em style.css). Sem o ícone, essa
   margem deixava a coluna toda deslocada em relação ao título acima. */
.contact-details__info--sem-icone li .text {
  margin-left: 0;
}

/* Sem o ícone de 80px definindo a altura, os três blocos ficavam colados; o
   alinhamento ao topo também evita que o item cresça para centralizar. */
.contact-details__info--sem-icone li {
  align-items: flex-start;
}

.contact-details__info--sem-icone li + li {
  margin-top: 25px;
}

/* As redes entre o texto e o "Telefone", no tamanho e no azul das do menu
   (secao do header). O .sec-title do tema deixa 50px abaixo e a lista de dados
   mais 41px acima: com as bolinhas no meio, o vao dobrava. */
.contact-details .redes-contato {
  margin-top: -20px;
}

.contact-details .redes-contato + .contact-details__info {
  margin-top: 30px;
}

/* Rótulo ("Telefone", "E-mail") mais discreto que o dado em si, já que sem o
   ícone ele é o único elemento que separa um bloco do outro. */
.contact-details__info--sem-icone li .text h6 {
  margin-bottom: 4px;
}

/* O .team-contact-form do tema era uma seção de largura inteira, com o respiro
   vindo do .container. Como coluna ao lado dos dados, ele precisa do próprio
   padding - sem isto os campos encostam na borda do bloco. */
.contact-details .team-contact-form {
  padding: 40px 35px;
}

@media only screen and (max-width: 767px) {
  .contact-details .team-contact-form {
    padding: 30px 20px;
  }
}