/* ==========================================================================
   PB Cards Block
   .pb-section-pb-f-cards
   Up to four cards displayed side-by-side. Each card body is a free-form
   WYSIWYG (heading + paragraphs + lists + links + mixed content). Width is
   set per-card via `card-width-one-half | one-third | one-quarter | full`,
   so a row can mix widths.
   ========================================================================== */

/* ---- Section base -------------------------------------------------------- */

.pb-section-pb-f-cards {
    position: relative;
}

/* ---------- Section background + derived text ----------
   The section background and its contrast-safe text/heading/link/divider/icon
   are derived globally from `.pb-section.bg-*` in pb-section-bgcolors.css
   (§4.0 G2). The block no longer defines section `.bg-*` colours; the old
   `.bg-light-grey → --colour-complementary-light-grey` mis-token is gone —
   `.bg-light-grey` now resolves to --colour-background-light via G2. */

/* ---- Margin wrapper ------------------------------------------------------ */

.pb-section-pb-f-cards .pb-section-margin-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.pb-section-pb-f-cards .precontent-margin-wrap {
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .pb-section-pb-f-cards .precontent-margin-wrap {
        margin-bottom: 48px;
    }
}

/* ---- Section intro ------------------------------------------------------- */

.pb-section-pb-f-cards .section-intro {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.55;
    max-width: 720px;
    padding: 0 24px;
    margin: 0 auto;
}

.pb-section-pb-f-cards .section-intro p {
    margin: 0 0 12px;
}

.pb-section-pb-f-cards .section-intro p:last-child {
    margin-bottom: 0;
}

.pb-section-pb-f-cards .section-intro a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Cards row + per-card widths
   ========================================================================== */

.pb-section-pb-f-cards .cards-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

@media (min-width: 768px) {
    .pb-section-pb-f-cards .cards-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }
}

/* Card list item: carries the flex sizing (the grid/flex item) so the
   inner .card-element can stretch to fill it. List semantics (1.3.1):
   the repeating cards are an <ul role="list"> of <li class="card-item">. */
.pb-section-pb-f-cards .card-item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pb-section .card-element--has-image.card-element--img-left {
    text-align: left;
}

/* Per-card preferred-width modifiers (desktop) */
@media (min-width: 1024px) {
    .pb-section-pb-f-cards .card-item.card-width-full {
        flex: 0 0 100%;
        min-width: 0;
    }
    .pb-section-pb-f-cards .card-item.card-width-one-half {
        flex: 0 0 calc(50% - 12px);
        min-width: 0;
    }
    .pb-section-pb-f-cards .card-item.card-width-one-third {
        flex: 0 0 calc(33.333% - 16px);
        min-width: 0;
    }
    .pb-section-pb-f-cards .card-item.card-width-one-quarter {
        flex: 0 0 calc(25% - 18px);
        min-width: 0;
    }
}

/* Tablet: keep halves, collapse thirds/quarters to 2-up */
@media (min-width: 768px) and (max-width: 1023px) {
    .pb-section-pb-f-cards .card-item.card-width-full {
        flex: 0 0 100%;
        min-width: 0;
    }
    .pb-section-pb-f-cards .card-item.card-width-one-half,
    .pb-section-pb-f-cards .card-item.card-width-one-third,
    .pb-section-pb-f-cards .card-item.card-width-one-quarter {
        flex: 0 0 calc(50% - 12px);
        min-width: 0;
    }
}

/* ==========================================================================
    Cards
   ========================================================================== */

/* Base card: transparent surface that inherits the SECTION ground + its
   section-derived text (G2). This is the "Default (section colour)" case —
   the render emits no `.bg-*` class for it. A painted surface (a `.bg-*`
   below) adds its own background, contrast-safe text and drop-shadow. */
.pb-section-pb-f-cards .card-element {
    box-sizing: border-box;
    /* Single source of truth for the card inset so the image edge-bleed
       (margins "none") can cancel it exactly with a negative margin. */
    --card-pad: 24px;
    padding: var(--card-pad);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: inherit;
    background-color: transparent;
    /* Fill the <li> (the flex item) so cards keep equal height in a row. */
    flex: 1 1 auto;
    width: 100%;
}

/* ---------- Card background + derived text (§2.2) ----------
   The card background is chosen via card_bg_color and applied as a canonical
   `.bg-*` class on the card element itself. G2 only derives text for
   `.pb-section.bg-*` (the section), NOT for nested cards, so the card's
   contrast-safe text colour (incl. the WYSIWYG body + headings) is derived
   HERE, scoped to the card. Light grounds (white / light-grey / teal-light)
   → teal-dark text; dark / saturated grounds → white. */
