/* ==========================================================================
   RESPONSIVIDADE — TABLET E MOBILE
   Projeto Bárbara Resende

   Organização aprovada:
   01. Desktop intermediário — até 1200px
   02. Tablet — 821px até 1024px
   03. Tablet menor — até 820px
   04. Mobile — até 760px
   05. Celulares pequenos — até 420px
   06. Páginas internas
   07. Instagram e modal

   O desktop principal permanece controlado por home.css e components.css.
========================================================================== */


/* ==========================================================================
   01. DESKTOP INTERMEDIÁRIO — ATÉ 1200PX
========================================================================== */

@media (max-width: 75rem) {

    .header-row {
        gap: 1.25rem;
    }


    .brand__img {
        width: 10.75rem;
    }


    .main-nav {
        gap: 1.125rem;
    }


    .main-nav a {
        font-size: 0.9375rem;
    }


    .hero-container {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(25rem, 1.05fr);
    }

}


/* ==========================================================================
   02. TABLET — 821PX ATÉ 1024PX

   Sessão aprovada:
   - header compacto;
   - hero em duas colunas;
   - botões do hero lado a lado;
   - cinco pilares em uma linha;
   - Sobre com texto e vídeo lado a lado;
   - cabeçalhos com título à esquerda e texto à direita;
   - Atuação com navegação vertical;
   - Escuta em duas colunas;
   - CTA final horizontal.
========================================================================== */

