/* ==========================================================================
   Seção Benefícios para o RH — grade 3-3-2 (reunião 22/07: "Mais
   praticidade para o RH", 8 cards; substitui o sticky stack de 3 cards).
   Fundo azul preservado: o tema da navbar (main.js) trata #diferenciais
   como seção escura. Reveal de entrada em secao-diferenciais.js.
   Tokens: design-system.css (--blue-500, --ink-900, --ink-200...).
   ========================================================================== */
.stack-section {
    position: relative;
    background: var(--blue-500);
    padding: clamp(104px, 15vh, 180px) 0px clamp(104px, 17vh, 200px);
}

.stack-title {
    font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
    font-size: clamp(38px, 5.8vw, 76px);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: #fff;
    text-align: center;
    max-width: 20ch;
    margin: 0 auto clamp(40px, 7vh, 84px);
}

/* A fila (.rh-grid) é bem mais larga que a tela: sem isto ela estende o
   layout e a página ganha arrasto horizontal no celular. `clip` corta sem
   virar container de rolagem (hidden viraria) e sem tocar no eixo Y — o
   leque de entrada precisa vazar em cima/embaixo. */
.rh-wrap {
    overflow-x: clip;
    /* Sem isto o navegador do celular assume o gesto como rolagem de página,
       dispara pointercancel e mata o arrasto antes do primeiro pointermove — o
       setPointerCapture não protege disso; touch-action é o único freio.
       `pan-y` divide o trabalho: o eixo vertical continua sendo do navegador (a
       página rola normal por cima dos cards), o horizontal é nosso. Uma
       declaração aqui basta para a fila inteira: o navegador intersecta o
       touch-action do elemento tocado com o dos ancestrais.
       `pan-y` puro, sem `pinch-zoom`: em motor que não entenda o segundo token
       a declaração INTEIRA é descartada e o bug volta calado. */
    touch-action: pan-y;
}

.rh-wrap.is-dragging {
    cursor: grabbing;
}

.rh-wrap:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
    border-radius: 8px;
}

.rh-grid {
    position: relative;
    /* offsetParent dos cards — o leque mede daqui */
    --rh-card-w: clamp(280px, 30vw, 380px);
    display: flex;
    gap: 20px;
    width: max-content;
    padding-inline: max(16px, calc((100vw - 1160px) / 2));
    /* arrasto lento sobre o texto vira long-press → seleção/lupa no celular,
       que cancela o ponteiro no meio do gesto (e no mouse deixa o texto azul
       enquanto se arrasta) */
    -webkit-user-select: none;
    user-select: none;
}

.rh-card {
    flex: 0 0 var(--rh-card-w);
    width: var(--rh-card-w);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 250px;
    padding: clamp(28px, 3vw, 20px);
    border-radius: 25px;
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--ink-200);
    will-change: transform;
}

/* ============ SETAS ============ */
.rh-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: clamp(28px, 4vh, 44px);
}

.rh-nav__btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background var(--t-normal), color var(--t-normal),
        opacity var(--t-normal), transform var(--t-fast);
}

.rh-nav__btn:hover:not(:disabled) {
    background: #fff;
    color: var(--blue-500);
}

.rh-nav__btn:active:not(:disabled) {
    transform: scale(0.92);
}

.rh-nav__btn:disabled {
    opacity: 0.32;
    cursor: default;
}

.rh-nav__btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rh-nav__btn svg {
    width: 16px;
    height: 16px;
}

/* ============ CONTEÚDO ============ */
.rh-card-num {
    font-family: 'Monument Extended', 'Poppins', sans-serif;
    font-size: clamp(40px, 3.6vw, 22px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--blue-500);
}

.rh-card-head {
    font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
    font-size: clamp(17px, 1.4vw, 10px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    color: #005afb;
}

.rh-card-desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1.25vw, 14px);
    line-height: 1.35;
    margin: 10px 0 0;
    color: #aeaeb2;
}

/* ============ MODO GRADE (só quem tem .stack-section--grid) ============
   Pedido do dono (07-08): no PC a seção do RH da home vira grade 4×2 em vez
   de carrossel. Fica atrás de um modificador porque a MESMA dupla CSS/JS
   monta #vantagens-colaborador no aplicativo.html, que tem 10 cards e segue
   como carrossel — sem o escopo, lá sobrariam 2 cards numa terceira linha.

   1200px é o piso: são 4 colunas + 3 gaps de 20px dentro de 1200px de faixa,
   ou seja ~285px por card, que respeita o mínimo de 280px do --rh-card-w.
   Abaixo disso a grade apertaria o card, então a seção volta ao carrossel —
   inclusive o comportamento de celular (≤900px), que fica intocado. */
@media (min-width: 1200px) {
    .stack-section--grid .rh-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* o carrossel usa width:max-content + padding assimétrico; a grade é
           uma faixa centrada de largura fixa */
        width: auto;
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 20px;
        row-gap: 20px;
    }

    /* em grid o flex-basis não vale, mas a largura fixa do card sim: sem
       zerar, o card ignora a coluna e estoura a faixa */
    .stack-section--grid .rh-card {
        flex: none;
        width: auto;
    }

    /* sem fila para percorrer, as setas perdem função */
    .stack-section--grid .rh-nav {
        display: none;
    }
}

/* ============ RESPONSIVO ============
   Até 900px o carrossel centraliza o card ativo: padding lateral simétrico
   (o card nasce no meio da tela) + encaixe no soltar, em secao-diferenciais.js.
   O padding é % do .rh-wrap, que é simétrico na viewport — centro do wrap =
   centro da tela. Bônus: o fim da fila cai exato em -(N-1) × pitch. */
@media (max-width: 900px) {
    .rh-grid {
        gap: 16px;
        padding-inline: calc((100% - var(--rh-card-w)) / 2);
    }

    .rh-card {
        min-height: 220px;
    }
}

@media (max-width: 560px) {
    .rh-grid {
        --rh-card-w: min(78vw, 300px);
    }

    .rh-card {
        min-height: 0;
        gap: 20px;
    }
}

/* ============ REVEAL DE ENTRADA ============
   Estado oculto só com JS ativo (html.js) — sem JS os cards ficam
   visíveis direto (anti-FOUC, mesmo padrão das outras seções).
   Quem revela é o leque em secao-diferenciais.js. */
html.js .rh-card,
html.js .rh-nav {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    html.js .rh-card,
    html.js .rh-nav {
        opacity: 1;
    }
}