/**
 * Our Benefits Section Block Styles
 *
 * @package ACF Child Theme
 */

:root {
    --color-yellow: #e3cd51;
    --color-light: #e7e9ed;
    --color-text: #595959;
    --color-teal: #375663;
    --color-white: #ffffff;
    --color-apigpen: #af623d;
    --color-avaxzipen: #54b141;
    --color-amedipen: #4c93b5;
    --color-asolopen: #5b5b5b;
    --font-primary: 'Aptos', sans-serif;
}

/* ── Section Wrapper — full-width background driven by ACF colour picker ──── */
.obs-section {
    width: 100%;
    padding: 80px 0;
    margin-bottom: 0 !important;
}

/* ── Content Container — constrained to WordPress layout width ──────────── */
.obs-section__container {
    max-width: var(--theme-normal-container-max-width, 1290px);
    width: var(--theme-container-width, 100%);
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Section Header ──────────────────────────────────────────────────────── */
.obs-section__header {
    text-align: center;
    margin-bottom: 50px;
    display: none;
}

.obs-section__title {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--color-text, #595959);
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.obs-section__underline {
    width: 120px;
    height: 4px;
    margin: 0 auto;
    background-color: #54b141; /* overridden by inline style from ACF colour picker */
}

/* ── Cards — shared white card styles ───────────────────────────────────── */
.obs-card {
    background-color: var(--color-white, #ffffff);
    padding: 46px 50px;
    margin-bottom: 60px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.obs-card:last-child {
    margin-bottom: 0;
}

/* ── Card Description ────────────────────────────────────────────────────── */
.obs-card__description {
    text-align: center;
    margin-bottom: 36px;
    font-family: var(--font-primary, 'Aptos', sans-serif);
    color: var(--color-text, #595959);
}

.obs-card__description h1, h2, h3, h4, h5, h6 {
    color: var(--color-text, #595959);
    font-size: 1.75rem;
}

.obs-card__description p {
    font-size: 1.5rem;
    line-height: 1.65;
    margin: 0 0 10px;
}



.obs-card__description p:last-child {
    margin-bottom: 0;
}

/* Bold / strong inside the description inherits site colour */
.obs-card__description strong,
.obs-card__description b {
    
    font-weight: 700;
}

.obs-card__description--centered {
    text-align: center;
}

/* ── First Card: 4-column image grid ─────────────────────────────────────── */
.obs-card__images-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 24px;
    align-items: start;
    justify-items: center;
}

.obs-card__image-item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.obs-card__image {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* ── Second Card: Items grid (container images side-by-side) ─────────────── */
.obs-card__items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 40px;
    align-items: start;
}

.obs-card__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.obs-card__item-image-wrap {
    width: 100%;
    /* max-width: 340px; */
    margin-bottom: 18px;
}

.obs-card__item-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.obs-card__item-text {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 1.5rem;
    color: var(--color-text, #595959);
    text-align: center;
    line-height: 1.6;
}

.obs-card__item-text p {
    margin: 0 0 6px;
}

.obs-card__item-text p:last-child {
    margin-bottom: 0;
}

.obs-card__item-text strong,
.obs-card__item-text b {
    font-weight: 700;
}

/* ── Second Card: Highlighted statement with icon ────────────────────────── */
.obs-card__highlight {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 0 20px;
    margin-left: 100px;
    margin-right: 100px;
    margin-bottom: 20px;
}

.obs-card__highlight-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: 2px;
}

.obs-card__highlight-text {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text, #595959);
    line-height: 1.55;
}

.obs-card__highlight-text p {
    margin: 0;
}

/* ── Second Card: Small footnote text ────────────────────────────────────── */
.obs-card__small-text {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 1rem;
    color: var(--color-text, #595959);
    opacity: 0.65;
    text-align: center;
    line-height: 1.5;
    padding-top: 16px;
}

.obs-card__small-text p {
    margin: 0;
}

/* ── Tablet: 769px – 1023px ──────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {
    .obs-section {
        padding: 60px 0;
    }

    .obs-section__header {
        margin-bottom: 40px;
    }

    .obs-section__title {
        font-size: 2.25rem;
    }

    .obs-section__underline {
        width: 90px;
        height: 3px;
    }

    .obs-card {
        padding: 36px 32px;
        margin-bottom: 24px;
    }


    .obs-card__description h1, h2 {
        font-size: 1.5rem !important;
    }

    .obs-card__description p {
        font-size: 1rem;
    }

    .obs-card__item-text {
        font-size: 1.25rem;
    }

    .obs-card__images-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 16px;
    }

    .obs-card__items-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 24px;
    }

    .obs-card__item-image-wrap {
        max-width: 280px;
    }
}

/* ── Mobile: up to 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .obs-section {
        padding: 48px 0;
    }

    .obs-section__header {
        margin-bottom: 32px;
    }

    .obs-section__title {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    .obs-section__underline {
        width: 60px;
        height: 3px;
    }

    .obs-card {
        padding: 28px 20px;
        margin-bottom: 20px;
        border-radius: 6px;
    }

    .obs-card__description {
        margin-bottom: 24px;
    }

    .obs-card__description h1, h2 {
        font-size: 1.1rem;
    }

    .obs-card__description p {
        font-size: 0.9rem;
    }

    .obs-card__item-text {
        font-size: 1rem;
    }

    /* 2 columns on mobile for the image grid */
    .obs-card__images-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 12px;
    }

    /* Stack container items on mobile */
    .obs-card__items-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .obs-card__item-image-wrap {
        max-width: 260px;
    }

    .obs-card__highlight {
        gap: 12px;
        padding: 0 0 16px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .obs-card__highlight-icon {
        width: 24px;
        height: 24px;
    }

    .obs-card__highlight-text {
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    .obs-card__small-text {
        font-size: 0.7rem;
    }
}