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

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


/* ---- 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.section-intro-align-left {
    margin: 0;
}

.pb-section-pb-f-cards .section-intro.section-intro-align-right {
    margin: 0;
    text-align: right;
}

.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;
}



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

.pb-section-pb-f-cards.cards-align-center .cards-row {
    justify-content: center;
}

.pb-section-pb-f-cards.cards-align-left .cards-row {
    justify-content: flex-start;
}

.pb-section-pb-f-cards.cards-align-right .cards-row {
    justify-content: flex-end;
}



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


.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;
}


@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;
    }
}


@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;
    }
}



.pb-section-pb-f-cards .card-element {
    box-sizing: border-box;

    --card-pad: 24px;
    padding: var(--card-pad);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    color: inherit;
    background-color: transparent;
    flex: 1 1 auto;
    width: 100%;
}


.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 img {
    margin-bottom: 15px;
}

.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);
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
}


.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-buttons);
}

.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;
}



.pb-section-pb-f-cards .card-image {
    margin: 0;
    min-width: 0;
    line-height: 0; 
}

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

.pb-section-pb-f-cards .card-image-link {
    display: block;
    line-height: 0;
}

/* ---- 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;
}


.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;
    max-width: 250px;
}


.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;
}


.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;
}


/* ---- Image Type: fixed-size images and recoloured SVG icons -------------- */
/* pb_cards.php sets these inline on .card-image:
     --pb-card-img-w / --pb-card-img-h   the box size (75px for the Icon presets)
     --pb-card-icon-src                  url() of the SVG, used as a mask
     --pb-card-icon-colour               the colour that shows through the mask
   None of this applies unless PHP added .card-image--fixed / --masked, so cards
   saved before the Image Type field existed render byte-for-byte unchanged.
   Selectors carry one extra class beyond the rule they override so source order
   never decides the winner — the overridden rule is named in each comment. */

/* Overrides: .pb-section-pb-f-cards .card-image (line 298).
   An explicit cross-axis width makes the column-flex `align-items: stretch`
   behave as flex-start, which is what left-aligns a top- or bottom-positioned
   icon instead of letting it fill the card. align-self is stated as well so the
   intent is readable rather than implied. */
.pb-section-pb-f-cards .card-element--has-image > .card-image.card-image--fixed {
    width: var(--pb-card-img-w, auto);
    max-width: 100%;
    align-self: flex-start;
}

/* Overrides: .card-element--img-left  > .card-image
              .card-element--img-right > .card-image  (lines 324-329,
   `flex: 1 1 220px; min-width: 220px; max-width: 250px`) — the icon column
   shrinks to its own size instead of reserving 220-250px.
   Scoped to left/right deliberately: top/bottom declare no `flex` today, and a
   blanket `flex: 0 0 auto` would silently drop their flex-shrink from 1 to 0. */
.pb-section-pb-f-cards .card-element--img-left > .card-image.card-image--fixed,
.pb-section-pb-f-cards .card-element--img-right > .card-image.card-image--fixed {
    flex: 0 0 auto;
    min-width: 0;
}

/* Overrides: .pb-section-pb-f-cards .card-image img (line 304, `width: 100%`).
   This is the raster fallback path — an Icon type pointed at a JPEG or PNG,
   which cannot be masked. Honour the requested box and letterbox inside it, as
   pb_f_large_image_left_with_card_grid_right.css:119-128 does. */
.pb-section-pb-f-cards .card-image.card-image--fixed img {
    width: var(--pb-card-img-w, auto);
    height: var(--pb-card-img-h, auto);
    object-fit: contain;
    object-position: center;
}

/* The masked icon. A <span> has no intrinsic size, so both dimensions must be
   definite or it collapses to 0 height. Longhands only — the `mask` shorthand
   resets mask-mode/mask-composite inconsistently across engines, and the
   -webkit- shorthand does not share the standard grammar. -webkit- first so
   modern engines settle on the standard property. mask-size: contain (rather
   than the 100% 100% in pb_form_section.css:100) preserves the aspect ratio.
   mask-mode is left at its default `match-source`, which is ALPHA for an image
   source — that is what turns a transparent SVG into a coloured silhouette. */
.pb-section-pb-f-cards .card-image.card-image--masked .card-image-icon {
    display: block;
    width: var(--pb-card-img-w, 75px);
    height: var(--pb-card-img-h, 75px);
    background-color: var(--pb-card-icon-colour, currentColor);

    -webkit-mask-image: var(--pb-card-icon-src);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--pb-card-icon-src);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Overrides: .pb-section-pb-f-cards .card-image-link (line 310). The anchor
   already hugs the icon by inheriting the now-75px .card-image width; this just
   floors it at WCAG 2.2 SC 2.5.8 Target Size (Minimum), which a small Custom
   size could otherwise breach. */
.pb-section-pb-f-cards .card-image.card-image--fixed .card-image-link {
    min-width: 24px;
    min-height: 24px;
}

/* Overrides: the four --img-margins-none rules (lines 339-350) AND their
   max-width:767px remap (lines 383-388) — five classes so those later copies
   cannot win on source order.
   Edge-bleed exists for full-bleed photography. On a fixed-size icon the
   negative margins widen nothing (the width is explicit); they just drag the
   icon outside the card's padding box, which is never the intent. */
.pb-section-pb-f-cards .card-element--has-image.card-element--img-margins-none > .card-image.card-image--fixed {
    margin: 0;
}

/* Forced-colors mode (Windows High Contrast) overrides background-color, which
   is the only thing painting a masked icon — without this the icon vanishes
   entirely. System colour keywords survive the override. */
@media (forced-colors: active) {
    .pb-section-pb-f-cards .card-image.card-image--masked .card-image-icon {
        background-color: CanvasText;
    }
}


@media (max-width: 767px) {
    .pb-section-pb-f-cards .cards-row {
        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 {
        width: 45%;
        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;
    }


    .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));
    }
}

@media (max-width: 640px) {
.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 {
        width: calc(100% - 40px);
        min-width: 0;
        margin: 0 auto;
    }
}

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

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

.pb-section-pb-f-cards .card-buttons {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 64px;
}

.pb-section-pb-f-cards .card-buttons-position-right {
    justify-content: flex-end;
}

.pb-section-pb-f-cards .cards-card-buttons {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 0;
}