/* ═══════════════════════════════════════════════════════════
   #trouble — "El Problema" Section (Light theme)
   Clean, light timeline showing cascading organizational failure
   ═══════════════════════════════════════════════════════════ */

#trouble {
    background-color: #ebe8e6;
    color: var(--wp--preset--color--contrast);
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background-color: var(--wp--preset--color--base);
        z-index: 0;
        filter: blur(150px);
    }

    /* ── Dot grid pattern overlay ── */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(color-mix(in srgb, var(--wp--preset--color--contrast), transparent 84%) 1px, transparent 1px);
        mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
        background-size: 32px 32px;
        pointer-events: none;
        z-index: 0;
    }

    & .content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3rem;

        @media (width >=1024px) {
            display: grid;
            grid-template-columns: clamp(350px, 35vw, 500px) 1fr;
            grid-template-rows: 1fr auto;
            align-items: start;

            & .timelines {
                grid-row: span 2;
            }

        }

        & .trouble-header {
            text-align: center;

            & h2 {
                margin-top: 1rem;
                font-size: clamp(1.6rem, 3vw, 2.6rem);
                line-height: 1.3;
                font-weight: 800;
                color: var(--wp--preset--color--contrast);

                & em {
                    font-style: normal;
                    background: linear-gradient(135deg, var(--wp--preset--color--focus), color-mix(in srgb, var(--wp--preset--color--focus), var(--wp--preset--color--primary) 40%));
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

            @media (width >=1024px) {
                text-align: left;
            }
        }

        & .timelines {
            display: grid;
            gap: 2rem;

            & .trouble-timeline {
                position: relative;
                display: grid;
                gap: 1rem;
                width: 100%;

                & .timeline-line {
                    position: absolute;
                    left: 22px;
                    top: 1rem;
                    bottom: 1rem;
                    width: 2px;
                    background: linear-gradient(to bottom,
                            transparent,
                            color-mix(in srgb, var(--wp--preset--color--focus), transparent 60%) 10%,
                            color-mix(in srgb, var(--wp--preset--color--focus), transparent 60%) 90%,
                            transparent);

                    &::after {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: -1px;
                        width: 4px;
                        height: 40px;
                        background: var(--wp--preset--color--focus);
                        border-radius: 2px;
                        filter: blur(1px);
                        box-shadow: 0 0 12px color-mix(in srgb, var(--wp--preset--color--focus), transparent 30%);
                        animation: timelinePulse 3s ease-in-out infinite;
                    }
                }

                & .trouble-item {
                    display: grid;
                    grid-template-columns: 46px 1fr;
                    gap: 1rem;
                    align-items: center;
                    opacity: 0;
                    transform: translateX(-20px);
                    animation: troubleSlideIn .6s ease-out forwards;

                    &[data-trouble="1"] {
                        animation-delay: .1s;
                    }

                    &[data-trouble="2"] {
                        animation-delay: .25s;
                    }

                    &[data-trouble="3"] {
                        animation-delay: .4s;
                    }

                    &[data-trouble="4"] {
                        animation-delay: .55s;
                    }

                    &[data-trouble="5"] {
                        animation-delay: .7s;
                    }

                    &[data-trouble="6"] {
                        animation-delay: .85s;
                    }

                    & .item-marker {
                        width: 46px;
                        height: 46px;
                        display: grid;
                        place-items: center;
                        border-radius: 50%;
                        background: color-mix(in srgb, var(--wp--preset--color--focus), transparent 88%);
                        border: 1px solid color-mix(in srgb, var(--wp--preset--color--focus), transparent 70%);
                        color: var(--wp--preset--color--focus);
                        flex-shrink: 0;
                        position: relative;
                        z-index: 1;
                        transition: all .35s cubic-bezier(.2, .8, .2, 1);

                        & svg {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    & .item-content {
                        background-color: color-mix(in srgb, var(--wp--preset--color--base), transparent 90%);
                        border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast), transparent 88%);
                        border-radius: .75rem;
                        padding: 1rem 1.25rem;
                        box-shadow: 0 1px 3px color-mix(in srgb, var(--wp--preset--color--contrast), transparent 92%),
                            0 4px 12px color-mix(in srgb, var(--wp--preset--color--contrast), transparent 95%);
                        transition: all .35s cubic-bezier(.2, .8, .2, 1);

                        & .item-dept {
                            display: block;
                            font-size: clamp(1.1rem, 1.2vw, 1.2rem);
                            font-weight: 700;
                            letter-spacing: .08em;
                            text-transform: uppercase;
                            color: var(--wp--preset--color--focus);
                            margin-bottom: .25rem;
                        }

                        & p {
                            font-size: clamp(1rem, 1.2vw, 1.2rem);
                            line-height: 1.5;
                            color: color-mix(in srgb, var(--wp--preset--color--contrast), transparent 25%);
                            margin: 0;
                        }
                    }

                    /* ── Hover state ── */
                    &:hover {
                        & .item-marker {
                            background: color-mix(in srgb, var(--wp--preset--color--focus), transparent 75%);
                            box-shadow: 0 0 16px color-mix(in srgb, var(--wp--preset--color--focus), transparent 65%);
                            transform: scale(1.1);
                        }

                        & .item-content {
                            background-color: var(--wp--preset--color--base);
                            border-color: color-mix(in srgb, var(--wp--preset--color--focus), transparent 50%);
                            box-shadow: 0 2px 8px color-mix(in srgb, var(--wp--preset--color--focus), transparent 85%),
                                0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast), transparent 93%);
                        }
                    }
                }
            }
        }

        & .trouble-conclusion {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            padding: 1.5rem 2rem;
            background: color-mix(in srgb, var(--wp--preset--color--focus), transparent 92%);
            border: 1px solid color-mix(in srgb, var(--wp--preset--color--focus), transparent 65%);
            border-radius: 1rem;
            opacity: 0;
            animation: troubleFadeUp .7s ease-out 1.2s forwards;

            & .conclusion-icon {
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                display: grid;
                place-items: center;
                border-radius: 50%;
                background: color-mix(in srgb, var(--wp--preset--color--focus), transparent 80%);
                color: var(--wp--preset--color--focus);
                animation: warningPulseLight 2s ease-in-out infinite;

                & svg {
                    width: 24px;
                    height: 24px;
                }
            }

            & p {
                font-size: clamp(1rem, 1.3vw, 1.2rem);
                line-height: 1.5;
                margin: 0;
                color: var(--wp--preset--color--contrast);

                & strong {
                    color: var(--wp--preset--color--focus);
                    font-weight: 800;
                }
            }
        }
    }


}

