/* =========================================================================
   ایران‌گاه — استایل صفحه اصلی
   نسخه: v2 (2026-09)
   مقصد در پروداکشن: public/css/home-v2.css
   پیش‌نیاز: shell-v2.css (توکن‌ها از آنجا می‌آید)
   ========================================================================= */

/* ---------- 1) اسکلت بخش‌ها -------------------------------------------- */
.ir-section {
    padding-block: 56px;
}

.ir-section--tight {
    padding-block: 40px;
}

.ir-section--alt {
    background: var(--ir-surface);
    border-block: 1px solid var(--ir-line);
}

.ir-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
}

.ir-section__title {
    position: relative;
    margin: 0;
    padding-inline-start: 14px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    color: var(--ir-ink);
}

.ir-section__title::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    width: 5px;
    height: 1.05em;
    border-radius: var(--ir-r-pill);
    background: var(--ir-primary);
}

.ir-section__lead {
    margin: 8px 0 0;
    max-width: 68ch;
    font-size: 15px;
    line-height: 2;
    color: var(--ir-muted);
}

.ir-section__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ir-primary);
}

.ir-section__more .ir-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 767.98px) {
    .ir-section {
        padding-block: 40px;
    }
}

/* ---------- 2) هیرو / جستجو -------------------------------------------- */
/* تصویر پس‌زمینه همان فایل نسخه فعلی است (۱۷۸۰×۸۸۴).
   روی آن یک لایه گرادیان آبی می‌نشیند تا متن سفید کنتراست کافی داشته باشد.
   نسخه فعلی از rgba(...,.65) یکنواخت استفاده می‌کند؛ اینجا گرادیان عمودی
   به‌کار رفته تا بالای تصویر (برج‌ها و آسمان) دیده شود ولی پشت جعبه جستجو
   تیره‌تر شود. کنتراست متن سفید روی تیره‌ترین نقطه حدود ۱۰:۱ است. */
.ir-hero {
    position: relative;
    padding-block: clamp(48px, 8vw, 88px);
    background-image: url('https://irangaah.ir/images/pages/main/header-background.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #0a2b63;
    /* رنگ پشتیبان تا قبل از لود شدن تصویر، متن سفید خوانا بماند */
    isolation: isolate;
}

/* موبایل: تصویر ۸۰۰ پیکسلی (۳۵ کیلوبایت) به‌جای ۱۷۸۰ پیکسلی (۱۳۰ کیلوبایت) */
@media (max-width: 767.98px) {
    .ir-hero { background-image: url('https://irangaah.ir/images/pages/main/header-background-m.webp'); }
}

.ir-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(4, 45, 118, .68) 0%, rgba(3, 30, 84, .84) 100%);
}

.ir-hero__inner {
    position: relative;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.ir-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--ir-r-pill);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

.ir-hero__eyebrow .ir-icon {
    width: 15px;
    height: 15px;
}

/* H1 کوتاه و خوانا — نسخه قبلی ۱۰۰+ کاراکتر و کلیدواژه‌انباشته بود */
.ir-hero__title {
    margin: 0 0 12px;
    font-size: clamp(26px, 4.4vw, 42px);
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 12, 40, .35);
    text-wrap: balance;
}

/* شعار سایت؛ قبلاً به‌اشتباه <h2> بود و سلسله‌مراتب تیترها را می‌شکست */
.ir-hero__tagline {
    margin: 0 0 26px;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 2;
    color: rgba(255, 255, 255, .93);
    text-shadow: 0 1px 8px rgba(0, 12, 40, .3);
    text-wrap: pretty;
}

.ir-hero__tagline b {
    color: #ffd76a;
    font-weight: 700;
}

/* --- جعبه جستجو --- */
.ir-search {
    margin-inline: auto;
    max-width: 820px;
    text-align: start;
}

/* fieldset برای گروه‌بندی معنایی رادیوها لازم است؛ ظاهر پیش‌فرضش ریست می‌شود */
/* fieldset بیرونی فقط چیدمان کلی را می‌دهد: ناحیهٔ اسکرول‌شونده (۴ تب
   اصلی) + دکمهٔ «سایر» که flex:none دارد و هرگز اسکرول نمی‌شود. قبلاً
   «سایر» هم داخل همین ردیفِ اسکرول‌شونده بود؛ روی گوشی‌های باریک خودش
   از لبهٔ صفحه رد می‌شد و نصفه دیده می‌شد. */
