/**
 * Zamseed Feature Content Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 40px;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin: 0 auto;
    padding: var(--zs-section-padding, 92px) 0;
    background-color: var(--zs-warm, #fdfcf9);
}

/* Media / Content ratio via logical custom properties (set by the
   column_ratio control on .zs-feature). The media track is consumed in
   whichever column the media actually occupies, so "45 / 55" always
   means media 45% / content 55% regardless of side. `order` swaps the
   DOM elements for image-right; the track order below matches that. */
.zs-feature--image-left {
    grid-template-columns:
        var(--zs-feature-media-track, 1fr)
        var(--zs-feature-content-track, 1fr);
}

.zs-feature--image-right {
    grid-template-columns:
        var(--zs-feature-content-track, 1fr)
        var(--zs-feature-media-track, 1fr);
}

.zs-feature--image-right .zs-feature__media { order: 2; }
.zs-feature--image-right .zs-feature__content { order: 1; }

/* Image top/bottom: single column, media stacked above or below. */
.zs-feature--image-top,
.zs-feature--image-bottom {
    grid-template-columns: 1fr;
}
.zs-feature--image-bottom .zs-feature__media { order: 2; }
.zs-feature--image-bottom .zs-feature__content { order: 1; }

/* No image: single, centered content column, no empty media cell. */
.zs-feature--no-image {
    grid-template-columns: 1fr;
}

/* Media */
.zs-feature__media {
    position: relative;
    min-width: 0;
    border-radius: 20px;
    overflow: hidden;
}

.zs-feature__media--shadow {
    box-shadow: var(--zs-shadow, 0 18px 50px rgba(45, 90, 39, 0.12));
}

/* Decorative pseudo-elements on the media wrapper must never intercept
   clicks — the wrapper itself stays interactive so an optional image
   link (.zs-feature__media > a) remains fully clickable. */
.zs-feature__media::before,
.zs-feature__media::after {
    pointer-events: none;
}

.zs-feature__media--overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--zs-feature-overlay-color, #2d5a27);
    opacity: var(--zs-feature-overlay-opacity, 0.4);
}

.zs-feature__media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.zs-feature__media > a:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 4px;
}

/* Qualified with the media class and the element.
   `.elementor img { height: auto; max-width: 100% }` is (0,1,1) and beat this
   rule at (0,1,0), so the picture fell back to its intrinsic height inside a
   fixed-height media box. Caught by the systemic image-specificity audit — the
   sixth widget in this theme with the same cascade loss. */
.zs-feature__media img.zs-feature__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    object-position: center;
}

/* Top/bottom stacked images shouldn't be forced to a tall min-height. */
.zs-feature--image-top .zs-feature__image,
.zs-feature--image-bottom .zs-feature__image {
    min-height: 0;
}

/* Content */
.zs-feature__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: var(--zs-header-items, flex-start);
    justify-content: center;
    gap: 20px;
    margin-left: var(--zs-header-margin-left, 0);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, left);
}

.zs-feature__eyebrow,
.zs-feature__heading,
.zs-feature__description,
.zs-feature__paragraphs,
.zs-feature__list,
.zs-feature__link {
    margin-left: var(--zs-header-margin-left, 0);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, left);
}

/* Text alignment (driven by the text_align control's prefix_class on
   the widget wrapper) — sets both the block text-align and the flex
   cross-axis alignment of the content children together. */
.zs-feature-align-center .zs-feature__content {
    align-items: center;
    text-align: center;
    /* Centre a max-width-limited content column within its cell. */
    margin-inline: auto;
}

.zs-feature-align-left .zs-feature__content {
    align-items: flex-start;
    text-align: left;
}

.zs-feature__eyebrow {
    display: inline-block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent-text, #9a6c1f);
}

.zs-feature__heading {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-feature__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--zs-muted, #555555);
}

.zs-feature__paragraphs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.zs-feature__paragraph {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--zs-muted, #555555);
}

