/**
 * Zamseed Statement Cards Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-statement-cards-wrap { position: relative; }

.zs-statement-cards__header { margin-bottom: 48px; max-width: 700px; }

.zs-statement-cards__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;
    /* --zs-accent (#c48c33) is the brand gold, and is what actually rendered:
       the eyebrow_color control default forced #c48c33 over this declaration.
       That default is now blank and this is the single source of truth. */
    color: var(--zs-accent, #c48c33);
}

.zs-statement-cards__heading {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--zs-primary, #2d5a27);
}

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

/* Figma About 11096:34597 gives this section 100px of vertical space and the
   1200 column. The wrap carried neither, so the band sat flush against its
   neighbours. Padding goes on the wrap, not the grid, so the card gap is
   untouched. */
.zs-statement-cards-wrap {
    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);
}

.zs-statement-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.zs-statement-card {
    --zs-card-overlay-color: #2d5a27;
    --zs-card-overlay-opacity: 0;
    /* Neutral black scrim: the design darkens the photograph rather than
       tinting it green. */
    --zs-card-gradient-start: rgba(0, 0, 0, 0.06);
    --zs-card-gradient-end: rgba(0, 0, 0, 0.8);
    --zs-card-gradient-angle: 180deg;

    position: relative;
    display: flex;
    min-height: 310px;
    overflow: hidden;
    border-radius: 16px;
    isolation: isolate;
    /* Solid fallback for imageless cards (e.g. Vision/Mission before the
       editor selects photos) — a mid green so the gradient overlay and
       white text stay readable without any placeholder image. */
    background-color: var(--zs-primary, #2d5a27);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.08);
}

/* Qualified with the card class and the element.
   Elementor ships `.elementor img { height: auto; max-width: 100% }` at (0,1,1).
   This rule was `.zs-statement-card__image` alone, (0,1,0), so it lost: the
   photograph fell back to its intrinsic ratio and the card's dark background
   showed beneath it — the image filling only part of the card. Same cascade loss
   that produced the CSR grey panel. (0,2,1) wins. */
.zs-statement-card img.zs-statement-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--zs-card-focal-x, 50%) var(--zs-card-focal-y, 50%);
    transition: transform 0.5s ease;
}

.zs-statement-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(var(--zs-card-gradient-angle), var(--zs-card-gradient-start), var(--zs-card-gradient-end));
}

.zs-statement-cards--no-gradient .zs-statement-card__overlay {
    background: none;
}

.zs-statement-card__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--zs-card-overlay-color);
    opacity: var(--zs-card-overlay-opacity);
}

.zs-statement-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 34px;
    gap: 12px;
    /* Placement is read from custom properties rather than written directly,
       so the `content_position` control can be responsive: a CSS class cannot
       vary per breakpoint, but a custom property set by an Elementor
       selectors_dictionary can. The --pos-* classes below remain the base
       layer (and the fallback for an instance with no stored value). */
    justify-content: var(--zs-card-justify, flex-end);
    align-items: var(--zs-card-align, flex-start);
    margin-block: var(--zs-card-margin-block, auto 0);
}

/* Content position — base layer.
   `text-align` is deliberately NOT set here: the separate `text_align` control
   writes text-align to this same element at higher specificity on every
   instance, so declaring it here only looked like it worked. */
