/* ── Image + Text Block ──────────────────────────────────── */

.image-text {
    padding: 5rem 0;
}

/* ── Side-by-side layout ──────────────────────────────────── */
.image-text__inner {
    display: flex;
    align-items: center;
    gap: 4rem;
}

/* Image right: reverse visual order without changing DOM */
.image-text--right .image-text__inner {
    flex-direction: row-reverse;
}

/* Column sizing — driven by CSS vars set inline from PHP */
.image-text__image-col   { flex: var(--it-img-flex, 1); }
.image-text__content-col { flex: var(--it-content-flex, 1); }

/* Reduce gap at intermediate widths before stacking */
@media (max-width: 1280px) {
    .image-text__inner { gap: 3rem; }
}
@media (max-width: 1100px) {
    .image-text__inner { gap: 2.5rem; }
}

/* ── Image ────────────────────────────────────────────────── */
/* Layered colored borders: navy sits top-left, red sits bottom-right.
   Two offset hard-edged shadows build the 3D stacked-rectangle effect. */
.image-text__image-col {
    padding: 14px;
}
.image-text__image-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    object-fit: cover;
    box-shadow:
        -14px -14px 0 0 var(--wp--preset--color--secondary, #0B2169),
         14px  14px 0 0 var(--wp--preset--color--primary,   #B00000);
}

@media (max-width: 560px) {
    .image-text__image-col { padding: 8px; }
    .image-text__image-col img {
        box-shadow:
            -8px -8px 0 0 var(--wp--preset--color--secondary, #0B2169),
             8px  8px 0 0 var(--wp--preset--color--primary,   #B00000);
    }
}

/* ── Content ──────────────────────────────────────────────── */
.image-text__heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 1.25rem;
}

/* ── Rich text body ───────────────────────────────────────── */
.image-text__body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--wp--preset--color--off-black, #1a1a1a);
}

.image-text__body p { margin: 0 0 1rem; }
.image-text__body p:last-child { margin-bottom: 0; }

.image-text__body ul,
.image-text__body ol {
    margin: 0 0 1rem;
    padding-left: 1.375rem;
}
.image-text__body li { margin-bottom: .375rem; }

.image-text__body a {
    color: var(--wp--preset--color--primary, #B00000);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity .15s;
}
.image-text__body a:hover { opacity: .75; }

.image-text__body strong { font-weight: 700; }
.image-text__body em     { font-style: italic; }

/* ── CTA row ──────────────────────────────────────────────── */
.image-text__ctas {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Primary CTA button — identical to .site-header__cta */
.image-text__btn--primary {
    display: inline-flex;
    align-items: center;
    gap: .875rem;
    padding: .7rem 1.5rem .7rem 1.125rem;
    background-color: var(--it-btn1-bg, var(--wp--preset--color--primary, #B00000));
    color: var(--it-btn1-color, #fff);
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgb(var(--it-btn1-accent, var(--nifty-secondary-rgb)) / 0);
    transition: box-shadow .35s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
}
.image-text__btn--primary:hover {
    color: var(--it-btn1-color, #fff);
    box-shadow: 5px 5px 0 0 rgb(var(--it-btn1-accent, var(--nifty-secondary-rgb)) / 1);
}

.image-text__cta-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .9;
}

.image-text__cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
}

.image-text__cta-main {
    display: block;
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1.2;
}

.image-text__cta-sub {
    display: block;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
    opacity: .85;
    line-height: 1.3;
}

/* Secondary CTA button — phone link styled as a solid secondary button.
   align-self: stretch so it matches the primary CTA's height regardless of
   whether the primary has a subtext line. */
.image-text__btn--secondary {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: .875rem;
    padding: .7rem 1.5rem .7rem 1.125rem;
    background-color: var(--it-btn2-bg, var(--wp--preset--color--secondary, #0B2169));
    color: #fff;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgb(var(--it-btn2-accent, var(--nifty-primary-rgb)) / 0);
    transition: box-shadow .35s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
}
.image-text__btn--secondary .image-text__cta-main {
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.2;
    text-transform: none;
}
.image-text__btn--secondary:hover {
    color: #fff;
    box-shadow: 5px 5px 0 0 rgb(var(--it-btn2-accent, var(--nifty-primary-rgb)) / 1);
}

/* ── Mobile: image stacks on top ──────────────────────────── */
@media (max-width: 1024px) {

    .image-text {
        padding: 3.5rem 0;
    }

    .image-text__inner,
    .image-text--right .image-text__inner {
        flex-direction: column;
        gap: 2rem;
    }

    /* Reset column sizing — full width on mobile, content centered */
    .image-text__image-col,
    .image-text__content-col {
        flex: none;
        width: 100%;
    }

    .image-text__content-col { text-align: center; }
    .image-text__ctas { justify-content: center; }
}

@media (max-width: 560px) {
    /* Both buttons stretch to the same (full) width so the primary CTA
       and the phone button read as a matched pair instead of one
       looking wider than the other. */
    .image-text__ctas {
        flex-direction: column;
        align-items: stretch;
    }
    .image-text__btn--primary,
    .image-text__btn--secondary {
        justify-content: center;
    }
}