/**
 * Case Study Template Styles (tmpl-case-study)
 *
 * Styles for case-study-specific sections not already covered by
 * pattern-level CSS (hero, process-strip, problem-solution-proof, trust-block).
 *
 * Requirements: 11.1, 11.2, 11.3, 11.4, 23.1
 *
 * @package Xenopz
 * @since 1.0.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Architecture / Diagram Section
   ───────────────────────────────────────────────────────────────────────────── */

.x-case-architecture {
    padding: var(--x-space-xl) 0;
}

.x-case-architecture h2 {
    margin-bottom: var(--x-space-lg);
    text-align: center;
}

.x-case-architecture__figure {
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
}

.x-case-architecture__figure img {
    width: 100%;
    height: auto;
    border-radius: var(--x-radius-md);
    border: 1px solid var(--x-border);
    box-shadow: var(--x-shadow-card);
}

.x-case-architecture__caption {
    margin-top: var(--x-space-sm);
    font-family: var(--x-font-body);
    font-size: 0.9rem;
    color: var(--x-muted);
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Outcome Section
   ───────────────────────────────────────────────────────────────────────────── */

.x-case-outcome {
    padding: var(--x-space-xl) 0;
}

.x-case-outcome h2 {
    margin-bottom: var(--x-space-md);
}

.x-case-outcome__content {
    max-width: 720px;
    font-family: var(--x-font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--x-ink);
}

.x-case-outcome__content p {
    margin-bottom: var(--x-space-sm);
}

.x-case-outcome__content p:last-child {
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CTA Section
   ───────────────────────────────────────────────────────────────────────────── */

.x-case-cta {
    padding: var(--x-space-xl) 0;
}

.x-case-cta__inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.x-case-cta__heading {
    font-family: var(--x-font-heading);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    color: var(--x-teal-900);
    margin-bottom: var(--x-space-sm);
}

.x-case-cta__text {
    font-family: var(--x-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--x-muted);
    margin-bottom: var(--x-space-lg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive adjustments
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .x-case-architecture,
    .x-case-outcome,
    .x-case-cta {
        padding: var(--x-space-lg) 0;
    }

    .x-case-outcome__content {
        font-size: 1rem;
    }

    .x-case-cta__inner {
        padding: 0 var(--x-space-sm);
    }
}