/* ==========================================================
   QUEM SOMOS — Estilos da área
   Carregado condicionalmente apenas nas páginas da área.
   Depende de: femipa-layout, femipa-hero
   ========================================================== */


/* ----------------------------------------------------------
   ESTRUTURA BASE DA SUBPÁGINA
   ---------------------------------------------------------- */

.qs-content {
    padding-bottom: var(--spacing-max);
}

.qs-subpagina {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--spacing-l);
    padding-top: var(--spacing-xl);
}

/* Cabeçalho: ocupa todas as 12 colunas — botão voltar fica na col 1 */
.qs-subpagina__cabecalho {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-l);
    margin-bottom: var(--spacing-xxl);
}

/* Todo conteúdo nas colunas 2–11 (10 colunas centralizadas) */
.qs-subpagina__cabecalho ~ * {
    grid-column: 2 / 12;
}

.qs-subpagina__titulo {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-primary);
}

.qs-subpagina__corpo {
    max-width: 800px;
}

.qs-subpagina__vazio {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
}


/* ----------------------------------------------------------
   BOTÃO VOLTAR
   Replicado do padrão noticia-single__voltar em noticias.css
   ---------------------------------------------------------- */

.qs-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--corner-md);
    background-color: var(--full-white);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.qs-voltar:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
}

.qs-voltar__icon {
    width: 18px;
    height: 18px;
}


/* ----------------------------------------------------------
   BOTÕES DE AÇÃO (download e CTA)
   ---------------------------------------------------------- */

.qs-btn-download,
.qs-btn-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
    padding: var(--spacing-m) var(--spacing-xl);
    border-radius: var(--corner-md);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-top: var(--spacing-xl);
}

.qs-btn-download {
    background-color: var(--color-secondary);
    color: var(--full-white);
}

.qs-btn-download:hover {
    background-color: var(--color-secondary-600);
    color: var(--full-white);
}

.qs-btn-cta {
    background-color: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
}

.qs-btn-cta:hover {
    background-color: var(--color-button-secondary-bg-hover);
    color: var(--color-button-secondary-text);
}

.qs-btn-download__icon,
.qs-btn-cta__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* ----------------------------------------------------------
   PILLS E PAINÉIS
   Movidos para assets/css/ui.css (componente global fm-pill / fm-painel).
   ---------------------------------------------------------- */

.qs-gestao__label {
    margin: 0 0 var(--spacing-m);
    font-size: var(--font-size-body-small);
    color: var(--color-text-secondary);
}


/* ----------------------------------------------------------
   GESTÃO — Título do período e grupos
   ---------------------------------------------------------- */

.qs-gestao__periodo-titulo {
    margin: 0 0 var(--spacing-xxl);
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-primary);
}

.qs-gestao__grupo {
    margin-bottom: var(--spacing-xxxl);
}

.qs-gestao__grupo-titulo {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-h6);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding-left: var(--spacing-m);
    border-left: 3px solid var(--color-secondary);
}


/* ----------------------------------------------------------
   CARDS DE MEMBRO (grid 3 colunas desktop, 2 tablet, 1 mobile)
   ---------------------------------------------------------- */

.qs-gestao__membros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl) var(--spacing-l);
}

/* Conselho Fiscal — 4 colunas */
.qs-gestao__membros--4col {
    grid-template-columns: repeat(4, 1fr);
}

.qs-membro {
    display: flex;
    flex-direction: column;
}

/* Foto — só renderizada quando presente, sem placeholder */
.qs-membro--com-foto .qs-membro__foto-wrap {
    width: 180px;
    height: 221px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--corner-md) var(--corner-md) 20px var(--corner-md);
    background-color: var(--color-bg-alt);
    margin-bottom: var(--spacing-m);
}

.qs-membro__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.qs-membro__cargo {
    margin: 0 0 var(--spacing-xxs);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.qs-membro__nome {
    margin: 0 0 var(--spacing-xxs);
    font-size: var(--font-size-body-small);
    color: var(--color-text-primary);
}

.qs-membro__instituicao {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}


/* ----------------------------------------------------------
   GALERIA DE PRESIDENTES (grid 3 colunas)
   ---------------------------------------------------------- */

.qs-galeria-presidentes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xxl) var(--spacing-xl);
}

.qs-presidente {
    display: flex;
    flex-direction: column;
}

.qs-presidente__foto-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--corner-l);
    background-color: var(--color-bg-alt);
    margin-bottom: var(--spacing-m);
    overflow: hidden;
    position: relative;
}

.qs-presidente__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Borda interna — elemento real no DOM, fica sobre a imagem */
.qs-presidente__borda {
    position: absolute;
    inset: 0;
    border-radius: var(--corner-l);
    border: 8px solid var(--color-neutral-300);
    pointer-events: none;
    display: block;
}

.qs-presidente__foto-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-neutral-200);
}

.qs-presidente__nome {
    margin: 0 0 var(--spacing-xxs);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.qs-presidente__periodo {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}


/* ----------------------------------------------------------
   BALANCETES — Lista de arquivos por mês
   ---------------------------------------------------------- */

.qs-balancetes__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
    max-width: 600px;
}

.qs-balancetes__item {
    border-bottom: 1px solid var(--color-border-default);
}

