/* ==========================================================================
   Market problems
   ========================================================================== */

.market-problems {
    background-color: var(--color-gray-050);
    color: var(--color-gray-900);
}


/* ==========================================================================
   Intro
   ========================================================================== */

.market-problems__intro {
    display: flex;
    flex-direction: column;

    gap: var(--space-300);

    max-width: 760px;
}

.market-problems__eyebrow {
    color: var(--color-text-accent);

    font-size: var(--font-size-150);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-heading);
    letter-spacing: 0.06em;
}

.market-problems__title {
    color: var(--color-gray-900);

    font-size: clamp(
        var(--font-size-600),
        calc(1.5rem + 0.8vw),
        var(--font-size-625)
    );
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
}

.market-problems__description {
    max-width: 58ch;

    color: var(--color-gray-600);

    font-size: var(--font-size-350);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Problem grid
   ========================================================================== */

.market-problems__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;

    gap: var(--space-300);

    margin-top: clamp(var(--space-500), 6vw, var(--space-600));
}


/* ==========================================================================
   Problem card
   ========================================================================== */

.problem-card {
    display: flex;
    flex-direction: column;

    gap: var(--space-150);

    min-width: 0;
    padding: var(--space-300);

    border: var(--border-width) solid var(--color-gray-200);
    border-radius: var(--radius-lg);

    background-color: var(--color-white);
}

.problem-card__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-150);
}

.problem-card__title {
    min-width: 0;

    color: var(--color-gray-900);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}


.problem-card__description {
    color: var(--color-gray-600);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Breakdown (navy accent)
   ========================================================================== */

.market-problems__breakdown {
    margin-top: clamp(var(--space-500), 6vw, var(--space-600));
    padding: clamp(var(--space-500), 6vw, var(--space-600));

    border-radius: var(--radius-lg);

    background-color: color-mix(
            in srgb,
            var(--color-gray-900) 80%,
            var(--color-secondary)
        );

    color: var(--color-white);
}

.market-problems__breakdown-header {
    display: flex;
    flex-direction: column;

    gap: var(--space-200);

    max-width: 760px;
}

.market-problems__breakdown-title {
    color: var(--color-white);

    font-size: var(--font-size-525);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.market-problems__breakdown-description {
    max-width: 62ch;

    color: var(--color-gray-250);

    font-size: var(--font-size-350);
    line-height: var(--line-height-body);
}


/* ==========================================================================
   Breakdown process flow
   ========================================================================== */

.market-problems__flow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-400);

    margin: var(--space-400) 0 0;
    padding: 0;

    list-style: none;
}

.market-problems__flow-step {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-150) var(--space-200);

    border: var(--border-width) solid rgb(from var(--color-white) r g b / 14%);
    border-radius: var(--radius-sm);

    background-color: rgb(from var(--color-white) r g b / 5%);
    color: var(--color-gray-100);

    font-size: var(--font-size-150);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);

    white-space: nowrap;
}

.market-problems__flow-step:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 50%;
    left: calc(100% + var(--space-150));

    width: 8px;
    height: 8px;

    border-top: 1.5px solid var(--color-accent);
    border-right: 1.5px solid var(--color-accent);

    transform: translateY(-50%) rotate(45deg);
}

