/* ==========================================================================
   Colégio Irene Borges - home.css
   Somente o que é exclusivo da página inicial
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner do topo
   Faixa de ponta a ponta, só fotos. O crossfade é bem lento e a foto ganha
   um movimento discreto de aproximação: com o hero logo abaixo, movimento
   forte aqui roubaria a atenção do título.
   -------------------------------------------------------------------------- */

.banner {
    position: relative;
    overflow: hidden;
    background: var(--verde-prof);

    /* A caixa tem a mesma proporção das fotos, então elas aparecem inteiras
       em qualquer largura de tela: as duas escalam juntas. Com altura presa
       à altura da tela, a proporção da caixa mudava e a foto era cortada em
       cima e embaixo.

       Para um banner mais alto, as fotos precisam ser mais altas: a altura
       aqui deixou de ser ajustável pelo CSS. Se trocar a proporção das
       fotos, troque este número junto. */
    aspect-ratio: 300 / 100;
}

.banner-palco {
    position: absolute;
    inset: 0;
}

.banner-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    transition: opacity 1400ms ease;
}

.banner-foto.ativa {
    opacity: 1;
}

/* Véu no rodapé para os controles não sumirem numa foto clara */
.banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(var(--verde-prof-rgb), .6));
}

.banner-controles {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    max-width: var(--site-max-width);
    margin-inline: auto;
}

.banner-pontos {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Área clicável maior que o ponto visível, senão vira alvo impossível
   de acertar no celular. */
.banner-ponto {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.banner-ponto::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: background var(--tr), width var(--tr), border-radius var(--tr);
}

.banner-ponto:hover::before {
    background: rgba(255, 255, 255, .85);
}

.banner-ponto[aria-current="true"]::before {
    width: 26px;
    border-radius: var(--r-full);
    background: #fff;
}

.banner-pausa {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .24);
    color: #fff;
    cursor: pointer;
    transition: background var(--tr);
}

.banner-pausa:hover {
    background: rgba(255, 255, 255, .42);
}

.banner-pausa svg {
    width: 14px;
    height: 14px;
}

.banner-pausa[aria-pressed="false"] .pausa--retomar,
.banner-pausa[aria-pressed="true"] .pausa--pausar {
    display: none;
}

/* Barra de progresso: enche durante a exibição de cada foto e congela
   quando o banner pausa. Fica logo acima da faixa de cores. */
.banner-progresso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    z-index: 1;
    height: 3px;
    background: rgba(255, 255, 255, .22);
}

.banner-progresso span {
    display: block;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

.banner-progresso span.correndo {
    animation: banner-progresso var(--duracao, 9000ms) linear forwards;
}

@keyframes banner-progresso {
    to {
        transform: scaleX(1);
    }
}

/* Pausado: a barra para onde está, para mostrar que a contagem foi
   interrompida e não reiniciada. */
.banner.pausado .banner-progresso span.correndo {
    animation-play-state: paused;
}

/* Quem pediu menos movimento não recebe o avanço automático, então a
   barra não teria o que mostrar. */
@media (prefers-reduced-motion: reduce) {
    .banner-progresso {
        display: none;
    }
}

/* A faixa de cores fecha o banner e emenda com o hero */
.banner > .faixa-cores {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 96px);
    background:
        radial-gradient(52% 44% at 6% 10%, rgba(var(--azul-rgb), .09), transparent 62%),
        radial-gradient(110% 85% at 88% 0%, rgba(var(--verde-rgb), .15), transparent 62%),
        radial-gradient(46% 40% at 72% 96%, rgba(var(--amarelo-rgb), .10), transparent 62%),
        linear-gradient(180deg, var(--verde-claro) 0%, rgba(var(--verde-claro-rgb), 0) 68%);
}

.hero-grade {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero h1 {
    margin-bottom: 22px;
}

.hero h1 em {
    font-style: normal;
    color: var(--verde);
}

.hero-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--linha);
}

.hero-dado strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--verde-esc);
}

.hero-dado span {
    font-size: .84rem;
    color: var(--tinta-2);
}

/* Moldura da foto do hero: verde dominante, com as outras quatro cores
   fechando a diagonal. */
