/* blocks_card_grid — scoped styles. Section header + responsive icon-card
   grid. Typography deliberately mirrors the shared content-column partial
   (blocks_partials) so a card grid reads as part of the same page.

   Written as plain CSS rather than Tailwind utilities because WindPress only
   JIT-compiles from the admin UI — new utility classes wouldn't be in the
   cache. See blocks-shortcode skill, "WindPress / Tailwind caveat". */

.blocks-card-grid {
    position: relative;
    box-sizing: border-box;
}

/* Any section carrying a background breaks out of the padded .site_container
   so the colour runs edge to edge, same pattern as blocks_increase_conversion.
   `z-index` matters: the theme's .header-shader-overlay is a 1000px absolutely
   positioned decoration, and without a stacking bump its tail paints over an
   in-flow background and cuts a visible edge across the block. */
.blocks-card-grid--has-bg,
.blocks-card-grid--dark {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
}

.blocks-card-grid--dark {
    background: #130041;
}

.bcg__inner {
    box-sizing: border-box;
    max-width: 1700px;
    margin: 0 auto;
    padding: 64px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
@media (min-width: 768px) {
    .bcg__inner {
        padding: 88px 32px;
        gap: 52px;
    }
}
@media (min-width: 1024px) {
    .bcg__inner {
        padding: 120px 32px;
        gap: 64px;
    }
}

/* Full-bleed variants mirror .site_container's horizontal rhythm (1280px cap,
   20px gutter) so their text starts on the same vertical line as the hero and
   the rest of the page, even though the background runs edge to edge. */
.blocks-card-grid--has-bg .bcg__inner,
.blocks-card-grid--dark .bcg__inner {
    max-width: 1280px;
    padding-left: 20px;
    padding-right: 20px;
}

/* ---- Section header ---- */

.bcg__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 760px;
    min-width: 0;
}
.blocks-card-grid--center .bcg__header {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.bcg__eyebrow {
    margin: 0;
    color: #5e4c92;
    font-weight: 700;
    font-size: 13.75px;
    line-height: 17px;
    letter-spacing: 0.275px;
    text-transform: uppercase;
}
.blocks-card-grid--dark .bcg__eyebrow {
    color: #dcbbf5;
}

.bcg__h2 {
    margin: 0;
    color: #130041;
    font-weight: 900;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
@media (min-width: 1024px) {
    .bcg__h2 {
        font-size: 50px;
    }
}
.bcg__h2 i,
.bcg__h2 em {
    font-style: italic;
}
.blocks-card-grid--dark .bcg__h2 {
    color: #ffffff;
}

.bcg__intro {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: #3d464d;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 680px;
}
@media (min-width: 768px) {
    .bcg__intro {
        font-size: 16px;
    }
}
.bcg__intro p {
    margin: 0;
    /* The theme styles bare `p` with its own colour, which beats inheritance
       from .bcg__intro — so the colour has to be set on the <p> itself. */
    color: inherit;
}
.bcg__intro a {
    color: #5e4c92;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blocks-card-grid--dark .bcg__intro,
.blocks-card-grid--dark .bcg__intro p {
    color: #cfc6e8;
}
.blocks-card-grid--dark .bcg__intro a {
    color: #dcbbf5;
}

/* ---- Card grid ---- */

.bcg__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}
@media (min-width: 640px) {
    .bcg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
@media (min-width: 1180px) {
    .blocks-card-grid--cols-3 .bcg__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
    .blocks-card-grid--cols-4 .bcg__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

.bcg__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 22px 26px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #eeeded;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (min-width: 1180px) {
    .bcg__card {
        padding: 28px 26px 30px;
        border-radius: 20px;
    }
}
.bcg__card:hover {
    transform: translateY(-3px);
    border-color: #d9d9d9;
    box-shadow: 0 14px 24px -14px rgba(19, 0, 65, 0.28);
}

.blocks-card-grid--dark .bcg__card {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.13);
}
.blocks-card-grid--dark .bcg__card:hover {
    border-color: rgba(220, 187, 245, 0.45);
    box-shadow: none;
}

.bcg__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
}
.bcg__chip svg {
    display: block;
    width: 21px;
    height: 21px;
}

.bcg__card-title {
    margin: 0;
    color: #130041;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.28;
    letter-spacing: -0.005em;
}
@media (min-width: 1180px) {
    .bcg__card-title {
        font-size: 19px;
    }
}
.blocks-card-grid--dark .bcg__card-title {
    color: #ffffff;
}

.bcg__card-body {
    margin: 0;
    color: #3d464d;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
}
.bcg__card-body a {
    color: #5e4c92;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.blocks-card-grid--dark .bcg__card-body {
    color: #cfc6e8;
    font-weight: 400;
}
.blocks-card-grid--dark .bcg__card-body a {
    color: #dcbbf5;
}

@media (prefers-reduced-motion: reduce) {
    .bcg__card {
        transition: none;
    }
    .bcg__card:hover {
        transform: none;
    }
}