/* ── Chromium squircle overrides ───────────────────── */
.is-chromium {
    & #trouble .trouble-item .item-content {
        border-radius: 1.2rem !important;
        corner-shape: squircle;
    }

    & #trouble .trouble-conclusion {
        border-radius: 1.6rem !important;
        corner-shape: squircle;
    }

    & #trouble .trouble-header .trouble-label {
        border-radius: .7rem !important;
        corner-shape: squircle;
    }
}

/* ── Keyframe animations ──────────────────────────── */

@keyframes troubleSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

@keyframes troubleFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

@keyframes timelinePulse {

    0%,
    100% {
        top: 0;
        opacity: .4;
    }

    50% {
        top: calc(100% - 40px);
        opacity: 1;
    }
}

@keyframes warningPulseLight {

    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--focus), transparent 70%);
    }

    50% {
        box-shadow: 0 0 16px 3px color-mix(in srgb, var(--wp--preset--color--focus), transparent 80%);
    }
}

/* ── Responsive: center timeline on larger screens ── */
@media (width >=768px) {
    #trouble {
        & .trouble-item {
            gap: 1.25rem;

            & .item-content {
                padding: 1.25rem 1.5rem;
            }
        }
    }
}

@media (width >=1024px) {
    #trouble {
        & .timeline-line {
            left: 23px;
        }
    }
}