/* ==========================================================================
   Turminha AMAI - camada 3: as secoes da pagina
   Carregar POR ULTIMO: bootstrap -> base.css -> components.css -> site.css.

   Um bloco por secao, na ordem em que aparecem na home. O conteudo delas
   mora em templates/website/sections/; o header e o footer, em
   templates/partials/.
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */

.ta-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ta-line);
    min-height: var(--ta-nav-h);
}

.ta-header .navbar-brand img {
    height: 2.75rem;
    width: auto;
}

.ta-header .nav-link {
    font-weight: 700;
    color: var(--ta-ink);
    padding-inline: .9rem;
}

.ta-header .nav-link:hover,
.ta-header .nav-link:focus-visible {
    color: var(--ta-red-600);
}

.navbar-toggler { border-color: var(--ta-line); }

/* --- Hero ----------------------------------------------------------------- */
/* O h1 fica FORA do carrossel, num painel solido. Antes havia um <h1> por
   slide (4 no total) e o texto ficava sobre a foto com overlay preto de 20%,
   que nao garante contraste nenhum. */

.ta-hero { background: var(--ta-blue-700); }

.ta-hero__painel {
    padding: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
}

.ta-hero__painel h1 { color: #fff; }

.ta-hero__selo {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 50rem;
    background: var(--ta-red);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ta-hero__midia {
    position: relative;
    min-height: 20rem;
    height: 100%;
}

.ta-hero__midia .carousel,
.ta-hero__midia .carousel-inner,
.ta-hero__midia .carousel-item {
    height: 100%;
}

.ta-hero__midia img {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    object-fit: cover;
}

/* A frase do slide fica numa faixa solida, nao solta sobre a foto. */
.ta-hero__frase {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem;
    background: rgba(18, 58, 133, .88);
    color: #fff;
    margin: 0;
    border: 0;
}

.ta-hero__frase p {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.ta-hero__frase cite {
    display: block;
    margin-top: .35rem;
    font-size: .875rem;
    font-style: normal;
    opacity: .85;
}

@media (min-width: 992px) {
    .ta-hero__midia { min-height: 32rem; }
}

/* --- Principios ----------------------------------------------------------- */

.ta-principio__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .75rem;
    border-radius: 50%;
    background: var(--ta-blue-050);
    color: var(--ta-blue-700);
    font-size: .8rem;
    font-weight: 700;
    flex: none;
}

.ta-principio__imagem {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: var(--bs-border-radius);
    background: var(--ta-cream);
}

.ta-versiculo {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ta-red);
    color: var(--ta-blue-700);
    font-weight: 600;
}

/* --- Turmas --------------------------------------------------------------- */

.ta-turma {
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--ta-line);
    background: #fff;
}

.ta-turma h3 { margin-bottom: .25rem; }

.ta-turma__idade {
    display: inline-block;
    padding: .2rem .75rem;
    border-radius: 50rem;
    background: var(--ta-red-050);
    color: var(--ta-red-700);
    font-size: .85rem;
    font-weight: 700;
}

.ta-horarios {
    margin: 1.25rem 0 0;
    font-size: .95rem;
}

.ta-horarios div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-top: 1px solid var(--ta-line);
}

.ta-horarios dt { font-weight: 600; color: var(--ta-ink-muted); }
.ta-horarios dd { margin: 0; font-weight: 700; }

/* --- Faixa de matricula --------------------------------------------------- */

.ta-cta { background: var(--ta-blue-700); color: #fff; }
.ta-cta h2 { color: #fff; }
.ta-cta .form-control { border: 0; }
.ta-cta label { color: var(--ta-ink); }

/* --- Galeria -------------------------------------------------------------- */
/* Deixou de ser carrossel: 32 fotos num Owl sem lazy-loading eram o maior
   peso da pagina. Agora e grid, tudo lazy, com lightbox num modal so. */

.ta-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.ta-galeria__item {
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background: var(--ta-cream);
    aspect-ratio: 1;
    cursor: zoom-in;
}

.ta-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.ta-galeria__item:hover img,
.ta-galeria__item:focus-visible img { transform: scale(1.06); }

#lightbox .modal-content { background: transparent; border: 0; }
#lightbox img { width: 100%; height: auto; border-radius: var(--bs-border-radius); }

.ta-lightbox__nav {
    background: rgba(255, 255, 255, .92);
    border: 0;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ta-blue-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Professoras ---------------------------------------------------------- */

.ta-professora { text-align: center; }
.ta-professora h3 { margin: 1rem 0 .1rem; font-size: 1.15rem; }
.ta-professora p { margin: 0; color: var(--ta-ink-muted); font-weight: 600; }

/* --- Depoimentos ---------------------------------------------------------- */

.ta-depoimento {
    height: 100%;
    margin: 0;
    padding: 1.75rem;
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    border: 1px solid var(--ta-line);
}

.ta-depoimento__aspas { color: var(--ta-red); margin-bottom: .75rem; }
.ta-depoimento p { margin: 0; }

/* --- Contato -------------------------------------------------------------- */

.ta-contato-item {
    height: 100%;
    padding: 1.5rem;
    border-radius: var(--bs-border-radius-lg);
    background: #fff;
    border: 1px solid var(--ta-line);
}

.ta-contato-item h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.ta-contato-item a { font-weight: 700; text-decoration: none; }
.ta-contato-item a:hover { text-decoration: underline; }

/* --- Footer --------------------------------------------------------------- */
/* Escuro de proposito: no site antigo os titulos eram .text-white sobre
   .bg-white, ou seja, branco no branco - invisiveis. */

.ta-footer {
    background: var(--ta-blue-700);
    color: rgba(255, 255, 255, .85);
}

.ta-footer h2 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}

.ta-footer a { color: #fff; text-decoration: none; }
.ta-footer a:hover, .ta-footer a:focus-visible { text-decoration: underline; }
.ta-footer img { height: 3rem; width: auto; }

.ta-footer__nav a { display: block; padding: .25rem 0; font-weight: 600; }

.ta-footer__creditos {
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: .9rem;
}

.ta-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
}

.ta-social:hover { background: #fff; color: var(--ta-blue-700); }