[data-section-reveal].is-section-reveal-pending .market-problems__flow-step {
    opacity: 0;
    transform: translateY(4px);
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step {
    animation: market-problems-flow-step-reveal 375ms var(--ease) both;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(2) {
    animation-delay: 75ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(3) {
    animation-delay: 150ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(4) {
    animation-delay: 225ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(5) {
    animation-delay: 300ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(6) {
    animation-delay: 375ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(7) {
    animation-delay: 450ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(8) {
    animation-delay: 525ms;
}

[data-section-reveal].is-section-reveal-visible .market-problems__flow-step:nth-child(9) {
    animation-delay: 600ms;
}

@keyframes market-problems-flow-step-reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

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

    [data-section-reveal].is-section-reveal-pending .market-problems__flow-step {
        opacity: 1;
        transform: none;
        animation: none;
    }

}


/* ==========================================================================
   Consequences
   ========================================================================== */

.market-problems__consequences {
    display: flex;
    flex-direction: column;

    gap: var(--space-500);

    max-width: 760px;
    margin-top: clamp(var(--space-500), 6vw, var(--space-600));
}

.market-problems__consequences-title {
    color: var(--color-gray-900);

    font-size: var(--font-size-525);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.market-problems__consequence-list {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--space-400);

    margin: 0;
    padding: 0;

    list-style: none;
}

.market-problems__consequence {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);

    gap: var(--space-300);
    align-items: flex-start;
}

.market-problems__consequence::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 11px;
    bottom: calc(-1 * var(--space-400) - 11px);
    left: 5px;

    width: var(--flow-line-width);

    background-color: var(--flow-line-color);
}

.market-problems__consequence:last-of-type::after {
    content: none;
}

.market-problems__consequence-marker {
    position: relative;
    z-index: 1;

    display: block;

    width: var(--signal-dot-size);
    height: var(--signal-dot-size);
    margin-top: 7px;
    margin-left: 2px;

    border-radius: 50%;

    background-color: var(--signal-dot-color);
    box-shadow:
        0 0 0 3px var(--signal-dot-ring),
        0 0 6px var(--signal-dot-glow);
}

.is-market-problems-consequences-pending
.market-problems__consequence-marker {
    opacity: 0;
}

.is-market-problems-consequences-pending
.market-problems__consequence-marker.is-market-problems-consequence-marker-visible {
    opacity: 1;
}

.is-market-problems-consequences-pending
.market-problems__consequence:not(:last-of-type)::after {
    clip-path: inset(0 0 100% 0);
}

.is-market-problems-consequences-pending
.market-problems__consequence.is-market-problems-consequence-line-visible:not(:last-of-type)::after {
    clip-path: inset(0);

    transition: clip-path var(--market-problems-consequence-line-duration) linear;
}


.is-market-problems-consequences-pending .market-problems__consequence-content {
    opacity: 0;
    transform: translateY(8px);
}

.is-market-problems-consequences-pending
.market-problems__consequence.is-market-problems-consequence-visible
.market-problems__consequence-content {
    animation: market-problems-consequence-reveal 480ms var(--ease) both;
}

@keyframes market-problems-consequence-reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

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

    .is-market-problems-consequences-pending .market-problems__consequence-content {
        opacity: 1;
        transform: none;
        animation: none;
    }

}

.market-problems__consequence-content {
    display: flex;
    flex-direction: column;

    gap: var(--space-100);
}

.market-problems__consequence-title {
    color: var(--color-gray-900);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-600);
    line-height: var(--line-height-heading);
}

.market-problems__consequence-description {
    color: var(--color-gray-600);

    font-size: var(--font-size-250);
    line-height: var(--line-height-body);
}


/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1199px) {

    .market-problems__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .problem-card__title {
        font-size: var(--font-size-400);
    }

    .problem-card__description {
        font-size: var(--font-size-200);
    }

    .market-problems__flow {
        position: relative;

        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        gap: var(--space-200);
        padding-left: var(--space-400);
    }

    .market-problems__flow::before {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;

        width: var(--border-width);

        background-color: rgb(from var(--color-white) r g b / 20%);
    }

    .market-problems__flow-step {
        z-index: 1;
    }

    .market-problems__flow-step:not(:last-child)::after {
        content: none;
    }

}

@media (max-width: 1023px) {

    .market-problems__grid {
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 300px), 1fr)
        );
    }

    .market-problems__flow-dot {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;

        width: var(--signal-dot-size);
        height: var(--signal-dot-size);

        border-radius: 50%;

        background-color: var(--signal-dot-color);
        box-shadow:
            0 0 0 var(--signal-dot-ring-size) var(--signal-dot-ring),
            0 0 var(--signal-dot-glow-size) var(--signal-dot-glow);

        opacity: 0;
        pointer-events: none;

        transition: opacity 200ms ease;
    }

    .market-problems__flow-dot.is-market-problems-flow-dot-visible {
        opacity: var(--signal-dot-opacity);
    }

    [data-section-reveal]
    .market-problems__flow.is-market-problems-mobile-flow-active
    .market-problems__flow-step {
        animation: none;
    }

    [data-section-reveal]
    .market-problems__flow.is-market-problems-mobile-flow-active
    .market-problems__flow-step.is-market-problems-flow-step-visible {
        animation: market-problems-flow-step-reveal 375ms var(--ease) both;
    }

}