/**
 * Island Dental Studio — components.
 *
 *   10  Grid system
 *   11  Treatment card
 *   12  Feature card (numbered)
 *   13  Team card
 *   14  Testimonial cards
 *   15  Image / text split
 *   16  Sticky side panel
 */

/* ═══════════════════════════════════════════════════════
   10  GRID SYSTEM
   ═══════════════════════════════════════════════════════

   A six-column track so a row can hold three items (span 2) or two items
   (span 3) at the *same overall width*. That is what stops the last row
   trailing off with an empty cell: with five cards you get 3 + 2 filling the
   full measure, never 3 + 2 + blank.

   The count class is emitted by ids_grid_count_class(), so the rules react to
   how many records the client has added — not to the number drawn in Figma.
   ═══════════════════════════════════════════════════════ */

.ids-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ids-space-6);
}
.ids-grid > * { grid-column: span 2; min-width: 0; }

/* One or two items never stretch into an awkward slab. */
.ids-grid.ids-grid--count-1 { grid-template-columns: minmax(0, 416px); justify-content: center; }
.ids-grid.ids-grid--count-1 > * { grid-column: auto; }
.ids-grid.ids-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ids-grid.ids-grid--count-2 > * { grid-column: auto; }

/**
 * Counts that leave a remainder of two: the final two items widen to half the
 * measure each, so the row is full rather than two-thirds full.
 *   5 → 3 + 2   ·   8 → 3 + 3 + 2   ·   11 → 3 + 3 + 3 + 2
 */
.ids-grid.ids-grid--count-5  > :nth-last-child(-n + 2),
.ids-grid.ids-grid--count-8  > :nth-last-child(-n + 2),
.ids-grid.ids-grid--count-11 > :nth-last-child(-n + 2) { grid-column: span 3; }

/**
 * Counts that leave a remainder of one: rather than stranding a single card,
 * the last four become a balanced 2 × 2 block.
 *   4 → 2 + 2   ·   7 → 3 + 2 + 2   ·   10 → 3 + 3 + 2 + 2
 */
.ids-grid.ids-grid--count-4  > :nth-last-child(-n + 4),
.ids-grid.ids-grid--count-7  > :nth-last-child(-n + 4),
.ids-grid.ids-grid--count-10 > :nth-last-child(-n + 4) { grid-column: span 3; }

/**
 * Two per row. Triggered where a third column would start squeezing card copy,
 * not at a nominal tablet width. An odd item at the end takes the full measure
 * so the row still reads as composed.
 */
@media (max-width: 1100px) {
    .ids-grid > * { grid-column: span 3; }
    .ids-grid.ids-grid--count-3 > :last-child,
    .ids-grid.ids-grid--count-5 > :last-child,
    .ids-grid.ids-grid--count-7 > :last-child,
    .ids-grid.ids-grid--count-9 > :last-child,
    .ids-grid.ids-grid--count-11 > :last-child { grid-column: span 6; }
    .ids-grid.ids-grid--count-4 > :nth-last-child(-n + 4),
    .ids-grid.ids-grid--count-7 > :nth-last-child(-n + 4),
    .ids-grid.ids-grid--count-10 > :nth-last-child(-n + 4) { grid-column: span 3; }
}

/* One per row. */
@media (max-width: 680px) {
    .ids-grid,
    .ids-grid.ids-grid--count-1,
    .ids-grid.ids-grid--count-2 { grid-template-columns: minmax(0, 1fr); }
    .ids-grid > *,
    .ids-grid.ids-grid--count-2 > * { grid-column: span 1 !important; }
    .ids-grid { gap: var(--ids-space-5); }
}

/* ═══════════════════════════════════════════════════════
   11  TREATMENT CARD
   Figma: radius 12, padding 24, three-stop scrim, 38px arrow.
   ═══════════════════════════════════════════════════════ */

.ids-tcard {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Holds the Figma card proportion (416 × 420) while the column is fluid. */
    aspect-ratio: 416 / 420;
    min-height: 320px;
    padding: var(--ids-card-pad);
    border-radius: var(--ids-radius-md);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
}
.ids-tcard__media { position: absolute; inset: 0; z-index: -1; }
.ids-tcard__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--ids-dur-slow) var(--ids-ease);
}
.ids-tcard__scrim { position: absolute; inset: 0; background: var(--ids-card-scrim); }
.ids-tcard::after {
    /* Hover border drawn as an overlay so it never affects layout. */
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color var(--ids-dur) var(--ids-ease);
    pointer-events: none;
}