.zs-statement-card--pos-top-left      { --zs-card-justify: flex-start; --zs-card-align: flex-start; --zs-card-margin-block: 0 auto; }
.zs-statement-card--pos-top-center    { --zs-card-justify: flex-start; --zs-card-align: center;     --zs-card-margin-block: 0 auto; }
.zs-statement-card--pos-top-right     { --zs-card-justify: flex-start; --zs-card-align: flex-end;   --zs-card-margin-block: 0 auto; }
.zs-statement-card--pos-center-left   { --zs-card-justify: center;     --zs-card-align: flex-start; --zs-card-margin-block: auto; }
.zs-statement-card--pos-center-center { --zs-card-justify: center;     --zs-card-align: center;     --zs-card-margin-block: auto; }
.zs-statement-card--pos-center-right  { --zs-card-justify: center;     --zs-card-align: flex-end;   --zs-card-margin-block: auto; }
.zs-statement-card--pos-bottom-left   { --zs-card-justify: flex-end;   --zs-card-align: flex-start; --zs-card-margin-block: auto 0; }
.zs-statement-card--pos-bottom-center { --zs-card-justify: flex-end;   --zs-card-align: center;     --zs-card-margin-block: auto 0; }
.zs-statement-card--pos-bottom-right  { --zs-card-justify: flex-end;   --zs-card-align: flex-end;   --zs-card-margin-block: auto 0; }

/* The default gradient scrim is bottom-heavy (darkest at the bottom), which
   only backs bottom-positioned content. Reuse the same overlay mechanism —
   the gradient for top positions, the solid overlay layer for center
   positions — so every content position keeps adequate text contrast
   against the background image. The responsive `content_position` control
   re-declares the gradient angle alongside the placement, so the scrim follows
   the position at every breakpoint instead of being frozen at the desktop
   value. Tint opacity stays here only: the Tint controls own that property and
   outrank both layers whenever the tint is enabled. */
.zs-statement-card--pos-top-left,
.zs-statement-card--pos-top-center,
.zs-statement-card--pos-top-right {
    --zs-card-gradient-angle: 0deg;
}

.zs-statement-card--pos-center-left,
.zs-statement-card--pos-center-center,
.zs-statement-card--pos-center-right {
    --zs-card-overlay-opacity: 0.35;
}

.zs-statement-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
    font-size: 20px;
    color: #ffffff;
}

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

.zs-statement-card__label {
    display: inline-block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.zs-statement-card__heading {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* 30px flat, not a clamp: these cards sit two-up in a fixed 1200px
       container, so the clamp only ever resolved to its floor on the layouts
       that matter and undersized the heading by ~5px. */
    font-size: clamp(1.625rem, 2.4vw, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.zs-statement-card__description {
    margin: 0;
    max-width: 30em;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.125rem;
    line-height: 1.45;
    color: #ffffff;
}

/* Hover animations */
.zs-statement-cards--hover-zoom .zs-statement-card:hover img.zs-statement-card__image {
    transform: scale(1.025);
}

.zs-statement-cards--hover-lift .zs-statement-card {
    transition: transform 260ms var(--zs-ease-hover, ease), box-shadow 260ms var(--zs-ease-hover, ease);
}

.zs-statement-cards--hover-lift .zs-statement-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zs-shadow, 0 18px 50px rgba(45, 90, 39, 0.18));
}

.zs-statement-cards__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-statement-cards__empty p {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    color: var(--zs-muted, #555555);
}

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

/* Breakpoints track Elementor's default tiers (tablet <= 1024, mobile <= 767)
   so the hand-written CSS and the responsive control values (columns,
   card_height, card_gap, card_padding) switch on the same pixel. */
@media (max-width: 1024px) {
    .zs-statement-cards { grid-template-columns: 1fr 1fr; gap: 20px; }
    .zs-statement-card { min-height: 280px; }
}

@media (max-width: 767px) {
    .zs-statement-cards-wrap .zs-statement-cards__header { margin-bottom: 32px; }
    .zs-statement-cards { grid-template-columns: 1fr; gap: 20px; }
    .zs-statement-card { min-height: 260px; }
    .zs-statement-card__content { padding: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-statement-card__image,
    .zs-statement-cards--hover-lift .zs-statement-card {
        transition: none;
    }
    .zs-statement-cards--hover-zoom .zs-statement-card:hover img.zs-statement-card__image {
        transform: none;
    }
    .zs-statement-cards--hover-lift .zs-statement-card:hover {
        transform: none;
    }
}