/* ─────────────────────────────────────────────────────────────────────────────
   Chaps Bloc Component – chaps-bloc-component.css
   All colours/sizes driven by CSS custom properties set via css_vars in PHP.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Root defaults ──────────────────────────────────────────────────────── */
chaps-bloc-component {
    --cbc-border-color: #e0e0e0;

    --cbc-card-title-size: 20px;
    --cbc-card-title-weight: 700;
    --cbc-card-title-color: #5D7374;

    --cbc-card-desc-size: 16px;
    --cbc-card-desc-weight: 400;
    --cbc-card-desc-color: #18211E;

    --cbc-icon-color: #5D7374;
    --cbc-wysiwyg-color: #18211E;
    --cbc-cols: 3;
    display: block;
    /*padding: 60px 0;*/
}

/* ── Per-style background defaults ──────────────────────────────────────── */
/* When the user sets a bg_color, --cbc-bg is injected inline and takes over.
   When left unset, the CSS fallback value in each rule is used instead.     */
chaps-bloc-component[data-style="style_1"] {
    background-color: var(--cbc-bg, transparent);
}
chaps-bloc-component[data-style="style_8"] {
    background-color: var(--cbc-bg, transparent);
}

/* ── Container ──────────────────────────────────────────────────────────── */
chaps-bloc-component .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.cbc-header {
    margin-bottom: 2.5rem;
}

.cbc-header--centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Grid (shared by styles 2,3,4,5,6,8) ───────────────────────────────── */
.cbc-grid {
    display: grid;
    grid-template-columns: repeat(var(--cbc-cols, 3), 1fr);
    gap: 2em;
}

/* ── WYSIWYG ────────────────────────────────────────────────────────────── */
.cbc-wysiwyg {
    line-height: 1.7;
    margin-top: 2rem;
}

.cbc-wysiwyg:not(.text-black) {
    color: var(--cbc-wysiwyg-color);
}

.cbc-wysiwyg p {
    font-size: inherit;
    color: inherit;
}

