/* =========================================================
   SARAMAND — home.css
   ========================================================= */

/* ---------- اسکرول‌بار سرمه‌ای ---------- */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-sm);
    border: 3px solid var(--scrollbar-track);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* فایرفاکس */
html {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

body {
    padding-top: 0;
}

/* ============================================================
   ۱. هیرو — تمام‌صفحه، تک‌قاب سینمایی
   ============================================================ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 660px;
    max-height: 920px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--navy-900);
}

.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 100px;
    text-align: start;
}

.hero__title {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    max-width: 720px;
}

.hero__subtitle {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.68);
    max-width: 46ch;
    margin-bottom: 36px;
}

.hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 56px;
}

.hero__cta .btn {
    padding: 14px 30px;
    font-size: 0.88rem;
}

/* ============================================================
   ۲. سربرگ بخش‌ها — بزرگ‌تر و تیترتر
   ============================================================ */
.section-head {
    text-align: center;
    margin-bottom: 48px;
    max-width: 720px;
    margin-inline: auto;
}

.section-head__title {
    font-size: clamp(1.45rem, 2.9vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.28;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}

.section-head__title em {
    /* بدون ایتالیک، بدون وزن نازک، بدون رنگ متفاوت — em فقط معنای
       تأکید را نگه می‌دارد و ظاهرش دقیقاً مثل بقیه‌ی تیتر است. */
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

/* تیتر «برندهایی که با آن‌ها کار می‌کنیم»: سرمه‌ای و درشت‌تر.
   در حالت تیره سرمه روی مشکی خوانا نیست، پس همان رنگ متن می‌ماند. */
.brand-strip .section-head__title {
    color: var(--navy-700);
}

:root[data-theme="dark"] .brand-strip .section-head__title {
    color: var(--text);
}

.section-head__lede {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 54ch;
    margin: 12px auto 0;
}

/* ============================================================
   ۳. برندها — نوار افقی یکپارچه (بدون کارت)
   ============================================================ */
.brand-strip {
    padding: 64px 0;
    background: var(--bg);
}

.brand-row {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
}

/* محتوای هر خانه وسط‌چین شد. قبلاً نشان و نام از ابتدای خانه شروع
   می‌شدند و بقیه‌ی عرضِ خانه خالی می‌ماند، پس نام‌ها روی یک محور
   ننشسته بودند و ردیف نامرتب دیده می‌شد. */
.brand-row__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 1 1 0;
    min-width: 200px;
    padding: 26px 20px;
    border-bottom: 1px solid var(--border);
    border-inline-end: 1px solid var(--border);
    transition: background var(--dur-fast) var(--ease);
}

.brand-row__item:hover {
    background: var(--surface);
}

.brand-row__mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity var(--dur-fast) var(--ease);
}

.brand-row__item:hover .brand-row__mark {
    opacity: 1;
}

.brand-row__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* در حالت تیره، لوگوهای تک‌رنگِ مشکی (مرسدس، لکسوس، تویوتا و …) روی
   پس‌زمینه‌ی تیره کاملاً گم می‌شدند. همان ترفندِ آیکون پشتیبانی، اما با
   invert به‌جای brightness(0): نشانِ مرسدس از دو رنگِ سیاه و سفید ساخته
   شده، پس brightness(0) کلِ آن را یک دایره‌ی سفیدِ توپر می‌کرد و ستاره‌ی وسطش
   گم می‌شد؛ invert سیاه را سفید و سفید را سیاه می‌کند، پس نشان کامل می‌ماند.
   این قاعده عمداً پیش‌فرض است، چون بیشتر فایل‌های لوگوی خودرو تک‌رنگِ
   مشکی‌اند؛ پس هر لوگوی تازه‌ای که اضافه کنید خودبه‌خود درست درمی‌آید.
   لوگویی که خودش رنگی است (بی‌ام‌و، هوندا) با کلاس brand-row__mark--color
   از این قاعده کنار گذاشته می‌شود. */
:root[data-theme="dark"] .brand-row__mark img {
    filter: invert(1);
}

:root[data-theme="dark"] .brand-row__mark--color img {
    filter: none;
}

/* وقتی فایل لوگوی برند موجود نیست، به‌جای عکس شکسته یک نشان حرفی
   خنثی نمایش داده می‌شود. */
.brand-row__mark.is-missing {
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 1;
}

.brand-row__mark.is-missing img {
    display: none;
}

.brand-row__mark.is-missing::before {
    content: attr(data-letter);
}

.brand-row__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.brand-row__name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.brand-row__count {
    font-size: 0.74rem;
    color: var(--text-faint);
    font-weight: 500;
}

/* حالا که محتوا وسط‌چین است، خطِ زیرِ هاور هم باید از وسط باز شود نه از
   لبه؛ left/translateX در هر دو جهت RTL و LTR یکسان کار می‌کند. */
.brand-row__item::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width var(--dur) var(--ease);
}

