/* ==================================================================
 *  Agrovaru Stats Counter — agrovaru-stats.css
 *  Plugin by Go4Digital
 *
 *  CSS muutujad (--as-*) seatakse inline stiilis administ.
 *  Fallback väärtused vastavad Agrovaru rohelisele paletile.
 * ================================================================== */


.agrovaru-stats-wrapper {
    --as-cols: 4;
    --as-color-number: #3a7d2c;
    --as-color-label: #444;
    --as-color-bg: #ffffff;
    --as-color-card-bg: #f5f8f3;
    --as-color-separator: #3a7d2c;
    --as-color-accent: #76b94e;
    --as-fs-number: 4.5rem;
    --as-fs-suffix: 3rem;
    --as-fs-label: 0.9rem;
    --as-fs-icon: 2.5rem;
    --as-fw-number: 700;
    --as-fw-label: 500;
    --as-letter-spacing: 0.04em;
    --as-text-transform: uppercase;
    --as-text-align: left;
    --as-flex-align: flex-start;
    --as-pad-y: 48px;
    --as-pad-x: 0;
    --as-item-pad-y: 32px;
    --as-item-pad-x: 32px;
    --as-gap: 0px;
    --as-radius: 12px;
    --as-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --as-font-number: inherit;

    display: grid;
    grid-template-columns: repeat(var(--as-cols), 1fr);
    gap: var(--as-gap);
    width: 100%;
    padding: var(--as-pad-y) var(--as-pad-x);
    background: var(--as-color-bg);
    box-sizing: border-box;
}


/* ============================================================
 *  ÜKSIK ELEMENT — ÜLDISED OMADUSED (kõigis variantides)
 * ============================================================ */
.agrovaru-stats-item {
    display: flex;
    flex-direction: column;
    align-items: var(--as-flex-align);
    justify-content: flex-end;
    text-align: var(--as-text-align);
    padding: var(--as-item-pad-y) var(--as-item-pad-x);
    position: relative;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}


.agrovaru-stats-item.as-visible {
    opacity: 1;
    transform: translateY(0);
}


.agrovaru-stats-number-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}


.agrovaru-stats-number {
    font-family: var(--as-font-number);
    font-size: var(--as-fs-number);
    font-weight: var(--as-fw-number);
    letter-spacing: -0.02em;
    color: var(--as-color-number);
    line-height: 1;
}


/* Eesliide (prefix) ja sufiks — eraldiseisvad elemendid */
.agrovaru-stats-prefix,
.agrovaru-stats-suffix {
    font-family: var(--as-font-number);
    font-size: var(--as-fs-suffix);
    font-weight: var(--as-fw-number);
    color: var(--as-color-number);
    line-height: 1;
    letter-spacing: -0.01em;
    align-self: baseline;
}


.agrovaru-stats-label {
    font-size: var(--as-fs-label);
    font-weight: var(--as-fw-label);
    letter-spacing: var(--as-letter-spacing);
    text-transform: var(--as-text-transform);
    color: var(--as-color-label);
    margin-top: 12px;
    line-height: 1.35;
}


.agrovaru-stats-icon {
    font-size: var(--as-fs-icon);
    line-height: 1;
    margin-bottom: 14px;
    display: none; /* näita kui has-icons klass on */
}


.agrovaru-stats-wrapper.has-icons .agrovaru-stats-icon {
    display: block;
}


/* ============================================================
 *  VARIANT 1 — KLASSIKALINE (vertikaalsed eraldajad)
 * ============================================================ */
.agrovaru-design-classic.has-separators .agrovaru-stats-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--as-color-separator);
    opacity: 0.25;
}


/* ============================================================
 *  VARIANT 2 — KAARDID
 * ============================================================ */
.agrovaru-design-cards {
    --as-gap: 24px;
    gap: var(--as-gap);
}


.agrovaru-design-cards .agrovaru-stats-item {
    background: var(--as-color-card-bg);
    border-radius: var(--as-radius);
    box-shadow: var(--as-shadow);
    align-items: center;
    text-align: center;
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, translate 0.3s ease;
}


.agrovaru-design-cards .agrovaru-stats-item:hover {
    translate: 0 -4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}


/* ============================================================
 *  VARIANT 3 — VÄRVILINE TAUST (filled)
 * ============================================================ */
.agrovaru-design-filled {
    background: var(--as-color-number);
}


.agrovaru-design-filled .agrovaru-stats-number,
.agrovaru-design-filled .agrovaru-stats-prefix,
.agrovaru-design-filled .agrovaru-stats-suffix,
.agrovaru-design-filled .agrovaru-stats-icon {
    color: #fff;
}


.agrovaru-design-filled .agrovaru-stats-label {
    color: rgba(255, 255, 255, 0.85);
}


.agrovaru-design-filled .agrovaru-stats-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}


/* ============================================================
 *  VARIANT 4 — MINIMALIST
 * ============================================================ */
.agrovaru-design-minimal .agrovaru-stats-item {
    align-items: center;
    text-align: center;
}


.agrovaru-design-minimal .agrovaru-stats-label {
    margin-top: 6px;
    opacity: 0.7;
}


.agrovaru-design-minimal.has-separators .agrovaru-stats-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    height: 40%;
    width: 1px;
    background: var(--as-color-separator);
    opacity: 0.2;
}


/* ============================================================
 *  VARIANT 5 — IKOONIDEGA
 * ============================================================ */
.agrovaru-design-icons .agrovaru-stats-item {
    align-items: center;
    text-align: center;
    padding-top: calc(var(--as-item-pad-y) + 8px);
}


