/**
 * Banner Section Block Styles
 *
 * @package ACF Child Theme
 */

:root {
    --color-yellow: #e3cd51;
    --color-light: #e7e9ed;
    --color-text: #595959;
    --color-teal: #2d5765;
    --color-white: #ffffff;
    --font-primary: 'Aptos', sans-serif;
}

/* ── Section Wrapper — full-width light background ───────────────────────── */
.banner-section {
    background-color: var(--color-light, #e7e9ed);
    width: 100%;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding: 60px 0 80px;

}

/* ── Header: titles + button, WordPress layout width ─────────────────────── */
.banner-section__header {
    width: 100%;
    padding: 60px 0 0;
    position: relative;
    z-index: 1;
}

.banner-section__container {
    max-width: var(--theme-normal-container-max-width, 1290px);
    width: var(--theme-container-width, 100%);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* ── Title ───────────────────────────────────────────────────────────────── */
.banner-section__title {
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--color-text, #595959);
    line-height: 1.25;
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-section__title-line {
    display: block;
}

/* ── Button — centred with slight right offset ───────────────────────────── */
.banner-section__btn-wrap {
    display: flex;
    justify-content: center;
    padding-left: 60px;
}

.banner-section__btn {
    display: inline-block;
    /*padding: 20px 40px;*/
    font-family: var(--font-primary, 'Aptos', sans-serif);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-text, #595959);
    /*background-color: var(--color-teal, #2d5765);*/
    border: none;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    line-height: 1;
}

/* ── Image — WordPress container width ───────────────────────────────────── */
.banner-section__image-wrap {
    max-width: var(--theme-normal-container-max-width, 1290px);
    width: var(--theme-container-width, 100%);
    margin: 0 auto;
    padding: 0 20px;
    line-height: 0;
    position: relative;
    z-index: 0;
}

.banner-section__image {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1023px) {
    .banner-section__header {
        padding: 50px 0 32px;
    }

    .banner-section__title {
        font-size: 2rem;
    }

    .banner-section__btn-wrap {
        padding-left: 0;
    }

    .banner-section__btn {
        font-size: 1.75rem;
    }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .banner-section {
        padding: 20px 0 40px;
    
    }
    .banner-section__header {
        padding: 40px 0 28px;
    }

    .banner-section__title {
        font-size: 2rem;
    }

    .banner-section__btn-wrap {
        padding-left: 0;
        justify-content: center;
    }

    .banner-section__btn {
        font-size: 1.5rem;
        /*padding: 12px 28px;*/
    }

    .banner-section__image-wrap {
        margin-top: 0;
    }
}