.pb-section-pb-f-cards .card-element.bg-white,
.pb-section-pb-f-cards .card-element.bg-light-grey,
.pb-section-pb-f-cards .card-element.bg-teal-light {
    color: var(--colour-teal-dark);
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.05);
}
.pb-section-pb-f-cards .card-element.bg-white {
    background-color: var(--colour-white);
}
.pb-section-pb-f-cards .card-element.bg-light-grey {
    background-color: var(--colour-background-light);
}
.pb-section-pb-f-cards .card-element.bg-teal-light {
    background-color: var(--colour-teal-light);
}

.pb-section-pb-f-cards .card-element.bg-teal,
.pb-section-pb-f-cards .card-element.bg-teal-dark,
.pb-section-pb-f-cards .card-element.bg-teal-mid,
.pb-section-pb-f-cards .card-element.bg-orange,
.pb-section-pb-f-cards .card-element.bg-black {
    color: var(--colour-white);
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.05);
}
.pb-section-pb-f-cards .card-element.bg-teal {
    background-color: var(--colour-primary-teal);
}
.pb-section-pb-f-cards .card-element.bg-teal-dark {
    background-color: var(--colour-teal-dark);
}
.pb-section-pb-f-cards .card-element.bg-teal-mid {
    background-color: var(--colour-teal-mid);
}
.pb-section-pb-f-cards .card-element.bg-orange {
    background-color: var(--colour-primary-orange);
}
.pb-section-pb-f-cards .card-element.bg-black {
    background-color: var(--colour-black);
}

/* ---- Card content (WYSIWYG) --------------------------------------------- */

.pb-section-pb-f-cards .card-element .card-content {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.55;
    color: inherit;
}

.pb-section-pb-f-cards .card-element .card-content h2,
.pb-section-pb-f-cards .card-element .card-content h3,
.pb-section-pb-f-cards .card-element .card-content h4 {
    margin: 0 0 12px;
    font-family: var(--font-body, 'Outfit', sans-serif);
    color: var(--colour-teal-light); /* Figma accent — safe on dark card grounds */
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
}

/* The WYSIWYG card headings are pinned to teal-light (the Figma accent), which
   fails contrast on LIGHT grounds (white/light-grey/teal-light → ≤2.8:1).
   Override to teal-dark wherever the heading sits on a light ground — both when
   the CARD has a light surface, and when a "Default" card (no own bg) inherits a
   light SECTION ground (G2 covers the section, but not this teal-light heading). */
.pb-section-pb-f-cards .card-element.bg-white .card-content h2,
.pb-section-pb-f-cards .card-element.bg-white .card-content h3,
.pb-section-pb-f-cards .card-element.bg-white .card-content h4,
.pb-section-pb-f-cards .card-element.bg-light-grey .card-content h2,
.pb-section-pb-f-cards .card-element.bg-light-grey .card-content h3,
.pb-section-pb-f-cards .card-element.bg-light-grey .card-content h4,
.pb-section-pb-f-cards .card-element.bg-teal-light .card-content h2,
.pb-section-pb-f-cards .card-element.bg-teal-light .card-content h3,
.pb-section-pb-f-cards .card-element.bg-teal-light .card-content h4,
.pb-section.bg-white.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h2,
.pb-section.bg-light-grey.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h2,
.pb-section.bg-teal-light.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h2,
.pb-section.bg-white.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h3,
.pb-section.bg-light-grey.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h3,
.pb-section.bg-teal-light.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h3,
.pb-section.bg-white.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h4,
.pb-section.bg-light-grey.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h4,
.pb-section.bg-teal-light.pb-section-pb-f-cards .card-element:not([class*=" bg-"]) .card-content h4 {
    color: var(--colour-teal-light);
}

.pb-section-pb-f-cards .card-element .card-content h2 {
    font-size: 32px;
}

.pb-section-pb-f-cards .card-element .card-content h3 {
    font-size: 28px;
}

.pb-section-pb-f-cards .card-element .card-content h4 {
    font-size: 22px;
}

.pb-section-pb-f-cards .card-element .card-content p {
    margin: 0 0 0.75em;
    line-height: 1.4;
}

.pb-section-pb-f-cards .card-element .card-content p:last-child,
.pb-section-pb-f-cards .card-element .card-content ul:last-child,
.pb-section-pb-f-cards .card-element .card-content ol:last-child {
    margin-bottom: 0;
}

.pb-section-pb-f-cards .card-element .card-content ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 0 0.75em;
}