.agrovaru-design-icons .agrovaru-stats-icon {
    display: block;
    color: var(--as-color-accent);
    margin-bottom: 18px;
    transition: transform 0.3s ease;
}


.agrovaru-design-icons .agrovaru-stats-item:hover .agrovaru-stats-icon {
    transform: scale(1.1) rotate(-5deg);
}


/* ============================================================
 *  VARIANT 6 — RINGID
 * ============================================================ */
.agrovaru-design-circles {
    --as-gap: 32px;
    gap: var(--as-gap);
}


.agrovaru-design-circles .agrovaru-stats-item {
    align-items: center;
    text-align: center;
}


.agrovaru-design-circles .agrovaru-stats-number-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--as-color-number) 0%, var(--as-color-accent) 100%);
    box-shadow:
        0 12px 32px -8px color-mix(in srgb, var(--as-color-number) 40%, transparent),
        inset 0 -4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.agrovaru-design-circles .agrovaru-stats-item:hover .agrovaru-stats-number-wrap {
    transform: scale(1.05);
}


.agrovaru-design-circles .agrovaru-stats-number,
.agrovaru-design-circles .agrovaru-stats-prefix,
.agrovaru-design-circles .agrovaru-stats-suffix {
    color: #fff;
    font-size: clamp(2rem, 3.5vw, 3rem);
}


.agrovaru-design-circles .agrovaru-stats-label {
    margin-top: 18px;
    font-weight: 600;
}


/* ============================================================
 *  VARIANT 7 — GRADIENT
 * ============================================================ */
.agrovaru-design-gradient {
    background: linear-gradient(135deg, var(--as-color-number) 0%, var(--as-color-accent) 100%);
    border-radius: var(--as-radius);
}


.agrovaru-design-gradient .agrovaru-stats-number,
.agrovaru-design-gradient .agrovaru-stats-prefix,
.agrovaru-design-gradient .agrovaru-stats-suffix,
.agrovaru-design-gradient .agrovaru-stats-icon {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}


.agrovaru-design-gradient .agrovaru-stats-label {
    color: rgba(255, 255, 255, 0.9);
}


.agrovaru-design-gradient .agrovaru-stats-item {
    align-items: center;
    text-align: center;
}


.agrovaru-design-gradient .agrovaru-stats-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
}


/* ============================================================
 *  VARIANT 8 — ALAJOON (underline)
 * ============================================================ */
.agrovaru-design-underline .agrovaru-stats-number-wrap {
    position: relative;
    padding-bottom: 14px;
}


.agrovaru-design-underline .agrovaru-stats-number-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--as-color-number) 0%, var(--as-color-accent) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}


.agrovaru-design-underline .agrovaru-stats-item.as-visible .agrovaru-stats-number-wrap::after {
    transform: scaleX(1);
}


/* keskele variandis nihku alajoon keskele */
.agrovaru-design-underline[style*="text-align:center"] .agrovaru-stats-number-wrap::after,
.agrovaru-design-underline .agrovaru-stats-item[style*="align-items:center"] .agrovaru-stats-number-wrap::after {
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
}


.agrovaru-design-underline.has-separators .agrovaru-stats-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--as-color-separator);
    opacity: 0.2;
}


/* ============================================================
 *  ÜHE REA MOBIILIREŽIIM (as-single-row)
 * ============================================================ */
@media (max-width: 900px) {
    .agrovaru-stats-wrapper.as-single-row {
        grid-template-columns: repeat(var(--as-cols), minmax(130px, 1fr)) !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .agrovaru-stats-wrapper.as-single-row .agrovaru-stats-item:nth-child(2)::after {
        display: block !important;
    }
}

@media (max-width: 520px) {
    .agrovaru-stats-wrapper.as-single-row {
        grid-template-columns: repeat(var(--as-cols), minmax(120px, 1fr)) !important;
    }
    .agrovaru-stats-wrapper.as-single-row .agrovaru-stats-item::after {
        display: block !important;
    }
}


/* ============================================================
 *  MOBIIL (vaikimisi responsive)
 * ============================================================ */
@media (max-width: 900px) {
    .agrovaru-stats-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .agrovaru-stats-wrapper .agrovaru-stats-item:nth-child(2)::after {
        display: none;
    }
    .agrovaru-design-circles .agrovaru-stats-number-wrap {
        width: 140px;
        height: 140px;
    }
}


@media (max-width: 520px) {
    .agrovaru-stats-wrapper {
        grid-template-columns: 1fr !important;
        /* --as-pad-y (48px) on administ seatud inline stiiliga, mis
           mobiilis jättis "Jungheinrich esindus Eestis" teksti ja
           statistika vahele liiga suure tühja ala — toome terve
           statistikaploki lähemale. */
        padding-top: 8px !important;
        padding-bottom: 24px !important;
    }
    .agrovaru-stats-wrapper .agrovaru-stats-item::after {
        display: none !important;
    }
    /* Esimese elemendi enda ülemine padding (--as-item-pad-y, tavaliselt
       32px) lisandub wrapperi omale — kahandame ainult esimesel, et
       "30+" tuleks pealkirjale lähemale, ilma et järgnevate elementide
       vahed liiga tihedaks jääksid. */
    .agrovaru-stats-wrapper .agrovaru-stats-item:first-child {
        padding-top: 8px !important;
    }
    .agrovaru-design-circles .agrovaru-stats-number-wrap {
        width: 120px;
        height: 120px;
    }
}