.brand-row__item:hover::after {
    width: calc(100% - 40px);
}

/* روی موبایل شش برند به‌صورت شبکه‌ی ۲ در ۳ چیده می‌شوند. پیش از این
   min-width:200px باعث می‌شد هر برند یک ردیف کامل بگیرد و شش ردیف پشت هم
   بیفتد. خط‌های جداکننده هم طوری تنظیم شده که ستون دوم خط سمت بیرونی
   نداشته باشد و ردیف آخر خط پایینی اضافه نگیرد. */
@media (max-width: 640px) {
    .brand-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .brand-row__item {
        min-width: 0;
        gap: 12px;
        padding: 20px 16px;
    }

    .brand-row__item:nth-child(2n) {
        border-inline-end: none;
    }

    .brand-row__mark {
        width: 32px;
        height: 32px;
    }

    .brand-row__name {
        font-size: 0.86rem;
    }

    .brand-row__count {
        font-size: 0.7rem;
    }

    .brand-row__item:hover::after {
        width: calc(100% - 32px);
    }
}

.brand-strip__more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* برندهای اضافه تا پیش از زدن دکمه پنهان‌اند. چون ‎.brand-row__item‎ خودش
   display:flex دارد، بدون این قاعده ویژگی ‎hidden‎ نادیده گرفته می‌شد. */
.brand-row__item[hidden] {
    display: none;
}

/* برندهای تازه‌بازشده به‌جای پریدن ناگهانی، نرم بالا می‌آیند */
.brand-row__item--extra.is-entering {
    animation: brandFadeIn 0.42s var(--ease) var(--enter-delay, 0ms) both;
}

@keyframes brandFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-row__item--extra.is-entering { animation: none; }
}

.brand-strip__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.brand-strip__more-icon {
    transition: transform var(--dur) var(--ease);
    flex-shrink: 0;
}

.brand-strip__more-btn[aria-expanded="true"] .brand-strip__more-icon {
    transform: rotate(180deg);
}

.featured__more {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* ============================================================
   ۴. خدمات — یک خدمت شاخص + فهرست فشرده
   ============================================================ */
.services {
    padding: 80px 0;
    background: var(--surface);
}

.services-layout {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* دسکتاپ: چهار کارت ساده کنار هم، هر کدام با دکمه‌ی «مشاهده».
   (در ≤۱۰۲۴px قانون‌های پایین‌تر همان شبکه‌ی ۲×۲ موبایل را می‌سازند.) */
.service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease);
}

.service-item:hover,
.service-item:focus-visible {
    border-color: var(--primary);
}

.service-item:focus-visible { outline: none; }

.service-item__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--navy-800);
}

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

.service-item__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 8px;
    padding: 18px 18px 20px;
}

.service-item__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

.service-item__text {
    font-size: 0.84rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
}

.service-item__cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    margin-top: auto;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.service-item__body > .service-item__text { margin-bottom: 8px; }

.service-item:hover .service-item__cta {
    color: var(--primary);
    border-color: var(--primary);
}

[dir="rtl"] .service-item__cta .icon--arrow { transform: scaleX(-1); }

/* تبلت: دو ستون (در ≤۷۶۸px شبکه‌ی موبایل جایگزین می‌شود) */
@media (max-width: 1100px) {
    .services-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   ۵. خودروهای منتخب
   ============================================================ */
.featured {
    padding: 80px 0;
    background: var(--bg);
}

.featured__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vehicle-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vehicle-card:hover {
    transform: none;
    border-color: var(--primary);
    box-shadow: none;
}

.vehicle-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--navy-800);
}

.vehicle-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}


