/* ═══════════════════════════════════════════════════════════════════════
   FASE SUB-PAGES STYLES  (fase-1, fase-2, fase-3)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Section Headers ───────────────────────────────────────────────── */
.fase-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-3xl);
}

.fase-section-header .section-description {
    margin: 0 auto;
}

/* ─── Problem / Solution Sections ───────────────────────────────────── */
.fase-problem,
.fase-solution {
    padding: var(--space-5xl) 0;
}

/* ─── Problem Grid — white bg, navy border cards ─────────────────────── */
.fase-problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* Cards inherit .card from global; add full navy border */
.fase-problem-card {
    border: 1px solid var(--color-navy);
    transition: none;
}

.fase-problem-card:hover {
    border-color: var(--color-navy);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.fase-problem-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
    color: var(--color-navy);
}

.fase-problem-card p {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-gray-700);
}

/* ─── Solution Grid — gray bg, orange left-border cards ─────────────── */
.fase-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.fase-solutions-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
}

/* Cards inherit .card; add orange left accent border */
.fase-solution-card {
    border-left: 3px solid var(--color-orange);
    transition: none;
}

.fase-solution-card:hover {
    box-shadow: var(--shadow-sm);
    transform: none;
}

.fase-solution-card h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
    color: var(--color-navy);
}

.fase-solution-card p {
    font-size: var(--font-size-sm);
    line-height: 1.8;
    color: var(--color-gray-700);
}

/* ─── Dark context — Fase 3 navy section ────────────────────────────── */
.section--navy .fase-solution-card {
    background: var(--color-navy-light);
    border-left: 3px solid var(--color-orange);
    box-shadow: none;
}

.section--navy .fase-solution-card:hover {
    transform: none;
    box-shadow: none;
}

.section--navy .fase-solution-card h4 {
    color: var(--color-white);
}

.section--navy .fase-solution-card p {
    color: var(--color-text-light);
}

/* Section header text on navy background (inherits from global section--navy,
   but the .section-description color needs explicit help) */
.section--navy .fase-section-header .section-description {
    color: var(--color-text-light);
}

/* ─── Phase Navigation ──────────────────────────────────────────────── */
.fase-nav {
    padding: var(--space-3xl) 0;
}

.fase-nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
}

.link-arrow--back {
    color: var(--color-gray-700);
}

.link-arrow--back:hover {
    color: var(--color-orange);
}

/* ─── Scroll Animations ─────────────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger grid children */
.fase-problems-grid  > .animate-on-scroll:nth-child(2),
.fase-solutions-grid > .animate-on-scroll:nth-child(2) { transition-delay: 0.10s; }

.fase-problems-grid  > .animate-on-scroll:nth-child(3),
.fase-solutions-grid > .animate-on-scroll:nth-child(3) { transition-delay: 0.20s; }

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .fase-problems-grid,
    .fase-solutions-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .fase-solutions-grid--4 {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .fase-nav-links {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
}