@media
    (min-width: 51.3125rem)
    and
    (max-width: 64rem) {

    /* ----------------------------------------------------------------------
       HEADER
    ---------------------------------------------------------------------- */

    .site-header,
    .site-header:not(.is-sticky),
    .site-header.is-sticky {
        left: 0;
        right: 0;

        width: auto;
    }


    .header-row {
        gap: 0.875rem;
    }


    .brand__img {
        width: 9.75rem;
    }


    .main-nav {
        gap: 0.75rem;
    }


    .main-nav a {
        font-size: 0.75rem;
        line-height: 1.1;

        white-space: nowrap;
    }


    .header-cta {
        min-height: 2.875rem;

        padding:
            0.75rem
            1rem;

        font-size: 0.75rem;
    }


    /* ----------------------------------------------------------------------
       HERO
    ---------------------------------------------------------------------- */

    .hero-flags {
        display: none;
    }


    .hero::before,
    .hero-collage {
        left: 0;
    }


    .hero {
        min-height: 43rem;
        height: auto;
        max-height: none;
    }


    .hero-container {
        width:
            min(
                calc(100% - (var(--gutter) * 2)),
                var(--container)
            );

        min-height: 37rem;
        height: auto;

        padding-left: 0;

        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(20rem, 1.08fr);

        align-items: end;

        gap: 1rem;
    }


    .hero-copy {
        align-self: center;

        min-width: 0;

        padding:
            4rem
            0
            5rem;
    }


    .hero-copy h1 {
        max-width: none;

        font-size:
            clamp(
                3rem,
                6.2vw,
                4.5rem
            );
    }


    .hero-copy h1 strong {
        font-size: 0.82em;

        white-space: normal;
    }


    .hero-copy p {
        max-width: 29rem;
    }


    .hero-copy .hero-actions {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.75rem;
    }


    .hero-copy .hero-actions .btn {
        width: 100%;
        min-width: 0;

        padding:
            0.875rem
            0.75rem;

        font-size:
            clamp(
                0.75rem,
                1.5vw,
                0.9375rem
            );

        line-height: 1.15;

        text-align: center;
        white-space: normal;
    }


    .hero-person {
        position: relative;

        align-self: end;

        width: 100%;
        height: 36rem;

        overflow: hidden;
    }


    .hero-person img {
        position: absolute;

        right: 0;
        bottom: 0;

        width: auto;
        height: 100%;

        max-width: 100%;
        max-height: 100%;

        object-fit: contain;
        object-position: right bottom;

        transform: none;
    }


    /* ----------------------------------------------------------------------
       PILARES DO HERO
    ---------------------------------------------------------------------- */

    .hero-pillars {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }


    .hero-pillar {
        min-width: 0;
        min-height: 4.5rem;

        padding:
            0.625rem
            0.375rem;

        justify-content: center;

        gap: 0.375rem;
    }


    .hero-pillar__badge {
        width: 2.5rem;
        height: 2.5rem;
    }

    .hero-pillar__icon {
        width: 1.25rem;
        height: 1.25rem;
    }


    .hero-pillar span {
        min-width: 0;

        font-size: 0.6875rem;
        line-height: 1.05;

        text-align: center;

        white-space: normal;
    }


    /* ----------------------------------------------------------------------
       SOBRE — TEXTO E VÍDEO LADO A LADO
    ---------------------------------------------------------------------- */

    .about {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        align-items: stretch;

        min-height: 38rem;

        background: var(--color-white);
    }


    .about-left {
        display: flex;

        align-items: center;

        background: #EAF4FB;
    }


    .about-left__inner {
        width: 100%;
        max-width: 36rem;

        margin:
            0
            0
            0
            auto;

        padding:
            clamp(
                3rem,
                6vw,
                5rem
            )
            clamp(
                2rem,
                4vw,
                3.5rem
            );
    }


    .about-left h2 {
        max-width: 9ch;

        font-size:
            clamp(
                2.75rem,
                5.5vw,
                4rem
            );
    }


    .about-left p {
        max-width: 44rem;
    }


    .about-video {
        min-width: 0;

        padding:
            clamp(
                2rem,
                4vw,
                3rem
            );

        display: flex;

        align-items: center;

        background: var(--color-white);
    }


    .video-card {
        width: 100%;
        height: 100%;

        display: flex;

        overflow: hidden;
    }


    .video-card__image {
        width: 100%;
        height: 100%;

        min-height: 28rem;

        aspect-ratio: auto;
    }


    .video-card__image > img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }


    /* ----------------------------------------------------------------------
       CABEÇALHOS DAS SEÇÕES
    ---------------------------------------------------------------------- */

    .section-heading,
    .work .section-heading,
    .flags .section-heading,
    .news .section-heading {
        display: grid;

        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(18rem, 0.95fr);

        align-items: end;

        gap:
            clamp(
                2rem,
                5vw,
                4rem
            );
    }


    .section-heading > p,
    .work .section-heading > p,
    .flags .section-heading > p,
    .news .section-heading > p {
        max-width: 32rem;

        margin:
            0
            0
            0
            auto;
    }


    .work .section-heading h2,
    .flags .section-heading h2 {
        max-width: 11ch;

        white-space: normal;

        font-size:
            clamp(
                2.75rem,
                5.5vw,
                4rem
            );
    }


    /* ----------------------------------------------------------------------
       ATUAÇÃO E RESULTADOS
    ---------------------------------------------------------------------- */

    .results {
        grid-template-columns:
            4.5rem
            minmax(0, 1fr);
    }


    .results-nav {
        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .results-nav button {
        min-height: 5.5rem;

        font-weight: 700;
    }


    .result-panel {
        min-height: 26rem;

        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(0, 1.1fr);
    }


    .result-media {
        min-height: 26rem;
    }


    /* ----------------------------------------------------------------------
       BANDEIRAS
    ---------------------------------------------------------------------- */

    .flag-item button {
        min-height: 5rem;

        grid-template-columns:
            3.25rem
            minmax(0, 1fr)
            2rem;

        gap: 0.75rem;

        padding:
            0.75rem
            1rem;
    }


    .flag-icon {
        width: 3.25rem;
        height: 3.25rem;
    }


    .flag-icon img {
        width: 1.75rem;
        height: 1.75rem;
    }


    .flag-title {
        font-size:
            clamp(
                1.125rem,
                2.3vw,
                1.5rem
            );

        line-height: 1.1;
    }


    .flag-content {
        padding:
            0
            1.5rem
            1.75rem
            5.25rem;
    }


    /* ----------------------------------------------------------------------
       ESCUTA MS
    ---------------------------------------------------------------------- */

    .listening-grid {
        grid-template-columns:
            minmax(0, 0.8fr)
            minmax(0, 1.2fr);

        align-items: stretch;

        gap:
            clamp(
                2rem,
                5vw,
                4rem
            );
    }


    .listening h2 {
        max-width: 20ch;
    }


    .listening-copy p {
        max-width: 46rem;
    }


    .listening-form {
        width: 100%;
    }


    .topic-picker {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    /* ----------------------------------------------------------------------
       NOTÍCIAS E CONEXÃO
    ---------------------------------------------------------------------- */

    .news-grid,
    .news-side {
        grid-template-columns: 1fr;
    }


    .feed {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .connection-head {
        align-items: end;
        flex-direction: row;
    }


    .connection-head > div {
        max-width: 42rem;
    }


    /* ----------------------------------------------------------------------
       CTA FINAL
    ---------------------------------------------------------------------- */

    .final-cta__inner {
        flex-direction: row;
        align-items: end;
    }


    .final-cta__inner > div:first-child {
        max-width: 38rem;
    }


    .final-cta .hero-actions {
        width: auto;

        grid-template-columns: auto auto;
    }


    /* ----------------------------------------------------------------------
       FOOTER
    ---------------------------------------------------------------------- */

    .footer {
        padding:
            3.5rem
            0;
    }


    .footer-grid {
        grid-template-columns: 1fr;

        justify-items: center;
        align-items: center;

        gap: 1.75rem;

        text-align: center;
    }


    .footer-grid > * {
        grid-column: auto;
        grid-row: auto;
    }


    .footer-grid > a:first-child,
    .footer-grid > div:first-child {
        width: 100%;

        display: flex;

        justify-content: center;
    }


    .footer-grid > a:first-child img,
    .footer-grid > div:first-child img,
    .footer-grid > img:first-child,
    .footer img {
        width: 11rem;

        margin-inline: auto;

        display: block;
    }


    .footer nav {
        width: 100%;

        display: flex;

        flex-wrap: wrap;

        align-items: center;
        justify-content: center;

        gap:
            0.75rem
            1.75rem;

        text-align: center;
    }


    .footer nav a {
        padding: 0;

        color:
            rgba(
                255,
                255,
                255,
                0.78
            );

        border: 0;

        font-size: 0.9375rem;
        line-height: 1.4;

        text-align: center;
    }


    .footer nav a:hover,
    .footer nav a:focus-visible {
        color: var(--color-white);
    }


    .footer nav + nav {
        padding-top: 1.5rem;

        border-top:
            1px
            solid
            rgba(
                255,
                255,
                255,
                0.18
            );
    }

}


/* ==========================================================================
   03. TABLET MENOR — ATÉ 820PX
========================================================================== */

@media (max-width: 51.25rem) {

    /* ----------------------------------------------------------------------
       HERO
    ---------------------------------------------------------------------- */

    .hero {
        min-height: auto;
        height: auto;
    }


    .hero-container {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 0;
    }


    .hero-copy {
        order: 1;

        padding:
            4.5rem
            0
            2.5rem;
    }


    .hero-copy h1 {
        max-width: 10ch;

        font-size:
            clamp(
                3.5rem,
                10vw,
                5.5rem
            );
    }


    .hero-copy h1 strong {
        font-size: 0.82em;

        white-space: nowrap;
    }


    .hero-copy p {
        max-width: 34rem;
    }


    .hero-person {
        order: 2;

        width: 100%;

        height:
            clamp(
                32rem,
                75vw,
                43rem
            );
    }


    .hero-person img {
        position: absolute;

        right: 50%;

        max-width: none;

        object-position: center bottom;

        transform:
            translateX(
                50%
            );
    }


    /* ----------------------------------------------------------------------
       PILARES DO HERO
    ---------------------------------------------------------------------- */

    .hero-pillars {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        height: auto;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.625rem;
    }


    .hero-pillar {
        min-width: 0;
        min-height: 4.5rem;

        padding:
            0.75rem
            0.5rem;

        justify-content: center;

        gap: 0.5rem;

        overflow: hidden;
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--radius-md);
        background: var(--color-blue);
    }


    .hero-pillar__badge {
        width: 2.75rem;
        height: 2.75rem;
    }

    .hero-pillar__icon {
        width: 1.375rem;
        height: 1.375rem;
    }


    .hero-pillar span {
        min-width: 0;

        font-size: 0.75rem;
        line-height: 1.1;

        text-align: center;

        white-space: normal;
    }




    /* ----------------------------------------------------------------------
       ATUAÇÃO
    ---------------------------------------------------------------------- */

    .result-panel {
        grid-template-columns: 1fr;
    }


    .result-media {
        min-height: 18rem;
    }


    /* ----------------------------------------------------------------------
       ESCUTA
    ---------------------------------------------------------------------- */

    .topic-picker {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================================
   04. MOBILE — ATÉ 760PX
========================================================================== */

@media (max-width: 47.5rem) {

    /* ----------------------------------------------------------------------
       HEADER
    ---------------------------------------------------------------------- */

    .site-header,
    .site-header:not(.is-sticky),
    .site-header.is-sticky {
        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        width: auto;

        box-shadow: none;
    }


    .header-row {
        min-height: 5rem;

        gap: 0.75rem;
    }


    .brand__img {
        width: 8.75rem;
    }


    .header-cta {
        display: none;
    }


    /*
     * A logo é centralizada por position:absolute e, em telas estreitas,
     * ocupa largura suficiente pra cobrir a busca dentro de
     * .header-nav-group (que fica atrás dela). Move a busca pra fora do
     * fluxo e ancora do lado direito do header, depois da logo.
     */
    .header-search-trigger {
        position: absolute;

        top: 50%;
        right: 0;

        transform: translateY(-50%);

        z-index: 2;
    }


    /* ----------------------------------------------------------------------
       MENU MOBILE — no desktop/tablet o painel é uma barra horizontal
       (ver components.css); no mobile precisa voltar a ser uma lista
       vertical rolável, senão os 6 links quebram linha de forma feia.
    ---------------------------------------------------------------------- */

    /* ----------------------------------------------------------------------
       DIÁRIO DE ESCUTA — galeria em cima, agenda embaixo; miniaturas em
       carrossel horizontal (uma inteira + uma espiando, indicando arraste)
    ---------------------------------------------------------------------- */

    .territory-journal {
        grid-template-columns: 1fr;
    }

    .field-album__cover {
        height: 16rem;
    }

    .field-album__thumbs {
        display: flex;
        grid-template-columns: none;
        gap: 0.625rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .field-album__thumbs button {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }


    .main-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;

        gap: 0.5rem;

        padding-inline: 1rem;
    }


    .main-nav.is-open {
        max-height: calc(100svh - 5rem);

        overflow-y: auto;
    }


    .main-nav a {
        width: 100%;
        justify-content: center;

        min-height: 3.125rem;

        font-size: 0.9375rem;

        background: var(--color-surface-soft);

        border-bottom: 0;
        border-radius: var(--radius-sm);
    }


    .main-nav a:hover,
    .main-nav a:focus-visible {
        color: var(--color-white);

        background: var(--color-primary);
    }


    .main-nav a[aria-current="page"] {
        color: var(--color-white);

        background: var(--color-primary);

        border-bottom: 0;
    }


    /* ----------------------------------------------------------------------
       BANDEIRAS — 1 por linha no mobile (2 colunas quebra o layout)
    ---------------------------------------------------------------------- */

    .flag-accordion {
        grid-template-columns: 1fr;
    }

    .flag-item.is-open {
        grid-column: auto;
    }

    .flag-item button {
        grid-template-columns: 3rem minmax(0, 1fr) auto;

        gap: 0.75rem;
    }

    .flag-card__summary {
        -webkit-line-clamp: 1;
    }

    .flag-content {
        padding: 0 1.25rem 1.5rem;
    }

    .flag-content__grid {
        grid-template-columns: 1fr;

        gap: 1.75rem;
    }

    .flags-faq__grid {
        grid-template-columns: 1fr;
    }

    .material-grid {
        grid-template-columns: 1fr;
    }


    /* CTA some do header no mobile (não cabe ao lado do toggle/logo),
       então reaparece dentro do próprio painel do menu. */
    .main-nav .main-nav__cta {
        display: flex;
        justify-content: center;

        margin-top: 0.25rem;

        color: var(--color-white);

        background: var(--color-secondary);

        border-radius: var(--pill);

        font-weight: 700;
    }


    .main-nav .main-nav__cta:hover,
    .main-nav .main-nav__cta:focus-visible {
        color: var(--color-white);

        background: var(--color-secondary-hover);
    }


    /* ----------------------------------------------------------------------
       HERO
    ---------------------------------------------------------------------- */

    .hero {
        min-height: auto;
        height: auto;
        max-height: none;

        padding-top: 5rem;
    }


    .hero::before,
    .hero-collage {
        top: 5rem;
        bottom: 0;
        left: 0;
    }


    .hero-container {
        width:
            min(
                calc(100% - 2.5rem),
                36rem
            );

        min-height: auto;
        height: auto;

        margin-inline: auto;

        padding-left: 0;

        grid-template-columns: 1fr;

        gap: 0;
    }


    .hero-copy {
        order: 1;

        width: 100%;

        padding:
            4rem
            0
            2rem;
    }


    .hero-copy .eyebrow {
        max-width: 100%;

        font-size:
            clamp(
                0.75rem,
                3.5vw,
                0.9375rem
            );
    }


    .hero-copy h1 {
        max-width: 100%;

        margin:
            1.25rem
            0
            1.5rem;

        font-size:
            clamp(
                3.15rem,
                14vw,
                5rem
            );
    }


    .hero-copy h1 strong {
        font-size:
            clamp(
                0.72em,
                12vw,
                0.88em
            );

        white-space: nowrap;
    }


    .hero-copy p {
        max-width: 100%;

        font-size: 1rem;
    }


    .hero-copy p br {
        display: none;
    }


    .hero-actions {
        width: 100%;

        margin-top: 1.75rem;

        display: grid;

        grid-template-columns: 1fr;

        gap: 0.75rem;
    }


    .hero-actions .btn {
        width: 100%;
    }


    .hero-person {
        order: 2;

        width: 100%;

        height:
            clamp(
                27rem,
                115vw,
                38rem
            );

        overflow: hidden;
    }


    .hero-person img {
        position: absolute;

        right: 50%;

        width: auto;
        height: 100%;

        max-width: none;
        max-height: 100%;

        object-position: center bottom;

        transform:
            translateX(
                50%
            );
    }


    /* ----------------------------------------------------------------------
       PILARES DO HERO
    ---------------------------------------------------------------------- */

    .hero-pillars {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        height: auto;

        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.625rem;
    }


    .hero-pillar {
        min-width: 0;
        min-height: 4.25rem;

        padding:
            0.625rem
            0.5rem;

        justify-content: center;

        gap: 0.375rem;

        overflow: hidden;
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
        border-left: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--radius-md);
        background: var(--color-blue);
    }


    .hero-pillar__badge {
        width: 2.5rem;
        height: 2.5rem;
    }

    .hero-pillar__icon {
        width: 1.25rem;
        height: 1.25rem;
    }


    .hero-pillar span {
        min-width: 0;

        font-size:
            clamp(
                0.6875rem,
                2.6vw,
                0.8125rem
            );

        line-height: 1.1;

        text-align: center;

        white-space: normal;
    }


    .hero-pillars > .hero-pillar:last-child:nth-child(odd) {
        grid-column:
            1
            /
            -1;
    }


    /* ----------------------------------------------------------------------
       SOBRE
    ---------------------------------------------------------------------- */

    .about {
        min-height: 0;

        grid-template-columns: 1fr;

        background: var(--color-white);
    }


    .about-left {
        background: #EAF4FB;
    }


    .about-left__inner {
        width:
            min(
                calc(100% - 2.5rem),
                36rem
            );

        margin-inline: auto;

        padding:
            3.5rem
            0;
    }


    .about-left h2 {
        max-width: 9ch;

        font-size:
            clamp(
                2.75rem,
                12vw,
                4rem
            );
    }


    .about-video {
        padding:
            2rem
            1.25rem
            3.5rem;

        display: block;

        background: var(--color-white);
    }


    .video-card {
        width: 100%;

        min-height: 0;

        margin-inline: auto;

        display: block;

        overflow: hidden;
    }


    .video-card__image {
        width: 100%;

        min-height: 0;

        aspect-ratio: 4 / 3;
    }


    .video-card__image > img {
        object-position: center 35%;
    }


    .video-card__caption {
        padding:
            1rem
            1.125rem;

        font-size: 1rem;
    }


    /* ----------------------------------------------------------------------
       CABEÇALHOS DAS SEÇÕES
    ---------------------------------------------------------------------- */

    .section-heading,
    .work .section-heading,
    .flags .section-heading,
    .news .section-heading {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 1rem;
    }


    .section-heading > p,
    .work .section-heading > p,
    .flags .section-heading > p,
    .news .section-heading > p {
        max-width: 100%;

        margin: 0;
    }


    .work .section-heading h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.75rem,
                11vw,
                4rem
            );
    }


    /* ----------------------------------------------------------------------
       ATUAÇÃO
    ---------------------------------------------------------------------- */

    .results {
        grid-template-columns: 1fr;
    }


    .results-nav {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        grid-template-rows: auto;
    }


    .result-panel {
        grid-template-columns: 1fr;
    }


    .result-media {
        min-height: 15rem;
    }


    /* ----------------------------------------------------------------------
       BANDEIRAS
    ---------------------------------------------------------------------- */

    .flag-item button {
        grid-template-columns:
            3rem
            minmax(0, 1fr)
            auto;

        gap: 0.75rem;

        padding:
            0.875rem
            0.75rem;
    }


    .flag-icon {
        width: 3rem;
        height: 3rem;
    }


    .flag-icon img {
        width: 1.75rem;
    }


    .flag-content {
        padding:
            0
            1rem
            1.5rem;
    }


    /* ----------------------------------------------------------------------
       ESCUTA
    ---------------------------------------------------------------------- */

    .listening-grid {
        grid-template-columns: 1fr;
    }


    .listening h2 {
        max-width: 100%;

        font-size:
            clamp(
                2.8rem,
                11vw,
                4rem
            );
    }


    /* No mobile a imagem fica empilhada acima do form (não mais ao
       lado) — o "sangramento" gigante pensado pro fim da seção no
       desktop aqui só precisa invadir o topo do form, um pouquinho. */
    .listening-copy__media {
        max-width: none;
        margin-bottom: -2rem;
        position: relative;
        z-index: 2;
    }

    .listening-form {
        position: relative;
        z-index: 1;
    }


    .listening-grid,
    .listening-form,
    .form-row,
    .topic-picker {
        min-width: 0;
    }


    .listening-form {
        width: 100%;

        padding:
            1.5rem
            1rem;

        overflow: hidden;
    }


    .listening-form input,
    .listening-form textarea,
    .listening-form select {
        width: 100%;
        max-width: 100%;

        box-sizing: border-box;
    }


    .topic-picker {
        width: 100%;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 0.625rem;
    }


    .topic-picker button {
        min-width: 0;
        min-height: 5.25rem;

        padding:
            0.75rem
            0.5rem;

        gap: 0.25rem;
    }


    .topic-picker button img {
        width: 1.75rem;
        height: 1.75rem;
    }


    .topic-picker button span {
        min-width: 0;

        font-size: 0.8125rem;
        line-height: 1.1;

        text-align: center;

        white-space: normal;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .listening-form .check {
        width: 100%;

        margin:
            0.5rem
            0;

        display: grid;

        grid-template-columns:
            1.5rem
            minmax(0, 1fr);

        align-items: start;

        justify-content: start;

        gap: 0.75rem;
    }


    .listening-form .check input[type="checkbox"] {
        width: 1.5rem;
        height: 1.5rem;

        margin:
            0.125rem
            0
            0;

        flex: none;

        cursor: pointer;
    }


    .listening-form .check span {
        min-width: 0;

        margin: 0;

        font-size: 0.9375rem;
        line-height: 1.35;

        white-space: normal;
        overflow-wrap: break-word;
    }


    .listening-form button[type="submit"] {
        width: 100%;
        max-width: 100%;

        padding:
            1rem
            1.25rem;

        font-size: 0.9375rem;
    }


    /* ----------------------------------------------------------------------
       NOTÍCIAS, CONEXÃO E CTA
    ---------------------------------------------------------------------- */

    .news-main {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .news-image,
    .news-side-image {
        height: 14rem;
        min-height: 0;
    }

    /*
     * Um carrossel só: o card principal (.news-main) não fica mais
     * solto acima — ele entra na mesma fileira de arraste que os
     * demais. .news-side é só um wrapper no PHP, então vira
     * display:contents pra seus <article> ficarem no mesmo nível de
     * .news-main dentro do flex de .news-grid.
     */
    .news-grid {
        display: flex;
        grid-template-columns: none;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .news-side {
        display: contents;
    }

    .news-main,
    .news-side article {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }


    /* Só 1 post visível por vez, os demais via arraste horizontal. */
    .feed {
        display: flex;
        grid-template-columns: none;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .feed__item {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }

    /* Botão "Ver perfil" some no mobile — não cabe bem ao lado do
       título; o acesso ao Instagram continua pelo ícone flutuante. */
    .connection-head > a.btn {
        display: none;
    }


    .feed-progress-nav {
        display: flex;
    }


    .connection-head,
    .final-cta__inner {
        align-items: flex-start;

        flex-direction: column;
    }


    .final-cta__inner {
        align-items: flex-start;
    }


    /* ----------------------------------------------------------------------
       FOOTER
    ---------------------------------------------------------------------- */

    .footer {
        padding:
            2.5rem
            0;
    }


    .footer-grid {
        width: 100%;

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 1.75rem;

        text-align: center;
    }


    .footer-brand-col {
        width: 100%;

        align-items: center;

        text-align: center;
    }


    .footer-bio {
        max-width: none;
    }


    .footer-social {
        justify-content: center;
    }


    .footer-brand img {
        width: 10rem;

        margin-inline: auto;

        display: block;
    }


    /* Cartões empilhados, um por linha — cada um já tem largura total
       e as próprias colunas cabem sem espremer. */
    .footer-columns {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 1rem;
    }


    .footer-nav-group__title {
        justify-content: center;
    }


    .footer-nav-group a {
        text-align: left;
    }


    /* Rodapé base: logo do partido menor, tudo alinhado à esquerda,
       partido numa linha e créditos juntos (copyright + desenvolvido
       por) na linha de baixo. */
    .footer-base {
        justify-content: flex-start;
    }

    .footer-party,
    .footer-credits {
        width: 100%;
        justify-content: flex-start;
    }

    .footer-party img {
        width: 1.75rem;
    }


    /* ----------------------------------------------------------------------
       MODAIS
    ---------------------------------------------------------------------- */

    .modal-dialog {
        padding:
            1.75rem
            1.375rem;
    }


    .video-placeholder {
        min-height: 18rem;
    }

}


/* ==========================================================================
   05. CELULARES PEQUENOS — ATÉ 420PX
========================================================================== */

@media (max-width: 26.25rem) {

    .main-nav {
        gap: 0.375rem;
    }


    .main-nav.is-open {
        padding:
            0.875rem
            0.875rem
            1rem;
    }


    .main-nav a {
        min-height: 2.875rem;

        padding:
            0.5rem
            0.875rem;

        font-size: 0.875rem;
    }


    .main-nav .main-nav__cta {
        min-height: 3rem;

        font-size: 0.875rem;
    }


    .hero-container {
        width:
            calc(
                100% - 2rem
            );
    }


    .hero-copy h1 {
        font-size:
            clamp(
                2.8rem,
                13.5vw,
                3.75rem
            );
    }


    .hero-copy h1 strong {
        font-size: 0.74em;
    }


    .hero-person {
        height:
            clamp(
                24rem,
                120vw,
                31rem
            );
    }


    .hero-pillar {
        min-height: 3.75rem;

        padding:
            0.625rem
            0.25rem;

        gap: 0.25rem;
    }


    .hero-pillar__badge {
        width: 2.25rem;
        height: 2.25rem;
    }

    .hero-pillar__icon {
        width: 1.125rem;
        height: 1.125rem;
    }


    .hero-pillar span {
        font-size: 0.625rem;
    }


    .listening-form {
        padding:
            1.25rem
            0.875rem;
    }


    .topic-picker {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .topic-picker button {
        min-height: 4.75rem;

        padding:
            0.625rem
            0.375rem;
    }


    .topic-picker button img {
        width: 1.5rem;
        height: 1.5rem;
    }


    .topic-picker button span {
        font-size: 0.75rem;
    }


    .listening-form .check {
        grid-template-columns:
            1.375rem
            minmax(0, 1fr);

        gap: 0.625rem;
    }


    .listening-form .check input[type="checkbox"] {
        width: 1.375rem;
        height: 1.375rem;
    }


    .listening-form .check span {
        font-size: 0.875rem;
    }

}


/* ==========================================================================
   06. PÁGINAS INTERNAS
========================================================================== */

@media (max-width: 64rem) {

    .archive-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .news-layout,
    .content-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }


    .news-sidebar {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 47.5rem) {

    .internal-hero {
        min-height: 16rem;

        padding-top: 5rem;
    }


    .internal-hero::before,
    .internal-hero::after,
    .internal-hero__overlay {
        inset:
            5rem
            0
            0;
    }


    .internal-hero__content {
        padding-block:
            2.75rem
            2.125rem;
    }


    .internal-hero h1 {
        font-size:
            clamp(
                2.25rem,
                11vw,
                3.25rem
            );
    }


    .archive-grid,
    .archive-grid--news,
    .news-sidebar,
    .post-nav {
        grid-template-columns: 1fr;
    }


    .post-nav__item--next {
        justify-content: flex-start;
        text-align: left;
    }


    .single-post__image {
        min-height: 16rem;
    }


    .search-form--large > div {
        grid-template-columns: 1fr;
    }


    .comment-card,
    .comment-form__row {
        grid-template-columns: 1fr;
    }


    .comment-form .btn {
        width: 100%;
    }

}


/* ==========================================================================
   07. INSTAGRAM E MODAL
========================================================================== */

@media (max-width: 62rem) {

    .feed {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

/* min-width pra não vencer a pilha de 1 coluna do mobile (a cascata de
   media queries deste arquivo não é estritamente decrescente — um
   max-width sozinho aqui bateria por cima da regra mobile só por vir
   depois no arquivo). */
@media (min-width: 47.51rem) and (max-width: 62rem) {

    .material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 48rem) {

    .connection-head {
        align-items: flex-start;
        flex-direction: column;
    }


    .connection-head h2 {
        max-width: none;
    }


    .video-modal__dialog {
        width: 94vw;
        max-height: 94vh;
    }


    .video-modal__native-video,
    .video-modal__carousel-video,
    .video-modal__image,
    .video-modal__carousel-image {
        max-height: 70vh;
    }


    .video-modal__carousel,
    .video-modal__carousel-stage {
        min-height: 70vh;
    }


    .video-modal__footer {
        flex-wrap: wrap;
    }

}


@media (max-width: 35rem) {

    .feed {
        gap: 0.75rem;
    }


    .feed__media-type--video {
        width: 3rem;
        height: 3rem;
    }


    .feed__media-type--carousel {
        top: 0.75rem;
        right: 0.75rem;

        width: 2.4rem;
        height: 2.4rem;
    }




    .video-modal__carousel-arrow {
        width: 2.6rem;
        height: 2.6rem;

        font-size: 1.7rem;
    }


    .video-modal__carousel-arrow--previous {
        left: 0.5rem;
    }


    .video-modal__carousel-arrow--next {
        right: 0.5rem;
    }


    .video-modal__footer {
        padding: 0.875rem;
    }

}

/* BR FRONTS ACCORDION REFINEMENT START */

.flag-content__grid {
    align-items: flex-start;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.flag-content__col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.flag-section-card {
    width: 100%;
    padding: clamp(1rem, 1.8vw, 1.4rem);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 0.9rem;
    box-sizing: border-box;
}

.flag-section-card .eyebrow {
    display: block;
    margin: 0 0 0.7rem;
}

.flag-section-card .flag-lead {
    margin: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    font-weight: 500;
    line-height: 1.6;
}

.flag-section-card--parliamentary {
    min-height: 100%;
}

.flag-content__actions {
    margin-top: 0.15rem;
}

.flag-content__actions .btn {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 760px) {
    .flag-content__grid {
        gap: 1rem;
    }

    .flag-section-card {
        padding: 1rem;
    }

    .flag-content__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* BR FRONTS ACCORDION REFINEMENT END */


/* Fechar frente — estado compacto restaurado */
.flag-content > .flag-content__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 1rem 0 0 !important;
    padding: .5rem .8rem !important;
    gap: .4rem !important;
    background: #59ad45 !important;
    color: #fff !important;
    border: 1px solid #59ad45 !important;
    border-radius: 999px !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.flag-content > .flag-content__close::before {
    content: "×";
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    border-radius: 50%;
    background: rgba(0,0,0,.15);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.flag-content > .flag-content__close:hover,
.flag-content > .flag-content__close:focus-visible {
    background: transparent !important;
    color: #ffd400 !important;
    border-color: #ffd400 !important;
}

.flag-content > .flag-content__close:hover::before,
.flag-content > .flag-content__close:focus-visible::before {
    background: #ffd400;
    color: #073e58;
}


/* Fechar frente — altura + hover final */
.flag-content > .flag-content__close {
    min-height: 3.125rem !important;
    transition:
        transform 180ms ease,
        filter 180ms ease !important;
}

.flag-content > .flag-content__close:hover,
.flag-content > .flag-content__close:focus-visible {
    transform: translateY(-2px);
    filter: brightness(.90);
}


/* Fechar frente — estado final */
.flag-content > button.flag-content__close,
.flag-content > button.flag-content__close:focus {
    min-height: 3.125rem !important;
    background: #59ad45 !important;
    color: #fff !important;
    border-color: #59ad45 !important;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease !important;
}

.flag-content > button.flag-content__close:hover,
.flag-content > button.flag-content__close:focus-visible {
    background: #478f38 !important;
    color: #fff !important;
    border-color: #478f38 !important;
    transform: translateY(-2px) !important;
    filter: none !important;
}

.flag-content > button.flag-content__close::before {
    background: rgba(0,0,0,.15) !important;
    color: #fff !important;
}

.flag-content > button.flag-content__close:hover::before,
.flag-content > button.flag-content__close:focus-visible::before {
    background: rgba(0,0,0,.18) !important;
    color: #fff !important;
}