.pb-section-pb-f-cards .card-element .card-content ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin: 0 0 0.75em;
}

.pb-section-pb-f-cards .card-element .card-content li {
    margin-bottom: 0.4em;
}

.pb-section-pb-f-cards .card-element .card-content a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Card image (card_image / card_image_position / card_image_margins)
   ------------------------------------------------------------------------
   The image sits top | bottom | left | right of the WYSIWYG content.
   - top / bottom  → the card stays a column; image is full content-width.
   - left / right  → the card becomes a flex row that FLEX-WRAPS, with the
     image floored at 220px wide. Once the row can no longer keep the image
     at 220px beside the content, the two wrap and stack.
   The image↔content gap is always the card's flex `gap` (kept in every mode).
   card_image_margins:
   - "default" → image is inset by the card padding (sits inside the card).
   - "none"    → image bleeds to the card edges on its OUTER sides (negative
     margin tracking --card-pad); the content-facing side keeps margin 0, so
     the flex gap to the content is preserved.
   ========================================================================== */

.pb-section-pb-f-cards .card-image {
    margin: 0;
    min-width: 0; /* let the flex item shrink toward its 220px floor before wrapping */
    line-height: 0; /* kill the inline-image descender gap under the <img> */
}

.pb-section-pb-f-cards .card-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Side-by-side: left / right ---------------------------------------- */
.pb-section-pb-f-cards .card-element--img-left,
.pb-section-pb-f-cards .card-element--img-right {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Image column: preferred + floored at 220px so it can never be squeezed
   narrower than that beside the content — at which point the row wraps. */
.pb-section-pb-f-cards .card-element--img-left > .card-image,
.pb-section-pb-f-cards .card-element--img-right > .card-image {
    flex: 1 1 220px;
    min-width: 220px;
}

/* Content takes the rest; its own floor pairs with the image floor to set the
   wrap point and keeps the text comfortably wide when side-by-side. */
.pb-section-pb-f-cards .card-element--img-left > .card-content,
.pb-section-pb-f-cards .card-element--img-right > .card-content {
    flex: 1 1 280px;
    min-width: 280px;
}

/* ---- Margins "none": bleed the image to the card edges on its OUTER sides
   only (the content-facing side keeps margin 0, preserving the flex gap). The
   negative margin tracks --card-pad so it always cancels the padding exactly. */
.pb-section-pb-f-cards .card-element--img-top.card-element--img-margins-none > .card-image {
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
}
.pb-section-pb-f-cards .card-element--img-bottom.card-element--img-margins-none > .card-image {
    margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
}
.pb-section-pb-f-cards .card-element--img-left.card-element--img-margins-none > .card-image {
    margin: calc(-1 * var(--card-pad)) 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
}
.pb-section-pb-f-cards .card-element--img-right.card-element--img-margins-none > .card-image {
    margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
}

/* ==========================================================================
   Mobile / responsive (final overrides)
   At <768px every card stacks full-width regardless of preferred-width.
   ========================================================================== */

@media (max-width: 767px) {
    .pb-section-pb-f-cards .cards-row {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 16px;
    }

    .pb-section-pb-f-cards .card-item,
    .pb-section-pb-f-cards .card-item.card-width-full,
    .pb-section-pb-f-cards .card-item.card-width-one-half,
    .pb-section-pb-f-cards .card-item.card-width-one-third,
    .pb-section-pb-f-cards .card-item.card-width-one-quarter {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .pb-section-pb-f-cards .card-element {
        --card-pad: 24px;
    }

    .pb-section-pb-f-cards .card-element .card-content h2 {
        font-size: 26px;
    }
    .pb-section-pb-f-cards .card-element .card-content h3 {
        font-size: 22px;
    }
    .pb-section-pb-f-cards .card-element .card-content h4 {
        font-size: 20px;
    }

    /* Side images stack at this width, so switch their "none" bleed from the
       outer-edge-only (side-by-side) pattern to the top/bottom pattern: the
       image is now flush on BOTH sides, with the content-facing edge keeping
       its gap (left image keeps its bottom gap; right image its top gap). */
    .pb-section-pb-f-cards .card-element--img-left.card-element--img-margins-none > .card-image {
        margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
    }
    .pb-section-pb-f-cards .card-element--img-right.card-element--img-margins-none > .card-image {
        margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    }
}

/* ---- Editor preview placeholder ----------------------------------------- */

.pb-section-pb-f-cards .card-element.is-placeholder {
    opacity: 0.85;
    outline: 1px dashed rgba(255, 255, 255, 0.25);
}