/**
 * Zamseed Category Grid Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-category-grid {
    padding: var(--zs-section-padding, 100px) 0;
    background-color: var(--zs-warm-deep, #f1ede5);
}

.zs-category-grid__empty {
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin: 0 auto;
    padding: 48px 24px;
    text-align: center;
    background-color: #ffffff;
    border: 2px dashed var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

.zs-category-grid__header {
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    /* 44 rather than 60: the photographs are meant to be the weight of this
       section, so the intro sits closer to them. */
    margin: 0 var(--zs-header-margin-right, auto) 44px var(--zs-header-margin-left, auto);
    text-align: var(--zs-header-text-align, center);
}

.zs-category-grid__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    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, #c48c33);
}

.zs-category-grid__heading {
    margin: 0 var(--zs-header-margin-right, auto) 16px var(--zs-header-margin-left, auto);
    max-width: 760px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* Section display role. Figma 11096:35524 is 54.4/57.12; this was 45.6/1.1. */
    font-size: var(--zs-display, clamp(2rem, 3.78vw, 3.4rem));
    font-weight: 700;
    line-height: var(--zs-display-lh, 1.05);
    color: var(--zs-primary, #2d5a27);
}

.zs-category-grid__description {
    margin: 0 var(--zs-header-margin-right, auto) 0 var(--zs-header-margin-left, auto);
    max-width: 680px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

/* Cards */
.zs-category-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin: 0 auto;
}

.zs-category-grid__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 37px;
    background-color: #ffffff;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 24px;
    box-shadow: var(--zs-shadow-sm, 0 10px 15px rgba(0, 0, 0, 0.04));
    text-decoration: none;
    transition: var(--zs-transition-card, transform 0.3s ease, box-shadow 0.3s ease);
}

a.zs-category-grid__card:hover,
a.zs-category-grid__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--zs-shadow, 0 18px 50px rgba(45, 90, 39, 0.12));
}

a.zs-category-grid__card:focus-visible {
    outline: 2px solid var(--zs-accent, #c48c33);
    outline-offset: 3px;
}

.zs-category-grid__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--zs-primary, #2d5a27);
}

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

.zs-category-grid__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.zs-category-grid__tag {
    /* 9px vertical puts the pill on the frame's 35px height (Figma 11096:35534
       and siblings, 35 tall on a 14px inset); 7px left it at 30.9. Now that
       these are links the extra 4px is also a larger touch target. */
    padding: 9px 14px;
    background-color: var(--zs-green-soft, #eef4df);
    color: var(--zs-primary, #2d5a27);
    border-radius: var(--zs-radius-pill, 999px);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.3;
}

/* A tag that resolved to a product renders as an anchor; one that did not stays
   a span. Only the anchor gets interactive affordances. */
a.zs-category-grid__tag {
    display: inline-block;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

a.zs-category-grid__tag:hover {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

a.zs-category-grid__tag:focus-visible {
    outline: 3px solid rgba(196, 140, 51, 0.45);
    outline-offset: 2px;
}

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

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

@media (max-width: 1024px) {
    .zs-category-grid__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .zs-category-grid {
        padding: var(--zs-section-padding-mobile, 68px) 0;
    }

    .zs-category-grid__cards {
        grid-template-columns: 1fr;
    }

    .zs-category-grid__card {
        padding: 24px;
    }
}

/* ==========================================================================
   Image-led category cards
   --------------------------------------------------------------------------
   A card with a photograph renders full-bleed: the picture fills the card and
   the title and crop pills sit over it behind a bottom gradient. A card with
   no photograph is untouched — it stays the white panel above. The treatment
   is chosen by the data, so every other instance of this widget on the site
   keeps rendering exactly what it renders today.

   `.zs-category-grid__card-body` wraps the title, description and pills in
   both cases so the two renderers share one markup shape. On a text card the
   wrapper is `display: contents`, which makes it invisible to layout and
   leaves the original flex column intact.
   ========================================================================== */

.zs-category-grid__card:not(.zs-category-grid__card--media) .zs-category-grid__card-body {
    display: contents;
}

.zs-category-grid__card--media {
    position: relative;
    display: block;
    align-items: initial;
    gap: 0;
    padding: 0;
    min-height: 410px;
    border: 0;
    /* Shows through while the photograph decodes, and backs the gradient if an
       image ever 404s, so the title stays legible either way. `!important`
       because Elementor prints the Card Background control's *default* white
       at `.elementor-19 .elementor-element-<id> .zs-category-grid__card`,
       which is (0,4,0) and outranks anything this file can write. It is a
       printed default, not an editor's choice. */
    background-color: var(--zs-primary-dark, #1e3d1a) !important;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
}

/* Scoped through the grid so the selector carries two classes: Elementor's
   `.elementor a { box-shadow: none }` is (0,1,1) and was stripping the shadow
   from exactly the cards that are links, leaving the one unlinked card
   looking like it had a frame the others did not. */
.zs-category-grid__cards .zs-category-grid__card--media {
    box-shadow: 0 16px 36px rgba(37, 79, 34, 0.14);
}

.zs-category-grid__card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
}

/* Scoped through the media wrapper so the selector carries two classes:
   Elementor's own `.elementor img { height: auto }` is (0,1,1) and would
   otherwise leave the photograph at its intrinsic height, filling only the
   top half of the card. */
.zs-category-grid__card-media .zs-category-grid__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position is set per card from the Image Focal Point control:
       every crop sits differently in its frame and a blanket `center` buries
       the subject on at least one of them. */
    transition: transform 300ms ease;
}

/* The gradient is for legibility, not decoration: it starts at nothing just
   above the midline and only deepens behind the text. */
.zs-category-grid__card--media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(12, 30, 11, 0.88) 0%,
        rgba(12, 30, 11, 0.62) 24%,
        rgba(12, 30, 11, 0.16) 50%,
        rgba(12, 30, 11, 0) 70%
    );
}

.zs-category-grid__card--media .zs-category-grid__card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 14px;
    min-height: 410px;
    padding: 30px 28px 28px;
}