.ids-tcard__body { display: flex; flex-direction: column; gap: var(--ids-space-3); }
.ids-tcard__eyebrow { margin: 0; color: var(--ids-sage); }
.ids-tcard__title {
    margin: 0;
    /* Titles stack over two lines as drawn, rather than running the full width
       of the card. Capping the measure (not the element) keeps that look for
       any treatment name the client types, including long ones. */
    max-width: 14ch;
    font-family: var(--ids-font-heading);
    font-size: var(--ids-card-title);
    font-weight: 400;
    line-height: var(--ids-card-title-lh);
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--ids-white);
}
.ids-tcard__rule { height: 1px; background: var(--ids-card-rule-on-dark); border: 0; margin: 0; }
.ids-tcard__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ids-space-3);
}
.ids-tcard__price {
    margin: 0;
    font-size: var(--ids-body-sm);
    font-weight: 500;
    line-height: 22px;
    color: var(--ids-white);
}
.ids-tcard__arrow {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--ids-arrow-size);
    height: var(--ids-arrow-size);
    border: 1px solid var(--ids-sage);
    border-radius: 999px;
    color: var(--ids-white);
    transition: background-color var(--ids-dur) var(--ids-ease), color var(--ids-dur) var(--ids-ease);
}

/* Hover reveals more of the photograph, fills the arrow and adds the accent
   border — the three changes the Figma component documents. */
@media (hover: hover) {
    .ids-tcard:hover .ids-tcard__img { transform: scale(1.06); }
    .ids-tcard:hover .ids-tcard__arrow { background: var(--ids-surface); color: var(--ids-dark); }
    .ids-tcard:hover::after { border-color: var(--ids-sage); }
}
.ids-tcard:focus-visible::after { border-color: var(--ids-sage); }

/**
 * One per row (the grid's own breakpoint, above). The 320px floor is a guard
 * for narrow desktop columns; here the card already has the whole measure, and
 * with an aspect ratio the floor transfers into a minimum *width* (320 × 416/420
 * = 317px) that beats the track on phones under 343px wide and pushes the page
 * sideways. The ratio alone sets a sound height at these widths.
 */
@media (max-width: 680px) {
    .ids-tcard { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════
   12  FEATURE CARD — NUMBERED
   Figma: white, 1px #E0E7DE, radius 12, padding 36, gap 24.
   ═══════════════════════════════════════════════════════ */

.ids-fcard {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-5);
    /* Breathing room top and bottom regardless of how tight the design looks. */
    padding: var(--ids-card-pad-lg);
    background: var(--ids-white);
    border: 1px solid var(--ids-surface);
    border-radius: var(--ids-radius-md);
    transition: border-color var(--ids-dur) var(--ids-ease), background-color var(--ids-dur) var(--ids-ease);
}
.ids-section--alt .ids-fcard { background: var(--ids-white); }
@media (hover: hover) {
    .ids-fcard:hover { border-color: var(--ids-sage); background: var(--ids-offwhite); }
}
.ids-fcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ids-space-4); }
.ids-fcard__num {
    margin: 0;
    font-family: var(--ids-font-heading);
    font-size: var(--ids-numeral);
    line-height: var(--ids-numeral-lh);
    color: var(--ids-primary);
}
.ids-fcard__chip {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--ids-chip-size);
    height: var(--ids-chip-size);
    border-radius: var(--ids-radius-badge);
    background: var(--ids-offwhite);
    color: var(--ids-primary);
}
.ids-section--alt .ids-fcard__chip { background: var(--ids-surface); }
.ids-fcard__rule { width: 56px; height: 1px; background: var(--ids-sage); border: 0; margin: 0; }
.ids-fcard__title {
    margin: 0;
    font-size: var(--ids-card-title);
    line-height: var(--ids-card-title-lh);
    letter-spacing: -0.01em;
    max-width: 16ch;
    text-wrap: balance;
}
.ids-fcard__text { margin: 0; font-size: var(--ids-body-sm); line-height: var(--ids-body-sm-lh); }

/* ═══════════════════════════════════════════════════════
   13  TEAM CARD
   Figma: portrait 380 tall radius 12, name Lora 22/30, meta Inter 14/22.
   ═══════════════════════════════════════════════════════ */