.vehicle-card__year {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.95);
    /* پس‌زمینه‌ی این برچسب در هر دو تم سفید است، پس رنگ متنش هم باید ثابت
       و تیره بماند. با var(--primary-strong) در حالت تیره روشن می‌شد و
       متن خاکستری روی سفید می‌ساخت — مثل همان اتفاقی که برای دکمه‌ی
       «دریافت مشاوره اختصاصی» افتاده بود. */
    color: var(--navy-700);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}

.vehicle-card__body {
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.vehicle-card__head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vehicle-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin: 0;
}

.vehicle-card__subtitle {
    font-size: 0.76rem;
    color: var(--text-muted);
    font-weight: 500;
}

.vehicle-card__specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.vehicle-card__specs span:not(:last-child)::after {
    content: '·';
    margin: 0 8px;
    color: var(--text-faint);
}

.vehicle-card__power {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.vehicle-card__power-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-strong);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.vehicle-card__power-label {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.vehicle-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 14px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--primary);
    border-top: 1px solid var(--border);
    margin-top: 14px;
    transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.vehicle-card:hover .vehicle-card__cta {
    gap: 10px;
    color: var(--primary-strong);
}

/* ============================================================
   ۶. درباره کوتاه — عکس چپ، متن راست
   ============================================================ */
.about-short {
    padding: 88px 0;
    background: var(--surface);
}

.about-short__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

/* ترتیب: در RTL عکس سمت چپ می‌رود و متن راست */
.about-short__image {
    grid-column: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-2);
    background: var(--navy-800);
    position: relative;
}

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

/* اسلایدر سه‌تایی — همان الگوی محوشوندگی اسلایدر هیرو */
.about-short__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.about-short__slide.is-active {
    opacity: 1;
    z-index: 1;
}

.about-short__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 9px;
    align-items: center;
}

.about-short__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.about-short__dot:hover {
    background: rgba(255, 255, 255, 0.8);
}

.about-short__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

.about-short__content {
    grid-column: 2;
    max-width: 520px;
    text-align: center;
    margin-inline: auto;
}

.about-short__content .section-head {
    margin-bottom: 18px;
    max-width: 100%;
}

.about-short__content .section-head__title {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.about-short__content p {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text-muted);
    margin-bottom: 26px;
}

.about-short__content .btn {
    padding: 11px 24px;
    font-size: 0.84rem;
    border-color: transparent;
}

.about-short__content .btn:hover {
    border-color: #fff;
    box-shadow: none;
}

/* ============================================================
   ۷. CTA نهایی — کادر شناور وسط
   ============================================================ */
.cta-final-block {
    padding: 90px 0;
    background: var(--surface);
}

/* فوتر بلافاصله بعد از این سکشن میاد و margin-top خودش رو داره که باعث
   میشد فاصله‌ی زیر باکس بیشتر از فاصله‌ی بالای باکس به نظر برسه؛
   این سلکتور فقط همینجا (صفحه اصلی) اون مارجین رو خنثی می‌کنه تا
   فاصله‌ی بالا و پایین باکس دقیقاً برابر بمونه. صفحات دیگه فوتر رو
   بعد از این کلاس ندارن، پس تاثیری روشون نداره. */
main:has(.cta-final-block) ~ .footer {
    margin-top: 0;
}

.cta-final-block__box {
    position: relative;
    max-width: 960px;
    margin-inline: auto;
    padding: 56px 48px;
    background: var(--navy-900);
    color: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(6, 14, 28, 0.16), 0 8px 20px rgba(6, 14, 28, 0.08);
}

.cta-final-block__box::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(86, 112, 158, 0.24), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(86, 112, 158, 0.16), transparent 45%);
    pointer-events: none;
}

.cta-final-block__box::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(86, 112, 158, 0.5), transparent);
    pointer-events: none;
}

.cta-final-block__container {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.cta-final-block__title {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.cta-final-block__title em {
    /* بدون ایتالیک، بدون وزن نازک، بدون رنگ متفاوت — em فقط معنای
       تأکید را نگه می‌دارد و ظاهرش دقیقاً مثل بقیه‌ی تیتر است. */
    font-style: normal;
    font-weight: inherit;
    color: inherit;
}

.cta-final-block__lede {
    font-size: 0.88rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.7);
    max-width: 50ch;
    margin: 0;
}

.cta-final-block__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
}

.cta-final-block .btn {
    padding: 11px 24px;
    font-size: 0.84rem;
}