.qs-balancetes__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-m) var(--spacing-s);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-body);
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: var(--corner-s);
}

.qs-balancetes__link:hover {
    color: var(--color-secondary);
    background-color: var(--color-bg-subtle);
}

.qs-balancetes__link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-icon-muted);
}

.qs-balancetes__link:hover .qs-balancetes__link-icon {
    color: var(--color-secondary);
}


/* ----------------------------------------------------------
   RESPONSIVO — Tablet (≤ 1024px)
   ---------------------------------------------------------- */

@media (max-width: 1024px) {

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

    .qs-gestao__membros--4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .qs-galeria-presidentes {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ----------------------------------------------------------
   RESPONSIVO — Mobile (≤ 768px)
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .qs-subpagina {
        grid-template-columns: 1fr;
    }

    .qs-subpagina__cabecalho ~ * {
        grid-column: 1 / -1;
    }

    .qs-subpagina__cabecalho {
        margin-bottom: var(--spacing-xl);
    }

    .qs-subpagina__titulo {
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4);
    }

    .qs-gestao__membros {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-l);
    }

    .qs-galeria-presidentes {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-l);
    }

    .qs-btn-download,
    .qs-btn-cta {
        width: 100%;
        justify-content: center;
    }

}

/* ----------------------------------------------------------
   APRESENTAÇÃO — Página principal Quem Somos
   ---------------------------------------------------------- */

.qs-apresentacao {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-max);
    padding-top: var(--spacing-xxxl);
    padding-bottom: var(--spacing-max);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}


/* Vídeo full-width com gradiente
   Escapa do .l-container via margin negativo + width 100vw */

.qs-video-full {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    background: linear-gradient(
        135deg,
        #2BA4D3 0%,
        #1a7aaa 30%,
        #1a4e7a 60%,
        #1E4679 100%
    );
    padding-top: var(--spacing-xxxl);
    padding-bottom: var(--spacing-xxxl);
}

.qs-video-full__inner {
    /* largura controlada por l-container--10col no HTML */
}

.qs-video-full__wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: var(--corner-l);
    overflow: hidden;
}

.qs-video-full__wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}


/* Bloco de apresentação (texto + logo) */

.qs-apresentacao__bloco {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--spacing-xxl);
    align-items: start;
}

.qs-apresentacao__conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
}

.qs-apresentacao__tag {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--corner-xl);
    background-color: var(--color-secondary);
    color: var(--full-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body-small);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.qs-apresentacao__titulo {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-primary);
}

.qs-apresentacao__texto {
    color: var(--color-text-secondary);
}

.qs-apresentacao__logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-m);
    padding-top: var(--spacing-xxl);
}

.qs-apresentacao__logo {
    width: 100%;
    max-width: 180px;
    height: auto;
}

.qs-apresentacao__logo-legenda {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--line-height-body-small);
}


/* Bloco de missão */

.qs-missao {
    background-color: var(--color-bg-inverse);
    border-radius: var(--corner-l);
    padding: var(--spacing-xxl) var(--spacing-xxxl);
}

.qs-missao__titulo {
    margin: 0 0 var(--spacing-l);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    font-weight: var(--font-weight-bold);
    color: var(--full-white);
    letter-spacing: var(--letter-spacing-heading);
}

.qs-missao__texto {
    color: var(--color-text-inverse);
}

.qs-missao__texto p {
    margin: 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}


/* Seção saiba mais */

.qs-saiba-mais__titulo {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--font-size-h5);
    line-height: var(--line-height-h5);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-heading);
}

.qs-saiba-mais__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qs-saiba-mais__item {
    border-top: 1px solid var(--color-border-default);
}

.qs-saiba-mais__item:last-child {
    border-bottom: 1px solid var(--color-border-default);
}

.qs-saiba-mais__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-l) var(--spacing-m);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s ease, background-color 0.15s ease, padding-left 0.15s ease;
    border-radius: var(--corner-s);
}

.qs-saiba-mais__link:hover {
    color: var(--color-secondary);
    background-color: var(--color-bg-subtle);
    padding-left: var(--spacing-l);
}

.qs-saiba-mais__link-titulo {
    flex: 1;
}

.qs-saiba-mais__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-secondary);
    transition: transform 0.15s ease;
}

.qs-saiba-mais__link:hover .qs-saiba-mais__link-icon {
    transform: translateX(3px);
}


/* ----------------------------------------------------------
   RESPONSIVO — Apresentação
   ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .qs-apresentacao__bloco {
        grid-template-columns: 1fr 180px;
    }
}

@media (max-width: 768px) {
    .qs-video-full {
        padding-top: var(--spacing-xxl);
        padding-bottom: var(--spacing-xxl);
    }

    .qs-apresentacao {
        gap: var(--spacing-xxxl);
        padding-top: var(--spacing-xxl);
    }

    .qs-apresentacao__bloco {
        grid-template-columns: 1fr;
    }

    .qs-apresentacao__logo-wrap {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        gap: var(--spacing-l);
    }

    .qs-apresentacao__logo {
        max-width: 100px;
    }

    .qs-apresentacao__logo-legenda {
        text-align: left;
    }

    .qs-apresentacao__titulo {
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4);
    }

    .qs-missao {
        padding: var(--spacing-xl);
    }
}