.hero-foto {
    position: relative;
    border-radius: var(--r-lg);
    padding: 10px;
    background:
        linear-gradient(135deg,
            var(--verde) 0%, var(--verde) 60%,
            var(--azul) 60%, var(--azul) 70%,
            var(--amarelo) 70%, var(--amarelo) 80%,
            var(--vermelho) 80%, var(--vermelho) 90%,
            var(--roxo) 90%, var(--roxo) 100%);
    box-shadow: var(--sombra);
}

/* A proporção acompanha a das fotos do hero (1200x1500), e por isso vale
   em qualquer largura de tela: forçar outro formato no celular fazia o
   object-fit aparar a foto em cima e embaixo. */
.hero-foto .foto {
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--r-lg) - 8px);
}

/* --------------------------------------------------------------------------
   Etapas de ensino
   Quatro cards lado a lado: foto no topo, ícone montado sobre a emenda e o
   conteúdo embaixo. A cor da etapa entra no ícone, no título, nos marcadores
   e no botão, e é o que separa um card do outro.
   -------------------------------------------------------------------------- */

.etapas-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(30px, 4vw, 46px);
}

.etapas-topo h2 {
    max-width: 20ch;
    margin-bottom: 0;
}

.etapas-topo p {
    max-width: 38ch;
    margin-bottom: 0;
}

.etapas-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* --------------------------------------------------------------------------
   Card da etapa
   -------------------------------------------------------------------------- */

.etapa-card {
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}

/* Cada card carrega a cor da sua etapa, e todo o resto lê daqui */
/* A ordem das cores é a mesma da página Ensino: quem chega pela home e
   clica em "Saiba mais" precisa encontrar a etapa na cor que já viu. */
.etapa-card--infantil {
    --cor: var(--amarelo);
    --cor-esc: var(--amarelo-esc);
    --cor-rgb: var(--amarelo-rgb);
}

.etapa-card--fund1 {
    --cor: var(--azul);
    --cor-esc: var(--azul-esc);
    --cor-rgb: var(--azul-rgb);
}

.etapa-card--fund2 {
    --cor: var(--verde);
    --cor-esc: var(--verde-esc);
    --cor-rgb: var(--verde-rgb);
}

.etapa-card--medio {
    --cor: var(--roxo);
    --cor-esc: var(--roxo-esc);
    --cor-rgb: var(--roxo-rgb);
}

/* --------------------------------------------------------------------------
   Topo do card: foto e ícone
   -------------------------------------------------------------------------- */

.etapa-card-topo {
    position: relative;
    /* Espaço para o ícone montar sobre a emenda sem cobrir a foto */
    padding-bottom: 38px;
}

.etapa-card-topo .foto {
    border-radius: 0;
    aspect-ratio: 8 / 9;
}

/* Onda que separa a foto do corpo, no lugar de um corte reto.
   São duas: a colorida fica atrás, deslocada uns 8px para cima, e a branca
   cobre quase toda ela. O que sobra é uma faixa da cor da etapa seguindo a
   mesma curvatura, mais grossa no centro e afinando nas pontas. */
.etapa-card-topo::before,
.etapa-card-topo::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    height: 42px;
    border-radius: 100% 100% 0 0 / 100% 100% 0 0;

    /* O ::before entra como primeiro filho, então a foto, que vem depois no
       DOM, seria pintada por cima dele. As duas ondas precisam subir para o
       mesmo nível: entre elas, quem decide é a ordem, e a branca vem depois. */
    z-index: 1;
}

.etapa-card-topo::before {
    bottom: 34px;
    background: var(--cor);
}

.etapa-card-topo::after {
    bottom: 26px;
    background: var(--papel);
}

.etapa-card-icone {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cor);
    color: #fff;

    /* O anel branco recorta o ícone da faixa colorida, senão os dois se
       encostam e viram uma mancha só. */
    box-shadow: 0 0 0 6px var(--papel),
        0 10px 22px -10px rgba(var(--cor-rgb), .8);
}

/* O amarelo é a única cor da paleta clara demais para o traço branco */
.etapa-card--infantil .etapa-card-icone {
    color: var(--tinta);
}

.etapa-card-icone svg {
    width: 32px;
    height: 32px;
}

/* --------------------------------------------------------------------------
   Corpo do card
   -------------------------------------------------------------------------- */

.etapa-card-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 22px 24px;
    text-align: center;
}

.etapa-card-corpo h3 {
    font-size: 1.3rem;
    line-height: 1.18;
    margin-bottom: 8px;
    color: var(--cor-esc);
}

.etapa-card-lema {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-2);
    margin-bottom: 16px;
}