.ids-team-card { display: flex; flex-direction: column; gap: 22px; }
.ids-team-card__portrait {
    position: relative;
    /* Proportional rather than a fixed 380px, so portraits keep their crop as
       the column narrows instead of letterboxing. 416 x 380 as drawn. */
    aspect-ratio: 416 / 380;
    border-radius: var(--ids-radius-md);
    overflow: hidden;
    background: var(--ids-surface);
}
.ids-team-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    transition: transform var(--ids-dur-slow) var(--ids-ease);
}
@media (hover: hover) {
    .ids-team-card:hover .ids-team-card__portrait img { transform: scale(1.04); }
}
.ids-team-card__info { display: flex; flex-direction: column; gap: 6px; }
.ids-team-card__name {
    margin: 0;
    font-family: var(--ids-font-heading);
    font-size: clamp(20px, 19.26px + 0.19vw, 22px);
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.005em;
    color: var(--ids-dark);
}
.ids-team-card__meta { margin: 0; font-size: 14px; line-height: 22px; color: var(--ids-body); }

/**
 * "View profile". The control is the site's compact secondary button; its hit
 * area is the whole card — the pseudo-element stretches to the card's edges —
 * so the photograph opens the profile too without becoming a second control to
 * tab through. Every visual state comes from the button system in main.css §04.
 */
.ids-team-card { position: relative; }
.ids-team-card__more {
    align-self: flex-start;
    margin-top: var(--ids-space-3);
    cursor: pointer;
}
.ids-team-card__more[hidden] { display: none; }
.ids-team-card__more::after { content: ""; position: absolute; inset: 0; }

/**
 * A team of five.
 *
 * The grid's own rule widens the last two of five so the row is full. For
 * treatment cards that reads as composition; for people it reads as two of
 * them being more important. Here every portrait keeps the same size and the
 * short row is centred instead.
 */
.ids-grid--team.ids-grid--count-5 > :nth-last-child(-n + 2) { grid-column: span 2; }
.ids-grid--team.ids-grid--count-5 > :nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1100px) {
    .ids-grid--team.ids-grid--count-5 > :nth-child(4) { grid-column: span 3; }
    .ids-grid--team.ids-grid--count-5 > :last-child {
        /* Half the measure, centred: the same card as the rows above it. */
        grid-column: 1 / -1;
        width: calc(50% - (var(--ids-space-6) / 2));
        justify-self: center;
    }
}
@media (max-width: 680px) {
    .ids-grid--team.ids-grid--count-5 > :last-child { width: auto; justify-self: stretch; }
}

/* ═══════════════════════════════════════════════════════
   13b  TEAM PROFILE DRAWER
   A native <dialog>. The element itself fills the viewport and is the dimmed
   area; the panel inside it is the drawer, entering from the right exactly as
   the mobile navigation does.
   ═══════════════════════════════════════════════════════ */

.ids-profile {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: rgba(9, 47, 39, 0);
    color: var(--ids-body);
    transition: background-color var(--ids-dur) var(--ids-ease);
}
.ids-profile::backdrop { background: transparent; }
.ids-profile.is-open { background: rgba(9, 47, 39, 0.45); }

.ids-profile__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    background: var(--ids-white);
    transform: translateX(100%);
    transition: transform var(--ids-dur) var(--ids-ease);
}
.ids-profile.is-open .ids-profile__panel { transform: translateX(0); }

/* The panel scrolls internally; the page behind it does not move. */
.ids-profile__scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: clamp(20px, 2.8vw, 40px) clamp(20px, 4.2vw, 56px) clamp(40px, 4.2vw, 64px);
}

/**
 * The close control sits on the panel's top-right corner and takes no room
 * from the header: the portrait starts at the top of the drawer, not beneath a
 * row reserved for a button.
 *
 * What stops the biography running underneath it is the strip below. At rest
 * it is invisible and the header shows through; once the copy has been
 * scrolled it becomes a plain white band behind the control, so text passes
 * under a surface rather than under a button.
 */
.ids-profile__close {
    position: absolute;
    top: var(--ids-profile-close-inset);
    right: var(--ids-profile-close-inset);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ids-sage);
    border-radius: 999px;
    background: var(--ids-white);
    color: var(--ids-primary);
    transition: background-color var(--ids-dur-fast) var(--ids-ease),
                border-color var(--ids-dur-fast) var(--ids-ease),
                color var(--ids-dur-fast) var(--ids-ease);
}
/* The plus icon, turned: the set has no separate cross. */
.ids-profile__close .ids-icon { transform: rotate(45deg); }
.ids-profile__close:hover {
    background: var(--ids-primary);
    border-color: var(--ids-primary);
    color: var(--ids-white);
}
.ids-profile__panel {
    --ids-profile-close-inset: clamp(12px, 1.4vw, 20px);
}
.ids-profile__panel::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(44px + (2 * var(--ids-profile-close-inset)));
    background: var(--ids-white);
    border-bottom: 1px solid var(--ids-line);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ids-dur-fast) var(--ids-ease);
}
.ids-profile.is-scrolled .ids-profile__panel::before { opacity: 1; }

