/**
 * Block: Simple Textual Cards
 *
 * Uses CSS subgrid to vertically align image / title / description
 * across cards in the same visual row.
 *
 * Gradient border via the double-background technique:
 *   background-image (padding-box) + border-image (border-box)
 *   with border: Xpx solid transparent.
 */

 .kf-simple-textual-cards {
    border: none;
 }

/* ==========================================================================
   Grid container
   ========================================================================== */

   .kf-simple-textual-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* ==========================================================================
   Card — gradient border + subgrid
   ========================================================================== */

.kf-simple-textual-cards__card {
    /* Subgrid: span 3 parent rows (image / title / description) */
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-items: start;
    box-sizing: border-box;
    padding: 30px;
    color: var(--kf-stc-color, #1A1A1A);
    gap: 10px;

    /* Transparent border acts as the "thickness" for the gradient border */
    border: var(--kf-stc-border-width, 2px) solid transparent;
    border-radius: var(--kf-stc-border-radius, 20px);

    /* Fallback: simple linear gradient (sRGB interpolation) */
    background:
        linear-gradient(
            to bottom right,
            var(--kf-stc-bg-start, #fff),
            var(--kf-stc-bg-end, #fff)
        ) padding-box,
        linear-gradient(
            to bottom right,
            var(--kf-stc-border-start, #5F61FF),
            var(--kf-stc-border-end, #C5EAFF)
        ) border-box;
}

/* Enhanced: smoother gradients via OKLCH perceptual midpoint */
@supports (color: color-mix(in oklch, #000, #fff)) {
    .kf-simple-textual-cards__card {
        background:
            linear-gradient(
                to bottom right,
                var(--kf-stc-bg-start, #fff),
                color-mix(in oklch, var(--kf-stc-bg-start, #fff), var(--kf-stc-bg-end, #fff)),
                var(--kf-stc-bg-end, #fff)
            ) padding-box,
            linear-gradient(
                to bottom right,
                var(--kf-stc-border-start, #5F61FF),
                color-mix(in oklch, var(--kf-stc-border-start, #5F61FF), var(--kf-stc-border-end, #C5EAFF)),
                var(--kf-stc-border-end, #C5EAFF)
            ) border-box;
    }
}

/* ==========================================================================
   Card children
   ========================================================================== */

.kf-simple-textual-cards__image {
    display: flex;
    align-items: flex-start;
    min-height: 0; /* collapses when no image is present */
}

.kf-simple-textual-cards__img {
    height: auto;
    max-width: 100%;
    display: block;
}

.kf-simple-textual-cards__title.kf-simple-textual-cards__title {
    margin: 0;
    margin-top: .3em;
    padding: 0;
    color: inherit;

    font-family: Degular;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--x-32);
    line-height: 1.125;

}

.kf-simple-textual-cards__description {
    margin: 0;
    padding: 0;
    color: inherit;

    font-weight: 400;
    font-size: var(--wp--preset--font-size--default);
    line-height: 130%;

}

.kf-simple-textual-cards__description p {
    margin: 0;
}

@media (max-width: 1319px) {
    .kf-simple-textual-cards__grid {
        gap: 20px;
    }
}

/* ==========================================================================
   Mobile — single column, no subgrid
   ========================================================================== */

@media (max-width: 767px) {
    .kf-simple-textual-cards__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kf-simple-textual-cards__card {
        grid-row: auto;                        /* stop spanning 3 parent rows */
        grid-template-rows: auto auto auto;    /* own rows instead of subgrid */
        gap: 12px;
        padding: 20px 24px;
    }
}