/* === Block base === */
.block-values {
    margin-block-end: 100px !important;
}
.block-values .acf-innerblocks-container{
    max-width: 580px;
}
.block-values .values-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.block-values .values-heading {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.block-values .values-description {
    font-size: 18px;
    line-height: 28px;
    max-width: 700px;
}

/* === Rows & items === */

.block-values .value-cards {
    margin: 80px 0;
}

.block-values .values-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* 2 items per row; JS toggles is-wide / is-narrow */
.block-values .value-item {
    flex: 0 0 50%;
    transition: flex-basis 0.4s ease;
}

/* Wide / narrow behavior */
.block-values .value-item.is-wide {
    flex: 0 0 66%;
}
.block-values .value-item.is-narrow {
    flex: 0 0 33%;
}

/* === Card layout === */

.block-values .value-card {
    display: flex;
    align-items: stretch;
    height: 510px;            /* content + image same height */
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Inner content area (fixed width, padded, stable text width) */
.block-values .value-inner {
    flex: 0 0 380px;          /* keep content width steady */
    max-width: 380px;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
}

/* Text color from select (white/black, default white) */
.block-values .value-inner--text-white {
    color: #ffffff;
}
.block-values .value-inner--text-black {
    color: #000000;
}
.block-values .value-inner--text-white h3,
.block-values .value-inner--text-white p,
.block-values .value-inner--text-black h3,
.block-values .value-inner--text-black p {
    color: inherit;
}

/* Content: align to bottom, icon → title → text → button */
.block-values .value-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* stack sits at bottom */
    width: 100%;
}

/* Icon before title */
.block-values .value-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}
.block-values .value-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Title */
.block-values .value-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.75px;
    margin: 0 0 15px;
}

/* Text just above button section */
.block-values .value-text-wrap {
    margin-bottom: 20px;
}
.block-values .value-text {
    font-size: 16px;
    line-height: 1.5;
}

/* Button area: reserve vertical space even when no button */
.block-values .value-link-wrap {
    min-height: 56px;
    display: flex;
    align-items: flex-end;
}

/* === Image area === */

/* Image is outside padding but inside card radius; same height */
.block-values .value-image {
    flex: 1 1 auto;
    display: none;              /* only shown when wide + has-image */
    height: 100%;
}
.block-values .value-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Show image only when item is wide and has-image */
.block-values .value-item.has-image.is-wide .value-image {
    display: block;
}

/* === Responsive === */

/* Medium screens – slightly narrower content */
@media (max-width: 1200px) {
    .block-values .value-inner {
        flex: 0 0 340px;
        max-width: 340px;
        padding: 24px;
    }
}

/* Tablets – stack items vertically but keep image logic */
@media (max-width: 900px) {
    .block-values .values-row {
        flex-direction: column;
    }

    .block-values .value-item,
    .block-values .value-item.is-wide,
    .block-values .value-item.is-narrow {
        flex: 0 0 100%;
    }

    .block-values .value-card {
        flex-direction: column-reverse;
        height: auto;
        min-height: 0;
    }

    .block-values .value-inner {
        flex: 0 0 auto;
        max-width: 100%;
        height: auto;
    }

    .block-values .value-image {
        display: block;         /* show image below content on mobile if exists */
        height: 320px;
    }
}

/* Small screens – typography & padding adjustments */
@media (max-width: 600px) {
    .block-values .value-title {
        font-size: 24px;
        line-height: 30px;
    }

    .block-values .value-text {
        font-size: 16px;
        line-height: 24px;
    }

    .block-values .value-inner {
        padding: 20px;
    }
}