/**
 * Header: portrait, then the person — name first, role beneath it, as on the
 * team cards. The right-hand padding keeps the copy clear of the close control
 * whatever height the block ends up at.
 */
.ids-profile__head {
    display: flex;
    align-items: center;
    gap: var(--ids-space-6);
    padding-right: var(--ids-space-5);
}
.ids-profile__portrait {
    flex: none;
    width: min(208px, 38%);
    aspect-ratio: 4 / 5;
    border-radius: var(--ids-radius-md);
    overflow: hidden;
    background: var(--ids-surface);
}
/* Cropped, never stretched: the frame is narrower than the square original,
   so the sides go and the face keeps its place. */
.ids-profile__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ids-profile__title { min-width: 0; }
/* With no photograph the copy starts at the top, level with the control. */
.ids-profile__head--plain { padding-right: 64px; }
.ids-profile__name {
    margin: 0;
    font-size: var(--ids-h3);
    line-height: var(--ids-lh-h3);
    letter-spacing: var(--ids-tracking-h3);
    color: var(--ids-dark);
}
/* The role in the body face at reading size — sentence case, no tracking. A
   long title turns onto a second line at a measure of its own and the two
   lines are balanced, rather than the type being shrunk to hold it on one. */
.ids-profile__role {
    max-width: 26ch;
    margin: var(--ids-space-2) 0 0;
    font-size: var(--ids-body-size);
    line-height: 1.4;
    color: var(--ids-body);
    text-wrap: balance;
}
.ids-profile .ids-credentials__row:last-child { border-bottom: 1px solid var(--ids-line); }
.ids-profile__bio { font-size: 16px; line-height: 28px; }

@media (max-width: 600px) {
    .ids-profile__head { align-items: flex-start; flex-direction: column; gap: var(--ids-space-5); padding-right: 0; }
    /* Stacked, the portrait takes a little over half the column: large enough
       to lead the drawer, with the close control clear of it on the right. */
    .ids-profile__portrait { width: min(220px, 58%); }
    .ids-profile__head--plain { padding-right: 64px; }
    /* A long qualification reads better under its label than squeezed beside it. */
    .ids-profile .ids-credentials__row { flex-direction: column; gap: 2px; }
    .ids-profile .ids-credentials__row dd { text-align: left; }
}

/* ═══════════════════════════════════════════════════════
   14  TESTIMONIAL CARDS
   Glass variant for the dark image-backed section (Figma: 10% white fill,
   22% white border, 12px backdrop blur, radius 12, padding 34).
   ═══════════════════════════════════════════════════════ */

.ids-quote {
    display: flex;
    flex-direction: column;
    gap: var(--ids-space-5);
    padding: clamp(24px, 2.36vw, 34px);
    border-radius: var(--ids-radius-md);
    border: 1px solid var(--ids-surface);
    background: var(--ids-white);
    height: 100%;
}
.ids-quote--glass {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.ids-quote__stars { display: flex; gap: 4px; color: var(--ids-star); }
.ids-quote--glass .ids-quote__stars { color: var(--ids-accent); }
.ids-quote__text {
    margin: 0;
    flex: 1;
    font-size: clamp(15px, 14.26px + 0.19vw, 17px);
    line-height: 1.76;
    color: var(--ids-body);
}
.ids-quote--glass .ids-quote__text { color: var(--ids-white); }
.ids-quote__author { display: flex; align-items: center; gap: 14px; }
.ids-quote__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
}
.ids-quote:not(.ids-quote--glass) .ids-quote__avatar { background: var(--ids-surface); }
.ids-quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ids-quote__author-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ids-quote__name { display: block; margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; color: var(--ids-dark); }
.ids-quote--glass .ids-quote__name { color: var(--ids-white); }
.ids-quote__meta { display: block; margin: 0; font-size: 13px; line-height: 20px; color: var(--ids-body); }
.ids-quote--glass .ids-quote__meta { color: var(--ids-surface); }

/* ═══════════════════════════════════════════════════════
   15  IMAGE / TEXT SPLIT
   Columns match height on desktop; the image fills its column rather than
   sitting at some fixed height shorter than the copy beside it.
   ═══════════════════════════════════════════════════════ */

.ids-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 6.67vw, 96px);
    align-items: stretch;
}
/* Inside a split the column already gaps its children; the standalone
   section-head margin would double it. */