.cta-final-block .btn--ghost {
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.cta-final-block .btn--ghost:hover {
    border-color: #fff;
    box-shadow: none;
}

/* ============================================================
   ۸. ظاهر شدن با اسکرول
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal--d1 {
    transition-delay: 0.06s;
}

.reveal--d2 {
    transition-delay: 0.12s;
}

.reveal--d3 {
    transition-delay: 0.18s;
}

/* ============================================================
   ۹. ریسپانسیو
   ============================================================ */
@media (max-width: 1200px) {
    .featured__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .hero {
        min-height: 84vh;
    }

    .hero__content {
        padding-bottom: 64px;
    }

    .hero__cta {
        margin-bottom: 40px;
    }

    .about-short__container {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about-short__image {
        grid-column: 1;
    }

    .about-short__content {
        grid-column: 1;
        max-width: 100%;
    }

    .about-short__content .section-head {
        text-align: center;
    }

    .brand-strip {
        padding: 48px 0;
    }

    .brand-row__item {
        flex: 1 1 46%;
    }

    .services {
        padding: 64px 0;
    }

    .featured {
        padding: 64px 0;
    }

    .about-short {
        padding: 64px 0;
    }

    .home-blog-section {
        padding: 64px 0;
    }

    .cta-final-block {
        padding: 64px 0;
    }

    .cta-final-block__box {
        padding: 44px 32px;
    }
}

@media (max-width: 768px) {
    /* روی موبایل ارتفاع هیرو دیگر به ارتفاع صفحه گره نمی‌خورد. قبلاً
       height:100vh بود و فقط min-height در بریک‌پوینت‌ها عوض می‌شد، برای
       همین هیرو تمام صفحه‌ی گوشی را می‌گرفت و عکس هم بیش از حد بزرگ
       می‌شد. حالا ارتفاع را محتوا تعیین می‌کند و عکس هم به همان اندازه
       جمع می‌شود. */
    .hero {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .hero__content {
        padding-top: calc(var(--header-h) + 28px);
        padding-bottom: 40px;
    }

    .hero__title {
        font-size: 2.1rem;
        max-width: 100%;
    }

    .hero__subtitle {
        font-size: 0.86rem;
        margin-bottom: 22px;
    }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__cta .btn {
        width: 100%;
        justify-content: center;
    }

    .section-head {
        margin-bottom: 36px;
    }

    .section-head__title {
        font-size: 1.12rem;
    }

    .section-head__lede {
        font-size: 0.86rem;
    }

    .brand-row__item {
        flex: 1 1 100%;
        border-inline-end: none;
        padding: 18px 4px;
    }

    .brand-row__mark {
        width: 32px;
        height: 32px;
    }

    /* روی موبایل، چیدمانِ دسکتاپ (یک خدمتِ بزرگ + سه تای فشرده) طولانی
       می‌شد و کاربر باید اسکرول می‌کرد تا بفهمد چند خدمت وجود دارد. حالا
       هر چهار خدمت در یک شبکه‌ی ۲×۲ یکجا دیده می‌شوند.
       نقش‌ها (featured / list-1..3) اینجا بی‌اثر می‌شوند: هر چهار کارت
       یک‌شکل‌اند، پس چرخشِ خودکارِ نقش‌ها دیده نمی‌شود و فقط یک پلک‌زدنِ
       بی‌دلیل می‌ساخت — انیمیشنِ محوشدن هم خاموش می‌شود. */
    .services-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 12px;
    }

    .services-layout.is-rotating .service-item {
        opacity: 1;
    }

    .services-layout .service-item,
    .service-item[data-role="featured"],
    .service-item:not([data-role="featured"]) {
        grid-column: auto;
        grid-row: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .services-layout .service-item__media,
    .service-item[data-role="featured"] .service-item__media,
    .service-item:not([data-role="featured"]) .service-item__media {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 0;
        flex: none;
    }

    .services-layout .service-item__body,
    .service-item[data-role="featured"] .service-item__body {
        flex: 1;
        padding: 12px 13px 14px;
        gap: 0;
    }

    /* در این اندازه، فقط عنوان جا می‌شود؛ بقیه فقط شلوغی است و
       خودِ کارت کلیک‌شدنی است، پس دکمه‌ی جداگانه لازم نیست. */
    .services-layout .service-item:not([data-role="x"]) .service-item__text,
    .services-layout .service-item:not([data-role="x"]) .service-item__cta,
    .service-item[data-role="featured"] .service-item__cta {
        display: none;
    }

    /* سایه‌ی پایینِ تصویر فقط مخصوصِ کارتِ بزرگ بود؛ در شبکه‌ی ۲×۲ یکی
       از چهار کارت را بی‌دلیل تیره‌تر از بقیه نشان می‌داد. */
    .service-item[data-role="featured"] .service-item__media::after {
        display: none;
    }

    .services-layout .service-item__title,
    .service-item[data-role="featured"] .service-item__title,
    .service-item:not([data-role="featured"]) .service-item__title {
        font-size: 0.94rem;
        font-weight: 700;
        line-height: 1.5;
    }

    /* روی موبایل چهار کارتِ خودرو پشت سر هم یک ستون می‌شدند و کاربر باید
       چهار کارتِ بلند را عمودی رد می‌کرد. حالا مثل بخش وبلاگ، یک نوار
       افقی با سوایپ است: همان حرکتی که کاربر یک‌بار در همین صفحه یاد
       گرفته، پس چیز تازه‌ای برای یاد گرفتن ندارد.
       grid به flex تبدیل می‌شود و scroll-snap هر کارت را سر جایش
       نگه می‌دارد. عرض ۸۶٪ عمدی است: لبه‌ی کارت بعدی پیدا می‌ماند و
       خودش می‌گوید که ادامه دارد — بدون نیاز به فلش یا نقطه. */
    .featured__grid {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .featured__grid::-webkit-scrollbar {
        display: none;
    }

    .featured__grid > .vehicle-card {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .cta-final-block__box {
        padding: 36px 22px;
        border-radius: var(--radius-sm);
    }

    .cta-final-block__actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-final-block__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    /* قبلاً اینجا min-height به ۷۶vh برمی‌گشت — یعنی از بریک‌پوینت ۷۶۸
       بلندتر می‌شد. ارتفاع همچنان از روی محتوا حساب می‌شود. */
    .hero__content {
        padding-top: calc(var(--header-h) + 18px);
        padding-bottom: 24px;
    }

    /* جمع‌وجورتر کردن فاصله‌ها تا هیرو روی گوشی کوتاه‌تر بماند */
    .hero__subtitle {
        margin-bottom: 16px;
    }

    .hero__cta {
        margin-bottom: 20px;
    }

    .hero__cta .btn {
        padding: 12px 24px;
    }

    .hero__title {
        font-size: 1.7rem;
        margin-bottom: 14px;
    }

    .hero__subtitle {
        font-size: 0.82rem;
        line-height: 1.7;
    }

    .brand-strip {
        padding: 48px 0 40px;
    }

    .services {
        padding: 48px 0;
    }

    .featured {
        padding: 48px 0;
    }

    .about-short {
        padding: 48px 0;
    }

    .home-blog-section {
        padding: 48px 0;
    }

    .cta-final-block {
        padding: 48px 0;
    }

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

}

@media (max-width: 380px) {
    .hero__title {
        font-size: 1.35rem;
    }

    .section-head__title {
        font-size: 1.05rem;
    }

    .services-layout,
    .featured__grid {
        gap: 8px;
    }

    .cta-final-block__title {
        font-size: 1.2rem;
    }

    .vehicle-card__body {
        padding: 14px 14px 12px;
    }

    .cta-final-block__box {
        padding: 28px 18px;
    }
}

/* ===== BLOG — فهرست مقالات ===== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--primary-soft, var(--border-strong));
}
.blog-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface);
}
.blog-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.blog-card__tag {
    position: absolute; top: 14px; inset-inline-start: 14px;
    background: rgba(255, 255, 255, 0.94); color: var(--navy-700, var(--primary));
    font-size: 0.72rem; font-weight: 700; padding: 5px 13px; border-radius: var(--radius-sm);
    backdrop-filter: blur(4px);
}
.blog-card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.blog-card__title {
    font-size: 1.02rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: calc(1.55em * 2);
}
.blog-card__excerpt {
    font-size: 0.86rem; color: var(--text-muted); line-height: 1.75; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
}
.blog-card__meta { font-size: 0.76rem; color: var(--text-faint); }
.blog-card__cta {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    font-size: 0.8rem; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.blog-card__cta .icon--arrow { transition: transform var(--dur-fast) var(--ease); }

/* ===== BLOG — صفحه مقاله ===== */
.article-header { max-width: 720px; margin: 0 auto 36px; text-align: center; }

.article-header h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.5; margin-bottom: 14px; }
.article-header__meta { color: var(--text-muted); font-size: 0.85rem; }
.article-hero-img {
    width: 100%; max-width: 900px; margin: 0 auto 44px; border-radius: var(--radius-sm);
    overflow: hidden; aspect-ratio: 16 / 9;
}
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body { max-width: 680px; margin: 0 auto; }
.article-body h2 { font-size: 1.2rem; margin: 38px 0 14px; }
.article-body p { color: var(--text-muted); line-height: 1.9; margin-bottom: 16px; }
.article-body ul { display: grid; gap: 10px; margin: 0 0 16px; padding-inline-start: 4px; list-style: none; }
.article-body ul li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); line-height: 1.8; }
.article-body ul li .icon { color: var(--primary); flex-shrink: 0; margin-top: 5px; }
.article-body h3 { font-size: 1.02rem; margin: 26px 0 10px; }
.article-body strong { color: var(--text); }
.article-body ol { margin: 0 0 18px; padding-inline-start: 22px; display: grid; gap: 10px; list-style-type: persian; }
.article-body ol li { color: var(--text-muted); line-height: 1.9; padding-inline-start: 4px; }
.article-body ol li::marker { color: var(--primary); font-weight: 700; }
.article-body a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* جدول داخل مقاله؛ روی موبایل افقی اسکرول می‌خورد */
.article-table { margin: 6px 0 22px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.article-table table { font-size: 0.88rem; }
.article-table th, .article-table td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--border); line-height: 1.7; }
.article-table thead th { background: var(--surface); font-weight: 700; }
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table td { color: var(--text-muted); }
.article-table .is-total td { color: var(--text); font-weight: 700; background: var(--surface); }
/* کادر نکته داخل مقاله */
.article-note { margin: 6px 0 22px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.article-note p { margin: 0; font-size: 0.9rem; }
.article-note b { color: var(--text); }
.article-back {
    display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted);
    font-size: 0.86rem; margin-bottom: 28px; transition: color var(--dur-fast) var(--ease);
}
.article-back:hover { color: var(--primary); }
.article-footer-cta {
    max-width: 680px; margin: 48px auto 0; padding: 30px 32px; text-align: center;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.article-footer-cta p { color: var(--text-muted); margin-bottom: 18px; }

/* ===== BLOG — پیش‌نمایش در صفحه اصلی ===== */
.home-blog-section {
    padding: 90px 0;
    background: var(--bg);
}
/* ============================================================
   اسلایدر افقی کارت‌ها — کامپوننت مشترک
   ------------------------------------------------------------
   همین یک کامپوننت هم برای نوار مقالات وبلاگ است و هم برای
   خودروهای منتخب؛ پس دو بخش دقیقاً یک حرکت و یک ظاهر دارند و
   کاربر چیز تازه‌ای برای یاد گرفتن ندارد.
   سه راه برای ورق زدن: سوایپ/کشیدن، دکمه‌ی چپ و راست، و نوار پایین
   که هم نشان می‌دهد کجای فهرستیم و هم خودش کشیدنی است.
   تعداد کارت‌های در دید با متغیر --per-view تنظیم می‌شود (مقدار
   اعشاری مجاز است: ۱٫۱۵ یعنی لبه‌ی کارت بعدی پیدا بماند).
   ============================================================ */
.card-slider {
    --per-view: 3;
    --slide-gap: 24px;
    position: relative;
}

.card-slider__viewport {
    position: relative;
}

/* خودروهای منتخب: کارت‌ها بلندترند، پس کمی باریک‌تر چیده می‌شوند و
   کارت چهارم عمداً نیمه‌پیدا می‌ماند تا خودش بگوید ادامه دارد. */
.featured__slider {
    --per-view: 3.25;
}

@media (max-width: 1200px) {
    .featured__slider { --per-view: 2.3; }
}

.card-slider__track {
    display: flex;
    gap: var(--slide-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.card-slider__track::-webkit-scrollbar {
    display: none;
}

.card-slider__track > * {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
    scroll-snap-align: start;
}

/* حین کشیدن با ماوس یا با نوار پایین (home.js)، اسنپ و اسکرول نرم
   خاموش است تا محتوا بی‌تأخیر زیر اشاره‌گر بماند. */
.card-slider.is-held .card-slider__track {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

/* انتخاب متن و کلیک روی لینک حین کشیدن نباید اتفاق بیفتد */
.card-slider__track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.card-slider__track.is-dragging a {
    pointer-events: none;
}

.card-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-2);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.card-slider__nav:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.card-slider__nav[disabled] {
    opacity: 0;
    pointer-events: none;
}

.card-slider__nav--prev { inset-inline-start: -21px; }
.card-slider__nav--next { inset-inline-end: -21px; }

/* در RTL جهت فلش‌ها باید برعکس شود */
[dir="rtl"] .card-slider__nav svg { transform: scaleX(-1); }

/* --- نوار پیشرفت پایین --- */
.card-slider__rail {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 4px;
    margin: 24px auto 0;
    border-radius: var(--radius-sm);
    background: var(--border);
    cursor: pointer;
    touch-action: none;
}

/* جای thumb را home.js هر فریم با transform می‌گذارد؛ transition روی
   جابه‌جایی نمی‌گذاریم، چون همیشه یک قدم عقب‌تر از اسکرول می‌ماند. */
.card-slider__thumb {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 33%;
    border-radius: inherit;
    background: var(--primary);
    will-change: transform;
    transition: background var(--dur-fast) var(--ease);
}

.card-slider__rail:hover .card-slider__thumb {
    background: var(--primary-strong);
}

/* اگر همه‌ی کارت‌ها جا شدند، نه فلش لازم است نه نوار */
.card-slider.is-static .card-slider__rail,
.card-slider.is-static .card-slider__nav {
    display: none;
}

.home-blog__footer { text-align: center; margin-top: 34px; }

@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }

    .card-slider { --per-view: 2; }

    /* روی تبلت و موبایل فلش‌ها جای کافی ندارند؛ کشیدن و نوار پایین می‌ماند */
    .card-slider__nav { display: none; }
}

@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
    .article-header h1 { font-size: 1.4rem; }
    .article-table table { font-size: 0.8rem; }
    .article-table th, .article-table td { padding: 9px 10px; }

    /* کمی کمتر از تمام عرض، تا لبه‌ی کارت بعدی پیدا باشد */
    .card-slider {
        --per-view: 1.15;
        --slide-gap: 14px;
    }

    .card-slider__rail {
        margin-top: 18px;
        max-width: 200px;
    }
}
/* ============================================================
   کارت خودروهای منتخب صفحه‌ی اصلی (.vcard)
   ساخته‌شده با tools/build_cars.py از داده‌ی واقعی خودروها.
   کل کارت کلیک‌پذیر است: لینک عنوان با ::after روی تمام کارت
   کشیده می‌شود، پس با کلیک هر جای کارت صفحه‌ی خودرو باز می‌شود.
   ============================================================ */
.vcard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s var(--ease);
}