.etapa-card-corpo > p:not(.etapa-card-lema) {
    font-size: .95rem;
    color: var(--tinta-2);
    text-align: left;
    margin-bottom: 18px;
}

.etapa-card-lista {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.etapa-card-lista li {
    position: relative;
    padding-left: 28px;
    font-size: .92rem;
    color: var(--tinta-2);
}

/* Marcador de confirmação desenhado em CSS, para não repetir um SVG
   doze vezes na marcação. */
.etapa-card-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cor);
}

.etapa-card-lista li::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: .52em;
    width: 7px;
    height: 3.5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.etapa-card--infantil .etapa-card-lista li::after {
    border-color: var(--tinta);
}

.etapa-card-botao {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: var(--r-full);
    background: rgba(var(--cor-rgb), .14);
    color: var(--cor-esc);
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: background var(--tr);
}

.etapa-card-botao:hover {
    background: rgba(var(--cor-rgb), .24);
}

.etapa-card-botao svg {
    width: 17px;
    height: 17px;
}

/* --------------------------------------------------------------------------
   A escola
   -------------------------------------------------------------------------- */

.escola-grade {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(32px, 5vw, 66px);
    align-items: center;
}

/* Mesma moldura colorida do hero, para as duas fotos grandes da home
   falarem a mesma língua. O degradê em faixas repete a ordem do logo. */
.escola-foto {
    position: relative;
    border-radius: var(--r-lg);
    padding: 10px;
    background:
        linear-gradient(135deg,
            var(--verde) 0%, var(--verde) 60%,
            var(--azul) 60%, var(--azul) 70%,
            var(--amarelo) 70%, var(--amarelo) 80%,
            var(--vermelho) 80%, var(--vermelho) 90%,
            var(--roxo) 90%, var(--roxo) 100%);
    box-shadow: var(--sombra);
}

/* Mesma regra do hero: a proporção acompanha a das fotos do slideshow
   (1000x1200) e vale em qualquer largura, para nenhuma delas ser aparada
   no celular. */
.escola-foto .foto {
    aspect-ratio: 5 / 6;
    border-radius: calc(var(--r-lg) - 8px);
}

/* --------------------------------------------------------------------------
   Slideshow da seção "A escola"
   As fotos ficam empilhadas na mesma moldura e só a ativa aparece. O ritmo
   é mais lento que o das etapas de propósito: com as duas seções no mesmo
   compasso, a home inteira pulsaria junto.
   -------------------------------------------------------------------------- */

.escola-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1100ms ease;
}

.escola-slide.ativa {
    opacity: 1;
}

/* Véu discreto no rodapé da foto, só para os controles não sumirem numa
   imagem clara. */
.escola-foto .foto::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(var(--verde-prof-rgb), .58));
}

.escola-controles {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.escola-pontos {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A área clicável é maior que o ponto visível, senão vira alvo impossível
   de acertar no celular. */
.escola-ponto {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.escola-ponto::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    transition: background var(--tr), width var(--tr), border-radius var(--tr);
}

.escola-ponto:hover::before {
    background: rgba(255, 255, 255, .8);
}

.escola-ponto[aria-current="true"]::before {
    width: 22px;
    border-radius: var(--r-full);
    background: #fff;
}

.escola-pausa {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    cursor: pointer;
    transition: background var(--tr);
}

.escola-pausa:hover {
    background: rgba(255, 255, 255, .4);
}

.escola-pausa svg {
    width: 14px;
    height: 14px;
}

/* O estado vem do aria-pressed, para marcação e tela nunca discordarem */
.escola-pausa[aria-pressed="false"] .pausa--retomar,
.escola-pausa[aria-pressed="true"] .pausa--pausar {
    display: none;
}

.pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 36px;
}

.pilar {
    border-top: 3px solid var(--cor, var(--verde));
    padding-top: 16px;
}

.pilar strong {
    display: block;
    font-family: var(--f-display);
    font-size: 1.08rem;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}

.pilar span {
    font-size: .9rem;
    color: var(--tinta-2);
}

.pilar--1 {
    --cor: var(--verde);
}

.pilar--2 {
    --cor: var(--azul);
}

.pilar--3 {
    --cor: var(--roxo);
}

/* --------------------------------------------------------------------------
   Missão, visão e valores
   Três cards lado a lado, mostrando tudo de uma vez. Nada fica escondido
   atrás de clique, que é o que a referência do colégio pedia.
   -------------------------------------------------------------------------- */

.mvv-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.mvv-card {
    display: flex;
    flex-direction: column;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--r-lg);
    padding: clamp(26px, 3vw, 34px);

    /* O traço colorido no rodapé é o mesmo da referência, e some dentro do
       arredondamento se for borda: por isso é um pseudo-elemento. */
    position: relative;
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}