.zs-category-grid__card--media .zs-category-grid__title {
    font-size: 2rem;
    line-height: 1.16;
    color: #ffffff;
}

.zs-category-grid__card--media .zs-category-grid__card-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
}

.zs-category-grid__card--media .zs-category-grid__tag {
    padding: 7px 13px;
    /* Same printed-default collision as the card background above. */
    background-color: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(2px);
}

/* Hover is pointer-only so a tap on a touch device does not leave a card
   stuck in its hovered state. */
@media (hover: hover) and (pointer: fine) {
    a.zs-category-grid__card--media:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 46px rgba(37, 79, 34, 0.2);
    }

    a.zs-category-grid__card--media:hover .zs-category-grid__card-image {
        transform: scale(1.03);
    }
}

a.zs-category-grid__card--media:focus-visible {
    outline: 3px solid rgba(196, 140, 51, 0.65);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .zs-category-grid__card--media,
    .zs-category-grid__card-image {
        transition: none;
    }

    a.zs-category-grid__card--media:hover {
        transform: none;
    }

    a.zs-category-grid__card--media:hover .zs-category-grid__card-image {
        transform: none;
    }
}

/* Responsive — media grids only, so the text-card grid keeps its own steps.
   At 1024 three columns leave 312px cards, which still read as photographs;
   below that they do not, so the row becomes two plus a full-width third
   rather than an orphan in a half column. */
@media (max-width: 1024px) and (min-width: 768px) {
    .zs-category-grid__cards:has(.zs-category-grid__card--media) {
        grid-template-columns: repeat(2, 1fr);
    }

    .zs-category-grid__cards:has(.zs-category-grid__card--media) .zs-category-grid__card--media:nth-child(3):last-child {
        grid-column: 1 / -1;
        min-height: 340px;
    }

    .zs-category-grid__cards:has(.zs-category-grid__card--media) .zs-category-grid__card--media:nth-child(3):last-child .zs-category-grid__card-body {
        min-height: 340px;
    }
}

/* 767, not 768: Elementor's own mobile breakpoint is 767, so the column
   count it prints switches to one there. Guarding this block at 768 left the
   768-1024 tablet range styled as mobile while Elementor still had it in two
   columns, which stranded the third card in a half column. */