.ir-search__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    justify-content: center;
}

.ir-search__tabs-scroll {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: center;
}

.ir-search__tabs-scroll::-webkit-scrollbar {
    display: none;
}

.ir-search__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    min-height: 40px;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--ir-r-pill);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ir-search__tab:hover {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.ir-search__tab .ir-icon {
    width: 17px;
    height: 17px;
}

/* رادیوی واقعی داخل label — با :has وضعیت فعال را بدون جاوااسکریپت می‌سازیم */
.ir-search__tab input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.ir-search__tab:has(input:checked),
.ir-search__tab.is-active {
    /* is-active به‌عنوان جایگزین برای مرورگرهای قدیمی‌تر بدون پشتیبانی :has() */
    background: #fff;
    border-color: #fff;
    color: var(--ir-primary);
    font-weight: 700;
}

.ir-search__tab:has(input:focus-visible) {
    outline: 2px solid var(--ir-focus);
    outline-offset: 2px;
}

/* --- «سایر»: منوی کشویی برای تب‌های اضافیِ جستجو -------------------- */
.ir-search__more {
    position: relative;
    flex: none;
}

.ir-search__more-toggle {
    list-style: none;
    /* اجازه می‌دهد <summary> دقیقاً مثل بقیه تب‌ها به‌نظر برسد */
    user-select: none;
}

.ir-search__more-toggle::-webkit-details-marker,
.ir-search__more-toggle::marker {
    display: none;
    content: "";
}

.ir-search__more-chevron {
    width: 14px;
    height: 14px;
    transition: transform .18s ease;
}

.ir-search__more[open] > .ir-search__more-toggle .ir-search__more-chevron {
    transform: rotate(180deg);
}

/* اگر یکی از گزینه‌های داخل منو انتخاب شده باشد، خود دکمهٔ «سایر» هم
   همان استایل فعال را می‌گیرد — حتی وقتی منو بسته است. */
.ir-search__more:has(.ir-search__more-menu input:checked) > .ir-search__more-toggle {
    background: #fff;
    border-color: #fff;
    color: var(--ir-primary);
    font-weight: 700;
}

.ir-search__more-menu {
    position: absolute;
    z-index: 5;
    /* inline-end (نه inline-start): «سایر» در سمت چپ ردیف تب‌ها نشسته؛
       اگر منو از سمت راستِ خودش باز شود (inline-start)، به‌جای بازشدن
       روی محتوای صفحه، به چپ و بیرون از صفحه می‌رفت و دیده نمی‌شد.
       با inline-end، لبهٔ چپ منو روی لبهٔ چپ دکمه می‌نشیند و منو به‌سمت
       راست (داخل صفحه) باز می‌شود. */
    inset-inline-end: 0;
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    padding: 6px;
    background: var(--ir-surface);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-sm);
    box-shadow: var(--ir-shadow-lg);
}

.ir-search__more-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 6px 10px;
    border-radius: var(--ir-r-xs);
    color: var(--ir-ink);
    font-size: 14px;
    cursor: pointer;
}

.ir-search__more-option:hover {
    background: var(--ir-bg-alt);
}

.ir-search__more-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ir-search__more-option:has(input:checked) {
    background: var(--ir-primary-soft);
    color: var(--ir-primary);
    font-weight: 700;
}

.ir-search__more-option .ir-icon {
    width: 17px;
    height: 17px;
    color: var(--ir-muted);
}

/* دسکتاپ همهٔ گزینه‌ها را مستقیماً در ردیف تب‌ها نشان می‌دهد و «سایر» فقط
   برای موبایل است. ظاهر خود تب‌ها در هیچ breakpointی تغییر نمی‌کند. */
