/* Estilo automático para a página: sobre-o-colegio */

/* Nesta página a section "parceiros" não tem a onda branca na base */
#parceiros .onda--base {
    display: none;
}

/* Conheça nossa história: texto à esquerda + foto em moldura ondulada (baseado na section "sobre" da home) */
#nossa-historia {
    padding: 60px 0 80px;

    .titulo-historia {
        margin-bottom: 20px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .text-historia {
        color: var(--Neutros-Cinza);
        font-size: 16px;
        line-height: 1.7;
        font-family: "Fredoka", sans-serif;
    }

    /* "Tour 360º" + linha fina até o fim da coluna */
    .rodape-historia {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .linha-historia {
        flex: 1;
        height: 1px;
        background: #E5E5E5;
    }

    /* Foto: moldura azul clara com a imagem recortada no mesmo formato */
    .moldura-historia {
        padding: 12px;
        aspect-ratio: 16 / 9;
        background: rgba(53, 28, 119, 0.1);
        clip-path: url(#historia-blob);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: url(#historia-blob);
        }
    }

    @media (max-width: 768px) {
        padding: 40px 0 60px;

        .titulo-historia {
            font-size: 26px;
        }
    }
}

/* Nossos projetos: subtítulo + título centralizados e cards azul claro */
#nossos-projetos {
    padding: 40px 0 80px;

    h3 {
        margin-bottom: 12px;
        color: var(--Primrias-Vermelho);
        font-family: "Fredoka", sans-serif;
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }

    h2 {
        margin-bottom: 40px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        text-transform: uppercase;
    }

    /* Respiro para a sombra dos cards não ser cortada pelo overflow do Swiper */
    .swiperProjetos {
        padding: 6px 4px 16px;
    }

    /* Cards da mesma linha com a mesma altura */
    .swiperProjetos .swiper-slide {
        height: auto;
    }

    /* Barra de progresso (só aparece quando há rolagem — com 4 cards no desktop o Swiper a oculta) */
    .scrollbar-projetos {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        height: 4px;
        margin-top: 24px;
        border-radius: 4px;
        background: linear-gradient(#E5E5E5, #E5E5E5) center / 100% 1px no-repeat;

        .swiper-scrollbar-drag {
            border-radius: 4px;
            background: var(--Primrias-Azul);
        }
    }

    .card-projeto {
        position: relative;
        height: 100%;
        padding: 24px 24px 28px;
        border-radius: 32px;
        overflow: hidden;
        isolation: isolate;
        background: #F1F5FE;
        box-shadow: 0 4px 14px rgba(53, 28, 119, 0.08);

        /* Curva azul no canto superior esquerdo */
        &::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: -120px;
            left: -70px;
            width: 260px;
            height: 180px;
            border-radius: 50%;
            background: #D6E4FF;
        }
    }

    .icone-projeto {
        width: 28px;
        height: 28px;
        margin-bottom: 28px;
        color: var(--Primrias-Azul);
        object-fit: contain; /* quando o ícone vem como imagem do ACF */
    }

    .titulo-projeto {
        margin-bottom: 8px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
    }
    
    .texto-projeto {
        font-family: "Fredoka", sans-serif;
        color: var(--Neutros-Cinza);
        font-size: 12px;
        line-height: 1.55;
    }

    @media (max-width: 768px) {
        padding: 20px 0 60px;

        h3 {
            font-size: 18px;
        }

        h2 {
            font-size: 24px;
        }
    }
}

/* Nossa metodologia: foto à esquerda + texto à direita (espelho da "Conheça nossa história") */
#metodologia {
    padding: 40px 0 80px;

    .titulo-metodologia {
        margin-bottom: 20px;
        color: var(--Primrias-Azul);
        font-family: "Fredoka", sans-serif;
        font-size: 32px;
        font-weight: 600;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .text-metodologia {
        font-family: "Fredoka", sans-serif;
        color: var(--Neutros-Cinza, #646464);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
    }

    .linha-metodologia {
        display: block;
        height: 1px;
        margin-top: 28px;
        background: #E5E5E5;
    }

    /* Foto: moldura azul clara com a imagem recortada no mesmo formato (#metodologia-blob) */
    .moldura-metodologia {
        padding: 12px;
        aspect-ratio: 2 / 1;
        background: rgba(53, 28, 119, 0.1);
        clip-path: url(#metodologia-blob);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            clip-path: url(#metodologia-blob);
        }
    }

    @media (max-width: 768px) {
        padding: 20px 0 60px;

        .titulo-metodologia {
            font-size: 26px;
        }

        .moldura-metodologia {
            aspect-ratio: 16 / 10;
        }
    }
}

/* Textos vindos do ACF: espaço entre parágrafos quando houver mais de um */
#nossa-historia .text-historia + .text-historia,
#metodologia .text-metodologia + .text-metodologia,
#nossos-projetos .texto-projeto + .texto-projeto {
    margin-top: 16px;
}

/* Mobile: a ordem título → imagem → texto vem de .titulo-midia-mobile (assets/css/style.css).
   A linha fina da metodologia não tem conteúdo: a largura é a da linha menos o respiro lateral */
@media (max-width: 767px) {
    .titulo-midia-mobile .bloco-texto > .linha-metodologia {
        width: calc(100% - 32px);
        margin-inline: 16px;
        padding-inline: 0;
    }
}