/*
 * Ajustes de responsividade do Trilhas.
 * - Tablet (768-1199px): as ilustrações das trilhas tinham só limite de altura e, com a tela
 *   em pé, cobriam o título e o resumo. Agora têm largura máxima e o texto fica por cima.
 * - Telas grandes: o tema não tinha nada acima de 1400px (conteúdo preso em 1320px e texto
 *   em 16px). Como quase tudo é em rem, aumentar a fonte base e a largura do container
 *   escala a página inteira por igual, como um zoom.
 */
/* Só a partir de 768px: no celular o GIF de deslizar é posicionado em relação à trilha
   inteira e, com o container como referência, caía em cima do resumo. */
@media (min-width: 768px){
    .trilhas .scroll .intro .container{
        position: relative;
        z-index: 2;
    }
}

/* A faixa das trilhas tem 600% da largura da tela. Em tablet com toque o navegador
   reduzia o zoom para caber tudo: a página virava miniatura com área em branco embaixo.
   clip corta o excesso sem criar barra de rolagem nem atrapalhar o pin do GSAP. */
@media (min-width: 768px){
    .trilhas main{
        overflow-x: clip;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px){
    .trilhas .scroll .intro .ill_1{ max-width: 40vw; height: auto; }
    .trilhas .scroll .intro .ill_2{ max-width: 46vw; height: auto; }
    .trilhas .scroll .intro .ill_3{ max-width: 60vw; height: auto; }
    /* O deslocamento para fora da tela (right negativo) foi pensado para a ilustração
       grande; com ela menor, a figura da direita sumia. Aqui ela encosta na borda. */
    .trilhas .scroll .intro[class*="-color"] .ill_2{ right: -2vw; }
}
/* Tablet deitado / notebook pequeno: a ilustração da esquerda subia até o resumo */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape){
    .trilhas .scroll .intro[class*="-color"] .ill_1{ max-height: 55%; }
}

/* Filtros de Todos conteúdos entre 992 e 1199px: os seletores tinham largura fixa
   maior que a coluna e o terceiro aparecia cortado ("Todos os format") */
@media (min-width: 992px) and (max-width: 1199.98px){
    .todos-conteudos .filters__select .select{
        font-size: 1.125rem;
        width: 100%;
    }
}

/* Seletores dos filtros: a forma branca era um SVG de 259x59 fixo, centralizado. Fora dessa
   largura ela não acompanhava a caixa e o texto ficava para fora do contorno. A mesma forma,
   agora com viewBox e preserveAspectRatio="none", estica junto com o select. */
.select{
    background-image:
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiM0ODc2OUQiIHN0cm9rZS13aWR0aD0iMS43MzIiIGQ9Ik0uOTYyIDEuMjMgNy41IDcuNzcgMTQuMDQgMS4yMyIvPjwvc3ZnPg=="),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 259 59' preserveAspectRatio='none'><path fill='%23fff' d='M2.981 14.454C3.901 6.224 10.86 0 19.141 0h223.171a13.008 13.008 0 0 1 12.943 11.71l2.861 28.512C259.125 50.275 251.231 59 241.128 59H21.634C9.03 59-.774 48.039.626 35.512z'/></svg>");
    background-position: right .75rem center, 0 0;
    background-size: 15px 9px, 100% 100%;
    /* texto à esquerda, com respiro parecido com o do botão "Trilhas" (antes eram .75rem) */
    padding-left: 1.5rem;
}

@media (min-width: 1800px){
    html{ font-size: 115%; }
    .container{ max-width: 1520px; }
}
@media (min-width: 2400px){
    html{ font-size: 130%; }
    .container{ max-width: 1720px; }
}

/* Modal no celular: o tema zerava o espaço da seta em "Anterior" e "Próximo" e a seta
   ficava por cima do texto. Volta o espaço, com a seta um pouco menor para caber. */
@media (max-width: 767.98px){
    .modal .navigation .prev{ padding-left: 2.75rem; }
    .modal .navigation .next{ padding-right: 2.75rem; }
    .modal .navigation .prev svg,
    .modal .navigation .next svg{ bottom: .55rem; height: auto; width: 2.25rem; }
    .modal .navigation .prev:after{ left: 2.75rem; }
    .modal .navigation .next:after{ right: 2.75rem; }
}

/* Vídeos do YouTube no texto dos posts, dentro do modal: o conteúdo chega depois da página
   e o CSS do bloco de vídeo do WordPress não vem junto, então o iframe ficava com os 640px
   fixos e passava da coluna no celular. Mesma proporção que o WordPress usa no post. */
.modal .wp-block-embed iframe,
.modal-body .wp-block-embed iframe{
    aspect-ratio: 16 / 9;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.modal .wp-embed-aspect-4-3 iframe{ aspect-ratio: 4 / 3; }
.modal .wp-embed-aspect-1-1 iframe{ aspect-ratio: 1; }
.modal .wp-embed-aspect-9-16 iframe{ aspect-ratio: 9 / 16; }
.modal .wp-block-embed{ margin-inline: 0; max-width: 100%; }