.cbc-wysiwyg--above {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* ── Icon shared ─────────────────────────────────────────────────────────── */
.cbc-icon svg,
.cbc-icon img {
    width: 50px;
    height: 50px;
    display: block;
    color: var(--cbc-icon-color);
}

.cbc-icon svg {
    stroke: var(--cbc-icon-color);
    fill: none;
}

.cbc-icon--block {
    /*margin-bottom: 1rem;*/
}

.cbc-icon-spacer-block {
    height: 36px;
    margin-bottom: 1rem;
}

/* ── Card title & desc (shared) ──────────────────────────────────────────── */
.cbc-card__title {
    /*font-size: var(--cbc-card-title-size) !important;*/
    /*font-weight: var(--cbc-card-title-weight) !important;*/
    color: var(--cbc-card-title-color) !important;
    /*margin: 0 0 0.4rem 0;*/
    /*line-height: 1.25;*/
}

.cbc-card__desc {
    /*font-size: var(--cbc-card-desc-size) !important;*/
    /*font-weight: var(--cbc-card-desc-weight) !important;*/
    /*color: var(--cbc-card-desc-color) !important;*/
    /*line-height: 1.6;*/
    /*margin: 0;*/
}

/* ── Pill button (per-card: styles 2, 8) ────────────────────────────────── */
.cbc-pill-btn {
    /*width: fit-content;*/
    /*display: inline-block;*/
    /*margin-top: 1.25rem;*/
    padding: 0.45rem 1.25rem;
    /*background: #EFC9F3;*/
    /*color: #18211E;*/
    /*border-radius: 999px;*/
    /*font-size: 14px;*/
    /*font-weight: 500;*/
    /*text-decoration: none;*/
    /*transition: filter 0.2s;*/
}

.cbc-pill-btn:hover {
    filter: brightness(0.9);
}

/* Global CTA pill button (styles 4) */
.cbc-cta-wrapper {
    margin-top: 2.5rem;
}

.cbc-cta-wrapper--centered {
    text-align: center;
}

.cbc-pill-btn--global {
    padding: 0.65rem 2rem;
    font-size: 15px;
}

/* Underline link (style 4 per-card) */
.cbc-underline-link {
    display: inline-block;
    margin-top: 1rem;
    color: #18211E;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s;
}

.cbc-underline-link:hover {
    color: #5D7374;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 1
   Table-like bordered grid: one outer border rectangle, inner dividers only.
   Icon + H3 title on same line. Description below.
   ═══════════════════════════════════════════════════════════════════════════ */

.cbc-table-grid--style1 {
    display: grid;
    grid-template-columns: repeat(var(--cbc-cols, 3), 1fr);
    /*border: 2px solid var(--cbc-border-color);*/
    /*border-radius: 5px;*/
    overflow: hidden;
}

.cbc-cell--style1 {
    padding: 2.5rem;
    /* border-right: 2px solid var(--cbc-border-color); */
    /* border-bottom: 2px solid var(--cbc-border-color); */
    /* align-items: center; */
    border: 1px solid var(--cbc-border-color);
}

/* Remove right border from last cell in each row */
.cbc-table-grid--style1 .cbc-cell--style1:nth-child(var(--cbc-cols, 3)n) {
    border-right: none;
}

/* Remove bottom border from cells in last row */
.cbc-table-grid--style1 .cbc-cell--style1:nth-last-child(-n + var(--cbc-cols, 3)) {
    border-bottom: none;
}



.cbc-icon--inline {
    flex-shrink: 0;
}

.cbc-icon--inline svg,
.cbc-icon--inline img {
    width: 50px;
    height: 50px;
    /*color: var(--cbc-icon-color);*/
    /*stroke: var(--cbc-icon-color);*/
}

.cbc-cell--style1 .cbc-card__title {
    margin: 0;
    line-height: 1.2em;
}

.cbc-cell--style1 .cbc-card__desc {
    /*font-size: 14px;
    color: var(--cbc-card-desc-color);*/
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 2
   bg default #DCEFE3. White rounded-border cards. Icon outline top-left.
   Bold title, desc, pink pill CTA bottom.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_2"] {
    background-color: var(--cbc-bg, transparent);
}
.cbc-card--style2 {
    /*background: #ffffff;*/
    border-radius: 5px;
    border: 2px solid #909090;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

.cbc-card--style2 .cbc-card__title {
    color: #5D7374 !important;
    font-weight: 600;
    font-size: 2em;
}

.cbc-card--style2 .cbc-card__desc {}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 3
   bg #5D7374. Title/subtitle in light #DCEFE3. WYSIWYG above in light color.
   Cards: mint #DCEFE3 bg, rounded. Icon color inherits teal.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_3"] {
    background-color: var(--cbc-bg, transparent);
}

chaps-bloc-component[data-style="style_3"] .cbc-wysiwyg {
    color: #DCEFE3;
}

.cbc-card--style3 {
    background: #DCEFE3;
    border-radius: 5px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

chaps-bloc-component[data-style="style_3"] .cbc-header {
    color: #DCEFE3;
}

.cbc-card--style3 .cbc-icon svg {
    stroke: #5D7374;
}

.cbc-card--style3 .cbc-card__title {
    color: #5D7374 !important;
    font-weight: 600;
    font-size: 2em;
    line-height: 1.2em;
}

.cbc-card--style3 .cbc-card__desc {
    color: #18211E !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 4
   bg #F2F2F3. Title left + blue underline. WYSIWYG paragraph above cards.
   White rounded-border cards. Optional icon. Per-card underline link.
   Optional global pill CTA centered.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_4"] {
    background-color: var(--cbc-bg, transparent);
}

.cbc-card--style4 {
    background: #ffffff;
    border-radius: 5px;
    /*border: 2px solid var(--cbc-border-color);*/
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cbc-card--style4 .cbc-icon svg {
    stroke: #5D7374;
}

.cbc-card--style4 .cbc-card__title {
    color: #18211E !important;
    font-weight: 600;
    font-size: 2em;
    line-height: 1.2em;
}

.cbc-card--style4 .cbc-card__desc {
    color: #18211E !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 5
   bg #F2F2F3. Title left + blue underline. No subtitle / no wysiwyg.
   Cards: white, rounded, NO border, soft shadow.
   Stat H3 42px #5D7374, mb 20px. Desc #18211E below.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_5"] {
    background-color: var(--cbc-bg, transparent);
}

.cbc-card--style5 {
    background: #ffffff;
    border-radius: 5px;
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}

.cbc-card__title--stat {
    font-size: 52px !important;
    font-weight: 700 !important;
    color: #5D7374 !important;
    /*margin-bottom: 20px !important;*/
    line-height: 1.1;
}

.cbc-card--style5 .cbc-card__desc {
    color: #18211E !important;
    /*font-size: 15px !important;*/
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 6
   bg #5D7374. Title left in #DCEFE3 + blue underline.
   WYSIWYG paragraph above in #DCEFE3.
   Cards: mint #DCEFE3 bg, rounded. Icon outline (teal stroke).
   Title #5D7374, desc #18211E.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_6"] {
    background-color: transparent;
}


chaps-bloc-component[data-style="style_6"] .cbc-wysiwyg {
    color: #DCEFE3;
}

.cbc-card--style6 {
    background: #ffffff;
    border-radius: 5px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cbc-card--style6 .cbc-icon svg {
    stroke: #5D7374;
}

.cbc-card--style6 .cbc-card__title {
    color: #5D7374 !important;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2em;
}

.cbc-card--style6 .cbc-card__desc {
    color: #5D7374;
    font-size: 24px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 7
   bg #F2F2F3. White rounded cards, soft shadow.
   Rounded-square icon (#5D7374 bg, white icon), centered, half outside top.
   H3 centered #18211E + accent span #5D7374.
   Divider. Checklist active #5D7374, disabled faded.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_7"] {
    /*background-color: var(--cbc-bg, transparent);*/
}

.cbc-grid--style7 {
    padding-top: 2.5rem;
    /* space for floating icon */
    display: grid;
    grid-template-columns: repeat(var(--cbc-cols, 3), 1fr);
    gap: 5em 3em;
}

.cbc-card--style7 {
    background: #F2F2F3;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.cbc-card__floating-icon {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    background: #5D7374;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbc-card__floating-icon svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    fill: none;
    display: block;
}

.cbc-card__floating-icon svg * {
    stroke: #ffffff;
}

.cbc-card__floating-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.cbc-card__body {
    padding: 3.25rem 2.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cbc-card--style7 .cbc-card__title {
    text-align: center;
    color: #18211E !important;
    line-height: 1.2em;
    font-weight: 700 !important;
    /*margin-bottom: 0;*/
    /*font-size: var(--cbc-card-title-size) !important;*/
}

.cbc-card__title-accent {
    display: block;
    color: #5D7374;
    font-size: 0.88em;
    font-weight: 600;
    margin-top: 2px;
}

.cbc-card__divider {
    height: 1px;
    background: #00000033;
    margin: 1rem 0;
}

.cbc-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cbc-card__list-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    /*font-size: 14px;*/
    color: #5D7374;
    font-weight: 500;
    line-height: 1.4;
}

.cbc-card__list-item--disabled {
    color: #5D737433;
}

.cbc-card__list-item--disabled .cbc-check {
    stroke: #5D737433;
}

.cbc-check {
    flex-shrink: 0;
    stroke: #5D7374;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 8
   White bg. Title left + blue underline.
   Cards: rounded border 2px #D9D9D9, icon top-left, title, desc.
   Optional pink pill CTA per card.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_8"] {
    background-color: var(--cbc-bg, transparent);
}

.cbc-card--style8 {
    background: #ffffff;
    border-radius: 5px;
    border: 2px solid #D9D9D9;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

.cbc-card--style8 .cbc-icon svg {
    stroke: #5D7374;
}

.cbc-card--style8 .cbc-card__title {
    color: #18211E !important;
    font-size: var(--cbc-card-title-size) !important;
    font-weight: var(--cbc-card-title-weight) !important;
}

.cbc-card--style8 .cbc-card__desc {
    color: #18211E !important;
}

.cbc-card--style8 .cbc-card__desc ul{
    list-style: unset;
    list-style-position: inside;
    /*margin-left: 1em;*/
}


/* ═══════════════════════════════════════════════════════════════════════════
   STYLE 9
   Similar to Style 7 but image/logo is inside the card.
   Light bg. Cards: white/light rounded, image area at top with grey bg,
   title + accent subtitle, divider, description, pink pill CTA.
   ═══════════════════════════════════════════════════════════════════════════ */

chaps-bloc-component[data-style="style_9"] {
    background-color: var(--cbc-bg, transparent);
}

.cbc-card--style9 {
    background: #EAF1EC;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cbc-card__image-area {
    /*background: #d0e4db;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2.5rem;
    min-height: 180px;
}

.cbc-card__image-area img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.cbc-card__image-area svg {
    max-width: 100%;
    max-height: 140px;
}

.cbc-card--style9 .cbc-card__body {
    padding: 1.75rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cbc-card--style9 .cbc-card__title {
    text-align: center;
    color: #18211E !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem;
    font-size: 1.8em;
    line-height: 1.2em;
}

.cbc-card--style9 .cbc-card__title span {
    color: #5D7374;
}

.cbc-card--style9 .cbc-card__title-accent {
    display: block;
    color: #5D7374;
    margin-top: 0.15rem;
}

.cbc-card--style9 .cbc-card__divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
    margin: 1rem 0;
}

.cbc-card--style9 .cbc-card__desc {
    flex: 1;
    color: #777777;
}

.cbc-card--style9 .cbc-pill-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* ============================================================
   STYLE 10 – Partnerships / Use-Cases layout
   Inspired by systransoft.com partnerships-component:
   • Sticky left column (pre-title + heading + description + optional CTA)
   • Right column: 2-column card grid
   • Cards have a frosted-glass icon floating half-outside the top edge
   ============================================================ */

chaps-bloc-component[data-style="style_10"] {
    background-color: var(--cbc-bg, transparent);
}

.cbc-grid--style10 {
    display: grid;
    grid-template-columns: 1fr;          /* mobile: stacked */
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1280px) {             /* xl+ : side-by-side */
    .cbc-grid--style10 {
        grid-template-columns: 3fr 5fr;
        gap: 2.5rem;
    }
}

.cbc-grid--style10 {
    /*background: transparent;*/
    background: #F2F2F3;
}

/* ── Left / intro column ───────────────────────────────────── */
.cbc-intro--style10 {
    /*text-align: center;*/
}

@media (min-width: 768px) {
    .cbc-intro--style10 {
        text-align: left;
    }
}

@media (min-width: 1280px) {
    .cbc-intro--style10 {
        position: sticky;
        top: 7em;
    }
}

.cbc-intro__pretitle--style10 {
    /*display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cbc-color-accent, #6dbf98);
    margin-bottom: 0.75rem;*/
}

.cbc-intro__title--style10 {
    /*font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--cbc-color-heading, #1a1a2e);
    margin-bottom: 0.875rem;*/
}

.cbc-intro__description--style10 {
    /*font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--cbc-color-text, #3d4a5c);
    margin-bottom: 1.5rem;*/
}

/* Optional CTA link in the left column */
.cbc-intro__cta--style10 {
    /*display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--cbc-color-accent, #6dbf98);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cbc-color-heading, #1a1a2e);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;*/
}

.cbc-intro__cta--style10:hover,
.cbc-intro__cta--style10:focus-visible {
    /*background-color: var(--cbc-color-accent, #6dbf98);
    color: #fff;*/
}

/* ── Right / cards column ──────────────────────────────────── */
.cbc-cards--style10 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .cbc-cards--style10 {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.5rem;
    }
}

@media (min-width: 1280px) {
    .cbc-cards--style10 {
        margin-top: 0;
    }
}

/* ── Individual card ───────────────────────────────────────── */
.cbc-card--style10 {
    position: relative;
    background-color: #FFF;
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
}

/* ── Icon + Title row ──────────────────────────────────────── */
.cbc-card__header--style10 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* ── Frosted-glass icon wrapper (now inline, not floating) ─── */
.cbc-card__icon-wrap--style10 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: #F2F2F3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cbc-card__icon-wrap--style10 img,
.cbc-card__icon-wrap--style10 svg {
    width: 1.625rem;
    height: 1.625rem;
    object-fit: contain;
    display: block;
}

/* ── Card title ────────────────────────────────────────────── */
.cbc-card__title--style10 {
    /*font-size: clamp(0.9375rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--cbc-color-heading, #1a1a2e);
    margin: 0;*/
}

/* ── Card description (optional) ───────────────────────────── */
.cbc-card__text--style10 {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cbc-color-text, #3d4a5c);
    margin-bottom: 0.75rem;
    flex: 1;
}

/* ── Card CTA button ───────────────────────────────────────── */
.cbc-card__link--style10 {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.4375rem 1.125rem;
    border: 2px solid var(--cbc-color-accent, #6dbf98);
    border-radius: 9999px;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--cbc-color-heading, #1a1a2e);
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cbc-card__link--style10:hover,
.cbc-card__link--style10:focus-visible {
    background-color: var(--cbc-color-accent, #6dbf98);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    .cbc-grid,
    .cbc-table-grid--style1,
    .cbc-grid--style7 {
        grid-template-columns: repeat(min(var(--cbc-cols, 3), 2), 1fr);
    }

    .cbc-table-grid--style1 .cbc-cell--style1:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 640px) {

    .cbc-grid,
    .cbc-table-grid--style1,
    .cbc-grid--style7 {
        grid-template-columns: 1fr;
    }

    .cbc-table-grid--style1 .cbc-cell--style1 {
        border-right: none;
    }

    .cbc-card__floating-icon {
        width: 48px;
        height: 48px;
        top: -24px;
    }

    chaps-bloc-component {
        padding: 40px 0;
    }
}