@media (min-width: 768px) {
    .ir-search__tabs-scroll {
        flex: 0 0 auto;
        overflow: visible;
    }

    .ir-search__more {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .ir-search__tab--mobile-more-item {
        display: none;
    }
}

.ir-search__control {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 7px 7px 7px;
    background: var(--ir-surface);
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
    box-shadow: var(--ir-shadow-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ir-search__control:focus-within {
    border-color: var(--ir-primary);
    box-shadow: var(--ir-focus-ring), var(--ir-shadow-md);
}

.ir-search__control>.ir-icon {
    width: 21px;
    height: 21px;
    margin-inline-start: 10px;
    color: var(--ir-muted);
    flex: none;
}

.ir-search__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    /* زیر ۱۶px باعث زوم خودکار در iOS می‌شود */
    color: var(--ir-ink);
}

.ir-search__input::placeholder {
    color: var(--ir-muted);
}

.ir-search__submit {
    flex: none;
    min-height: 46px;
    padding-inline: 26px;
}

.ir-trending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13.5px;
}

.ir-trending__label {
    color: rgba(255, 255, 255, .8);
    font-weight: 700;
}

.ir-trending__link {
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--ir-r-pill);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ir-trending__link:hover {
    border-color: rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .26);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 575.98px) {
    /* «سایر» بیرون از این اسکرول است و flex:none دارد، پس همیشه کامل
       دیده می‌شود؛ این ناحیه فقط ۴ تب اصلی را در خودش جا یا اسکرول
       می‌کند. flex-start (نه center) چون با overflow، وسط‌چین شدن باعث
       می‌شود لبهٔ شروع محتوا هم بریده به‌نظر برسد. */
    .ir-search__tabs-scroll {
        justify-content: flex-start;
        gap: 5px;
    }

    .ir-search__tab,
    .ir-search__more-toggle {
        gap: 5px;
        padding: 6px 11px;
        font-size: 13px;
    }

    .ir-search__tab .ir-icon,
    .ir-search__more-toggle .ir-icon {
        width: 15px;
        height: 15px;
    }

    .ir-search__submit {
        padding-inline: 16px;
    }

    .ir-search__submit span {
        display: none;
    }
}

/* ---------- 3) دسترسی سریع --------------------------------------------- */
/* ۸ آیتم. ستون‌ها عمداً ثابت‌اند و نه auto-fill: با auto-fill در عرض‌های
   میانی ۷ کارت در سطر اول و ۱ کارت تنها در سطر دوم می‌افتاد.
   ۸ / ۴ / ۲ تنها مقسوم‌علیه‌هایی هستند که همیشه سطر کامل می‌سازند. */
.ir-quick__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

@media (min-width: 768px) {
    .ir-quick__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .ir-quick__grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
    }
}

.ir-quick__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
    background: var(--ir-surface);
    color: var(--ir-ink);
    text-align: center;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ir-quick__card:hover {
    border-color: var(--ir-primary-border);
    box-shadow: var(--ir-shadow-md);
    transform: translateY(-3px);
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-quick__card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    /* width/height صریح — جلوگیری از پرش چیدمان (CLS) */
}

.ir-quick__label {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ir-ink);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ir-quick__card img {
        width: 64px;
        height: 64px;
    }

    .ir-quick__label {
        font-size: 15px;
    }
}

.ir-quick__meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--ir-muted);
    font-variant-numeric: tabular-nums;
}

.ir-quick__card:hover .ir-quick__meta {
    color: var(--ir-primary);
}

/* ---------- 4) نقشه ایران + استان‌ها ------------------------------------ */
.ir-explore__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.ir-map {
    position: relative;
    padding: 12px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-lg);
    background: var(--ir-surface);
    box-shadow: var(--ir-shadow-sm);
}

