/* =========================================
    Block: Universal Card Grid
    ========================================= */

.ccb-universal-grid {
    position: relative;
    --ccb-ug-cols-d: 3;
    --ccb-ug-cols-t: 2;
    --ccb-ug-cols-m: 1;
    --ccb-ug-gap: 24px;
    --ccb-ug-card-bg: #fff;
    --ccb-ug-text-color: #333;
    --ccb-ug-radius: 8px;
     /* NOTE: --ccb-ug-shadow is intentionally NOT a static value.
         It's derived from responsive vars so editor/front can react to controls. */

    --ccb-ug-sect-title: var(--ccb-ug-sect-title-desktop, 40px);
    --ccb-ug-sect-sub: var(--ccb-ug-sect-sub-desktop, 20px);
    --ccb-ug-card-title: var(--ccb-ug-card-title-desktop, 20px);
    --ccb-ug-card-desc: var(--ccb-ug-card-desc-desktop, 16px);
    --ccb-ug-img-pad: var(--ccb-ug-img-pad-desktop, 0px);
    --ccb-ug-img-scale: var(--ccb-ug-img-scale-desktop, 1);

    --ccb-ug-shadow-y: var(--ccb-ug-shadow-y-desktop, 10px);
    --ccb-ug-shadow-blur: var(--ccb-ug-shadow-blur-desktop, 15px);
    --ccb-ug-shadow-spread: var(--ccb-ug-shadow-spread-desktop, -3px);
    --ccb-ug-shadow-opacity: var(--ccb-ug-shadow-opacity-desktop, 0.1);
    --ccb-ug-shadow-computed: 0 var(--ccb-ug-shadow-y) var(--ccb-ug-shadow-blur) var(--ccb-ug-shadow-spread) rgba(0, 0, 0, var(--ccb-ug-shadow-opacity));

    --ccb-ug-shadow: var(--ccb-ug-shadow-computed);
    --ccb-ug-shadow-hover-computed: 0 calc(var(--ccb-ug-shadow-y) + 4px) calc(var(--ccb-ug-shadow-blur) + 6px) var(--ccb-ug-shadow-spread) rgba(0, 0, 0, var(--ccb-ug-shadow-opacity));
    --ccb-ug-shadow-hover: var(--ccb-ug-shadow-hover-computed);

    padding-top: var(--ccb-ug-pt-desktop, 60px);
    padding-bottom: var(--ccb-ug-pb-desktop, 60px);
    margin-top: var(--ccb-ug-mt-desktop, 0px);
    margin-bottom: var(--ccb-ug-mb-desktop, 0px);
    background-color: var(--ccb-ug-bg, transparent);
    background-image: var(--ccb-ug-bg-img, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: var(--ccb-ug-minh, auto);

    width: 100%;
    box-sizing: border-box;
}

.ccb-universal-grid.ccb-ug--parallax {
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .ccb-universal-grid.ccb-ug--parallax {
        background-attachment: scroll;
    }
}

.ccb-universal-grid.ccb-ug--has-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: color-mix(
        in srgb,
        var(--ccb-ug-overlay-color, #000000) var(--ccb-ug-overlay-strength, 0%),
        transparent
    );
}

.ccb-universal-grid .cgb-inner {
    position: relative;
    z-index: 1;
}

.ccb-universal-grid.cgb--fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.ccb-universal-grid .cgb-inner {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: var(--ccb-ug-px-desktop, 20px);
    padding-right: var(--ccb-ug-px-desktop, 20px);
}

/* Grid Container */
.ccb-universal-grid__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--ccb-ug-cols-m), 1fr);
    gap: var(--ccb-ug-gap);
    margin-top: 30px;
}

.ccb-universal-grid__grid > * {
    height: 100%;
}

@media (min-width: 768px) {
    .ccb-universal-grid__grid {
        grid-template-columns: repeat(var(--ccb-ug-cols-t), 1fr);
    }
}

@media (min-width: 1024px) {
    .ccb-universal-grid__grid {
        grid-template-columns: repeat(var(--ccb-ug-cols-d), 1fr);
    }
}

/* Card */
.ccb-universal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--ccb-ug-card-bg);
    border-radius: var(--ccb-ug-radius);
    box-shadow: var(--ccb-ug-shadow, var(--ccb-ug-shadow-computed));
    overflow: hidden;
    height: 100%;
    /* Equal height */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ccb-universal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ccb-ug-shadow-hover, var(--ccb-ug-shadow, var(--ccb-ug-shadow-computed)));
}