@media (max-width: 767px) {
    .zs-category-grid__card--media,
    .zs-category-grid__card--media .zs-category-grid__card-body {
        min-height: 330px;
    }

    .zs-category-grid__card--media {
        padding: 0;
    }

    .zs-category-grid__card--media .zs-category-grid__card-body {
        padding: 26px 22px 24px;
    }

    .zs-category-grid__card--media .zs-category-grid__title {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   Product tiles — the editorial showcase
   --------------------------------------------------------------------------
   Chosen per instance with the Image Card Layout control; the overlay cards
   above are untouched.

   There is deliberately no card shell. The photograph *is* the tile: it fills
   the whole thing, and the gold category, crop name and arrow sit over a
   gradient that only deepens where the type needs it. The previous version
   put every crop on an identically sized white panel with a caption bar
   below, which gave the section the same cadence as the team directory — ten
   equal portraits in a regular grid. Varying the spans and losing the panel
   is what separates the two.

   Spans come from the Card Size control, not from nth-child: the composition
   has to survive a card being added, removed or reordered.
   ========================================================================== */

/* Large rhythm tier. Figma 11096:35518 sets this section at 120 top and
   bottom; the 76 here was a compensation for the showcase's extra weight,
   made before Figma was available. */
.zs-category-grid:has(.zs-category-grid__card--product) {
    padding: var(--zs-section-padding-lg, 120px) 0;
}

.zs-category-grid:has(.zs-category-grid__card--product) .zs-category-grid__header {
    margin-bottom: 36px;
}

.zs-category-grid__cards:has(.zs-category-grid__card--product) {
    display: grid;
    /* `!important` because the widget's own Columns control prints
       `grid-template-columns: repeat(N, 1fr)` at
       `.elementor-19 .elementor-element-<id> .zs-category-grid__cards`, which
       is (0,4,0) and outranks anything this file can write. Left to the
       control the twelve-column track never exists and every `span 6` tile
       overflows a two-column grid. Same printed-default collision as the card
       and pill colours above. */
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 24px;
}

/* Each band's height comes from the aspect ratio of the tiles in it, so the
   rows size themselves and nothing needs a fixed pixel height. `featured`
   carries no ratio of its own — spanning two rows plus the gap is what makes
   it the anchor. */
.zs-category-grid__card--size-small {
    grid-column: span 3;
    aspect-ratio: 1.9;
}

.zs-category-grid__card--size-medium {
    grid-column: span 4;
    aspect-ratio: 2.1;
}

.zs-category-grid__card--size-wide {
    grid-column: span 6;
    aspect-ratio: 3;
}

.zs-category-grid__card--size-featured {
    grid-column: span 6;
    grid-row: span 2;
}

.zs-category-grid__card--product {
    position: relative;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 20px;
    /* Sits under the photograph while it decodes and behind the gradient if
       one ever fails, so the type never lands on nothing. */
    background-color: var(--zs-primary-dark, #1e3d1a) !important;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}

/* The anchor tile takes a slightly softer corner than the rest — enough to
   read as deliberate next to them, not enough to look like a different
   component. */
.zs-category-grid__card--size-featured {
    border-radius: 26px;
}

.zs-category-grid__cards .zs-category-grid__card--product {
    /* Barely there: at rest the tiles should read as photographs laid onto
       the cream, not as cards floating above it. */
    box-shadow: 0 6px 18px rgba(37, 79, 34, 0.10);
    transition: box-shadow 300ms ease;
}

.zs-category-grid__card--product .zs-category-grid__card-media {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: var(--zs-green-soft, #eef4df);
}

.zs-category-grid__card--product .zs-category-grid__card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease;
}

/* Legibility only. Nothing above the midline is touched, so the crop stays
   the subject. */
.zs-category-grid__card--product::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(10, 26, 10, 0.86) 0%,
        rgba(10, 26, 10, 0.58) 22%,
        rgba(10, 26, 10, 0.14) 46%,
        rgba(10, 26, 10, 0) 64%
    );
    transition: opacity 300ms ease;
    opacity: 1;
}

/* A crop still waiting on client photography keeps the tile's shape rather
   than borrowing another crop's picture: a deep field green under the
   theme's own botanical mark. */
.zs-category-grid__card--awaiting-image .zs-category-grid__card-media {
    background-color: #2f4a2b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 168'%3E%3Cg fill='none' stroke='%237e9673' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 128C44 82 66 40 100 22c2 46-22 88-60 106z'/%3E%3Cpath d='M40 128C60 96 80 62 100 22'/%3E%3Cpath d='M62 140c14-24 36-40 56-40-10 28-32 44-56 40z'/%3E%3Cpath d='M62 140c20-14 38-28 56-40'/%3E%3Cpath d='M40 128c3 16 9 30 16 40'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 34%;
    background-size: 46px auto;
}

.zs-category-grid__card--product .zs-category-grid__card-body {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    min-height: 0;
    padding: 18px 20px 17px;
}

.zs-category-grid__card--product .zs-category-grid__card-eyebrow {
    flex: 1 0 100%;
    margin-bottom: 2px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(233, 199, 133, 0.95);
    transition: transform 300ms ease;
}

.zs-category-grid__card--product .zs-category-grid__title {
    font-size: 1.375rem;
    line-height: 1.15;
    color: #ffffff;
}

.zs-category-grid__card--size-featured .zs-category-grid__title {
    font-size: 2rem;
}

.zs-category-grid__card--size-featured .zs-category-grid__card-body {
    padding: 24px 26px 22px;
}

.zs-category-grid__card--product .zs-category-grid__card-arrow {
    flex: 0 0 auto;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(233, 199, 133, 0.95);
    transition: transform 300ms ease;
}

/* Photographic, not card-like: the picture moves, the tile does not. */
@media (hover: hover) and (pointer: fine) {
    a.zs-category-grid__card--product:hover .zs-category-grid__card-image {
        transform: scale(1.04);
    }

    a.zs-category-grid__card--product:hover::after {
        opacity: 1.18;
    }

    a.zs-category-grid__card--product:hover .zs-category-grid__card-arrow {
        transform: translateX(5px);
    }

    a.zs-category-grid__card--product:hover .zs-category-grid__card-eyebrow {
        transform: translateX(2px);
    }

    /* Product tiles also carry --media, so the overlay card's translateY
       was still reaching them. The tile is meant to stay put while the
       photograph moves. */
    a.zs-category-grid__card--product:hover {
        transform: none;
        box-shadow: 0 14px 30px rgba(37, 79, 34, 0.18);
    }
}

a.zs-category-grid__card--product:focus-visible {
    outline: 3px solid rgba(233, 199, 133, 0.9);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .zs-category-grid__card--product,
    .zs-category-grid__card--product .zs-category-grid__card-image,
    .zs-category-grid__card--product .zs-category-grid__card-arrow,
    .zs-category-grid__card--product .zs-category-grid__card-eyebrow,
    .zs-category-grid__card--product::after {
        transition: none;
    }

    a.zs-category-grid__card--product:hover .zs-category-grid__card-image,
    a.zs-category-grid__card--product:hover .zs-category-grid__card-arrow,
    a.zs-category-grid__card--product:hover .zs-category-grid__card-eyebrow {
        transform: none;
    }
}

/* Tablet — the bento does not survive being squeezed, so it simplifies to a
   two-column editorial grid: the anchor and the wide tiles run full width,
   everything else pairs up. */
@media (max-width: 1100px) and (min-width: 641px) {
    .zs-category-grid__cards:has(.zs-category-grid__card--product) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Every tile takes one column here. Letting the anchor and the wide
       tiles run full width looked right in principle and measured 2979px at
       1024 — three 2.4-ratio banners on top of four paired rows, with the
       tenth tile orphaned underneath. Ten equal tiles pair exactly, so the
       column never ends short. */
    .zs-category-grid__card--size-small,
    .zs-category-grid__card--size-medium,
    .zs-category-grid__card--size-wide,
    .zs-category-grid__card--size-featured {
        grid-column: span 1;
        grid-row: auto;
        aspect-ratio: 1.6;
    }

    .zs-category-grid__card--size-featured {
        border-radius: 20px;
    }

    .zs-category-grid__card--size-featured .zs-category-grid__title {
        font-size: 1.375rem;
    }

    .zs-category-grid__card--size-featured .zs-category-grid__card-body {
        padding: 18px 20px 17px;
    }
}

/* Mobile — a swipeable rail. Portrait tiles so the photography still lands,
   and the next card peeks to say the row moves. Native scrolling is kept;
   only the scrollbar furniture is hidden. */
@media (max-width: 640px) {
    .zs-category-grid__cards:has(.zs-category-grid__card--product) {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        width: 100%;
        max-width: none;
        padding-inline: var(--zs-container-padding, 20px);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--zs-container-padding, 20px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .zs-category-grid__cards:has(.zs-category-grid__card--product)::-webkit-scrollbar {
        display: none;
    }

    .zs-category-grid__card--product,
    .zs-category-grid__card--size-small,
    .zs-category-grid__card--size-medium,
    .zs-category-grid__card--size-wide,
    .zs-category-grid__card--size-featured {
        flex: 0 0 82vw;
        max-width: 330px;
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 4 / 5;
        scroll-snap-align: start;
    }

    .zs-category-grid__card--product .zs-category-grid__title,
    .zs-category-grid__card--size-featured .zs-category-grid__title {
        font-size: 1.5rem;
    }

    .zs-category-grid__card--size-featured .zs-category-grid__card-body {
        padding: 18px 20px 17px;
    }
}

/* A quiet way out of the section, so no single tile has to carry the whole
   product range. */
.zs-category-grid__footer {
    display: flex;
    justify-content: center;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin: 30px auto 0;
}

.zs-category-grid__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(196, 140, 51, 0.5);
    padding-bottom: 3px;
    transition: color 220ms ease, border-color 220ms ease;
}

.zs-category-grid__footer-link::after {
    content: "\2192";
    transition: transform 260ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .zs-category-grid__footer-link:hover {
        color: var(--zs-primary-dark, #1e3d1a);
        border-bottom-color: var(--zs-accent, #c48c33);
    }

    .zs-category-grid__footer-link:hover::after {
        transform: translateX(4px);
    }
}

.zs-category-grid__footer-link:focus-visible {
    outline: 3px solid rgba(196, 140, 51, 0.55);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .zs-category-grid__footer-link,
    .zs-category-grid__footer-link::after {
        transition: none;
    }

    .zs-category-grid__footer-link:hover::after {
        transform: none;
    }
}