/**
 * Zamseed Page Hero Widget Styles
 *
 * Inner page hero section based on the Next.js PageHero component.
 * Uses theme CSS variables from style.css.
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* Widget Root */
.zs-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: 132px 0 76px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Overlay - Gradient (Default) */
.zs-page-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zs-page-hero__overlay--gradient {
    background:
        linear-gradient(90deg,
            rgba(250, 249, 246, 1) 0%,
            rgba(250, 249, 246, 0.92) 38%,
            rgba(250, 249, 246, 0.45) 66%,
            rgba(250, 249, 246, 0.08) 100%
        ),
        linear-gradient(0deg,
            rgba(250, 249, 246, 0.34),
            rgba(250, 249, 246, 0)
        );
}

/* Overlay - Solid */
.zs-page-hero__overlay--solid {
    background-color: rgba(250, 249, 246, 0.95);
}

.zs-page-hero__overlay--dark-gradient {
    background:
        linear-gradient(90deg,
            rgba(15, 36, 24, 0.82) 0%,
            rgba(15, 36, 24, 0.68) 46%,
            rgba(15, 36, 24, 0.48) 100%
        ),
        linear-gradient(0deg,
            rgba(15, 36, 24, 0.58) 0%,
            rgba(15, 36, 24, 0) 60%
        );
}

