/* CSS for Baixio Section — modificadores sobre sobre.css */

.baixio {
    overflow: hidden;
}

/*
 * Desktop: slideshow à DIREITA, header à ESQUERDA.
 * O DOM tem [slideshow, header], então row-reverse inverte visualmente
 * sem mexer na ordem do HTML — o que garante o comportamento correto
 * ao empilhar (column): slideshow sempre fica acima do header.
 */
.baixio .wrapper {
    display: flex;
    gap: var(--spacing-gap-large);
    flex-direction: row-reverse;
}

.baixio .section-slideshow {
    width: 55%;
}

.baixio .section-header {
    width: 45%;
    flex-direction: column;
    align-items: flex-start;
}

.baixio .section-header .section-title-container {
    width: 100%;
}

.baixio .section-description {
    width: 100%;
    max-width: none;
    min-width: unset;
    text-align: left;
}

/* ─── Responsivo ──────────────────────────────────────────────── */

@media (max-width: 1500px) {
    /*
     * Ao empilhar, voltamos a column (não column-reverse) pois o DOM já
     * tem slideshow primeiro — ele fica naturalmente acima do header.
     */
    .baixio .wrapper {
        flex-direction: column;
    }

    .baixio .section-slideshow { width: 100%; }
    .baixio .section-header { width: 100%; flex-direction: row; }
    .baixio .section-header .section-title-container { width: 40%; }
    .baixio .section-description { width: 60%; flex-shrink: 1; }
    .baixio .section-slideshow .swiper-main img { aspect-ratio: 16 / 9; }
    .baixio .section-slideshow .swiper-thumbs .swiper-slide img { aspect-ratio: 16 / 9 !important; }
}

@media (max-width: 1024px) {
    .baixio .section-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-gap-small); }
    .baixio .section-header .section-title-container { width: 100%; max-width: none; }
    .baixio .section-description { width: 100%; max-width: none; text-align: left; }
    .baixio .section-slideshow .swiper-main img { aspect-ratio: 16 / 12; }
}

@media (max-width: 768px) {
    .baixio .section-description { text-align: center; }
}