/*
 * Duda Flex - Estilos da Página Sobre a Empresa
 */

/* ==========================================
   SEÇÃO INTRODUÇÃO (SOBRE A EMPRESA)
   ========================================== */

/* Melhora a legibilidade e o respiro do título de seção com quebra de linha */
.about-intro__content .sec__title {
    line-height: var(--line-height-tight);
}

.about-intro__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md); /* Espaçamento confortável de 20px entre as tags */
    margin-top: var(
        --space-xl
    ); /* Espaço amplo e proporcional de 48px acima do grupo de tags */
}

.about-intro__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about-intro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .about-intro__media {
        order: -1; /* Coloca a imagem acima do texto em telas menores para melhor UX */
        aspect-ratio: 16 / 10;
    }
}

/* ==========================================
   SEÇÃO DETALHES (MISSÃO / VALORES)
   ========================================== */

.about-details__content .sec__title {
    line-height: var(--line-height-tight);
}

.about-details__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.about-details__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .about-details__media {
        aspect-ratio: 16 / 10;
    }
}

/* ==========================================
   SEÇÃO MISSÃO, VISÃO E VALORES (ACORDEÃO)
   ========================================== */

.about-mvv {
    padding-top: var(--space-xxl);
    padding-bottom: 0;
}

.about-mvv__head {
    margin-bottom: var(--s48);
}

/* Container da lista de itens do acordeão */
.about-mvv__list {
    display: flex;
    flex-direction: column;
}

/* Cada item do acordeão */
.about-mvv-item {
    border-top: var(--border-width) solid var(--color-mid);
    background: var(--color-white);
}

.about-mvv-item.is-open {
    background: var(--color-primary-soft);
}

.about-mvv-item:last-child {
    border-bottom: var(--border-width) solid var(--color-mid);
}

.about-mvv-item:hover {
    background: var(--color-off-white);
}

/* Gatilho clicável de cada item */
.about-mvv-item__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s20);
    width: 100%;
    padding: var(--s28) var(--page-pad-left) var(--s28) var(--page-pad-right);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-heavy);
    line-height: var(--line-height-tight);
    color: var(--color-text-main);
    text-align: left;
    transition: color var(--transition-quick);
}

.about-mvv-item.is-open .about-mvv-item__trigger {
    color: var(--color-primary);
}

/* Ícone de expandir/colapsar */
.about-mvv-item__icon {
    flex-shrink: 0;
    width: var(--s32);
    height: var(--s32);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-off-white);
    transition:
        transform var(--transition-moderate),
        background var(--transition-quick);
}

.about-mvv-item.is-open .about-mvv-item__icon {
    transform: rotate(180deg);
    background: var(--color-primary);
}

.about-mvv-item__icon svg {
    width: var(--s20);
    height: var(--s20);
    color: var(--color-text-main);
}

.about-mvv-item.is-open .about-mvv-item__icon svg {
    color: var(--color-white);
}

/* Conteúdo expansível */
.about-mvv-item__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.about-mvv-item.is-open .about-mvv-item__content {
    max-height: var(--mvv-height, 600px);
}

/* Inner wrapper para overflow: hidden + padding */
.about-mvv-item__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    overflow: hidden;
    padding: 0 var(--page-pad-right) var(--s36) var(--page-pad-left);
    align-items: center;
}

.about-mvv-item__inner:has(.is-full) {
    grid-template-columns: 1fr;
}

.about-mvv-item__media {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.about-mvv-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Texto descritivo */
.about-mvv-item__text {
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.about-mvv-item__text p {
    margin: 0 0 var(--s16);
}

.about-mvv-item__text p:last-child {
    margin-bottom: 0;
}

/* Responsivo do acordeão MVV */
@media (max-width: 1024px) {
    .about-mvv-item__inner {
        gap: var(--space-lg);
    }
}

@media (max-width: 768px) {
    .about-mvv-item__trigger {
        padding: var(--s20) var(--page-pad-left) var(--s20)
            var(--page-pad-right);
        font-size: var(--text-xl);
    }

    .about-mvv-item__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: 0 var(--page-pad-right) var(--s24) var(--page-pad-left);
    }

    .about-mvv-item__media {
        aspect-ratio: 16 / 10;
    }
}

/* ==========================================
   SEÇÃO DIFERENCIAIS (CARDS EM GRID)
   ========================================== */

.about-diffs {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
}

.about-diffs .sec__label {
    color: var(--color-white-translucent-76);
}

.about-diffs .sec__title {
    color: var(--color-white);
}

.about-diffs .sec__desc {
    color: var(--color-white-translucent-82);
}

.about-diffs__head {
    margin-bottom: var(--s48);
}

.about-diffs__head .sec {
    margin-left: auto;
    margin-right: auto;
}

.about-diffs__list {
    display: flex;
    flex-direction: column;
}

.about-diffs__row {
    display: flex;
    flex-direction: row;
}

.about-diffs__card {
    flex: 1;
    padding: var(--s32) var(--s24);
}

.about-diffs__card-body {
    flex: 1;
    min-width: 0;
}

/* Divisores verticais entre colunas */
.about-diffs__divider-v {
    width: var(--border-width);
    background: var(--color-mid);
    flex-shrink: 0;
}

/* Divisores horizontais entre linhas */
.about-diffs__divider-h {
    height: var(--border-width);
    background: var(--color-mid);
    flex-shrink: 0;
}

.about-diffs__card-title {
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin: 0 0 var(--s8);
}

.about-diffs__card-desc {
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-white-translucent-82);
    margin: 0;
}

/* Responsivo */
@media (max-width: 768px) {
    .about-diffs__row {
        flex-direction: column;
    }

    .about-diffs__card {
        padding: var(--s24) var(--s16);
    }

    /* Divisores verticais viram horizontais no mobile */
    .about-diffs__divider-v {
        width: 100%;
        height: var(--border-width);
    }

    .about-diffs__card-title {
        font-size: var(--text-lg);
    }
}