/* ===== Problem Statement Section with continuous perimeter runner ===== */

/* tokens */
:root {
    --card-bg: #ffffff;
    --ink-900: #1f1f1f;
    --ink-700: #ff6c63;
    --ink-500: #5a6273;

    --brand: #d31334; /* animated red */
    --edge: 4px; /* thinner line thickness */
    --gap: 12px; /* offset distance from the card edge */

    --radius: 10px;
    --rail-max: 1160px;
    --rail-pad: clamp(16px, 4vw, 48px);

    --h1: clamp(26px, 3.2vw, 34px);
    --h2: clamp(18px, 2.2vw, 22px);
    --body: clamp(15px, 1.6vw, 18px);
    --quote: clamp(16px, 2vw, 20px);
}

/* Force coral brand for this section only */
.problem-wrap.theme-coral {
    --brand: #d41935 !important;
    --ink-700: #d41935 !important;
}

/* Make sure the perimeter uses our brand, even if earlier backgrounds were set */
.problem-wrap.theme-coral .problem-card::before,
.problem-wrap.theme-coral .problem-card::after {
    background: none !important; /* clear any previous shorthand */
    background: conic-gradient(
        from var(--runner-angle, 0deg),
        var(--brand) 0 var(--runner-arc, 22deg),
        color-mix(in oklab, var(--brand), transparent 40%)
            var(--runner-arc, 22deg) 360deg
    ) !important;
}
.problem-wrap.theme-coral .problem-card::after {
    background: var(--brand) !important; /* the static ring */
    opacity: 0.18;
}

/* Kill the blue underline coming from global heading styles */
.problem-wrap .problem-title,
.problem-wrap .problem-head {
    border: 0 !important;
    box-shadow: none !important;
}

/* If you want an underline, make it coral, subtle */
.problem-wrap .problem-title {
    position: relative;
}
.problem-wrap .problem-title::after {
    content: "";
    display: block;
    width: 120px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
}

/* optional page background to match your mock */
body {
    background: #e9f0f4;
}

/* wrapper */
.problem-wrap {
    padding: clamp(20px, 4vw, 40px) var(--rail-pad);
}

/* card container */
.problem-card {
    position: relative;
    max-width: var(--rail-max);
    margin-inline: auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: clamp(28px, 5vw, 56px);
    color: var(--ink-900);
    overflow: visible; /* allow the offset ring to sit outside */
}

/* ===================== Unique full-perimeter animation ===================== */
/* Static track ring, thin and subtle, offset from the card */
.problem-card::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--gap));
    border-radius: calc(var(--radius) + var(--gap));
    pointer-events: none;
    /* create a ring using masking so only a thin band shows */
    background: var(--brand);
    opacity: 0.18;
    padding: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Animated runner that orbits around all edges */
.problem-card::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--gap));
    border-radius: calc(var(--radius) + var(--gap));
    pointer-events: none;

    /* size of the moving arc */
    --runner-arc: 18deg;

    /* conic gradient draws a small arc, masking makes it a ring */
    background: conic-gradient(
        from var(--runner-angle, 0deg),
        var(--brand) 0 var(--runner-arc),
        transparent var(--runner-arc) 360deg
    ) !important;
    padding: var(--edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    /* soft glow for a unique look */
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand), white 40%));

    animation: perimeter-spin 5s linear infinite;
}

/* animate the conic gradient angle smoothly */
@property --runner-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes perimeter-spin {
    to {
        --runner-angle: 360deg;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .problem-card::before {
        animation: none;
    }
}

/* ===== Type and layout inside the card ===== */

.problem-title {
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
        sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: var(--h1);
    line-height: 1.2;
    color: var(--ink-700);
    margin: 0;
}

.problem-kicker {
    margin-top: clamp(8px, 1.4vw, 12px);
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial,
        sans-serif;
    font-weight: 700;
    font-size: var(--h2);
    line-height: 1.3;
}

.problem-copy {
    margin-top: clamp(16px, 2.6vw, 24px);
    font-size: var(--body);
    line-height: 1.7;
    max-width: 90ch;
    color: var(--ink-900);
}

.problem-quote {
    margin-top: clamp(22px, 4vw, 40px);
    text-align: center;
    font-weight: 700;
    font-size: var(--quote);
    line-height: 1.5;
    color: #ff6c63;
    margin-bottom: 0;
}

.problem-cite {
    display: block;
    margin-top: 6px;
    font-weight: 600;
    font-style: normal;
}

/* desktop spacing tweak */
@media (min-width: 900px) {
    .problem-head {
        margin-bottom: 8px;
    }
    .problem-copy {
        margin-top: 18px;
    }
}

/* Force perimeter runner to coral only */
.problem-card::before,
.problem-card::after {
    --brand: #ff6c63 !important;
}

/* Illustration wrapper */
.problem-illu {
    margin: clamp(12px, 2.5vw, 24px) 0;
    text-align: center;
}
.illu-svg {
    display: inline-block;
    width: 100%;
    height: auto;
    max-height: 200px;
}
@media (max-width: 560px) {
    .illu-svg {
        max-height: 160px;
    }
}