/* Checklist */
.zs-feature__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zs-feature__list--two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zs-feature__list--inline {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Card grid — Figma node 11121:38380 ("Before You Visit an Agro Dealer").
 *
 * The design is not a fixed column grid: it is a centred wrapping row of
 * 300px cards, which is why its trailing row sits centred under the three
 * above. Reproducing that construction with flex-wrap + justify-content
 * centres any trailing row for free — three, four, five or six items — with
 * no :nth-child arithmetic and nothing to unwind at tablet or mobile, where
 * the cards simply wrap.
 *
 * gap is also an Elementor control (checklist_item_gap), which emits a
 * wrapper-scoped rule and therefore still overrides the value here. */
.zs-feature__list--card-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    margin-top: 12px;
    /* .zs-feature__content is a column flex container with align-items
       flex-start, so without these the list shrinks to fit its content: the
       cards would size to their text and "centred" would be vacuously true
       inside a box that hugs them. */
    width: 100%;
    align-self: stretch;
}

.zs-feature__list--card-grid > .zs-feature__item {
    /* Figma card width. No grow, so a short row stays at the designed size
       and is centred rather than stretched across the container. */
    flex: 0 1 300px;
    max-width: 100%;
}

.zs-feature__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* Card metrics measured off the Figma frame: 120px tall, 24px padding, 20px
   icon-to-text gap, 1px rgba(0,0,0,0.12) border, 8px radius. The subtle
   shadow is kept from the previous implementation — the Figma layer is named
   "Background+Shadow" but carries no shadow value. Each of these is also an
   Elementor control (item background, border, radius, padding, gap), whose
   wrapper-scoped output still wins over these defaults. */
.zs-feature__list--card-grid .zs-feature__item {
    min-height: 120px;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(45, 90, 39, 0.04);
}

.zs-feature__list--card-grid .zs-feature__item-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    /* Figma "Color/Casablanca Dark", via the shared token. */
    color: var(--zs-accent, #c48c33);
}

.zs-feature__list--card-grid .zs-feature__item-text {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--zs-text, #1c1c1c);
}

.zs-feature__item-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--zs-feature-item-icon-color, var(--zs-primary, #2d5a27));
    font-size: 18px;
    line-height: 1;
}