.ids-split__body > .ids-section-head { margin-bottom: 0; }
.ids-split--text-first .ids-split__media { order: 2; }
.ids-split__media {
    position: relative;
    min-width: 0;
    border-radius: var(--ids-radius-md);
    overflow: hidden;
    background: var(--ids-surface);
    min-height: 320px;
}
.ids-split__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Where the design gives the image a drawn height, carry it: the row is then
   as tall as the photograph rather than as tall as whatever copy sits beside it.
   Two columns only — once the split stacks, the media takes its height from its
   aspect ratio, and a min-height here would make the browser derive the WIDTH
   from that height and burst the viewport. */
@media (min-width: 901px) {
    .ids-split--tall   .ids-split__media { min-height: clamp(380px, 50vw, 720px); }
    .ids-split--medium .ids-split__media { min-height: clamp(360px, 44.44vw, 640px); }
}

.ids-split__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ids-space-5);
    /* Subtle internal breathing room — the copy never sits against the top
       edge of its column even where the design reads tight. */
    padding-block: clamp(8px, 1.7vw, 24px);
}

@media (max-width: 900px) {
    .ids-split { grid-template-columns: minmax(0, 1fr); gap: var(--ids-space-6); }
    .ids-split--text-first .ids-split__media { order: 0; }
    .ids-split__media { min-height: 0; aspect-ratio: 16 / 10; }
    .ids-split__body { padding-block: 0; }
}

/* ═══════════════════════════════════════════════════════
   16  STICKY SIDE PANEL
   A short panel beside a long column stays in view, clears the sticky header,
   and stops when its own section ends. Never fixed to the viewport.
   ═══════════════════════════════════════════════════════ */

.ids-rail {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    /* 6.67vw reaches the drawn 96px gap at the 1440 frame width; at 4.9vw it
       only got there at ~1960px, which left the copy column 25px wide of the
       design on every desktop. */
    gap: clamp(32px, 6.67vw, 96px);
    align-items: start;
}
.ids-rail--right { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
/**
 * The sticky short column. `.ids-rail__panel` is the rail's own; `.ids-sticky-panel`
 * is the same behaviour for a column of a two-up split that is not a rail (the
 * Contact enquiry copy beside the form). One set of declarations, so every
 * sticky column on the site clears the header by the same offset and releases
 * with its own parent rather than following the viewport.
 */
.ids-rail__panel,
.ids-sticky-panel {
    position: sticky;
    top: var(--ids-sticky-offset);
    /* A stretched grid item is as tall as the row and can never travel. */
    align-self: start;
}
@media (max-width: 900px) {
    .ids-rail, .ids-rail--right { grid-template-columns: minmax(0, 1fr); gap: var(--ids-space-6); }
    /* Sticky is pointless once the panel is stacked above the content. */
    .ids-rail__panel,
    .ids-sticky-panel { position: static; }
    .ids-rail--right .ids-rail__panel { order: -1; }
}

/* ═══════════════════════════════════════════════════════
   19  PLAIN RULED CARD
   A hairline, a light title and a supporting line. Used by the About
   principles (stacked in the copy column) and the Payment Options row.
   ═══════════════════════════════════════════════════════ */

.ids-pcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 28px;
    border-top: 1px solid var(--ids-line);
}
.ids-pcard__icon { display: inline-flex; color: var(--ids-primary); }
.ids-pcard__title {
    margin: 0;
    font-family: var(--ids-font-body);
    font-weight: 300;
    font-size: clamp(20px, 19.26px + 0.19vw, 22px);
    line-height: 1.36;
    letter-spacing: -0.22px;
    color: var(--ids-dark);
}
.ids-pcard__text {
    margin: 0;
    font-size: var(--ids-body-sm);
    line-height: var(--ids-body-sm-lh);
    color: var(--ids-body);
}

.ids-on-dark .ids-pcard { border-top-color: var(--ids-sage); }
.ids-on-dark .ids-pcard__icon { color: var(--ids-sage); }
.ids-on-dark .ids-pcard__title { color: var(--ids-white); }
.ids-on-dark .ids-pcard__text { color: var(--ids-surface); }

/* Stacked list inside a text column: tighter, and rules between rather than above. */
.ids-pcards--stack { display: flex; flex-direction: column; }
.ids-pcards--stack .ids-pcard {
    gap: 8px;
    padding-block: 26px;
    border-top: 1px solid var(--ids-line);
}
.ids-pcards--stack .ids-pcard__title { font-size: clamp(18px, 17.26px + 0.19vw, 20px); letter-spacing: -0.1px; }
.ids-pcards--stack .ids-pcard__text { line-height: 1.6; }