.mvv-card::after {
    content: "";
    position: absolute;
    left: clamp(26px, 3vw, 34px);
    right: clamp(26px, 3vw, 34px);
    bottom: 0;
    height: 3px;
    background: var(--cor);
}

.mvv-card--missao {
    --cor: var(--verde);
    --cor-esc: var(--verde-esc);
    --cor-rgb: var(--verde-rgb);
}

.mvv-card--visao {
    --cor: var(--amarelo);
    --cor-esc: var(--amarelo-esc);
    --cor-rgb: var(--amarelo-rgb);
}

.mvv-card--valores {
    --cor: var(--vermelho);
    --cor-esc: var(--vermelho-esc);
    --cor-rgb: var(--vermelho-rgb);
}

.mvv-card-topo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.mvv-icone {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cor);
    color: #fff;
}

/* O amarelo é a única cor da paleta clara demais para o traço branco */
.mvv-card--visao .mvv-icone {
    color: var(--tinta);
}

.mvv-icone svg {
    width: 30px;
    height: 30px;
}

.mvv-card-topo h2 {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.14;
    margin-bottom: 0;
    color: var(--cor-esc);
}

.mvv-card p {
    color: var(--tinta-2);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Lista de valores
   -------------------------------------------------------------------------- */

.mvv-valores {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mvv-valores li {
    position: relative;
    padding-left: 34px;
    color: var(--tinta-2);
}

/* Coração desenhado com dois arcos, como na referência. Fica em CSS para
   não repetir o mesmo SVG oito vezes na marcação. */
.mvv-valores li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .1em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--cor-rgb), .14);
}

.mvv-valores li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: .46em;
    width: 5px;
    height: 8px;
    background: var(--cor);
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 0 0 var(--cor);
    transform: rotate(-45deg);
    transform-origin: 100% 100%;
}

/* --------------------------------------------------------------------------
   Blog do professor (carrossel da home)
   O card .post mora no componentes.css, porque a listagem do blog reusa.
   -------------------------------------------------------------------------- */

.blog-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

.blog-topo h2 {
    margin-bottom: 0;
    max-width: 22ch;
}

.carrossel-controles {
    display: flex;
    gap: 10px;
}

.carrossel-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--papel);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr), opacity var(--tr);
}

.carrossel-btn svg {
    width: 18px;
    height: 18px;
}

.carrossel-btn:hover {
    border-color: var(--tinta);
}

.carrossel-btn[disabled] {
    opacity: .35;
    cursor: default;
}

.carrossel-btn[disabled]:hover {
    border-color: var(--linha);
}

.carrossel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.carrossel::-webkit-scrollbar {
    display: none;
}

/* Enquanto o Firestore responde. Some assim que os cards chegam, e a
   seção inteira some se não houver publicação marcada para a home. */
.blog-carregando {
    color: var(--tinta-2);
    font-size: .95rem;
    padding: 20px 0;
    margin-bottom: 0;
}

.blog-rodape {
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Responsivo da Home
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .hero-grade {
        grid-template-columns: 1fr;
    }

    .hero-foto {
        order: -1;
    }

    .escola-grade {
        grid-template-columns: 1fr;
    }

    /* As fotos do hero e da seção "A escola" são retrato, e a proporção da
       moldura já acompanha isso lá em cima. Aqui não existe ajuste de
       aspect-ratio de propósito: mudar o formato só no celular fazia o
       object-fit aparar a foto em cima e embaixo, cortando justamente a
       parte de cima da fachada e o calçamento. */

    .etapas-grade {
        grid-template-columns: repeat(2, 1fr);
    }

    .mvv-grade {
        grid-template-columns: 1fr;
    }

    .carrossel {
        grid-auto-columns: minmax(280px, 86%);
    }

    .banner-controles {
        bottom: 16px;
    }
}

@media (max-width: 560px) {
    /* Um card por linha: com dois, cada um fica estreito demais para o
       texto e a lista respirarem. */
    .etapas-grade {
        grid-template-columns: 1fr;
    }

    .pilares {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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