/**
 * Zamseed CTA Banner Widget
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Section
   ========================================================================== */

/*
 * The background is painted from two custom properties rather than from the
 * properties directly, so that a preset and an Elementor control can both set
 * it and the control still wins.
 *
 * Before this, changing Background Color did nothing on either Agro Dealers
 * preset, for two different reasons: the support preset declared
 * `background-color: #ffffff !important`, which outranks Elementor's generated
 * rule outright; and the primary preset painted an opaque `background-image`
 * gradient over whatever colour the control had set. Presets now supply the
 * variables — defaults, not overrides — and the controls reassign them at
 * `.elementor-element-<id> .zs-cta`, which is (0,2,0) against the presets'
 * (0,1,0). No !important, and nothing masks the colour.
 */
.zs-cta {
    position: relative;
    display: flex;
    padding: 92px 40px;
    background-color: var(--zs-cta-bg, #f1ede5);
    background-image: var(--zs-cta-bg-image, none);
    overflow: hidden;
}

.zs-cta--mode-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Through the variables for the same reason as the presets: the `background`
   shorthand here would otherwise reset background-color and mask the control. */
.zs-cta--mode-green-gradient {
    --zs-cta-bg: #1f5a22;
    --zs-cta-bg-image: linear-gradient(135deg, #1f5a22 0%, #255f24 52%, #1a461d 100%);
}

.zs-cta--mode-green-gradient .zs-cta__eyebrow,
.zs-cta--mode-green-gradient .zs-cta__title,
.zs-cta--mode-green-gradient .zs-cta__description {
    color: #ffffff;
}

.zs-cta--mode-green-gradient .zs-cta__description {
    color: rgba(255, 255, 255, 0.86);
}

.zs-cta--mode-green-gradient .zs-cta__btn--primary {
    background-color: var(--zs-accent, #c48c33);
    color: #ffffff;
    box-shadow: none;
}

.zs-cta--mode-green-gradient .zs-cta__btn--primary:hover {
    background-color: #ad7a2c;
}

.zs-cta--mode-green-gradient .zs-cta__btn--secondary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

.zs-cta--mode-green-gradient .zs-cta__btn--secondary:hover {
    background-color: transparent;
    color: #ffffff;
}

/* ==========================================================================
   Radial Glow
   ========================================================================== */

.zs-cta__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Image Overlay
   ========================================================================== */

.zs-cta__overlay {
    --zs-cta-overlay-color: rgba(20, 30, 20, 0.55);
    --zs-cta-overlay-opacity: 1;
    --zs-cta-gradient-start: rgba(10, 20, 10, 0);
    --zs-cta-gradient-end: rgba(10, 20, 10, 0);
    --zs-cta-gradient-angle: 180deg;

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--zs-cta-gradient-angle), var(--zs-cta-gradient-start), var(--zs-cta-gradient-end)),
        var(--zs-cta-overlay-color);
    opacity: var(--zs-cta-overlay-opacity);
}

/* ==========================================================================
   Inner / Content
   ========================================================================== */

.zs-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.zs-cta__content {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    gap: 28px;
    max-width: 820px;
    width: 100%;
    margin-left: var(--zs-header-margin-left, auto);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, center);
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */

.zs-cta__eyebrow {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c48c33;
}

/* ==========================================================================
   Title
   ========================================================================== */

.zs-cta__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.071;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   Description
   ========================================================================== */

.zs-cta__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #555555;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.zs-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--zs-header-justify, center);
    gap: 18px;
}

.zs-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    text-decoration: none;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.zs-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    line-height: 1;
}

.zs-cta__btn-icon svg { width: 1em; height: 1em; fill: currentColor; }
.zs-cta__btn-icon img { display: block; width: 1em; height: 1em; object-fit: contain; }

/* Primary */
.zs-cta__btn--primary {
    padding: 17px 30px;
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0px 12px 28px rgba(45, 90, 39, 0.18);
}

.zs-cta__btn--primary:hover {
    background-color: #245020;
    color: #ffffff;
}