.zs-feature__item-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.zs-feature__item-icon img {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

.zs-feature__item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.zs-feature__item-title {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--zs-feature-item-text-color, var(--zs-text, #1c1c1c));
}

.zs-feature__item-text {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--zs-feature-item-text-color, var(--zs-text, #1c1c1c));
}

.zs-feature__item-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zs-feature__item-text a:hover,
.zs-feature__item-text a:focus-visible {
    color: var(--zs-primary, #2d5a27);
}

.zs-feature__item-text a:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-feature__item-description {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--zs-muted, #555555);
}

/* Link button */
.zs-feature__link {
    margin-top: 4px;
}

.zs-feature__link:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 3px;
}

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

@media (max-width: 1024px) {
    .zs-feature {
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .zs-feature--image-left,
    .zs-feature--image-right {
        grid-template-columns: 1fr;
        padding: var(--zs-section-padding-mobile, 68px) 0;
    }

    .zs-feature {
        padding: var(--zs-section-padding-mobile, 68px) 0;
    }

    .zs-feature__media img.zs-feature__image {
        min-height: 260px;
    }

    .zs-feature__content {
        align-items: flex-start;
    }

    /* Default mobile stacking order = image first (order:1), content
       second (order:2); the mobile-image-bottom modifier flips it. On
       narrow screens the desktop left/right column order is irrelevant
       since we're single-column, so reset both explicitly. */
    .zs-feature--image-left .zs-feature__media,
    .zs-feature--image-right .zs-feature__media { order: 1; }
    .zs-feature--image-left .zs-feature__content,
    .zs-feature--image-right .zs-feature__content { order: 2; }

    .zs-feature--mobile-image-bottom .zs-feature__media { order: 2; }
    .zs-feature--mobile-image-bottom .zs-feature__content { order: 1; }

    .zs-feature__list--two-column {
        grid-template-columns: 1fr;
    }

    /* Tablet: the cards wrap to two per row on their own once 300px x 3 no
       longer fits, so there is no column count to restate — only the width
       cap, which lets a card use the full column when the viewport is
       narrower than the designed 300px. */
    .zs-feature__list--card-grid > .zs-feature__item {
        flex-basis: 300px;
    }
}

@media (max-width: 560px) {
    /* Mobile: one card per row at full available width. */
    .zs-feature__list--card-grid > .zs-feature__item {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-feature__media {
        transition: none;
    }
}

/* ==========================================================================
   Agro Dealers checklist preset — applied by the widget's Design Preset
   control. Figma node 11121:38380, "Before You Visit an Agro Dealer".
   ==========================================================================

   These rules used to be keyed on the preset class AND on :has() a card-grid
   checklist, because the class alone was not a reliable signal of intent: an
   earlier draft defaulted the preset ON, so every feature section stored on
   Home, About and Contact would have inherited it. Two things retired that
   guard. The preset control now defaults to Custom, so the class is only ever
   emitted by a section that opted in; and
   Zamseed_Widget_Feature_Content::get_effective_settings() resolves the
   checklist to the card-grid layout whenever the preset is selected, so the
   two classes now always arrive together. Keeping :has() therefore
   discriminated nothing while costing the preset its geometry on Firefox
   before 121 and Safari before 15.4 — and it also dropped the section padding
   and header block entirely when an editor switched the checklist off.

   The doubled class replacing it is specificity-neutral, not a bump: :has()
   contributes the specificity of its argument, so .a:has(.b) and .a.a are both
   (0,2,0) and the descendant rules are both (0,3,0). Everything keeps ranking
   against Elementor's control output exactly as it did.

   The card's own construction is not repeated here: it lives in
   .zs-feature__list--card-grid above, and this block only adds the
   section-level geometry plus the few card properties Elementor overrides
   from a control default (see the specificity note further down). */

.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist {
    /* Figma section padding, measured rather than rounded. The background is
       already --zs-warm #fdfcf9 from .zs-feature, and the 1200px container
       comes from the widget's Container Width control, so neither is
       restated. */
    padding-top: 123.12px;
    padding-bottom: 92px;
}

/* Header block: 12px between the title and the supporting copy, 44px from
   that block down to the card row. A flex column gap is uniform, so the
   header keeps the 12px and the card row carries the remaining 32px
   (12 + 32 = the 44px column gap in the frame). The frame centres the
   header, which is why alignment is set here rather than left to the Text
   Alignment control — that control governs again on Custom. */
.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist .zs-feature__content {
    align-items: center;
    gap: 12px;
    text-align: center;
}

.zs-feature--preset-agro-dealers-checklist .zs-feature__list--card-grid {
    margin-top: 32px;
}

.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist .zs-feature__heading {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 38.4px;
    font-weight: 700;
    line-height: 42.24px;
    color: var(--zs-primary, #2d5a27);
}

.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist .zs-feature__description,
.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist .zs-feature__paragraph {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
    color: var(--zs-muted, #555555);
}

/* Card properties re-asserted over Elementor's control defaults.
 *
 * Item gap, icon/text gap, item padding, item radius, icon size and icon
 * colour are all Elementor controls whose defaults differ from this frame
 * (8px, 16px, 0, 0, 18px, green). Elementor emits a default just as it emits
 * a saved value, at
 * `.elementor-{page} .elementor-element.elementor-element-{id} .selector` —
 * four class-level parts, which outranks a plain class rule, so the card grid
 * alone renders padding-less cards with green 18px icons. Repeating the
 * preset and variant classes and naming the content wrapper takes these rules
 * to five parts, one clear of Elementor rather than tied with it. Under the
 * preset the card geometry belongs to the preset; selecting Custom drops the
 * class and every one of those controls governs again. */
.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist
    .zs-feature__content
    .zs-feature__list--card-grid.zs-feature__list--card-grid {
    gap: 24px;
}

.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist
    .zs-feature__content
    .zs-feature__list--card-grid.zs-feature__list--card-grid
    .zs-feature__item {
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
}

.zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist
    .zs-feature__content
    .zs-feature__list--card-grid.zs-feature__list--card-grid
    .zs-feature__item-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    /* Figma "Color/Casablanca Dark". The per-item Icon Color override is kept
       ahead of it so a single card can still differ. */
    color: var(--zs-feature-item-icon-color, var(--zs-accent, #c48c33));
}

@media (max-width: 768px) {
    /* The section padding above is set outside a media query, so it would
       otherwise survive the mobile rhythm .zs-feature switches to. Cards keep
       their 24px inset; only the section breathes less. */
    .zs-feature--preset-agro-dealers-checklist.zs-feature--preset-agro-dealers-checklist {
        padding-top: var(--zs-section-padding-mobile, 68px);
        padding-bottom: var(--zs-section-padding-mobile, 68px);
    }
}