/**
 * Zamseed Impact Stats Widget Styles
 *
 * A full-width image band, a white introduction card overlapping its foot, and
 * a divided stat row beneath. About page, position 10.
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-impact-stats {
    --zs-impact-focal-x: 50%;
    --zs-impact-focal-y: 50%;
    --zs-impact-image-fit: cover;
    --zs-impact-overlay-start: rgba(15, 36, 24, 0.24);
    --zs-impact-overlay-end: rgba(15, 36, 24, 0.72);
    --zs-impact-divider-color: rgba(15, 36, 24, 0.12);
    --zs-impact-divider-width: 1px;
    display: block;
    width: 100%;
    background-color: var(--zs-warm, #fdfcf9);
}

/* ==========================================================================
   Image band
   ========================================================================== */

.zs-impact-stats__media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 373px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--zs-dark-green, #0f2418);
}

/* Qualified with the media class and the element.
   Elementor ships `.elementor img { height: auto; max-width: 100% }` at (0,1,1).
   A single-class rule here is (0,1,0) and loses, which drops the band to the
   image's intrinsic height and exposes the band background — the same cascade
   failure already fixed in CSR, Statement Cards and Legacy Split. (0,2,1) wins. */
.zs-impact-stats__media img.zs-impact-stats__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--zs-impact-image-fit);
    object-position: var(--zs-impact-focal-x) var(--zs-impact-focal-y);
}

.zs-impact-stats__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--zs-impact-overlay-start) 0%,
        var(--zs-impact-overlay-end) 100%
    );
}

.zs-impact-stats__badge {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
}

.zs-impact-stats__media--badge-top-right .zs-impact-stats__badge {
    left: auto;
    right: 28px;
}

/* ==========================================================================
   Introduction card
   ========================================================================== */

.zs-impact-stats__card {
    position: relative;
    z-index: 3;
    width: min(760px, calc(100% - var(--zs-container-padding, 20px) * 2));
    max-width: 760px;
    /* Rises over the band. The negative margin is the overlap control's own
       property, so an editor can flatten it to 0 without touching anything else. */
    margin: -100px auto 0;
    padding: 56px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 36, 24, 0.12);
    text-align: center;
}

.zs-impact-stats__heading {
    margin: 0 0 16px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary, #2d5a27);
}

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

/* ==========================================================================
   Stat row
   ========================================================================== */

.zs-impact-stats__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1100px, calc(100% - var(--zs-container-padding, 20px) * 2));
    max-width: 1100px;
    margin: 64px auto 0;
    padding: 40px 0;
    border-top: var(--zs-impact-divider-width) solid var(--zs-impact-divider-color);
    border-bottom: var(--zs-impact-divider-width) solid var(--zs-impact-divider-color);
}

.zs-impact-stats__item {
    padding: 0 24px;
    text-align: center;
    /* Vertical rules between columns only — never before the first. */
    border-left: var(--zs-impact-divider-width) solid var(--zs-impact-divider-color);
}

.zs-impact-stats__item:first-child {
    border-left: 0;
}

.zs-impact-stats__item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.zs-impact-stats__item-link:focus-visible {
    outline: 3px solid var(--zs-accent, #c48c33);
    outline-offset: 4px;
}

.zs-impact-stats__value {
    margin: 0 0 8px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.5rem, 4.4vw, 3.9375rem);
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary, #2d5a27);
}

.zs-impact-stats__affix {
    font-size: 0.72em;
}

.zs-impact-stats__label {
    margin: 0 0 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--zs-accent-text, #9a6c1f);
}

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

.zs-impact-stats__source {
    margin: 8px 0 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-style: italic;
    color: var(--zs-muted, #555555);
}

.zs-impact-stats__row--empty {
    display: block;
    text-align: center;
}

.zs-impact-stats__empty-message {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    color: var(--zs-text, #1c1c1c);
}

.zs-impact-stats__empty-hint {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--zs-accent, #c48c33);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    color: var(--zs-accent-text, #9a6c1f);
}

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

@media (max-width: 1023px) {
    .zs-impact-stats__media {
        min-height: 300px;
    }

    .zs-impact-stats__card {
        margin-top: -72px;
        padding: 40px 32px;
    }

    .zs-impact-stats__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    /* With two columns the left rule belongs on the second item of each row,
       not on every item after the first. */
    .zs-impact-stats__item:nth-child(odd) {
        border-left: 0;
    }
}

@media (max-width: 767px) {
    .zs-impact-stats__media {
        min-height: 240px;
    }

    .zs-impact-stats__card {
        margin-top: -48px;
        padding: 32px 24px;
        border-radius: 16px;
    }

    .zs-impact-stats__row {
        grid-template-columns: 1fr;
        row-gap: 0;
        margin-top: 40px;
        padding: 8px 0;
    }

    /* Stacked: vertical rules make no sense, horizontal separators do. */
    .zs-impact-stats__item {
        padding: 24px 0;
        border-left: 0;
        border-top: var(--zs-impact-divider-width) solid var(--zs-impact-divider-color);
    }

    .zs-impact-stats__item:first-child {
        border-top: 0;
    }

    .zs-impact-stats__badge {
        top: 20px;
        left: 20px;
    }

    .zs-impact-stats__media--badge-top-right .zs-impact-stats__badge {
        right: 20px;
    }
}