/**
 * Zamseed Values Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* Figma About 11096:34625 puts this section in the 1200 column at x120 with
   92px of vertical breathing room. The widget carried neither: it spanned the
   full 1240 boxed width with no padding at all, which is most of why Core
   Values rendered 587px tall against Figma's 856. 92 is inside the standard
   tier's band, so it reads the tier rather than adding a fourth value. */
.zs-values {
    position: relative;
    width: min(var(--zs-container-max, 1200px), calc(100% - var(--zs-container-padding, 20px) * 2));
    margin-inline: auto;
    padding-block: var(--zs-section-padding, 100px);
}

/* The inline-margin half of the alignment contract is written by the
   `header_alignment` control's selectors_dictionary so it stays responsive.
   Previously this was `[style*="center"]`, an attribute-substring selector that
   never matched: Elementor emits control selectors into a generated stylesheet,
   not into a style attribute, so the centred header was never actually centred
   on the front end. */
/* Figma 11096:34627 measures this header block at 740 — the narrow container role. */
.zs-values__header { margin-bottom: 48px; max-width: var(--zs-container-narrow, 740px); }

.zs-values__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Token fix: this was the only eyebrow in the theme on --zs-secondary
       (#d35400, an orange), and — unlike its siblings — it has no colour
       control default masking it, so the About page really did render an
       orange eyebrow between four gold ones. --zs-accent is the brand gold. */
    color: var(--zs-accent, #c48c33);
}

.zs-values__heading {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    /* Matches statement-cards / brand-promise / partners section headings. */
    color: var(--zs-primary, #2d5a27);
}

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

.zs-values__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Figma 11140:11018: articles at x0/408/816, i.e. a 20 gutter. */
    gap: 20px;
}

/* The card's box is defined once, further down, by the reference-matched
   block. Only the transition belongs here: every other declaration this rule
   used to carry (12px radius, 28/24 padding, centred text, white background)
   was overridden by that later block at the same specificity, so it never
   applied. */
.zs-values__card {
    transition: var(--zs-transition-card, transform 0.3s ease, box-shadow 0.3s ease);
}

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

.zs-values__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background-color: var(--zs-green-soft, #eef4df);
    border-radius: 12px;
    color: var(--zs-primary, #2d5a27);
    font-size: 24px;
}

/* Uploaded SVG/image icons render as <img> — keep them inside the icon box */
.zs-values__icon img {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

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

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

.zs-values__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;
}

.zs-values__empty p { margin: 0; font-family: var(--zs-font-sans, 'Inter', sans-serif); font-size: 0.9375rem; color: var(--zs-muted, #555555); }

/* The editor-only hint sits under the published Empty State Message. */
.zs-values__empty p + p { margin-top: 10px; font-size: 0.875rem; opacity: 0.85; }

/* Breakpoints track Elementor's default tiers (tablet <= 1024, mobile <= 767)
   so the hand-written CSS and the responsive control values switch together.
   At 1080/760 there were two dead bands: 1025-1080px applied the CSS tablet
   layout while every tablet control value was still inactive, and 761-767px
   applied mobile control values against the desktop CSS layout. */
@media (max-width: 1024px) { .zs-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .zs-values__header { margin-bottom: 32px; }
    .zs-values__heading { font-size: clamp(1.75rem, 6vw, 2rem); }
    .zs-values__grid { grid-template-columns: 1fr; gap: 16px; }
    .zs-values__card { padding: 24px 20px; }
}

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

/* Six values in a 3 x 2 grid.
   The repeater has always accepted any number of rows; what was missing was the
   card box the reference shows, so six rows rendered as six unstyled cells. */
.zs-values__card {
    min-height: 210px;
    padding: 33px 29px;
    /* Left, not centred. The reference reads as a list of principles, and
       centred short titles over centred body copy is what made the earlier
       four-card version look sparse. */
    text-align: left;
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--zs-radius-card, 20px);
    background: var(--zs-card, #ffffff);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.04);
}

.zs-values__grid {
    align-items: stretch;
}

.zs-values__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #eef4df;
}

.zs-values__icon svg,
.zs-values__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    fill: currentColor;
}

@media (max-width: 1023px) {
    .zs-values__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .zs-values__grid {
        grid-template-columns: 1fr;
    }

    .zs-values__card {
        min-height: 0;
        padding: 26px 22px;
    }
}