/* ==========================================================================
   pds-problem — scroll-scrubbed before/after
   ========================================================================== */

.pds-problem {
    position: relative;
    padding-block: var(--pds-section-y);
    overflow: hidden;
}

.pds-problem__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* --- Head ----------------------------------------------------------------- */

.pds-problem__head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: 1.75rem clamp(2.5rem, 6vw, 6rem);
}

.pds-problem__head-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pds-problem__title {
    max-inline-size: 18ch;
}

.pds-problem__intro-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-block-end: .375rem;
    border-inline-start: 2px solid var(--pds-orange);
    padding-inline-start: 1.375rem;
}

/* What we do bring to the table, as short ticks under the intro. */
.pds-problem__strengths {
    display: grid;
    gap: .625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--pds-fs-small);
    font-weight: 500;
    color: var(--pds-title);
}

.pds-problem__strengths li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.pds-problem__strength-check {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-block-start: .0625rem;
    border-radius: 50%;
    background: var(--pds-purple-wash);
    color: var(--pds-purple);
}

/* --- Compare -------------------------------------------------------------
   pds-motion.js writes --pds-progress (0 → 1) onto .pds-problem__compare as
   the block travels through the viewport. Everything below is derived from
   that single number, so the whole sequence is pure CSS with no per-frame
   style writes beyond that one property.

   --_wipe remaps the middle of the travel onto 0 → 1, so the reveal happens
   while the block is comfortably in view rather than half off-screen. The
   fallback of 1 matters: with JS off the "naar" state is simply fully drawn.
   -------------------------------------------------------------------------- */

.pds-problem__compare {
    --_wipe: clamp(0, calc((var(--pds-progress, 1) - .2) * 2.6), 1);

    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--pds-r-xl);
    overflow: hidden;
    box-shadow: var(--pds-shadow-lg);
}

.pds-problem__layer {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: inherit;
}

.pds-problem__layer img,
.pds-problem__layer video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* The "van" layer is desaturated and dimmed — the situation you are leaving. */
.pds-problem__compare.has-shift .pds-problem__layer--from img {
    filter: grayscale(.85) contrast(1.05) brightness(.82);
}

.pds-problem__layer--to {
    clip-path: inset(0 calc((1 - var(--_wipe)) * 100%) 0 0);
    z-index: 1;
}

/* The seam that travels with the reveal. */
.pds-problem__seam {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--_wipe) * 100%);
    z-index: 3;
    inline-size: 2px;
    background: linear-gradient(to bottom, transparent, #fff 12%, #fff 88%, transparent);
    transform: translateX(-1px);
    pointer-events: none;
}

.pds-problem__seam-knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--pds-orange);
    color: #1B0C05;
    box-shadow: 0 8px 24px rgba(23, 9, 42, .35);
}

/* --- Quotes ---------------------------------------------------------------
   Both quotes are always in the DOM. In the scrubbed variant they cross-fade
   with the wipe; without a "naar" image they simply sit side by side. */

.pds-problem__quote {
    position: absolute;
    z-index: 4;
    inline-size: min(21rem, 42vw);
    padding: 1.25rem 1.375rem;
    border-radius: var(--pds-r);
}

.pds-problem__quote p {
    margin-block-start: .5rem;
    font-family: var(--pds-display);
    font-size: clamp(1rem, 1.5vw, 1.375rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--pds-title);
}

.pds-problem__quote--from {
    inset-block-end: clamp(1rem, 3vw, 2.25rem);
    inset-inline-start: clamp(1rem, 3vw, 2.25rem);
}

.pds-problem__quote--to {
    inset-block-start: clamp(1rem, 3vw, 2.25rem);
    inset-inline-end: clamp(1rem, 3vw, 2.25rem);
}

.pds-problem__compare.has-shift .pds-problem__quote--from {
    opacity: clamp(0, calc(1.15 - var(--_wipe) * 1.8), 1);
}

.pds-problem__compare.has-shift .pds-problem__quote--to {
    opacity: clamp(0, calc(var(--_wipe) * 2.2 - .7), 1);
}

.pds-problem__tag {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pds-muted);
}

.pds-problem__tag::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
}

.pds-problem__tag--accent {
    color: var(--pds-orange-ink);
}

/* --- Points ---------------------------------------------------------------- */

.pds-problem__points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--pds-line);
    border: 1px solid var(--pds-line);
    border-radius: var(--pds-r-lg);
    overflow: hidden;
}

.pds-problem__point {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .875rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--pds-paper);
    transition: background-color .4s var(--pds-ease);
}

.pds-problem__point:hover {
    background: var(--pds-orange-wash);
}

.pds-problem__point:hover .pds__tile {
    background: var(--pds-orange);
    color: #1B0C05;
    transform: rotate(-6deg);
}

.pds-problem__num {
    position: absolute;
    inset-block-start: clamp(1.25rem, 2.4vw, 1.75rem);
    inset-inline-end: clamp(1.25rem, 2.4vw, 1.75rem);
    font-family: var(--pds-display);
    font-size: 3.25rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--pds-title);
    opacity: .07;
}

.pds-problem__point-title {
    font-family: var(--pds-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--pds-title);
    margin: 0;
}

.pds-problem__point p {
    font-size: var(--pds-fs-small);
    color: var(--pds-body);
}

/* Heading, cards and figures read as one block about the market. */
.pds-problem__market {
    display: flex;
    flex-direction: column;
}

/* The cards explain the market, so they get their own heading. */
.pds .pds-problem__points-title {
    margin: 0 0 clamp(1.25rem, 2.2vw, 1.75rem);
    font-family: var(--pds-display);
    font-size: var(--pds-fs-h3);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--pds-title);
}

/* --- Stats bar --------------------------------------------------------------
   Figures instead of promises: a purple band closing the section. */

.pds-problem__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
    border-radius: var(--pds-r-lg);
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
}

.pds-problem__stat {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: clamp(1.5rem, 2.6vw, 2.125rem) clamp(1.5rem, 3vw, 2.5rem);
    background: var(--pds-purple);
    color: var(--pds-on-ink);
}

.pds-problem__stat dt {
    font-family: var(--pds-display);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.pds-problem__stat dd {
    margin: 0;
    font-size: var(--pds-fs-small);
    color: var(--pds-on-ink-soft);
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {

    .pds-problem__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .pds-problem__title {
        max-inline-size: none;
    }
}

@media (max-width: 767px) {

    .pds-problem__compare {
        aspect-ratio: 4 / 5;
        border-radius: var(--pds-r-lg);
    }

    .pds-problem__quote {
        inline-size: calc(100% - 2rem);
    }

    .pds-problem__quote--to {
        inset-inline: 1rem;
    }

    .pds-problem__quote--from {
        inset-inline: 1rem;
    }

    .pds-problem__seam-knob {
        inline-size: 2.25rem;
        block-size: 2.25rem;
    }
}