/* Página interna de case de sucesso (Figma node 1275:3927). CSS próprio, fora do dist/ (o tema não tem src/).
   Markup em single-case_sucesso.php; o conteúdo vem de campos ACF (includes/cases.php). */

.scopi-case-page {
    --case-navy: var(--blue-navy);
    --case-text: #303943;
    --case-text-2: #696b6d;
    background: #fff;
    font-family: Raleway, sans-serif;
}

/* O CSS global do tema pinta p/h* de #1f2937/#13192f com tracking negativo; :where() mantém a especificidade em 0 */
:where(.scopi-case-page) :is(h1, h2, p, ul) {
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    text-wrap: wrap;
}

.case-section-x {
    padding-inline: max(24px, 50% - 608px);
}

/* ---------- Abertura ---------- */
.case-hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-block: 64px 80px;
    background: var(--blue-hero);
}

.case-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    color: #fff;
    font-size: 14px;
    line-height: 21px;
    text-transform: uppercase;
}

.case-breadcrumb a:hover {
    text-decoration: underline;
}

.case-hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-hero h1 {
    display: flex;
    flex-direction: column;
    color: var(--case-navy);
    font-size: clamp(36px, 3.665vw, 52.78px);
    font-weight: 500;
    line-height: 1.1;
}

.case-hero h1 strong {
    font-weight: 700;
}

.case-subtitle {
    color: #fff;
    font-size: clamp(22px, 2.2222vw, 32px);
    font-weight: 500;
    line-height: 1.34;
}

.case-description {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

/* ---------- Conteúdo ---------- */
.case-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-block: 80px;
}

.case-block {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-block h2,
.case-numbers h2 {
    color: var(--case-navy);
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
}

.case-text {
    min-width: 0;
    color: var(--case-text);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
}

.case-text p {
    color: inherit;
}

.case-text p + p {
    margin-top: 24px;
}

/* Com imagem: título e texto lado a lado, imagem na ponta (direita; a cada duas seções, à esquerda) */
.case-block--media {
    flex-direction: row;
    align-items: flex-start;
}

.case-block--media h2 {
    flex: none;
    max-width: 260px;
}

.case-block--media .case-text {
    flex: 1 1 0;
}

.case-media {
    flex: none;
    width: 468px;
    max-width: 100%;
    height: 367px;
    border-radius: 30px;
    object-fit: cover;
}

.case-block--media-left .case-media {
    order: -1;
}

/* Resultado em números */
.case-numbers {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.case-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 48px;
    list-style: none;
}

.case-metrics li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-metrics strong {
    color: var(--case-navy);
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
}

.case-metrics span {
    color: var(--case-text-2);
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

/* ---------- Chamada final ---------- */
.case-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-block: 64px 80px;
    background: var(--case-navy);
}

.case-cta h2 {
    width: min(100%, 820px);
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    line-height: 52px;
    text-align: center;
}

.case-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 100%;
    padding: 14px 32px;
    border-radius: 20px;
    background: var(--accent);
    color: var(--case-text);
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    transition: background .2s, box-shadow .2s;
}

.case-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 8px 20px #ff990052;
}

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

.case-btn img {
    flex: none;
    width: 20px;
    height: 20px;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .case-media {
        width: 40%;
    }

    .case-block--media h2 {
        max-width: 180px;
    }

    .case-block h2,
    .case-numbers h2 {
        font-size: 34px;
        line-height: 1.2;
    }
}

/* ---------- Mobile ----------
   Mesmo padrão das outras páginas: h1 de 34px, títulos de seção em 24px, textos em 16/24; seções empilhadas
   (título, texto, imagem). */
@media (max-width: 860px) {
    .case-hero {
        gap: 24px;
        padding-block: 32px 48px;
    }

    .case-hero-content {
        gap: 16px;
    }

    .case-hero h1 {
        font-size: 34px;
    }

    .case-subtitle {
        font-size: 20px;
        line-height: 28px;
    }

    .case-description {
        font-size: 16px;
        line-height: 24px;
    }

    .case-content {
        gap: 48px;
        padding-block: 56px;
    }

    .case-block h2,
    .case-numbers h2 {
        font-size: 24px;
        line-height: 1.25;
    }

    .case-block--media {
        flex-direction: column;
        gap: 16px;
    }

    .case-block--media h2 {
        max-width: none;
    }

    .case-text {
        font-size: 16px;
        line-height: 24px;
    }

    .case-text p + p {
        margin-top: 16px;
    }

    .case-media,
    .case-block--media-left .case-media {
        order: 3;
        width: 100%;
        height: auto;
        aspect-ratio: 468 / 367;
        border-radius: 20px;
    }

    .case-metrics {
        gap: 32px;
    }

    .case-metrics strong {
        font-size: 40px;
    }

    .case-metrics span {
        font-size: 16px;
    }

    .case-cta {
        gap: 24px;
        padding-block: 56px;
    }

    .case-cta h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .case-btn {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .case-btn {
        transition: none;
    }
}