/**
 * Zamseed Variety Explorer Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-variety-explorer__heading {
    margin: 0 0 24px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   Tabs — pill style, confirmed against the actual "standard" crop
   reference (Figma node 11185:14164, Maize varieties): filled pill for
   the active tab, bordered white pill for inactive ones, in BOTH the
   standard and horticulture layout modes. There is no evidence of a
   distinct underline-tab treatment for either mode, so a single tab
   style is used regardless of .zs-variety-explorer--horticulture.
   ========================================================================== */

.zs-variety-explorer__tablist,
.zs-variety-explorer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.zs-variety-explorer__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 19px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--zs-text, #1c1c1c);
    background-color: #ffffff;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.zs-variety-explorer__tab:hover {
    border-color: var(--zs-primary, #2d5a27);
}

.zs-variety-explorer__tab.is-active {
    background-color: var(--zs-primary, #2d5a27);
    border-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

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

/* ==========================================================================
   Detail Panel
   ========================================================================== */

.zs-variety-explorer__panel {
    display: grid;
    grid-template-columns: minmax(0, 592fr) minmax(0, 568fr);
    gap: 80px;
    align-items: start;
}

.zs-variety-explorer__panel[hidden] {
    display: none;
}

/* No image on the record: the media column is not emitted at all, so without
   this the copy is pinned to ~51% of the row and the right-hand 568fr track
   stays permanently empty. Every zs_variety on this site has _thumbnail_id 0,
   which makes this the live layout on /products/maize/, not an edge case.
   Placed before --compact so the compact variant's own two-column rule (which
   comes later in the file) can still be overridden by the no-media pair at
   the foot of this block. */
.zs-variety-explorer__panel--no-media {
    grid-template-columns: minmax(0, 1fr);
    /* The 80px column gutter is meaningless with one column; keep a modest
       stack gap in case a future field lands beside the content block. */
    gap: 24px;
    /* The panel is now a single measure of running text — cap it at a
       comfortable reading width instead of letting it span the full 1200px
       container. */
    max-width: 760px;
}

/* The media box owns the geometry, not the image. wp_get_attachment_image()
   emits width/height attributes, and the height attribute is a presentational
   hint that sets a real used height — which makes `aspect-ratio` on the <img>
   a no-op, because a ratio only fills in a dimension that is auto. That is why
   the square declared below never happened: Maize's eight variety assets are
   614x409, 960x1280 and 768x1024, so the panel rendered 409px tall for six
   varieties and 1024px tall for the other two, jumping 615px on tab switch.
   Fixing the ratio here, and giving the image an explicit height, holds one
   box for every asset whatever its native shape. */
.zs-variety-explorer__media {
    position: relative;
    /* The Figma variety slot is 592 x 607. */
    aspect-ratio: 592 / 607;
    border-radius: 16px;
    overflow: hidden;
    /* Isolated product shots are cut out on white; a white field lets them sit
       in the frame without a visible grey surround. */
    background-color: #ffffff;
}

.zs-variety-explorer__image {
    display: block;
    width: 100%;
    /* Beats the height="" presentational hint, so the box above governs. */
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Cut-out product shots. Filling the slot crops a landscape cut-out until the
   subject's ends are clipped — Maize's 614x409 cobs lost their tip and base —
   so these sit whole inside the same box instead. The frame is unchanged, so
   the panel still does not move when the variety changes. */
.zs-variety-explorer__media--contain .zs-variety-explorer__image {
    object-fit: contain;
}

.zs-variety-explorer__content {
    display: flex;
    flex-direction: column;
}

.zs-variety-explorer__name {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--zs-text, #1c1c1c);
}

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

/* Quick-stat boxes */
.zs-variety-explorer__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.zs-variety-explorer__stat {
    padding: 16px;
    background-color: transparent;
    border: 1px solid var(--zs-border, rgba(3, 7, 10, 0.1));
    border-radius: 12px;
}

.zs-variety-explorer__stat-label {
    display: block;
    margin-bottom: 5px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    /* Figma specifies #6c7075 here specifically — close to but not the
       same token as --zs-muted (#555555) used elsewhere in this file. */
    color: #6c7075;
}

.zs-variety-explorer__stat-value {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.0125em;
    /* Figma specifies #145f35 for this data-emphasis green, distinct
       from --zs-primary (#2d5a27) — matches the same darker "value"
       green used for positive figures in the comparison table mock. */
    color: #145f35;
}

/* Details / characteristics list */
.zs-variety-explorer__details-label {
    margin: 0 0 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--zs-text, #1c1c1c);
}

.zs-variety-explorer__characteristics {
    margin: 0;
    border-top: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
}

.zs-variety-explorer__characteristic {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
}

.zs-variety-explorer__characteristic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--zs-primary, #2d5a27);
}

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

.zs-variety-explorer__characteristic dt {
    flex: 0 0 auto;
    min-width: 160px;
    font-weight: 600;
    color: var(--zs-muted, #555555);
}

.zs-variety-explorer__characteristic dd {
    margin: 0;
    font-weight: 600;
    color: var(--zs-text, #1c1c1c);
}

/* Compact / horticulture panel */
.zs-variety-explorer__panel--compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
}

.zs-variety-explorer__panel--compact .zs-variety-explorer__name {
    font-size: 1.5rem;
}

/* Compact + no media: the compact rule above sits later in the file and at
   equal specificity, so the single-column collapse has to be restated for the
   pair or a horticulture panel with no image keeps the empty second track. */
.zs-variety-explorer__panel--compact.zs-variety-explorer__panel--no-media {
    grid-template-columns: minmax(0, 1fr);
}

.zs-variety-explorer__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--zs-warm, #fdfcf9);
    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);
}

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

@media (max-width: 1080px) {
    .zs-variety-explorer__panel,
    .zs-variety-explorer__panel--compact {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 760px) {
    .zs-variety-explorer__tablist,
    .zs-variety-explorer__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .zs-variety-explorer__tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .zs-variety-explorer__stats {
        grid-template-columns: 1fr;
    }

    .zs-variety-explorer__characteristic {
        flex-direction: column;
        gap: 2px;
    }

    .zs-variety-explorer__characteristic dt {
        min-width: 0;
    }
}

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