.ccb-universal-card--clickable {
    cursor: pointer;
}

.ccb-universal-card__stretched-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.ccb-universal-card__image-wrapper,
.ccb-universal-card__content,
.ccb-universal-card__footer {
    position: relative;
    z-index: 1;
}

.ccb-universal-card__button {
    position: relative;
    z-index: 3;
}

/* =========================================
   Title badge styles
   ========================================= */
.ccb-universal-card__title-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-weight: var(--ccb-ug-badge-fw, 700);
    letter-spacing: var(--ccb-ug-badge-ls, 0px);
    text-transform: var(--ccb-ug-badge-tt, none);
    line-height: 1.2;
    padding: 6px 10px;
    box-sizing: border-box;
}

/* Inline chip (inside content) */
.ccb-title-badge--inline {
    align-self: flex-start;
    color: var(--ccb-ug-accent, #0073aa);
    border: 1px solid var(--ccb-ug-accent, #0073aa);
    background: transparent;
    border-radius: 999px;
    margin-bottom: 10px;
}

/* Overlay pill (over image) */
.ccb-title-badge--pill,
.ccb-title-badge--corner {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

.ccb-title-badge--top-right {
    left: auto;
    right: 12px;
}

.ccb-title-badge--pill {
    color: #fff;
    background: var(--ccb-ug-accent, #0073aa);
    border-radius: 999px;
}

/* Corner badge: more "tag" feel */
.ccb-title-badge--corner {
    color: #fff;
    background: var(--ccb-ug-accent, #0073aa);
    border-radius: 6px;
    text-transform: var(--ccb-ug-badge-tt, uppercase);
    letter-spacing: var(--ccb-ug-badge-ls, 0.04em);
    font-size: calc(var(--ccb-ug-card-title) * 0.75);
}

/* Card Image */
.ccb-universal-card__image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Aspect Ratio handled inline or via class */
}

.ccb-universal-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
}

/* Card Content */
.ccb-universal-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: var(--ccb-ug-cc-pt-desktop, 24px);
    padding-right: var(--ccb-ug-cc-pr-desktop, 24px);
    padding-bottom: var(--ccb-ug-cc-pb-desktop, 24px);
    padding-left: var(--ccb-ug-cc-pl-desktop, 24px);
}

.ccb-universal-card__title {
    margin-top: var(--ccb-ug-ct-mt-desktop, 0px);
    margin-right: 0;
    margin-bottom: var(--ccb-ug-ct-mb-desktop, 12px);
    margin-left: 0;
    font-size: var(--ccb-ug-card-title);
    font-weight: var(--ccb-ug-ct-fw, 700);
    letter-spacing: var(--ccb-ug-ct-ls, 0px);
    text-transform: var(--ccb-ug-ct-tt, none);
    line-height: var(--ccb-ug-ct-lh-desktop, 1.25);
}

.ccb-universal-card__desc {
    margin-top: var(--ccb-ug-cd-mt-desktop, 0px);
    margin-right: 0;
    margin-bottom: var(--ccb-ug-cd-mb-desktop, 16px);
    margin-left: 0;
    font-size: var(--ccb-ug-card-desc);
    font-weight: var(--ccb-ug-cd-fw, 400);
    letter-spacing: var(--ccb-ug-cd-ls, 0px);
    text-transform: var(--ccb-ug-cd-tt, none);
    line-height: var(--ccb-ug-cd-lh-desktop, 1.6);
    flex-grow: 1;
    /* Pushes list/button down if desired */
}

/* List Styles */
.ccb-universal-card__list {
    margin-top: var(--ccb-ug-cl-mt-desktop, 0px);
    margin-right: 0;
    margin-bottom: var(--ccb-ug-cl-mb-desktop, 20px);
    margin-left: 0;
    font-size: var(--ccb-ug-cl-fs-desktop, inherit);
    font-weight: var(--ccb-ug-cl-fw, 400);
    letter-spacing: var(--ccb-ug-cl-ls, 0px);
    text-transform: var(--ccb-ug-cl-tt, none);
    padding: 0;
    list-style: none;
}

.ccb-universal-card__list li {
    position: relative;
    padding-left: var(--ccb-ug-cl-indent-desktop, 24px);
    margin-bottom: var(--ccb-ug-cl-gap-desktop, 8px);
    line-height: var(--ccb-ug-cl-lh-desktop, 1.5);
}

.ccb-universal-card__list li::before {
    content: "✓";
    /* Default Check */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ccb-ug-accent, #0073aa);
    font-weight: bold;
}

@media (max-width: 1024px) {
    .ccb-universal-grid {
        padding-top: var(--ccb-ug-pt-tablet, var(--ccb-ug-pt-desktop, 60px));
        padding-bottom: var(--ccb-ug-pb-tablet, var(--ccb-ug-pb-desktop, 60px));
        margin-top: var(--ccb-ug-mt-tablet, var(--ccb-ug-mt-desktop, 0px));
        margin-bottom: var(--ccb-ug-mb-tablet, var(--ccb-ug-mb-desktop, 0px));

        --ccb-ug-sect-title: var(--ccb-ug-sect-title-tablet, var(--ccb-ug-sect-title-desktop, 40px));
        --ccb-ug-sect-sub: var(--ccb-ug-sect-sub-tablet, var(--ccb-ug-sect-sub-desktop, 20px));
        --ccb-ug-card-title: var(--ccb-ug-card-title-tablet, var(--ccb-ug-card-title-desktop, 20px));
        --ccb-ug-card-desc: var(--ccb-ug-card-desc-tablet, var(--ccb-ug-card-desc-desktop, 16px));
        --ccb-ug-img-pad: var(--ccb-ug-img-pad-tablet, var(--ccb-ug-img-pad-desktop, 0px));
        --ccb-ug-img-scale: var(--ccb-ug-img-scale-tablet, var(--ccb-ug-img-scale-desktop, 1));

        --ccb-ug-shadow-y: var(--ccb-ug-shadow-y-tablet, var(--ccb-ug-shadow-y-desktop, 10px));
        --ccb-ug-shadow-blur: var(--ccb-ug-shadow-blur-tablet, var(--ccb-ug-shadow-blur-desktop, 15px));
        --ccb-ug-shadow-spread: var(--ccb-ug-shadow-spread-tablet, var(--ccb-ug-shadow-spread-desktop, -3px));
        --ccb-ug-shadow-opacity: var(--ccb-ug-shadow-opacity-tablet, var(--ccb-ug-shadow-opacity-desktop, 0.1));
    }

    .ccb-universal-grid .cgb-inner {
        padding-left: var(--ccb-ug-px-tablet, var(--ccb-ug-px-desktop, 20px));
        padding-right: var(--ccb-ug-px-tablet, var(--ccb-ug-px-desktop, 20px));
    }

    .ccb-universal-card__content {
        padding-top: var(--ccb-ug-cc-pt-tablet, var(--ccb-ug-cc-pt-desktop, 24px));
        padding-right: var(--ccb-ug-cc-pr-tablet, var(--ccb-ug-cc-pr-desktop, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-tablet, var(--ccb-ug-cc-pb-desktop, 24px));
        padding-left: var(--ccb-ug-cc-pl-tablet, var(--ccb-ug-cc-pl-desktop, 24px));
    }

    .ccb-universal-card__title {
        line-height: var(--ccb-ug-ct-lh-tablet, var(--ccb-ug-ct-lh-desktop, 1.25));
        margin-top: var(--ccb-ug-ct-mt-tablet, var(--ccb-ug-ct-mt-desktop, 0px));
        margin-bottom: var(--ccb-ug-ct-mb-tablet, var(--ccb-ug-ct-mb-desktop, 12px));
    }

    .ccb-universal-card__desc {
        line-height: var(--ccb-ug-cd-lh-tablet, var(--ccb-ug-cd-lh-desktop, 1.6));
        margin-top: var(--ccb-ug-cd-mt-tablet, var(--ccb-ug-cd-mt-desktop, 0px));
        margin-bottom: var(--ccb-ug-cd-mb-tablet, var(--ccb-ug-cd-mb-desktop, 16px));
    }

    .ccb-universal-card__list {
        margin-top: var(--ccb-ug-cl-mt-tablet, var(--ccb-ug-cl-mt-desktop, 0px));
        margin-bottom: var(--ccb-ug-cl-mb-tablet, var(--ccb-ug-cl-mb-desktop, 20px));
        font-size: var(--ccb-ug-cl-fs-tablet, var(--ccb-ug-cl-fs-desktop, inherit));
    }

    .ccb-universal-card__list li {
        padding-left: var(--ccb-ug-cl-indent-tablet, var(--ccb-ug-cl-indent-desktop, 24px));
        margin-bottom: var(--ccb-ug-cl-gap-tablet, var(--ccb-ug-cl-gap-desktop, 8px));
        line-height: var(--ccb-ug-cl-lh-tablet, var(--ccb-ug-cl-lh-desktop, 1.5));
    }

    .ccb-ug--preset-card .ccb-universal-card__footer {
        padding-top: var(--ccb-ug-cc-pt-tablet, var(--ccb-ug-cc-pt-desktop, 24px));
        padding-right: var(--ccb-ug-cc-pr-tablet, var(--ccb-ug-cc-pr-desktop, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-tablet, var(--ccb-ug-cc-pb-desktop, 24px));
        padding-left: var(--ccb-ug-cc-pl-tablet, var(--ccb-ug-cc-pl-desktop, 24px));
    }

    .ccb-ug--preset-flat-list .ccb-universal-card__content {
        padding-top: var(--ccb-ug-cc-pt-tablet, var(--ccb-ug-cc-pt-desktop, 24px));
        padding-right: var(--ccb-ug-cc-pr-tablet, var(--ccb-ug-cc-pr-desktop, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-tablet, var(--ccb-ug-cc-pb-desktop, 24px));
        padding-left: var(--ccb-ug-cc-pl-tablet, var(--ccb-ug-cc-pl-desktop, 24px));
    }

    .ccb-ug--preset-flat-list .ccb-universal-card__list li + li {
        margin-top: var(--ccb-ug-cl-gap-tablet, var(--ccb-ug-cl-gap-desktop, 8px));
    }

    .ccb-universal-grid__section-title {
        margin-top: var(--ccb-ug-st-mt-tablet, var(--ccb-ug-st-mt-desktop, 0px));
        margin-bottom: var(--ccb-ug-st-mb-tablet, var(--ccb-ug-st-mb-desktop, 10px));
    }

    .ccb-universal-grid__section-subtitle {
        margin-top: var(--ccb-ug-ss-mt-tablet, var(--ccb-ug-ss-mt-desktop, 10px));
    }
}

@media (max-width: 768px) {
    .ccb-universal-grid {
        padding-top: var(--ccb-ug-pt-mobile, var(--ccb-ug-pt-tablet, 60px));
        padding-bottom: var(--ccb-ug-pb-mobile, var(--ccb-ug-pb-tablet, 60px));
        margin-top: var(--ccb-ug-mt-mobile, var(--ccb-ug-mt-tablet, 0px));
        margin-bottom: var(--ccb-ug-mb-mobile, var(--ccb-ug-mb-tablet, 0px));

        --ccb-ug-sect-title: var(--ccb-ug-sect-title-mobile, var(--ccb-ug-sect-title-tablet, var(--ccb-ug-sect-title-desktop, 40px)));
        --ccb-ug-sect-sub: var(--ccb-ug-sect-sub-mobile, var(--ccb-ug-sect-sub-tablet, var(--ccb-ug-sect-sub-desktop, 20px)));
        --ccb-ug-card-title: var(--ccb-ug-card-title-mobile, var(--ccb-ug-card-title-tablet, var(--ccb-ug-card-title-desktop, 20px)));
        --ccb-ug-card-desc: var(--ccb-ug-card-desc-mobile, var(--ccb-ug-card-desc-tablet, var(--ccb-ug-card-desc-desktop, 16px)));
        --ccb-ug-img-pad: var(--ccb-ug-img-pad-mobile, var(--ccb-ug-img-pad-tablet, var(--ccb-ug-img-pad-desktop, 0px)));
        --ccb-ug-img-scale: var(--ccb-ug-img-scale-mobile, var(--ccb-ug-img-scale-tablet, var(--ccb-ug-img-scale-desktop, 1)));

        --ccb-ug-shadow-y: var(--ccb-ug-shadow-y-mobile, var(--ccb-ug-shadow-y-tablet, var(--ccb-ug-shadow-y-desktop, 10px)));
        --ccb-ug-shadow-blur: var(--ccb-ug-shadow-blur-mobile, var(--ccb-ug-shadow-blur-tablet, var(--ccb-ug-shadow-blur-desktop, 15px)));
        --ccb-ug-shadow-spread: var(--ccb-ug-shadow-spread-mobile, var(--ccb-ug-shadow-spread-tablet, var(--ccb-ug-shadow-spread-desktop, -3px)));
        --ccb-ug-shadow-opacity: var(--ccb-ug-shadow-opacity-mobile, var(--ccb-ug-shadow-opacity-tablet, var(--ccb-ug-shadow-opacity-desktop, 0.1)));
    }

    .ccb-universal-grid .cgb-inner {
        padding-left: var(--ccb-ug-px-mobile, var(--ccb-ug-px-tablet, 16px));
        padding-right: var(--ccb-ug-px-mobile, var(--ccb-ug-px-tablet, 16px));
    }

    .ccb-universal-grid__section-title {
        margin-top: var(--ccb-ug-st-mt-mobile, var(--ccb-ug-st-mt-tablet, var(--ccb-ug-st-mt-desktop, 0px)));
        margin-bottom: var(--ccb-ug-st-mb-mobile, var(--ccb-ug-st-mb-tablet, var(--ccb-ug-st-mb-desktop, 10px)));
    }

    .ccb-universal-grid__section-subtitle {
        margin-top: var(--ccb-ug-ss-mt-mobile, var(--ccb-ug-ss-mt-tablet, var(--ccb-ug-ss-mt-desktop, 10px)));
    }

    .ccb-universal-card__content {
        padding-top: var(--ccb-ug-cc-pt-mobile, var(--ccb-ug-cc-pt-tablet, 24px));
        padding-right: var(--ccb-ug-cc-pr-mobile, var(--ccb-ug-cc-pr-tablet, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-mobile, var(--ccb-ug-cc-pb-tablet, 24px));
        padding-left: var(--ccb-ug-cc-pl-mobile, var(--ccb-ug-cc-pl-tablet, 24px));
    }

    .ccb-universal-card__title {
        line-height: var(--ccb-ug-ct-lh-mobile, var(--ccb-ug-ct-lh-tablet, 1.25));
        margin-top: var(--ccb-ug-ct-mt-mobile, var(--ccb-ug-ct-mt-tablet, 0px));
        margin-bottom: var(--ccb-ug-ct-mb-mobile, var(--ccb-ug-ct-mb-tablet, 12px));
    }

    .ccb-universal-card__desc {
        line-height: var(--ccb-ug-cd-lh-mobile, var(--ccb-ug-cd-lh-tablet, 1.6));
        margin-top: var(--ccb-ug-cd-mt-mobile, var(--ccb-ug-cd-mt-tablet, 0px));
        margin-bottom: var(--ccb-ug-cd-mb-mobile, var(--ccb-ug-cd-mb-tablet, 16px));
    }

    .ccb-universal-card__list {
        margin-top: var(--ccb-ug-cl-mt-mobile, var(--ccb-ug-cl-mt-tablet, 0px));
        margin-bottom: var(--ccb-ug-cl-mb-mobile, var(--ccb-ug-cl-mb-tablet, 20px));
        font-size: var(--ccb-ug-cl-fs-mobile, var(--ccb-ug-cl-fs-tablet, var(--ccb-ug-cl-fs-desktop, inherit)));
    }

    .ccb-universal-card__list li {
        padding-left: var(--ccb-ug-cl-indent-mobile, var(--ccb-ug-cl-indent-tablet, 24px));
        margin-bottom: var(--ccb-ug-cl-gap-mobile, var(--ccb-ug-cl-gap-tablet, 8px));
        line-height: var(--ccb-ug-cl-lh-mobile, var(--ccb-ug-cl-lh-tablet, 1.5));
    }

    .ccb-ug--preset-card .ccb-universal-card__footer {
        padding-top: var(--ccb-ug-cc-pt-mobile, var(--ccb-ug-cc-pt-tablet, 24px));
        padding-right: var(--ccb-ug-cc-pr-mobile, var(--ccb-ug-cc-pr-tablet, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-mobile, var(--ccb-ug-cc-pb-tablet, 24px));
        padding-left: var(--ccb-ug-cc-pl-mobile, var(--ccb-ug-cc-pl-tablet, 24px));
    }

    .ccb-ug--preset-flat-list .ccb-universal-card__content {
        padding-top: var(--ccb-ug-cc-pt-mobile, var(--ccb-ug-cc-pt-tablet, 24px));
        padding-right: var(--ccb-ug-cc-pr-mobile, var(--ccb-ug-cc-pr-tablet, 24px));
        padding-bottom: var(--ccb-ug-cc-pb-mobile, var(--ccb-ug-cc-pb-tablet, 24px));
        padding-left: var(--ccb-ug-cc-pl-mobile, var(--ccb-ug-cc-pl-tablet, 24px));
    }

    .ccb-ug--preset-flat-list .ccb-universal-card__list li + li {
        margin-top: var(--ccb-ug-cl-gap-mobile, var(--ccb-ug-cl-gap-tablet, 8px));
    }
}

/* Button */
.ccb-universal-card__button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    font-size: var(--ccb-ug-btn-fs, inherit);
    font-weight: var(--ccb-ug-btn-fw, 600);
    line-height: var(--ccb-ug-btn-lh, 1.2);
    letter-spacing: var(--ccb-ug-btn-ls, 0px);
    text-transform: var(--ccb-ug-btn-tt, none);
    margin-top: auto;
    /* Push to bottom */
    transition: all 0.2s;
    cursor: pointer;
}

.ccb-universal-card__footer {
    margin-top: auto;
    padding: 0;
}

.ccb-btn-fill {
    background-color: var(--ccb-ug-accent, #0073aa);
    color: #fff;
    border: 1px solid var(--ccb-ug-accent, #0073aa);
}

a.ccb-universal-card__button.ccb-btn-fill:hover {
    background-color: var(--ccb-ug-btn-hover-bg, var(--ccb-ug-accent, #0073aa));
    border-color: var(--ccb-ug-btn-hover-bg, var(--ccb-ug-accent, #0073aa));
    filter: var(--ccb-ug-btn-hover-filter, brightness(0.92));
    color: var(--ccb-ug-btn-hover-text, #fff);
}

.ccb-btn-outline {
    background-color: transparent;
    color: var(--ccb-ug-accent, #0073aa);
    border: 2px solid var(--ccb-ug-accent, #0073aa);
}

a.ccb-universal-card__button.ccb-btn-outline:hover {
    background-color: var(--ccb-ug-btn-hover-bg, var(--ccb-ug-accent, #0073aa));
    border-color: var(--ccb-ug-btn-hover-bg, var(--ccb-ug-accent, #0073aa));
    color: var(--ccb-ug-btn-hover-text, #fff);
}

.ccb-btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--ccb-ug-accent, #0073aa);
    text-align: left;
    text-decoration: underline;
}

a.ccb-universal-card__button.ccb-btn-link:hover {
    color: var(--ccb-ug-btn-hover-text, var(--ccb-ug-accent, #0073aa));
    text-decoration: underline;
}

/* --- New Customization Features (v109) --- */

/* Section Header */
.ccb-universal-grid__header {
    margin-bottom: 40px;
}

.ccb-universal-grid__section-title {
    font-size: var(--ccb-ug-sect-title, 2.5rem);
    font-weight: var(--ccb-ug-st-fw, 700);
    margin-top: var(--ccb-ug-st-mt-desktop, 0px);
    margin-right: 0;
    margin-bottom: var(--ccb-ug-st-mb-desktop, 10px);
    margin-left: 0;
    line-height: var(--ccb-ug-st-lh, 1.2);
    letter-spacing: var(--ccb-ug-st-ls, 0px);
    text-transform: var(--ccb-ug-st-tt, none);
}

.ccb-universal-grid__section-subtitle {
    font-size: var(--ccb-ug-sect-sub, 1.25rem);
    line-height: var(--ccb-ug-ss-lh, 1.6);
    margin-top: var(--ccb-ug-ss-mt-desktop, 10px);
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    opacity: 0.9;
    font-weight: var(--ccb-ug-ss-fw, 400);
    letter-spacing: var(--ccb-ug-ss-ls, 0px);
    text-transform: var(--ccb-ug-ss-tt, none);
}

/* Overlay Title Layout */
.ccb-universal-card__overlay-title {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    width: 100%;
    /* Ensure text shadow for readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: var(--ccb-ug-card-title, 1.2rem);
    font-weight: var(--ccb-ug-ct-fw, 700);
    letter-spacing: var(--ccb-ug-ct-ls, 0px);
    text-transform: var(--ccb-ug-ct-tt, none);
    pointer-events: none;
}

/* Icon Header Layout */
.ccb-universal-card__icon-overlay {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 2;
    background-color: #fff;
    border-radius: 9999px;
    padding: 10px;
    /* Default, overridden by styles if needed */
}

/* If the icon is a custom upload, remove the circular badge behind it. */
.ccb-universal-card__icon-overlay.ccb-universal-card__icon-overlay--plain {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* Content Background Handling */
/* Ensure full height flex behavior matches bg color */
.ccb-universal-card__content {
    background-color: var(--ccb-ug-content-bg, transparent);
    /* If transparent, falls back to card-bg on parent */
}

/* Adjustments for Overlay Title (remove padding top from content if needed?) */
.ccb-card-layout-overlay-title .ccb-universal-card__content {
    justify-content: space-between;
}

.ccb-card-layout-overlay-title-top .ccb-universal-card__content {
    justify-content: space-between;
}

/* --- Typography & Buttons (v110) --- */
.ccb-btn-full {
    display: block;
    width: 100%;
    margin-top: auto;
}

/* Ensure container allows full width button expansion if needed */
.cgb-btns-full .ccb-universal-card__button {
    text-align: center;
}

/* === Preset: Card (default) === */
.ccb-ug--preset-card .ccb-universal-card {
    box-shadow: var(--ccb-ug-shadow, var(--ccb-ug-shadow-computed));
}

.ccb-ug--preset-card .ccb-universal-card:hover {
    transform: translateY(-4px);
}

.ccb-ug--preset-card .ccb-universal-card__footer {
    padding-top: var(--ccb-ug-cc-pt-desktop, 24px);
    padding-right: var(--ccb-ug-cc-pr-desktop, 24px);
    padding-bottom: var(--ccb-ug-cc-pb-desktop, 24px);
    padding-left: var(--ccb-ug-cc-pl-desktop, 24px);
}

/* === Preset: Flat list === */
.ccb-ug--preset-flat-list .ccb-universal-card {
    box-shadow: var(--ccb-ug-flat-shadow, none);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transform: none;
}

.ccb-ug--preset-flat-list .ccb-universal-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ccb-ug-flat-shadow-hover, var(--ccb-ug-flat-shadow, none));
}

.ccb-ug--preset-flat-list .ccb-universal-card__content {
    padding-top: var(--ccb-ug-cc-pt-desktop, 24px);
    padding-right: var(--ccb-ug-cc-pr-desktop, 24px);
    padding-bottom: var(--ccb-ug-cc-pb-desktop, 24px);
    padding-left: var(--ccb-ug-cc-pl-desktop, 24px);
    background-color: var(--ccb-ug-content-bg, transparent);
    gap: 12px;
}

.ccb-ug--preset-flat-list .ccb-universal-card__title {
    margin-bottom: var(--ccb-ug-ct-mb-desktop, 12px);
}

.ccb-ug--preset-flat-list .ccb-universal-card__list {
    margin-top: var(--ccb-ug-cl-mt-desktop, 0px);
    margin-right: 0;
    margin-bottom: var(--ccb-ug-cl-mb-desktop, 20px);
    margin-left: 0;
    padding: 0;
    list-style: none;
}

.ccb-ug--preset-flat-list .ccb-universal-card__list li {
    padding-left: var(--ccb-ug-cl-indent-desktop, 24px);
    margin-bottom: 0;
    line-height: var(--ccb-ug-cl-lh-desktop, 1.5);
}

.ccb-ug--preset-flat-list .ccb-universal-card__list li + li {
    margin-top: var(--ccb-ug-cl-gap-desktop, 8px);
}

.ccb-ug--preset-flat-list .ccb-universal-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ccb-ug-accent, #0073aa);
    font-weight: bold;
}

.ccb-ug--preset-flat-list .ccb-universal-card__footer {
    padding: 0;
    background: var(--ccb-ug-accent, #0073aa);
}

.ccb-ug--preset-flat-list .ccb-universal-card__button {
    display: block;
    width: 100%;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 0 0 var(--ccb-ug-radius) var(--ccb-ug-radius);
    padding: 14px 16px;
    text-align: center;
}

.ccb-ug--preset-flat-list .ccb-universal-card__button.ccb-btn-outline,
.ccb-ug--preset-flat-list .ccb-universal-card__button.ccb-btn-link {
    color: #fff;
    border: none;
}