/* Secondary / Outlined */
.zs-cta__btn--secondary {
    padding: 14px 24px;
    background-color: transparent;
    color: var(--zs-primary, #2d5a27);
    border: 1.6px solid var(--zs-primary, #2d5a27);
}

.zs-cta__btn--secondary:hover {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .zs-cta__title {
        font-size: 42px;
    }
}

/* 767, not 768: Elementor's mobile tier is <= 767px, so a 768 bound here left
   exactly one pixel where this block's 32px title applied but Elementor's
   mobile typography did not — the title measured 20px at 767, 32px at 768 and
   42px at 769. */
@media (max-width: 767px) {
    .zs-cta--mode-image {
        background-attachment: scroll !important;
    }

    .zs-cta {
        padding: 64px 24px;
    }

    .zs-cta__title {
        font-size: 32px;
    }

    .zs-cta__description {
        font-size: 16px;
    }

    .zs-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Agro Dealers presets — applied by the widget's Design Preset control.

   Everything below is scoped to a preset class, so a stored instance that is
   not on a preset renders exactly as before.

   Where a declaration collides with one of this widget's own Elementor
   controls it carries !important. Elementor compiles control selectors as
   ".elementor-{page} .elementor-element.elementor-element-{id} .zs-cta", which
   outranks any class selector we can write here, and it emits those rules for
   control *defaults* too — so without !important the panel's 92/40 padding,
   28px content gap, 18px button gap, #f1ede5 background and #2d5a27 button
   would silently win over the Figma values. Properties with no colliding
   control (typography, borders, shadows, hidden glow) stay unweighted, which
   keeps the Style panel usable for the things the preset does not own.
   ========================================================================== */

/* The glow layer is decorative background, and neither Figma frame has it. */
.zs-cta--preset-agro-dealers-primary .zs-cta__glow,
.zs-cta--preset-agro-dealers-support .zs-cta__glow {
    display: none;
}

/* --------------------------------------------------------------------------
   Primary — "Can't Find a Dealer Near You?" (Figma node 11121:38592)
   -------------------------------------------------------------------------- */

.zs-cta--preset-agro-dealers-primary {
    padding: 92px 160px !important;
    --zs-cta-bg: #244f22;
    --zs-cta-bg-image: linear-gradient(133.37deg, #244f22 0%, var(--zs-primary, #2d5a27) 100%);
}

.zs-cta--preset-agro-dealers-primary .zs-cta__content {
    gap: 40px !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 43.2px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__description {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    /* 25.6px / 16px */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__buttons {
    flex-wrap: wrap;
    gap: 16px !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn {
    gap: 8px;
    min-height: 50px;
    padding: 16px 30px !important;
    border-radius: 999px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    /* 16px / 16px */
    line-height: 1;
}

/* Both Figma buttons lead with an 18x18 icon; the icon itself stays an
   editor choice, this only sizes and re-orders the slot when one is set. */
.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon {
    order: -1;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon svg,
.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon img {
    width: 18px;
    height: 18px;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--primary {
    background-color: var(--zs-accent, #c48c33) !important;
    color: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: none;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--primary:hover {
    background-color: #ad7a2c !important;
    color: #ffffff !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--secondary {
    background-color: #ffffff !important;
    color: var(--zs-primary, #2d5a27) !important;
    border: 2px solid #ffffff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--secondary:hover {
    background-color: var(--zs-warm, #fdfcf9) !important;
    color: var(--zs-primary, #2d5a27) !important;
}

/* --------------------------------------------------------------------------
   Support — "Interested in Agro Dealer Support?" (Figma node 11121:38609)
   -------------------------------------------------------------------------- */

.zs-cta--preset-agro-dealers-support {
    padding: 111.12px 40px 79.99px !important;
    --zs-cta-bg: #ffffff;
    --zs-cta-bg-image: none;
}

.zs-cta--preset-agro-dealers-support .zs-cta__content {
    max-width: 1200px !important;
    gap: 15.3px !important;
}

.zs-cta--preset-agro-dealers-support .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 38.4px;
    font-weight: 700;
    /* 42.24px / 38.4px */
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-cta--preset-agro-dealers-support .zs-cta__description {
    max-width: 600px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    /* 28.8px / 18px */
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn {
    gap: 8px;
    min-height: 50px;
    padding: 16px 30px !important;
    border-radius: 999px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn--primary {
    background-color: var(--zs-primary, #2d5a27) !important;
    color: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: 0 12px 28px rgba(45, 90, 39, 0.18);
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn--primary:hover {
    background-color: #245020 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Preset responsive — the buttons hold a row until 560px, so the 768px
   stacking above is undone inside preset scope and reinstated lower down.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .zs-cta--preset-agro-dealers-primary {
        padding: 80px 48px !important;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__title {
        font-size: 36px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__title {
        font-size: 34px;
    }
}

/* 767 to stay in step with the base block above and with Elementor's mobile
   tier; at 768 the preset was going mobile one pixel before everything else. */
@media (max-width: 767px) {
    .zs-cta--preset-agro-dealers-primary {
        padding: 64px 24px !important;
    }

    .zs-cta--preset-agro-dealers-support {
        padding: 72px 24px 56px !important;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__title {
        font-size: 32px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__title {
        font-size: 30px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__description {
        font-size: 16px;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__buttons,
    .zs-cta--preset-agro-dealers-support .zs-cta__buttons {
        flex-direction: row;
        align-items: center;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__btn,
    .zs-cta--preset-agro-dealers-support .zs-cta__btn {
        width: auto;
    }
}

@media (max-width: 560px) {
    .zs-cta--preset-agro-dealers-primary .zs-cta__buttons,
    .zs-cta--preset-agro-dealers-support .zs-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__btn,
    .zs-cta--preset-agro-dealers-support .zs-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Image column
   ==========================================================================
   The About page's "Meet the Team" section is a two-column CTA: copy on the
   left, a photograph on the right. The image is a real column with its own
   attachment, alt text, focal point and fit — not a decorative CSS background,
   which would be invisible to Elementor and to assistive technology. */

.zs-cta__inner {
    --zs-cta-media-width: 50%;
}

.zs-cta__media {
    --zs-cta-focal-x: 50%;
    --zs-cta-focal-y: 50%;
    --zs-cta-media-fit: cover;
    position: relative;
    flex: 0 0 var(--zs-cta-media-width);
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
}

/* Qualified with the media class and the element.
   `.elementor img { height: auto; max-width: 100% }` is (0,1,1); a single-class
   rule here is (0,1,0) and loses, dropping the column to the image's intrinsic
   height. Fourth widget to need this — see CSR, Statement Cards, Legacy Split
   and Impact Stats. */
.zs-cta__media img.zs-cta__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--zs-cta-media-fit);
    object-position: var(--zs-cta-focal-x) var(--zs-cta-focal-y);
}

.zs-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: transparent;
}

.zs-cta__media-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

/* About — Meet the Team preset */
.zs-cta--preset-about-team {
    padding: 0;
    background: linear-gradient(122deg, #244f22 0%, var(--zs-primary, #2d5a27) 100%);
}

.zs-cta--preset-about-team .zs-cta__inner {
    display: flex;
    align-items: center;
    gap: 80px;
    min-height: 572px;
    padding: 0 120px;
}

.zs-cta--preset-about-team .zs-cta__content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    align-items: flex-start;
}

.zs-cta--preset-about-team .zs-cta__eyebrow {
    font-size: 12px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

.zs-cta--preset-about-team .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 48px;
    line-height: 54px;
    color: #ffffff;
}

.zs-cta--preset-about-team .zs-cta__description {
    font-size: 17px;
    line-height: 27.5px;
    color: rgba(255, 255, 255, 0.9);
}

.zs-cta--preset-about-team .zs-cta__btn--primary {
    min-height: 50px;
    padding: 14px 30px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

@media (max-width: 1023px) {
    .zs-cta--preset-about-team .zs-cta__inner {
        gap: 40px;
        min-height: 0;
        padding: 64px 40px;
    }

    .zs-cta--preset-about-team .zs-cta__title {
        font-size: 36px;
        line-height: 42px;
    }

    .zs-cta__media {
        min-height: 340px;
    }
}

@media (max-width: 767px) {
    /* Copy first, image second. No fixed section height — the content decides. */
    .zs-cta--preset-about-team .zs-cta__inner,
    .zs-cta__inner:has(.zs-cta__media) {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 40px 20px;
    }

    .zs-cta__media {
        flex: 1 1 auto;
        min-height: 320px;
    }

    .zs-cta--preset-about-team .zs-cta__title {
        font-size: 30px;
        line-height: 36px;
    }

    .zs-cta--preset-about-team .zs-cta__btn--primary {
        width: 100%;
        justify-content: center;
    }
}