/* Content Container */
.zs-page-hero .container {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.zs-page-hero__content {
    max-width: 100%;
}

.zs-page-hero--content-center .zs-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.zs-page-hero--content-center .zs-page-hero__title,
.zs-page-hero--content-center .zs-page-hero__subtitle {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Eyebrow */
.zs-page-hero__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--zs-secondary, #d35400);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Title */
.zs-page-hero__title {
    margin: 0 0 18px;
    max-width: 720px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.6rem, 5vw, 4.1rem);
    font-weight: 700;
    line-height: 1.06;
}

/* Subtitle */
.zs-page-hero__subtitle {
    margin: 0;
    max-width: 560px;
    color: var(--zs-muted, #555555);
    font-size: 20px;
    line-height: 1.5;
}

/* Breadcrumbs */
.zs-page-hero__breadcrumbs {
    margin-bottom: 20px;
}

.zs-page-hero__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
}

.zs-page-hero__breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.zs-page-hero__breadcrumb-item a:hover {
    text-decoration: underline;
}

.zs-page-hero__breadcrumb-current {
    font-weight: 600;
}

.zs-page-hero__breadcrumb-sep {
    opacity: 0.5;
}

/* Button */
.zs-page-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 16px 32px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--zs-radius-pill, 999px);
    border: 1.5px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-page-hero__button.btn--primary {
    background-color: var(--zs-primary, #2d5a27);
    border-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-page-hero__button.btn--primary:hover {
    background-color: #245020;
}

.zs-page-hero__button.btn--secondary {
    background-color: transparent;
    border-color: var(--zs-primary, #2d5a27);
    color: var(--zs-primary, #2d5a27);
}

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

.zs-page-hero__button.btn--light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero__button.btn--light:hover {
    background-color: transparent;
    color: #ffffff;
}

/* Image Banner layout mode: image only, no overlay/text — breadcrumb
   trail renders in its own bar below rather than overlaid on the image. */
.zs-page-hero--image-banner {
    min-height: 468px;
    padding: 0;
}

.zs-page-hero__breadcrumbs-bar {
    background-color: var(--zs-warm, #fdfcf9);
    border-bottom: 1px solid var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__breadcrumbs-bar .zs-page-hero__breadcrumbs {
    margin-bottom: 0;
    padding: 21px 0;
}

/* ==========================================================================
   Blog Post Header mode: back link, centred title, optional category/
   reading-time meta, optional explicit CTA, large featured image below.
   ========================================================================== */

.zs-page-hero--blog-post {
    display: block;
    min-height: 0;
    padding: 48px 0;
    background-image: none;
    background-color: rgba(241, 237, 229, 0.5);
}

.zs-page-hero--blog-post .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.zs-page-hero__blog-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}

.zs-page-hero__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--zs-text, #1c1c1c);
    text-decoration: none;
}

.zs-page-hero__back-link:hover {
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero__title--centered {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.zs-page-hero__blog-meta {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    color: var(--zs-muted, #555555);
}

.zs-page-hero__blog-category {
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero--blog-post .zs-page-hero__button {
    align-self: center;
}

.zs-page-hero__blog-image {
    width: 100%;
    height: 582px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__blog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Agronomy Article Header mode: back link, centred title, optional
   category/description/supporting image — no forced full-width banner.
   ========================================================================== */

.zs-page-hero--agronomy-article {
    display: block;
    min-height: 0;
    padding: 64px 0;
    background-image: none;
    background-color: rgba(241, 237, 229, 0.5);
}

.zs-page-hero__agronomy-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.zs-page-hero__agronomy-category {
    align-self: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zs-accent-text, #9a6c1f);
}

.zs-page-hero__agronomy-description {
    align-self: center;
    max-width: 700px;
    margin: 0;
    text-align: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-page-hero__agronomy-image {
    align-self: center;
    width: 100%;
    max-width: 631px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__agronomy-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Legal Page Header mode: title + organisation subtitle on the same dark
   gradient treatment as Standard, with no eyebrow/breadcrumb/button.
   ========================================================================== */

.zs-page-hero__legal-content {
    max-width: 720px;
}

/* !important for the same reason the Agro Dealers preset below needs it: this
   mode puts the copy on a dark scrim, but title_color (#2d5a27),
   subtitle_color (#555555), content_max_width (720px) and subtitle_max_width
   (560px) all ship non-empty defaults, so Elementor emits per-element CSS for
   them on every legal hero — at a specificity no class selector here can
   reach. Unweighted, the title renders dark green on the scrim. */
.zs-page-hero__title--legal {
    max-width: 100% !important;
    color: #ffffff !important;
}

.zs-page-hero__subtitle--legal {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Responsive: Tablet */
@media (max-width: 1080px) {
    .zs-page-hero {
        min-height: 480px;
        padding: 112px 0 60px;
    }

    .zs-page-hero--image-banner {
        min-height: 360px;
        padding: 0;
    }

    .zs-page-hero__title {
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    }

    .zs-page-hero__subtitle {
        font-size: 18px;
    }

    .zs-page-hero__blog-image {
        height: 420px;
    }

    .zs-page-hero--agronomy-article {
        padding: 48px 0;
    }
}

/* Responsive: Mobile */
@media (max-width: 760px) {
    .zs-page-hero {
        min-height: 400px;
        padding: 100px 0 50px;
    }

    .zs-page-hero--image-banner {
        min-height: 240px;
        padding: 0;
    }

    .zs-page-hero__overlay--gradient {
        background:
            linear-gradient(180deg,
                rgba(250, 249, 246, 0.95) 0%,
                rgba(250, 249, 246, 0.85) 60%,
                rgba(250, 249, 246, 0.7) 100%
            );
    }

    .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.84) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    .zs-page-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .zs-page-hero__title {
        font-size: clamp(1.8rem, 6vw, 2.6rem);
        margin-bottom: 14px;
        max-width: 100%;
    }

    .zs-page-hero__subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .zs-page-hero__blog-image {
        height: 260px;
        border-radius: 12px;
    }

    .zs-page-hero--blog-post,
    .zs-page-hero--agronomy-article {
        padding: 32px 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zs-page-hero,
    .zs-page-hero__overlay {
        transition: none;
    }
}

/* Editor Preview Styles */
.elementor-editor-active .zs-page-hero {
    min-height: 400px;
}

/* Empty State Placeholder in Editor */
.zs-page-hero__placeholder {
    padding: 40px;
    text-align: center;
    color: var(--zs-muted, #555555);
    font-style: italic;
    border: 2px dashed var(--zs-border, rgba(45, 90, 39, 0.12));
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Agro Dealers preset — applied by the widget's Design Preset control on
   Standard heroes only (Figma node 11121:38418). Full-bleed band with a dark
   green scrim, an 820px content column, and a 64px serif title.

   Scoped entirely to .zs-page-hero--preset-agro-dealers: a hero that has not
   opted in renders exactly as it did before this block existed.

   Several declarations below carry !important, which the rest of this file
   does not need. The widget's own colour and size controls (title_color,
   subtitle_color, eyebrow_color, min_height, content_max_width,
   subtitle_max_width) ship with NON-EMPTY defaults and `selectors`, so
   Elementor generates per-element CSS for them — at a specificity no
   stylesheet class can reach — even on heroes where nobody ever touched
   those controls. Without !important the preset's white title would lose to
   the generated #2d5a27 and render dark green on a dark photograph. Editors
   who want these driven from the panel should switch the preset to Custom.
   ========================================================================== */

/* ==========================================================================
   Internal page heroes — one shared system.

   Five presets grew here one page at a time, each from its own frame, and
   each restated the same architecture with slightly different numbers. The
   result was seven internal heroes running three different systems: 560px on
   CSR, 600px on Agronomy Hub, 700px on four pages and 703px on Agro Dealers,
   with the copy starting at x=120 on five of them and x=300 on two, across
   three title line-heights and two eyebrow sizes. Moving between pages, the
   heading visibly jumped.

   Everything shared now lives in this block and every internal preset answers
   to it. The named presets keep only what is genuinely their own: where their
   photograph is anchored. The Homepage hero is a different component
   (.zs-home-hero) and is deliberately untouched.
   ========================================================================== */

.zs-page-hero--preset-internal,
.zs-page-hero--preset-agro-dealers,
.zs-page-hero--preset-our-team,
.zs-page-hero--preset-about-us,
.zs-page-hero--preset-agronomy-hub,
.zs-page-hero--preset-contact-us {
    /* A minimum, never a fixed height, so a long title extends the band
       rather than clipping. 700px is what five of the seven internal heroes
       already used and the height most recently approved by the client, on
       Contact. */
    min-height: 700px !important;
    padding: 160px 0;
    background-color: #0f2418;
}

.zs-page-hero--preset-internal .container,
.zs-page-hero--preset-agro-dealers .container,
.zs-page-hero--preset-our-team .container,
.zs-page-hero--preset-about-us .container,
.zs-page-hero--preset-agronomy-hub .container,
.zs-page-hero--preset-contact-us .container {
    width: min(1440px, 100%);
    padding-right: clamp(20px, 20.83vw, 300px);
    padding-left: clamp(20px, 20.83vw, 300px);
}

.zs-page-hero--preset-internal .zs-page-hero__content,
.zs-page-hero--preset-agro-dealers .zs-page-hero__content,
.zs-page-hero--preset-our-team .zs-page-hero__content,
.zs-page-hero--preset-about-us .zs-page-hero__content,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__content,
.zs-page-hero--preset-contact-us .zs-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 820px;
    padding-top: 0;
}

.zs-page-hero--preset-internal .zs-page-hero__eyebrow,
.zs-page-hero--preset-internal .zs-page-hero__title,
.zs-page-hero--preset-internal .zs-page-hero__subtitle,
.zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow,
.zs-page-hero--preset-agro-dealers .zs-page-hero__title,
.zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle,
.zs-page-hero--preset-our-team .zs-page-hero__eyebrow,
.zs-page-hero--preset-our-team .zs-page-hero__title,
.zs-page-hero--preset-our-team .zs-page-hero__subtitle,
.zs-page-hero--preset-about-us .zs-page-hero__eyebrow,
.zs-page-hero--preset-about-us .zs-page-hero__title,
.zs-page-hero--preset-about-us .zs-page-hero__subtitle,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__title,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle,
.zs-page-hero--preset-contact-us .zs-page-hero__eyebrow,
.zs-page-hero--preset-contact-us .zs-page-hero__title,
.zs-page-hero--preset-contact-us .zs-page-hero__subtitle {
    margin: 0;
}

/* One scrim for every internal hero. The photographs differ; the darkening
   does not. Both overlay variants resolve here so a page set to "gradient"
   and a page set to "dark gradient" look the same. */
.zs-page-hero--preset-internal .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-internal .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-our-team .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-our-team .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-about-us .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-about-us .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-contact-us .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-contact-us .zs-page-hero__overlay--dark-gradient {
    background:
        linear-gradient(90deg,
            rgba(15, 36, 24, 0.86) 0%,
            rgba(15, 36, 24, 0.66) 46%,
            rgba(15, 36, 24, 0.42) 100%
        ),
        linear-gradient(0deg,
            rgba(15, 36, 24, 0.55) 0%,
            rgba(15, 36, 24, 0) 60%
        );
}

.zs-page-hero--preset-internal .zs-page-hero__eyebrow,
.zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow,
.zs-page-hero--preset-our-team .zs-page-hero__eyebrow,
.zs-page-hero--preset-about-us .zs-page-hero__eyebrow,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow,
.zs-page-hero--preset-contact-us .zs-page-hero__eyebrow {
    color: #f3c98a !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

/* 64px at 1440, easing to 40px on small screens. 1.08 is the Our Team and
   About Us value — the two largest approved internal frames — and the one
   that carries a two-line title without crowding. It replaces Contact's 1.0,
   Agronomy's 1.19 and the 1.06 the un-preset pages were inheriting. */
.zs-page-hero--preset-internal .zs-page-hero__title,
.zs-page-hero--preset-agro-dealers .zs-page-hero__title,
.zs-page-hero--preset-our-team .zs-page-hero__title,
.zs-page-hero--preset-about-us .zs-page-hero__title,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__title,
.zs-page-hero--preset-contact-us .zs-page-hero__title {
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.5rem, 4.44vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: normal;
}

.zs-page-hero--preset-internal .zs-page-hero__subtitle,
.zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle,
.zs-page-hero--preset-our-team .zs-page-hero__subtitle,
.zs-page-hero--preset-about-us .zs-page-hero__subtitle,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle,
.zs-page-hero--preset-contact-us .zs-page-hero__subtitle {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.zs-page-hero--preset-internal .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-internal .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-contact-us .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-contact-us .zs-page-hero__breadcrumbs a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.zs-page-hero--preset-internal .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-contact-us .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Per-preset: photograph anchoring only.

   !important because Elementor prints background-size and background-position
   from its own controls at .elementor-element-<id> specificity, which no
   stylesheet class reaches.
   -------------------------------------------------------------------------- */

.zs-page-hero--preset-about-us,
.zs-page-hero--preset-agronomy-hub {
    /* Both photographs are taller than the band and are cropped from the top
       in their approved frames rather than centred. */
    background-size: cover !important;
    background-position: top left !important;
}

.zs-page-hero--preset-contact-us {
    /* The Contact frame lays its photograph over the base at 135% of the band
       height, pulled up 17.5% — a vertically centred crop. */
    background-size: cover !important;
    background-position: center !important;
}

/* Responsive: one set of rules for every internal hero.

   Each preset previously carried its own breakpoint values — 440/500/520 at
   tablet, 380/420 at mobile — so the bands drifted apart again as soon as the
   viewport moved. */

@media (max-width: 1080px) {
    .zs-page-hero--preset-internal,
    .zs-page-hero--preset-agro-dealers,
    .zs-page-hero--preset-our-team,
    .zs-page-hero--preset-about-us,
    .zs-page-hero--preset-agronomy-hub,
    .zs-page-hero--preset-contact-us {
        min-height: 560px !important;
        padding: 120px 0;
    }

    .zs-page-hero--preset-internal .container,
    .zs-page-hero--preset-agro-dealers .container,
    .zs-page-hero--preset-our-team .container,
    .zs-page-hero--preset-about-us .container,
    .zs-page-hero--preset-agronomy-hub .container,
    .zs-page-hero--preset-contact-us .container {
        padding-right: clamp(24px, 8vw, 96px);
        padding-left: clamp(24px, 8vw, 96px);
    }

    .zs-page-hero--preset-internal .zs-page-hero__content,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__content,
    .zs-page-hero--preset-our-team .zs-page-hero__content,
    .zs-page-hero--preset-about-us .zs-page-hero__content,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__content,
    .zs-page-hero--preset-contact-us .zs-page-hero__content {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .zs-page-hero--preset-internal,
    .zs-page-hero--preset-agro-dealers,
    .zs-page-hero--preset-our-team,
    .zs-page-hero--preset-about-us,
    .zs-page-hero--preset-agronomy-hub,
    .zs-page-hero--preset-contact-us {
        min-height: 460px !important;
        padding: 84px 0;
        /* `cover` scales by height once the band is narrower than the
           photograph's ratio, and the left edge is rarely the subject. */
        background-position: center !important;
    }

    .zs-page-hero--preset-internal .container,
    .zs-page-hero--preset-agro-dealers .container,
    .zs-page-hero--preset-our-team .container,
    .zs-page-hero--preset-about-us .container,
    .zs-page-hero--preset-agronomy-hub .container,
    .zs-page-hero--preset-contact-us .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .zs-page-hero--preset-internal .zs-page-hero__content,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__content,
    .zs-page-hero--preset-our-team .zs-page-hero__content,
    .zs-page-hero--preset-about-us .zs-page-hero__content,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__content,
    .zs-page-hero--preset-contact-us .zs-page-hero__content {
        gap: 16px;
    }

    /* The copy sits over the middle of the photograph once the band narrows,
       so the left-to-right wash becomes a top-down one. */
    .zs-page-hero--preset-internal .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-internal .zs-page-hero__overlay--dark-gradient,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--dark-gradient,
    .zs-page-hero--preset-our-team .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-our-team .zs-page-hero__overlay--dark-gradient,
    .zs-page-hero--preset-about-us .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-about-us .zs-page-hero__overlay--dark-gradient,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--dark-gradient,
    .zs-page-hero--preset-contact-us .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-contact-us .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.82) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    .zs-page-hero--preset-internal .zs-page-hero__eyebrow,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow,
    .zs-page-hero--preset-our-team .zs-page-hero__eyebrow,
    .zs-page-hero--preset-about-us .zs-page-hero__eyebrow,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow,
    .zs-page-hero--preset-contact-us .zs-page-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    .zs-page-hero--preset-internal .zs-page-hero__title,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__title,
    .zs-page-hero--preset-our-team .zs-page-hero__title,
    .zs-page-hero--preset-about-us .zs-page-hero__title,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__title,
    .zs-page-hero--preset-contact-us .zs-page-hero__title {
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .zs-page-hero--preset-internal .zs-page-hero__subtitle,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle,
    .zs-page-hero--preset-our-team .zs-page-hero__subtitle,
    .zs-page-hero--preset-about-us .zs-page-hero__subtitle,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle,
    .zs-page-hero--preset-contact-us .zs-page-hero__subtitle {
        font-size: 16px;
    }
}