.ir-map__canvas {
    position: relative;
    aspect-ratio: 970 / 960;
    /* نسبت ابعاد از viewBox خود SVG — فضا از ابتدا رزرو می‌شود */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ir-map__canvas svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* بازنویسی استایل داخلی خود فایل SVG: رنگ hover آنجا قرمز است و با هویت
   برند نمی‌خواند. ویژگی (specificity) این انتخابگرها بالاتر است و برنده می‌شود. */
.ir-map__canvas .province path {
    fill: #e4ecf9;
    stroke: #9fb4d4;
    stroke-width: 1.2;
    outline: none;
}

.ir-map__canvas .province path:hover,
.ir-map__canvas .province path:focus-visible {
    fill: var(--ir-primary);
    filter: drop-shadow(0 6px 14px rgba(0, 68, 187, .3));
}

.ir-map__canvas .province path:focus-visible {
    stroke: var(--ir-ink);
    stroke-width: 2.4;
}

.ir-map__canvas .border path,
.ir-map__canvas .sea path {
    fill: #cbd7ea;
    stroke: #cbd7ea;
}

.ir-map__canvas .province-label {
    fill: var(--ir-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    stroke: rgba(255, 255, 255, .85);
}

.ir-map__skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ir-r-md);
    background: linear-gradient(100deg, var(--ir-bg-alt) 30%, #f8fafc 50%, var(--ir-bg-alt) 70%) 0 0 / 200% 100%;
    animation: ir-shimmer 1.4s linear infinite;
    color: var(--ir-muted);
    font-size: 14px;
}

@keyframes ir-shimmer {
    to {
        background-position: -200% 0;
    }
}

.ir-map__tip {
    position: absolute;
    z-index: 4;
    padding: 5px 11px;
    border-radius: var(--ir-r-xs);
    background: var(--ir-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.ir-map__tip.is-visible {
    opacity: 1;
}

/* فهرست استان‌ها — ۳۱ لینک داخلی که در نسخه فعلی فقط با جاوااسکریپت ساخته
   می‌شد و برای موتور جستجو نامرئی بود. اینجا در خود HTML است. */
.ir-provinces__title {
    margin: 0 0 6px;
    font-size: 18px;
}

.ir-provinces__lead {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 2;
    color: var(--ir-muted);
}

.ir-provinces__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ir-provinces__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 5px 13px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-pill);
    background: var(--ir-surface);
    color: var(--ir-body);
    font-size: 14px;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.ir-provinces__link:hover,
.ir-provinces__link.is-active {
    border-color: var(--ir-primary);
    background: var(--ir-primary-soft);
    color: var(--ir-primary);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 991.98px) {
    .ir-explore__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ir-map {
        max-width: 560px;
        margin-inline: auto;
        width: 100%;
    }
}

/* ---------- 5) شهرهای پربازدید ----------------------------------------- */
/* ۶ شهر → ۶ / ۳ / ۲ ستون. هر سه حالت سطر کامل می‌سازند. */
.ir-cities__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (min-width: 576px) {
    .ir-cities__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .ir-cities__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
    }
}

.ir-city {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--ir-r-md);
    overflow: hidden;
    background: var(--ir-bg-alt);
    box-shadow: var(--ir-shadow-sm);
}

.ir-city img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.ir-city:hover img {
    transform: scale(1.06);
}

.ir-city__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(6, 15, 35, .86));
    color: #fff;
}

.ir-city__name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.ir-city__meta {
    display: block;
    font-size: 12.5px;
    color: #cbd8ee;
}

/* ---------- 6) کارت‌های کسب‌وکار / وب‌سایت ------------------------------- */
.ir-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.ir-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
    background: var(--ir-surface);
    overflow: hidden;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ir-card:hover {
    border-color: var(--ir-primary-border);
    box-shadow: var(--ir-shadow-md);
    transform: translateY(-3px);
}

.ir-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ir-bg-alt);
    overflow: hidden;
}

.ir-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ir-card__type {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 3px 11px;
    border-radius: var(--ir-r-pill);
    background: rgba(255, 255, 255, .94);
    color: var(--ir-primary);
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: var(--ir-shadow-xs);
}

.ir-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    padding: 14px;
}

.ir-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.75;
}

.ir-card__title a {
    color: var(--ir-ink);
    /* کل کارت را با pseudo-element کلیک‌پذیر می‌کنیم تا لینک اضافی تکراری نسازیم */
}

.ir-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ir-card {
    position: relative;
}

