/* ==========================================================================
   pds-independence — position statement over a cascade of interested parties

   A light, warm panel: logo lockup, an oversized claim, one accent line, and
   underneath it a stack of overlapping cards — every party that normally sits
   between a huiseigenaar and their advice, each tagged with the interest it
   carries.

   The cascade is one illustration rather than a grid: the stage is a container
   of fixed proportion and everything inside a card is sized in `cqw`, so the
   whole composition scales like an image instead of reflowing. Below the
   breakpoint that stops working (the type would fall under 13px), the stack
   drops into a plain overlapping column in rem.
   ========================================================================== */

.pds-independence {
    position: relative;
    background: var(--pds-bone);
    padding-block: var(--pds-section-y);
    overflow: hidden;
    isolation: isolate;
}

.pds-independence__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
}

.pds-independence__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4rem);
}

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

.pds-independence__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* The lockup: brand mark plus wordmark, set at the size of a logo rather than
   of an eyebrow — this section opens the way a title page does. */
.pds-independence__logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--pds-purple);
}

.pds-independence__logo-mark {
    inline-size: clamp(2rem, 3vw, 2.75rem);
    block-size: clamp(2rem, 3vw, 2.75rem);
    flex: none;
}

.pds-independence__logo-word {
    font-family: var(--pds-display);
    font-size: clamp(1.375rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--pds-title);
}

.pds-independence__logo-img {
    display: block;
    block-size: auto;
    inline-size: auto;
    max-block-size: clamp(2.25rem, 3.4vw, 3.25rem);
    max-inline-size: 100%;
}

/* The inline SVG logo has no intrinsic size of its own: give it the height. */
svg.pds-independence__logo-img {
    block-size: clamp(2.25rem, 3.4vw, 3.25rem);
}

/* The claim carries the section on its own, so it is set heavier and tighter
   than a normal h2 — the design system's 600 reads too polite at this size. */
.pds-independence__title {
    font-family: var(--pds-display);
    font-size: clamp(2.125rem, 4.4vw, 3.875rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--pds-title);
    margin: 0;
    /* No measure cap: the claim is two authored lines, and the <br> in the
       control is what decides where they break. */
    max-inline-size: none;
}

.pds-independence__lead {
    font-family: var(--pds-text);
    font-size: clamp(1.125rem, 2.1vw, 1.75rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--pds-purple);
    margin: 0;
    max-inline-size: 46ch;
}

/* --- Stage --------------------------------------------------------------------
   Everything below is positioned against this box. `container-type` is what
   makes `cqw` inside a card resolve against the stage rather than the viewport,
   so a card keeps its proportions at every width. */

.pds-independence__stage {
    container-type: inline-size;
    position: relative;
    inline-size: 100%;
    max-inline-size: 62rem;
    aspect-ratio: 5 / 4;
    margin-inline: auto;
}

.pds-independence__stack {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Cards ---------------------------------------------------------------------
   Each card knows only where it sits (--pds-x / --pds-y), how wide it is
   (--pds-w) and how far up the pile it is (--pds-i). The editor composes the
   overlap; the stylesheet just honours it. */

.pds-independence__card {
    position: absolute;
    inset-inline-start: var(--pds-x, 0%);
    inset-block-start: var(--pds-y, 0%);
    inline-size: var(--pds-w, 50%);
    z-index: var(--pds-i, 1);
    display: flex;
    flex-direction: column;
    background: var(--pds-paper);
    border: 1px solid var(--pds-line);
    border-radius: 2.2cqw;
    box-shadow: var(--pds-shadow);
    overflow: hidden;
    transition: translate .5s var(--pds-ease), box-shadow .5s var(--pds-ease);
}

/* `translate` rather than `transform`: the reveal owns the transform property,
   and a hover rule written there would cancel the entrance mid-flight. */
.pds-independence__card:hover {
    translate: 0 -.9cqw;
    box-shadow: var(--pds-shadow-lg);
}

.pds-independence__card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    padding: 2.2cqw 2.8cqw;
    border-block-end: 1px solid var(--pds-line);
}

.pds-independence__card-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 3.4cqw;
    block-size: 3.4cqw;
    color: var(--pds-purple);
}

.pds-independence__card-mark svg {
    inline-size: 100%;
    block-size: 100%;
}

.pds-independence__card-mark img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    border-radius: .6cqw;
}

.pds-independence__card-name {
    font-family: var(--pds-display);
    font-size: 2cqw;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--pds-title);
    text-align: end;
}

/* The body is deliberately illiterate: greyed-out rules that read as "some
   interface", so the eye stays on the name and the signal pinned over it. */
.pds-independence__card-body {
    display: flex;
    flex-direction: column;
    gap: 1.2cqw;
    padding: 2.6cqw 2.8cqw 3.4cqw;
}

.pds-independence__card-body span {
    display: block;
    block-size: 1.1cqw;
    border-radius: 999px;
    background: rgba(23, 9, 42, .09);
}

.pds-independence__card-body span:nth-child(1) { inline-size: 46%; }
.pds-independence__card-body span:nth-child(2) { inline-size: 72%; }
.pds-independence__card-body span:nth-child(3) { inline-size: 58%; }

/* --- Signals ---------------------------------------------------------------------
   The point of the whole section, pinned over the pile. Brand orange under
   white only reaches 2.6:1, so the pill is set in ink instead — 6.6:1, and the
   pairing the accent button already uses. */

