/* =======================================
   BG·LBC - QUEM SOMOS ESTRATÉGIA
   Sistema de toggle entre Atividades e Estratégia Institucional
   
   Componentes:
   - Container principal com max-width e padding
   - Grid de 2 botões (desktop) / empilhados (mobile)
   - Estados active/inactive com cores específicas
   - Transições fade nas divs de conteúdo
========================================*/

/* =======================================
   CONTAINER PRINCIPAL
   Max-width 1310px, centrado, com padding 16% lateral
========================================*/
.bglbc-qsstrategy-container {
    max-width: 1310px;
    margin: 0 auto;
    padding-left: 16%;
    padding-right: 8%; /* Reduzido para chegar mais à direita */
}

/* =======================================
   GRID DE BOTÕES
   2 colunas em desktop, alinhados à direita
========================================*/
.bglbc-qsstrategy-buttons {
    display: flex;
    gap: 32px;
    justify-content: flex-end;
    align-items: stretch;
}

/* =======================================
   BOTÕES BASE
   Estrutura e layout comum a ambos os botões
========================================*/
.bglbc-qsstrategy-btn {
    /* Dimensões fixas */
    width: 504px !important;
    min-width: 504px;
    max-width: 504px;
    height: 172px;
    padding: 24px;
    
    /* Layout interno */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0; /* Não encolhe no flexbox */
    
    /* Reset de estilos de botão */
    border: none;
    border-radius: 0 !important;
    cursor: pointer;
    
    /* Transição suave para hover */
    transition: transform 0.3s ease;
}

.bglbc-qsstrategy-btn:hover {
    transform: translateY(-3px); /* Sobe 3px */
}

/* =======================================
   CONTEÚDO DO BOTÃO (texto)
   Título e subtítulo empilhados verticalmente
========================================*/
.bglbc-qsstrategy-btn-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
    min-width: 0;
}

/* =======================================
   TÍTULO DO BOTÃO
   Font: Exo 2, 3.5rem (56px), weight 600, line-height 40px
========================================*/
.bglbc-qsstrategy-btn-title {
    font-family: "Exo 2", sans-serif;
    font-size: 3.5rem;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 24px;
}

/* =======================================
   SUBTÍTULO DO BOTÃO
   Font: Inter, 16px, weight 400
========================================*/
.bglbc-qsstrategy-btn-subtitle {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
}

/* =======================================
   ÍCONE SVG
   Círculo com seta para baixo, 24x24px
   Colado à direita (margin-left auto)
========================================*/
.bglbc-qsstrategy-btn-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-left: auto;
}

.bglbc-qsstrategy-btn-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

/* =======================================
   ESTADO ATIVO
   Fundo vermelho #BA2229, texto branco
========================================*/
.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--active {
    background-color: #BA2229 !important;
}

.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--active .bglbc-qsstrategy-btn-title,
.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--active .bglbc-qsstrategy-btn-subtitle {
    color: #ffffff !important;
}

/* =======================================
   ESTADO INATIVO
   Fundo escuro #1A1919 transparente com blur, título branco, subtítulo cinza #9e9e9e
========================================*/
.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--inactive {
    background-color: rgba(26, 25, 25, 0.7) !important; /* Transparente */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari */
}

.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--inactive .bglbc-qsstrategy-btn-title {
    color: #ffffff !important;
}

.bglbc-qsstrategy-btn.bglbc-qsstrategy-btn--inactive .bglbc-qsstrategy-btn-subtitle {
    color: #9e9e9e !important;
}

/* =======================================
   DIVS DE CONTEÚDO
   Controladas por IDs fixos: #bglbc-qsstrategy-acts e #bglbc-qsstrategy-strat
========================================*/

/* Wrapper que contém as divs de conteúdo */
.bglbc-qsstrategy-content-wrapper {
    position: relative;
    width: 100%;
}

/* Estilos base para ambas as divs */
#bglbc-qsstrategy-acts,
#bglbc-qsstrategy-strat {
    width: 100%;
    background-color: #ffffff;
    opacity: 0;
    transition: opacity 1s ease;
}

/* Div ativa: visível e ocupa espaço (position relative) */
#bglbc-qsstrategy-acts.active,
#bglbc-qsstrategy-strat.active {
    position: relative;
    opacity: 1;
}

/* Div inativa: escondida e sobreposta (position absolute) */
#bglbc-qsstrategy-acts.hidden,
#bglbc-qsstrategy-strat.hidden {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

/* =======================================
   RESPONSIVO - TABLET/DESKTOP PEQUENO (< 1418px)
   Botões mantêm width fixo, permitindo quebra de linha no título
========================================*/
@media screen and (max-width: 1418px) {
    /* Botões mantêm 504px mas permitem texto quebrar */
    .bglbc-qsstrategy-btn-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* =======================================
   RESPONSIVO - MOBILE (<768px)
   Botões empilhados verticalmente, width 100%
========================================*/
@media screen and (max-width: 768px) {
    /* Flex passa para coluna */
    .bglbc-qsstrategy-buttons {
        flex-direction: column;
        gap: 32px;
    }
    
    /* Botões ocupam 100% da largura */
    .bglbc-qsstrategy-btn {
        width: 100%;
    }
    
    /* Padding do container pode ser ajustado em mobile se necessário */
    .bglbc-qsstrategy-container {
        padding-left: 5%;
        padding-right: 5%;
    }
}

/* =======================================
   ACESSIBILIDADE
   Focus states para navegação por teclado
========================================*/
.bglbc-qsstrategy-btn:focus {
    outline: 2px solid #BA2229;
    outline-offset: 4px;
}

.bglbc-qsstrategy-btn:focus:not(:focus-visible) {
    outline: none;
}

/* =======================================
   ELEMENTOR EDITOR - MOSTRAR TABS
   Força visibilidade das tabs no editor para permitir edição
========================================*/
.elementor-editor-active #bglbc-qsstrategy-acts,
.elementor-editor-active #bglbc-qsstrategy-strat {
    position: relative !important;
    opacity: 1 !important;
    display: block !important;
    pointer-events: auto !important;
}