/* =========================================================================
 * Attorna — Achievements / Stats Counter Section (RTL)
 * Design tokens inherited from variables.css
 * Sits directly after the "Our Expertise" section on a clean white ground,
 * matching the "Key Features" section background (#ffffff)
 * ========================================================================= */

.achievements-section {
    --ach-ink:      #1c1c1c;
    --ach-muted:    #5c564c;
    --ach-gold:     #a38753;
    --ach-bg:       #ffffff;
    --ach-line:     rgba(30, 28, 24, 0.12);

    position: relative;
    overflow: hidden;
    background: var(--ach-bg);
    color: var(--ach-ink);
    direction: rtl;
    text-align: center;
    padding: 72px 0;
    font-family: var(--font-family-base, 'IRANSans', Tahoma, sans-serif);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Watermark: giant low-opacity text behind the counters ---------- */
.achievements-watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Jost', 'IRANSans', Tahoma, sans-serif;
    font-size: clamp(90px, 14vw, 180px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(29, 29, 29, 0.03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
}

.achievements-container {
    position: relative;
    z-index: 2;
    max-width: var(--container-max-width, 1170px);
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- Grid: 4 columns (desktop) / 2 (tablet) / 1 (mobile) ---------- */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.achievements-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 20px;
    /* Thin vertical divider on the inline-end side.
       In RTL, inline-end is the *visual left* of each item, so items 1–3
       show a divider and the last item (end of every visual row) doesn't. */
    border-inline-end: 1px solid var(--ach-line);
}

.achievements-item:last-child {
    border-inline-end: 0;
}

/* ---------- Counter number: large, elegant, tabular ----------
   Latin digits are mandated, so the stack intentionally excludes the local
   IRANSans face (its ASCII 0-9 glyphs render as Persian ۰-۹). Georgia /
   Times New Roman are elegant local serifs that keep true Latin digits. */
.achievements-number {
    display: inline-flex;
    align-items: baseline;
    direction: ltr; /* Latin digits + suffix stay stable on an RTL page */
    font-family: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
    font-size: clamp(42px, 4.5vw, 56px);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.25;
    color: var(--ach-ink);
    font-variant-numeric: tabular-nums;
}

/* Suffix / prefix: slightly smaller, gold accent, cleanly attached */
.achievements-suffix {
    display: inline-block;
    margin-inline-start: 4px;
    font-size: 0.58em;
    font-weight: var(--font-weight-bold, 700);
    color: var(--ach-gold);
    line-height: 1;
}

/* ---------- Label beneath the number ---------- */
.achievements-label {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.8;
    color: var(--ach-muted);
}

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

/* Tablet: ≤ 991px → 2 columns */
@media (max-width: 991px) {
    .achievements-section { padding: 56px 0; }
    .achievements-container { padding: 0 12px; }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2 per visual row: drop the inline-end divider on even items too */
    .achievements-item,
    .achievements-item:last-child {
        padding: 8px 16px;
    }
    .achievements-item:nth-child(2n) {
        border-inline-end: 0;
    }

    .achievements-watermark { font-size: clamp(70px, 12vw, 130px); }
}

/* Mobile: ≤ 559px → 1 column, dividers wrap away */
@media (max-width: 559px) {
    .achievements-section { padding: 48px 0; }

    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .achievements-item,
    .achievements-item:last-child,
    .achievements-item:nth-child(2n) {
        border: 0;
        padding: 6px 12px;
    }

    .achievements-number { font-size: clamp(40px, 11vw, 48px); }
    .achievements-watermark { font-size: 64px; }
}

/* Respect reduced-motion: the counter animation is disabled in JS; there are
   no CSS transitions in this section to undo here. Kept for pattern parity
   with the other sections. */
@media (prefers-reduced-motion: reduce) {
    .achievements-item,
    .achievements-number,
    .achievements-suffix {
        transition: none;
    }
}