.ir-card__title a:hover {
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-card__excerpt {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.95;
    color: var(--ir-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ir-card__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--ir-line-soft);
    font-size: 12.5px;
    color: var(--ir-muted);
}

.ir-card__foot span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ir-card__foot .ir-icon {
    width: 14px;
    height: 14px;
}

/* اسلایدر دانشنامه — اسکرول افقی بومی به‌جای کتابخانه اسلایدر */
.ir-slider {
    position: relative;
}

.ir-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(262px, 1fr);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ir-gutter);
    padding-bottom: 10px;
    scrollbar-width: thin;
}

.ir-slider__track>* {
    scroll-snap-align: start;
}

.ir-slider__nav {
    position: absolute;
    top: 34%;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ir-line);
    border-radius: 50%;
    background: var(--ir-surface);
    color: var(--ir-ink);
    box-shadow: var(--ir-shadow-md);
    cursor: pointer;
}

.ir-slider__nav:hover {
    background: var(--ir-primary);
    border-color: var(--ir-primary);
    color: #fff;
}

.ir-slider__nav[disabled] {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.ir-slider__nav--prev {
    inset-inline-end: -8px;
}

.ir-slider__nav--next {
    inset-inline-start: -8px;
}

@media (min-width: 992px) {
    .ir-slider__nav {
        display: flex;
    }
}

/* ---------- 7) آمار ----------------------------------------------------- */
.ir-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 14px;
}

/* دوستونیِ ثابت روی موبایل. با auto-fit تنها، عرض‌های باریک‌تر از
   ۳۶۶px (۲×۱۷۶ + gap) به یک ستون می‌افتادند و ۶ کارت زیر هم کشیده
   می‌شد — درخواست صریح: «ایران‌گاه در یک نگاه» دوستونی شود. */
@media (max-width: 575.98px) {
    .ir-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ir-stat {
        padding: 14px 12px;
        gap: 10px;
    }

    .ir-stat__icon {
        width: 38px;
        height: 38px;
    }

    .ir-stat__icon .ir-icon {
        width: 19px;
        height: 19px;
    }

    .ir-stat__value {
        font-size: 19px;
    }

    .ir-stat__label {
        font-size: 12.5px;
    }
}

.ir-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 16px;
    border: 1px solid var(--ir-line);
    border-radius: var(--ir-r-md);
    background: var(--ir-surface);
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ir-stat:hover {
    border-color: var(--ir-primary-border);
    box-shadow: var(--ir-shadow-sm);
}

.ir-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--ir-r-sm);
    background: var(--ir-primary-soft);
    color: var(--ir-primary);
}

.ir-stat__icon .ir-icon {
    width: 23px;
    height: 23px;
}

.ir-stat__value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ir-ink);
    font-variant-numeric: tabular-nums;
}

.ir-stat__label {
    display: block;
    font-size: 13.5px;
    color: var(--ir-muted);
}

.ir-stat__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* ---------- 8) بلوک معرفی متنی (سئو) ------------------------------------ */
.ir-about {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.ir-about__text h2 {
    font-size: clamp(19px, 2.2vw, 24px);
}

.ir-about__text p {
    font-size: 15px;
    line-height: 2.15;
    color: var(--ir-body);
}

.ir-about__panel {
    padding: 22px;
    border: 1px solid var(--ir-primary-border);
    border-radius: var(--ir-r-lg);
    background: linear-gradient(180deg, var(--ir-primary-soft) 0%, #fff 100%);
}

.ir-about__panel h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.ir-about__panel ul {
    display: grid;
    gap: 4px;
}

.ir-about__panel a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 6px 10px;
    border-radius: var(--ir-r-xs);
    color: var(--ir-ink);
    font-size: 14.5px;
    font-weight: 500;
}

.ir-about__panel a:hover {
    background: #fff;
    color: var(--ir-primary);
    text-decoration: none;
}

.ir-about__panel .ir-icon {
    width: 16px;
    height: 16px;
    color: var(--ir-primary);
}

@media (max-width: 991.98px) {
    .ir-about {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ---------- 9) حالت خالی / خطا ------------------------------------------ */
.ir-empty {
    padding: 28px 16px;
    border: 1px dashed var(--ir-line);
    border-radius: var(--ir-r-md);
    background: var(--ir-surface);
    color: var(--ir-muted);
    text-align: center;
    font-size: 14.5px;
}