/* ==========================================================================
   ANAZ — CTA banner ("CTA" Elementor widget)
   Adapted from html/css/cta.css. Requires assets/css/base.css.

   Shallow horizontal banner: eyebrow + split-colour heading + description,
   a thin divider and an orange pill button, framed by sharp angular
   geometry entering from both edges.

   Class map: .cta-section → .monks-cta, .cta-section__* → .monks-cta__*,
   --cta-* → --monks-cta-*. Child rules are scoped under the section class so
   Elementor's `.elementor a` reset (box-shadow) and kit typography/link
   colours never override the design. Elementor style controls use
   `{{WRAPPER}} …` selectors, which are always more specific.

   Horizontal metrics use container query units (cqi) of the banner, so the
   layout keeps the reference proportions at any width and only wraps or
   stacks when the banner itself becomes narrow — inside any Elementor
   column, not only at viewport breakpoints.

   WordPress additions (not in the source): button icon wrapper + icon
   position, "no button" layout, the colour/size tokens exposed to the
   Elementor controls. Defaults are identical to the source.
   ========================================================================== */

.monks-cta {
    --monks-cta-navy: var(--anaz-navy, #0B2D49);
    --monks-cta-orange: var(--anaz-orange, #FF6500);
    --monks-cta-orange-dark: var(--anaz-orange-dark, #E85A00);
    --monks-cta-eyebrow: #4A5A70;
    --monks-cta-text: #4F5D75;
    --monks-cta-divider: #C9D3DF;
    --monks-cta-line: #FF7A1F;
    --monks-cta-container: 1880px;
    --monks-cta-ease: var(--anaz-ease, cubic-bezier(0.22, 1, 0.36, 1));

    font-family: var(--anaz-font, "Manrope", "Inter", "Segoe UI", Arial, sans-serif);
}

.monks-cta .monks-cta__container {
    /* width: min(100% - 2 * var(--anaz-gutter, 24px), var(--monks-cta-container)); */
    width: 100%;
    margin-inline: auto;
}

/* ---------------- Banner ---------------- */

.monks-cta .monks-cta__banner {
    /* Geometry + spacing, tuned against a ~1950px-wide reference banner */
    --monks-cta-decor-w: clamp(120px, 14.2cqi, 280px);
    --monks-cta-pad-start: clamp(128px, 12.4cqi, 250px);
    --monks-cta-pad-end: clamp(96px, 8.6cqi, 170px);
    --monks-cta-pad-block: clamp(28px, 2.8cqi, 56px);
    --monks-cta-gap: clamp(28px, 2.6cqi, 52px);

    container-type: inline-size;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #FFF6EF;
    background-image:
        radial-gradient(120% 140% at 0% 50%, rgba(255, 228, 207, 0.55), transparent 55%),
        radial-gradient(90% 140% at 100% 50%, rgba(255, 232, 214, 0.5), transparent 50%),
        linear-gradient(105deg, #FFF6EF, #FFFCF9 55%, #FFF8F2);
    box-shadow: 0 28px 60px -34px rgba(255, 101, 0, 0.22), 0 8px 24px -18px rgba(11, 45, 73, 0.12);
}

/* ---------------- Decorations ---------------- */

.monks-cta .monks-cta__decoration {
    position: absolute;
    inset-block: 0;
    z-index: 0;
    width: var(--monks-cta-decor-w);
    height: 100%;
    max-width: none;
    pointer-events: none;
}

.monks-cta .monks-cta__decoration--left {
    left: 0;
}

.monks-cta .monks-cta__decoration--right {
    right: 0;
}

.monks-cta .monks-cta__shape-peach {
    opacity: 0.85;
}

.monks-cta .monks-cta__shape-orange {
    opacity: 0.9;
}

.monks-cta .monks-cta__shape-line {
    fill: none;
    stroke: var(--monks-cta-line);
    stroke-width: 1.5;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    opacity: 0.85;
}

.monks-cta.monks-cta--plain .monks-cta__decoration {
    display: none;
}

/* ---------------- Layout ---------------- */

.monks-cta .monks-cta__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: var(--monks-cta-gap);
    padding: var(--monks-cta-pad-block) var(--monks-cta-pad-end) var(--monks-cta-pad-block) var(--monks-cta-pad-start);
}

.monks-cta.monks-cta--plain .monks-cta__inner {
    padding-inline: clamp(24px, 5cqi, 96px);
}

/* No button: the content takes the full row (the divider is not printed) */
.monks-cta.monks-cta--no-action .monks-cta__inner {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------------- Content ---------------- */

.monks-cta .monks-cta__eyebrow {
    display: flex;
    align-items: center;
    justify-content: var(--monks-cta-justify, flex-start);
    gap: 0.95em;
    margin: 0 0 clamp(10px, 1cqi, 18px);
    color: var(--monks-cta-eyebrow);
    font-size: clamp(0.75rem, 0.82cqi, 1.0625rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.2;
    text-transform: uppercase;
}

.monks-cta .monks-cta__eyebrow::before {
    content: "";
    flex: none;
    width: 2.6em;
    height: 2px;
    background: var(--monks-cta-orange);
}

.monks-cta .monks-cta__heading {
    margin: 0;
    color: var(--monks-cta-navy);
    font-family: inherit;
    font-size: clamp(1.75rem, 2.85cqi, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
    text-wrap: balance;
}

.monks-cta .monks-cta__highlight {
    color: var(--monks-cta-orange);
}

.monks-cta .monks-cta__description {
    margin: clamp(8px, 0.8cqi, 16px) 0 0;
    color: var(--monks-cta-text);
    font-size: clamp(0.975rem, 1.22cqi, 1.625rem);
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
}

/* ---------------- Divider ---------------- */

.monks-cta .monks-cta__divider {
    align-self: center;
    width: 1px;
    height: clamp(72px, 6cqi, 124px);
    background: var(--monks-cta-divider);
}

/* ---------------- Button ---------------- */

.monks-cta .monks-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--monks-cta-icon-gap, 0.9em);
    min-width: clamp(220px, 19.2cqi, 380px);
    min-height: clamp(56px, 4.4cqi, 88px);
    padding: 0.7em 1.8em;
    border-radius: 999px;
    background: var(--monks-cta-button-bg, var(--monks-cta-orange));
    color: var(--monks-cta-button-color, var(--anaz-white, #FFFFFF));
    font-family: inherit;
    font-size: clamp(1rem, 1.3cqi, 1.625rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 24px -14px rgba(255, 101, 0, 0.55);
    transition: background-color 0.25s var(--monks-cta-ease), color 0.25s var(--monks-cta-ease), border-color 0.25s var(--monks-cta-ease), box-shadow 0.25s var(--monks-cta-ease);
}

.monks-cta .monks-cta__button--icon-before {
    flex-direction: row-reverse;
}

/* Icon wrapper: the built-in arrow (1.1em, as in the source) or an icon
   from Elementor's library. */
.monks-cta .monks-cta__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--monks-cta-icon-size, 1.1em);
    height: var(--monks-cta-icon-size, 1.1em);
    font-size: var(--monks-cta-icon-size, 1.1em);
    line-height: 1;
    transition: transform 0.25s var(--monks-cta-ease);
}

.monks-cta .monks-cta__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.monks-cta .monks-cta__icon svg:not(.monks-cta__arrow) {
    fill: currentColor;
}

.monks-cta .monks-cta__arrow {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.monks-cta .monks-cta__button:hover {
    background: var(--monks-cta-button-hover-bg, var(--monks-cta-orange-dark));
    color: var(--monks-cta-button-color, var(--anaz-white, #FFFFFF));
    box-shadow: 0 12px 26px -12px rgba(232, 90, 0, 0.6);
}

.monks-cta .monks-cta__button:hover .monks-cta__icon,
.monks-cta .monks-cta__button:focus-visible .monks-cta__icon {
    transform: translateX(5px);
}

.monks-cta .monks-cta__button--icon-before:hover .monks-cta__icon,
.monks-cta .monks-cta__button--icon-before:focus-visible .monks-cta__icon {
    transform: translateX(-5px);
}

.monks-cta .monks-cta__button:focus-visible {
    outline: 3px solid var(--monks-cta-navy);
    outline-offset: 4px;
}

/* ==========================================================================
   Responsive — driven by the banner's own width
   ========================================================================== */

/* Mid-size banners (≈ standard desktop / iPad landscape): the heading may
   take two lines rather than shrinking below a prominent size. */
@container (max-width: 1240px) {
    .monks-cta .monks-cta__inner {
        --monks-cta-pad-start: clamp(112px, 12cqi, 150px);
        --monks-cta-pad-end: clamp(72px, 7cqi, 110px);
        --monks-cta-gap: clamp(24px, 3cqi, 40px);
    }

    .monks-cta .monks-cta__heading {
        font-size: clamp(1.75rem, 3.5cqi, 2.6rem);
    }

    .monks-cta .monks-cta__description {
        font-size: clamp(0.975rem, 1.6cqi, 1.2rem);
    }

    .monks-cta .monks-cta__eyebrow {
        font-size: 0.8125rem;
    }

    .monks-cta .monks-cta__button {
        min-width: 0;
        font-size: 1.0625rem;
    }

    /* The geometry is cropped here: fade its inner edge instead of a hard cut */
    .monks-cta .monks-cta__decoration {
        -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
        mask-image: linear-gradient(to right, #000 55%, transparent);
    }

    .monks-cta .monks-cta__decoration--right {
        -webkit-mask-image: linear-gradient(to left, #000 55%, transparent);
        mask-image: linear-gradient(to left, #000 55%, transparent);
    }

    .monks-cta .monks-cta__decoration--left .monks-cta__shape-line {
        display: none;
    }
}

/* Stacked (≈ iPad portrait and below) */
@container (max-width: 820px) {
    .monks-cta .monks-cta__decoration {
        width: clamp(40px, 13cqi, 104px);
    }

    .monks-cta .monks-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        padding: 36px clamp(56px, 14cqi, 112px) 36px clamp(60px, 16cqi, 124px);
    }

    .monks-cta .monks-cta__divider {
        display: none;
    }

    .monks-cta .monks-cta__action {
        justify-self: start;
    }

    .monks-cta .monks-cta__heading {
        font-size: clamp(1.625rem, 5.4cqi, 2.4rem);
    }

    .monks-cta .monks-cta__description {
        font-size: clamp(0.975rem, 2.4cqi, 1.125rem);
    }
}

/* Mobile */
@container (max-width: 520px) {
    .monks-cta .monks-cta__decoration--left {
        width: 34px;
    }

    .monks-cta .monks-cta__decoration--right {
        display: none;
    }

    .monks-cta .monks-cta__shape-line {
        display: none;
    }

    .monks-cta .monks-cta__inner {
        row-gap: 20px;
        padding: 28px 22px 28px 52px;
    }

    .monks-cta .monks-cta__eyebrow {
        font-size: 0.6875rem;
        letter-spacing: 0.18em;
    }

    .monks-cta .monks-cta__heading {
        font-size: clamp(1.5rem, 7.4cqi, 1.875rem);
    }

    .monks-cta .monks-cta__description {
        font-size: 0.9375rem;
    }

    .monks-cta .monks-cta__action,
    .monks-cta .monks-cta__button {
        justify-self: stretch;
        width: 100%;
    }

    .monks-cta .monks-cta__button {
        min-height: 54px;
        padding-inline: 1.2em;
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .monks-cta .monks-cta__container {
        width: min(100% - 32px, var(--monks-cta-container));
    }
}