/* Estilos só da página sourcing (app/Views/sourcing.php). Carregado depois do base.css. */

.bg-map { background: var(--map); }

.bg-soft { background: #f6f8fb; }

.source-steps {
    position: relative;
    display: grid;
    gap: 24px;

    @media (min-width: 640px) { grid-template-columns: 1fr 1fr; }
    @media (min-width: 1100px) {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
        max-width: 1440px;
        margin-inline: auto;

        /* conector contínuo nas cores dos mercados, atrás dos cards */
        &::before, &::after { content: ''; position: absolute; top: 278px; left: 40px; right: 40px; height: 2px; background: linear-gradient(90deg, var(--nutrition), var(--personal-care), var(--health-pharma), var(--blue)); opacity: 0.35; }
        /* trecho já percorrido: --progress vem da rolagem (app.js) */
        &::after { height: 3px; opacity: 1; transform-origin: left; transform: scaleX(var(--progress, 0)); }
    }

    li {
        position: relative;
        z-index: 1;
        padding: 14px 14px 34px;
        border: 1px solid rgba(25, 40, 65, 0.08);
        border-radius: var(--radius);
        background: #fff;
        box-shadow: 0 10px 34px rgba(26, 49, 87, 0.06);
    }

    img { width: 100%; aspect-ratio: 306 / 210; object-fit: cover; border-radius: 8px; }
    .number { display: block; margin: 26px 14px 0; font-family: var(--font-display); font-size: clamp(2.5rem, 2.1rem + 1.1vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -1px; color: var(--accent); }
    h3 { margin: 16px 14px 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5625rem); font-weight: 700; line-height: 1.2; color: var(--navy); @media (min-width: 1100px) { min-height: 2.4em; } }
    p { margin: 12px 14px 0; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); line-height: 1.5; color: #4a5568; }
}

/* Um ingrediente, três mercados (Sourcing in practice) */
.market-cards {
    display: grid;
    gap: 20px;

    @media (min-width: 900px) { grid-template-columns: repeat(3, 1fr); gap: 24px; }

    li {
        padding: clamp(24px, 2.5vw, 36px);
        border-radius: var(--radius);
        background: var(--accent);
        color: #fff;
        box-shadow: 0 10px 34px rgba(26, 49, 87, 0.1);
    }

    h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5625rem); font-weight: 700; line-height: 1.2; }
    p { margin-top: 12px; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
}

.in-context { max-width: 900px; margin-top: clamp(32px, 4vw, 48px); }

.conclusion { margin-top: 32px; font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5625rem); font-weight: 600; line-height: 1.4; color: var(--navy); }

.world-map {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1560 / 960;

    svg { width: 100%; height: 100%; overflow: visible; }
}

.regions {
    display: grid;
    gap: 12px;
    margin-top: 36px;

    li {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px 28px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        font-family: var(--font-display);
        font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem);
        font-weight: 700;
        color: var(--navy);

        &::before { content: ''; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
    }
}