.pds-independence__badges {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-independence__badge {
    position: absolute;
    inset-inline-start: var(--pds-x, 0%);
    inset-block-start: var(--pds-y, 0%);
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .7em 1.15em;
    border-radius: 999px;
    background: var(--pds-orange);
    color: var(--pds-title);
    font-family: var(--pds-display);
    font-size: clamp(.875rem, 2cqw, 1.375rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(255, 127, 13, .34);
}

.pds-independence__badge-icon {
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
}

/* The bubble: one overheard detail from inside those cards. */
.pds-independence__tip {
    position: absolute;
    inset-inline-start: var(--pds-x, 0%);
    inset-block-start: var(--pds-y, 0%);
    z-index: 50;
    margin: 0;
    padding: .75em 1.25em;
    border-radius: 1em;
    background: var(--pds-body);
    color: #fff;
    font-size: clamp(.9375rem, 2.2cqw, 1.5rem);
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: var(--pds-shadow);
}

.pds-independence__tip::before {
    content: "";
    position: absolute;
    inset-block-start: -.45em;
    inset-inline-start: 1.6em;
    inline-size: 1em;
    block-size: .5em;
    background: inherit;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* --- Foot ---------------------------------------------------------------------- */

/* --- Comparison ----------------------------------------------------------
   What an adviser looks at next to what a seller looks at. Our column carries
   the brand; theirs stays neutral grey — a comparison, not an attack. */

.pds-independence__compare {
    inline-size: 100%;
    max-inline-size: 62rem;
    margin-inline: auto;
    border-radius: var(--pds-r-lg);
    background: var(--pds-paper);
    box-shadow: var(--pds-shadow);
    overflow: hidden;
}

.pds-independence__table {
    inline-size: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--pds-fs-body);
    line-height: 1.45;
}

.pds-independence__col {
    padding: clamp(1.125rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2.25rem);
    font-family: var(--pds-display);
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    font-weight: 600;
    letter-spacing: -.02em;
    text-align: start;
    vertical-align: middle;
}

.pds-independence__col--us {
    background: var(--pds-purple);
    color: var(--pds-on-ink);
}

.pds-independence__col-mark {
    display: inline-block;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    margin-inline-end: .5rem;
    vertical-align: -.3em;
    color: var(--pds-on-ink);
}

.pds-independence__col--them {
    background: var(--pds-bone-deep);
    color: var(--pds-muted);
}

.pds-independence__cell {
    padding: clamp(1rem, 1.8vw, 1.375rem) clamp(1.25rem, 3vw, 2.25rem);
    border-block-start: 1px solid var(--pds-line);
    vertical-align: top;
    /* Dutch compounds ("warmteverliesberekening") outgrow a phone column. */
    hyphens: auto;
    overflow-wrap: break-word;
}

.pds-independence__cell--us {
    font-weight: 600;
    color: var(--pds-title);
}

.pds-independence__cell--them {
    color: var(--pds-muted);
    border-inline-start: 1px solid var(--pds-line);
}

.pds-independence__tick {
    display: inline-grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    margin-inline-end: .5rem;
    vertical-align: -.25em;
    border-radius: 50%;
    background: var(--pds-purple-wash);
    color: var(--pds-purple);
}

@media (max-width: 599px) {

    .pds-independence__col,
    .pds-independence__cell {
        padding-inline: .875rem;
        font-size: var(--pds-fs-small);
    }

    .pds-independence__tick,
    .pds-independence__col-mark {
        display: none;
    }
}

.pds-independence__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.75rem clamp(2.5rem, 6vw, 5rem);
}

.pds-independence__text {
    max-inline-size: 52ch;
    font-size: var(--pds-fs-lead);
    line-height: 1.6;
    color: var(--pds-body);
}

/* --- Responsive --------------------------------------------------------------------
   Under 900px the stage would push the card type below 13px, so the cascade
   stops being a composition and becomes a column: same cards, same order, still
   overlapping, but laid out in flow and measured in rem. */

@media (max-width: 899px) {

    .pds-independence__stage {
        container-type: normal;
        aspect-ratio: auto;
        max-inline-size: 34rem;
    }

    .pds-independence__stack {
        position: static;
        display: flex;
        flex-direction: column;
    }

    .pds-independence__card {
        position: static;
        inline-size: 100%;
        max-inline-size: 22rem;
        border-radius: var(--pds-r);
    }

    /* The pile, kept: every card sits a little lower and a little further in
       than the one before it. */
    .pds-independence__card + .pds-independence__card {
        margin-block-start: -1.25rem;
    }

    .pds-independence__card:nth-child(even) {
        margin-inline-start: auto;
    }

    .pds-independence__card:hover {
        translate: none;
    }

    .pds-independence__card-bar {
        gap: 1rem;
        padding: .875rem 1.125rem;
    }

    .pds-independence__card-mark {
        inline-size: 1.375rem;
        block-size: 1.375rem;
    }

    .pds-independence__card-name {
        font-size: 1rem;
    }

    .pds-independence__card-body {
        gap: .5rem;
        padding: 1rem 1.125rem 1.25rem;
    }

    .pds-independence__card-body span {
        block-size: .5rem;
    }

    /* Absolute percentages have nothing to sit on once the stack is in flow,
       so the signals become a row of chips under the pile. */
    .pds-independence__badges {
        display: flex;
        flex-wrap: wrap;
        gap: .625rem;
        margin-block-start: 1.5rem;
    }

    .pds-independence__badge {
        position: static;
        font-size: .9375rem;
    }

    /* The bubble is decoration on top of an overlap that no longer exists. */
    .pds-independence__tip {
        display: none;
    }

    .pds-independence__foot {
        flex-direction: column;
        align-items: flex-start;
    }
}