.vcard:hover,
.vcard:has(.vcard__link:focus-visible) {
    transform: none;
    border-color: transparent;
    box-shadow: var(--shadow-3);
}
/* فقط با کیبورد حلقه‌ی فوکوس دیده شود؛ بعد از کلیک یا برگشت به صفحه کارت بالا نمی‌ماند */
.vcard:has(.vcard__link:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* در گوشی (بدون موس) حالت هاور بعد از لمس گیر نکند */
@media (hover: none) {
    .vcard:hover { transform: none; box-shadow: none; border-color: var(--border); }
}

/* عکس */
.vcard__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
}

.vcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--ease);
}


/* سایه‌ی ملایم پایین عکس برای عمق و خوانایی برچسب‌ها */
.vcard__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 14, 28, 0.35) 0%, rgba(6, 14, 28, 0) 28%),
        linear-gradient(0deg, rgba(6, 14, 28, 0.38) 0%, rgba(6, 14, 28, 0) 34%);
    pointer-events: none;
}

.vcard__badge,
.vcard__year {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
}

.vcard__badge {
    inset-inline-start: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: rgba(10, 25, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.vcard__badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
}

.vcard__badge--hybrid::before { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.vcard__badge--electric::before { background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
.vcard__badge--gasoline::before { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }

.vcard__year {
    inset-inline-end: 14px;
    color: var(--navy-800);
    background: rgba(255, 255, 255, 0.88);
    font-variant-numeric: tabular-nums;
}

/* متن */
.vcard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.vcard__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
}

.vcard__logo {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
}

.vcard__logo img { width: 15px; height: 15px; object-fit: contain; }
:root[data-theme="dark"] .vcard__logo:not(.vcard__logo--color) img { filter: invert(1); }

.vcard__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.vcard__link {
    color: var(--text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcard__link:focus { outline: none; }

/* کل کارت = لینک */
.vcard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
}

.vcard__trim {
    margin: 2px 0 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vcard__stats {
    list-style: none;
    margin: 0 0 18px;
    padding: 12px 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
}

.vcard__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    text-align: center;
}

.vcard__stats li + li { border-inline-start: 1px solid var(--border); }

.vcard__stat-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
    border-radius: 50%;
    color: var(--primary);
    background: rgba(34, 64, 107, 0.08);
}

:root[data-theme="dark"] .vcard__stat-ic { color: #cfe0ff; background: rgba(255, 255, 255, 0.07); }

.vcard__stats b {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.vcard__stats small {
    font-size: 0.66rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.vcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.vcard__price { display: flex; flex-direction: column; margin: 0; }
.vcard__price-label { font-size: 0.72rem; color: var(--text-muted); }
.vcard__price-val { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.vcard__price-val b { font-size: 1.3rem; font-weight: 800; color: var(--text); margin-inline-end: 3px; letter-spacing: -0.01em; }
.vcard__price-val--soon { font-size: 1rem; font-weight: 800; color: #b45309; }
:root[data-theme="dark"] .vcard__price-val--soon { color: #fcd34d; }

.vcard__go {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--primary);
    border: 1px solid var(--border-strong);
    transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

:root[data-theme="dark"] .vcard__go { color: var(--text); }
[dir="ltr"] .vcard__go svg { transform: scaleX(-1); }

.vcard:hover .vcard__go {
    background: linear-gradient(135deg, #2f5590, #16294a);
    border-color: transparent;
    color: #fff;
    transform: none;
}

:root[data-theme="dark"] .vcard:hover .vcard__go { background: #fff; color: var(--navy-800); }

/* جا برای بالا آمدن و سایه‌ی کارت هنگام hover، بدون بریده شدن در نوار اسلایدر */
.featured__slider .card-slider__track {
    padding: 12px 0 30px;
    margin: -12px 0 -22px;
}

@media (max-width: 560px) {
    .vcard__body { padding: 16px 16px 18px; }
    .vcard__title { font-size: 1.08rem; }
    .vcard__price-val b { font-size: 1.15rem; }
    .vcard__go { width: 42px; height: 42px; }
}

/* دسکتاپ: کارت ساده — گوشه‌های کم‌گرد مثل دکمه‌ها، هاور فقط یک حاشیه‌ی رنگی
   (بدون بالا آمدن، سایه، بزرگ شدن عکس یا حرکت دکمه). موبایل دست نخورده. */
@media (min-width: 1025px) {
    .vcard {
        border-radius: var(--radius-sm);
        transition: border-color var(--dur-fast) var(--ease);
    }
    .vcard:hover,
    .vcard:has(.vcard__link:focus-visible) {
        transform: none;
        box-shadow: none;
        border-color: var(--primary);
    }
    .vcard__badge::before { box-shadow: none !important; }
    .vcard__badge, .vcard__year { border-radius: var(--radius-sm); }
    .vcard__stats { border-radius: var(--radius-sm); }
    .vcard__stat-ic { background: none; width: auto; height: 20px; }
    :root[data-theme="dark"] .vcard__stat-ic { background: none; }
    .vcard__go {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        transition: border-color var(--dur-fast) var(--ease);
    }
    .vcard:hover .vcard__go,
    [dir="ltr"] .vcard:hover .vcard__go,
    :root[data-theme="dark"] .vcard:hover .vcard__go {
        background: none;
        color: var(--primary);
        border-color: var(--primary);
        transform: none;
    }
    :root[data-theme="dark"] .vcard:hover .vcard__go { color: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
    .vcard, .vcard__media img, .vcard__go { transition: none; }
}