/* ================================================================
   iranboschcenter.com — بخش‌های صفحه اصلی
   اسلایدر · باکس دسته‌بندی · ویترین · تب‌دار · درخواست مشاوره
   ================================================================ */

:root {
    --home-max: 1320px;
    --home-pad: 1rem;
}

.home-sec {
    max-width: var(--home-max);
    margin: 2rem auto;
    padding: 0 var(--home-pad);
}

/* عنوان مشترک بخش‌ها */
.hb__head, .ht__head {
    max-width: var(--home-max);
    margin: 0 auto 1.1rem;
    text-align: center;
}
.hb__head h2, .ht__head h2 {
    font-size: 1.25rem; font-weight: 800; color: #0b1b2b; margin: 0 0 .5rem;
}
.hb__rule, .ht__rule {
    display: block; width: 54px; height: 3px; border-radius: 3px;
    margin: 0 auto; background: var(--color-primary, #e20015);
}

/* ================================================================
   ۱) اسلایدر
   ================================================================
   ⚠ اینجا قبلاً یک بلوک override با !important بود، از جمله:
         .hero-peek-track.cloned { transform: translateX(-100%) !important; }
     و همین یک خط اسلایدر را کاملاً از کار انداخته بود: جاوااسکریپت
     transform را به‌صورت inline style ست می‌کرد، ولی قاعده‌ی !important
     در استایل‌شیت بر inline style هم غلبه می‌کند. پس تراک برای همیشه روی
     translateX(-100%) قفل مانده بود و هیچ‌وقت تکان نمی‌خورد.

     اسلایدر بازنویسی شد و دیگر اصلاً از transform استفاده نمی‌کند
     (اسکرول بومی + scroll-snap). استایلش هم در همان
     views/home/index.php کنار مارک‌آپش است تا دوباره دو جا از هم جدا
     نیفتند. این بخش عمداً خالی است — چیزی به آن اضافه نکنید.
   ================================================================ */

/* ================================================================
   ۲) باکس‌های دسته‌بندی — روکش شیشه‌ای
   ================================================================ */
.hb { max-width: var(--home-max); margin: 2.5rem auto; padding: 0 var(--home-pad); }

.hb__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.hb__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* بلندتر از قبل تا سهم بیشتری از تصویر زمینه دیده شود */
    min-height: clamp(340px, 30vw, 430px);
    border-radius: 1.15rem;
    overflow: hidden;
    background: #eceef1;
    isolation: isolate;
}
.hb__bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hb__bg--empty {
    background: linear-gradient(140deg, #e8eaee 0%, #f6f7f9 100%);
    display: block;
}
/* تیرگی ملایم پایین کارت تا متن روی هر تصویری خوانا بماند.
   نقطه‌ی شروع پایین‌تر آمد چون کارت بلندتر شده و نباید بالای تصویر تیره شود. */
.hb__card::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(11,27,43,0) 48%, rgba(11,27,43,.32) 100%);
    pointer-events: none;
}

.hb__glass {
    position: relative; z-index: 2;
    margin: 0 .55rem;
    padding: .85rem .9rem .75rem;
    border-radius: .9rem .9rem 0 0;
    /* شفاف‌تر از قبل تا معلوم باشد پشتش تصویر است، ولی blur بیشتر و یک
       هایلایت نازک بالای پنل تا متن روی هر تصویری خوانا بماند. */
    background: rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(20px) saturate(165%);
    backdrop-filter: blur(20px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .5);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: background .2s;
}
.hb__card:hover .hb__glass { background: rgba(255, 255, 255, .5); }
/* متن روی شیشه‌ی شفاف باید کنتراست کافی داشته باشد */
.hb__glass .hb__title a { text-shadow: 0 1px 2px rgba(255, 255, 255, .55); }
/* اگر مرورگر backdrop-filter نداشت، پس‌زمینه مات‌تر شود تا متن خوانا بماند */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hb__glass { background: rgba(255, 255, 255, .9); }
}

.hb__title { margin: 0 0 .5rem; font-size: .95rem; font-weight: 800; line-height: 1.7; }
.hb__title a { color: #0b1b2b; }
.hb__title a:hover { color: var(--color-primary, #e20015); }

.hb__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .18rem; }
.hb__links a {
    display: block;
    font-size: .78rem; font-weight: 600; color: #24384c; line-height: 2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hb__links a:hover { color: var(--color-primary, #e20015); }

.hb__btn {
    position: relative; z-index: 2;
    margin: 0 .55rem .55rem;
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    background: var(--color-primary, #e20015); color: #fff;
    font-size: .8125rem; font-weight: 800;
    padding: .6rem; border-radius: 0 0 .9rem .9rem;
    transition: background .15s;
}
.hb__btn:hover { background: var(--color-primary-dark, #b00010); }

/* ================================================================
   ۳) ویترین دسته‌بندی
   ================================================================ */
.hs {
    max-width: var(--home-max);
    margin: 2.5rem auto;
    padding: 0 var(--home-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 900px) { .hs { grid-template-columns: 1fr 1fr; } }

.hs__block {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 1.15rem;
    overflow: hidden;
}
.hs__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .85rem 1.1rem;
    border-top: 3px solid var(--color-primary, #e20015);
    border-bottom: 1px solid #f2f3f5;
}
.hs__title { font-size: .95rem; font-weight: 800; color: #0b1b2b; margin: 0; }
.hs__all { font-size: .78rem; font-weight: 700; color: #64748b; white-space: nowrap; }
.hs__all:hover { color: var(--color-primary, #e20015); }

.hs__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 480px) { .hs__body { grid-template-columns: 1fr 1.15fr; } }

.hs__hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 1.1rem .9rem;
    border-inline-end: 1px solid #f2f3f5;
}
.hs__hero-img {
    display: flex; align-items: center; justify-content: center;
    width: 100%; aspect-ratio: 1 / 1; max-width: 190px;
}
.hs__hero-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hs__hero-name {
    font-size: .8125rem; font-weight: 600; color: #16202c; line-height: 1.9;
    display: block; overflow-wrap: anywhere;   /* عنوان کامل */
}

.hs__list { list-style: none; margin: 0; padding: 0; }
.hs__list li + li { border-top: 1px solid #f2f3f5; }
.hs__list a { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; }
.hs__list a:hover { background: #fafbfc; }
.hs__thumb {
    width: 64px; height: 64px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fafafa; border: 1px solid #f1f1f3; border-radius: .55rem;
}
.hs__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hs__info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hs__name {
    font-size: .8125rem; font-weight: 600; color: #16202c; line-height: 1.75;
    display: block; overflow-wrap: anywhere;   /* عنوان کامل */
}
.hs-price { font-size: .8125rem; font-weight: 800; color: var(--color-primary, #e20015); }
.hs-price--quote { font-size: .72rem; font-weight: 700; color: #8b95a3; }

/* ================================================================
   ۴) بخش تب‌دار — دسته‌بندی راست، محصولات چپ
   ================================================================ */
.ht { max-width: var(--home-max); margin: 2.5rem auto; padding: 0 var(--home-pad); }

/* باکس دربرگیرنده — بخش را از زمینه‌ی صفحه جدا می‌کند */
.ht__box {
    background: linear-gradient(180deg, #fff 0%, #fbfbfc 100%);
    border: 1px solid #eceef1;
    border-radius: 1.35rem;
    padding: 1.4rem 1.25rem 1.5rem;
    box-shadow: 0 4px 20px rgba(11, 27, 43, .05);
}
.ht__box .ht__head { margin-bottom: 1.25rem; }

.ht__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start;
}
@media (min-width: 900px) {
    .ht__body { grid-template-columns: 250px minmax(0, 1fr); gap: 1.35rem; }
}

.ht__tabs {
    display: flex; flex-direction: row; gap: .4rem;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: .25rem;
}
.ht__tabs::-webkit-scrollbar { display: none; }

.ht__tab {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: .6rem;
    background: #fff; border: 1px solid #eceef1; border-radius: .9rem;
    padding: .5rem .7rem;
    font-family: inherit; font-size: .8125rem; font-weight: 700; color: #33475b;
    cursor: pointer; text-align: right; white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}

/* آیکون: عکس محصول روی زمینه‌ی روشن — در اندازه کوچک خواناتر از بنر عریض است */
.ht__tab-ico {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: .6rem;
    background: #f6f7f9;
    color: #94a3b8;
    transition: background .18s;
}
.ht__tab-ico img {
    width: 100%; height: 100%;
    object-fit: contain;              /* عکس محصول نباید بریده شود */
    padding: 3px; border-radius: .6rem;
    mix-blend-mode: multiply;         /* زمینه سفید عکس با کارت یکی می‌شود */
}
.ht__tab-ico svg { width: 19px; height: 19px; }

.ht__tab-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ht__tab-count {
    flex-shrink: 0;
    font-size: .66rem; font-weight: 800; color: #94a3b8;
    background: #f1f3f5; border-radius: 999px; padding: .05rem .4rem;
}
.ht__tab-arrow { display: none; width: 15px; height: 15px; flex-shrink: 0; opacity: .45; }

.ht__tab:hover {
    border-color: #ffd0d4;
    color: var(--color-primary-dark, #b00010);
    box-shadow: 0 2px 10px rgba(var(--color-primary-rgb, 226,0,21), .07);
}
.ht__tab.active {
    background: linear-gradient(135deg, var(--color-primary, #e20015), #ff5a5f);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px rgba(var(--color-primary-rgb, 226,0,21), .28);
}
.ht__tab.active .ht__tab-ico { background: rgba(255, 255, 255, .9); }
.ht__tab.active .ht__tab-count { background: rgba(255, 255, 255, .22); color: #fff; }
.ht__tab.active .ht__tab-arrow { opacity: 1; }

@media (min-width: 900px) {
    .ht__tabs { flex-direction: column; overflow: visible; gap: .4rem; }
    .ht__tab { width: 100%; white-space: normal; padding: .55rem .75rem; }
    .ht__tab-arrow { display: block; }
}

.ht__panels { min-width: 0; }
.ht__panel[hidden] { display: none; }

/* در دسکتاپ به‌جای ۵ کارت باریک، ۳ کارت پهن نشان داده می‌شود؛ عرض از روی
   عرض واقعی پنل حساب می‌شود نه یک عدد ثابت، چون ستون تب‌ها جا می‌گیرد.
   (فاصله‌ی بین کارت‌ها در carousel.css تعریف شده: .8rem و از 1200px به بعد 1rem) */
@media (min-width: 1024px) {
    .ht__panels .pcar__rail > .pcard { width: calc((100% - 1.6rem) / 3); }
}
@media (min-width: 1200px) {
    .ht__panels .pcar__rail > .pcard { width: calc((100% - 2rem) / 3); }
}

/* ریلِ کروسل و ظاهر دکمه‌ها در public/css/carousel.css تعریف شده‌اند؛
   اینجا فقط جای دکمه‌ها در سرصفحه‌ی وسط‌چینِ این بخش تنظیم می‌شود. */
.ht__head { position: relative; }
/* عنوان وسط‌چین است، پس دکمه‌ها انتهای خط می‌نشینند — در RTL یعنی سمت چپ. */
.ht__nav.pcar__nav {
    position: absolute; top: 0; inset-inline-end: 0;
}

@media (max-width: 700px) {
    /* روی موبایل با انگشت اسکرول می‌شود، دکمه لازم نیست */
    .ht__nav { display: none; }
}

.ht__all {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: 1.15rem;
    font-size: .8125rem; font-weight: 800; color: var(--color-primary, #e20015);
}
.ht__all svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
    .ht { padding: 0 .75rem; }
    .ht__box { padding: 1.1rem .85rem 1.25rem; border-radius: 1.1rem; }
}

/* ================================================================
   ۵) درخواست مشاوره
   ================================================================ */
.hc {
    max-width: var(--home-max);
    margin: 2.5rem auto;
    padding: 0 var(--home-pad);
}
.hc__inner {
    display: grid; gap: 1.25rem; align-items: center;
    background: #f4f5f7;
    border-radius: 1.5rem;
    padding: 1.75rem 1.5rem;
}
@media (min-width: 860px) {
    /* minmax(0,..) لازم است وگرنه ستون‌ها با محتوای طولانی از هم می‌پاشند */
    .hc__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 2.5rem;
        padding: 2.25rem 2.5rem;
    }
    /* فرم در ستون خودش نه کش می‌آید نه شناور می‌ماند */
    .hc__form { width: 100%; max-width: 420px; margin-inline-start: auto; }
    .hc__text { padding-inline-end: 2.5rem; border-inline-end: 1px solid #e4e7ec; }
}

.hc__text { min-width: 0; }
.hc__btn-text { display: inline-block; }

.hc__eyebrow {
    display: inline-block;
    font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    color: #8b95a3; margin-bottom: .5rem;
}
.hc__eyebrow::after {
    content: ''; display: inline-block; vertical-align: middle;
    width: 46px; height: 2px; margin-inline-start: .6rem;
    background: var(--color-primary, #e20015); border-radius: 2px;
}
.hc__title { font-size: 1.4rem; font-weight: 800; color: #0b1b2b; margin: 0 0 .4rem; line-height: 1.6; }
.hc__sub   { font-size: .85rem; color: #55637a; line-height: 2; margin: 0; }

.hc__field {
    display: flex; align-items: center; gap: .35rem;
    background: #fff; border-radius: 999px;
    padding: .35rem .35rem .35rem 1.1rem;
    box-shadow: 0 2px 10px rgba(11, 27, 43, .06);
}
.hc__field input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-family: inherit; font-size: .95rem; font-weight: 700;
    color: #16202c; letter-spacing: .04em;
    padding: .55rem 0;
}
.hc__field input::placeholder { color: #b6bec9; font-weight: 500; letter-spacing: normal; }
.hc__field button {
    flex-shrink: 0; border: 0; cursor: pointer;
    background: var(--color-primary, #e20015); color: #fff;
    font-family: inherit; font-size: .85rem; font-weight: 800;
    border-radius: 999px; padding: .7rem 1.4rem;
    transition: background .15s, opacity .15s;
}
.hc__field button:hover:not(:disabled) { background: var(--color-primary-dark, #b00010); }
.hc__field button:disabled { opacity: .6; cursor: default; }

.hc__note {
    font-size: .72rem; color: #8b95a3; margin: .6rem .3rem 0; line-height: 1.9;
    min-height: 1.35rem;      /* جای پیام رزرو شود تا چیدمان نپرد */
}
.hc__note--ok  { color: var(--color-success, #00884a); font-weight: 700; }
.hc__note--err { color: var(--color-primary, #e20015); font-weight: 700; }
.hc__form.done .hc__field { opacity: .55; }

@media (max-width: 859px) {
    .hc { margin: 1.9rem auto; }
    .hc__inner { gap: 1.1rem; }
    .hc__title { font-size: 1.2rem; }
    .hc__sub   { font-size: .8125rem; line-height: 1.95; }
}
@media (max-width: 480px) {
    .hc { padding: 0 .85rem; }
    .hc__inner { padding: 1.35rem 1.1rem; border-radius: 1.15rem; }
    .hc__title { font-size: 1.1rem; }
    .hc__note { text-align: center; margin-inline: 0; }
    .hc__field { flex-direction: column; border-radius: 1rem; padding: .6rem; gap: .5rem; }
    .hc__field input { width: 100%; text-align: center; padding: .5rem 0; }
    .hc__field button { width: 100%; }
}

/* ================================================================
   متن معرفی صفحه‌ی اصلی — تنها H1 این صفحه
   ================================================================ */
.habout {
    max-width: var(--home-max);
    margin: 2.5rem auto;
    padding: 0 var(--home-pad);
}
.habout__inner {
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 1.15rem;
    padding: 1.6rem 1.5rem 1.75rem;
}
.habout__title {
    margin: 0 0 1rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 800;
    color: #0b1b2b;
    line-height: 1.7;
    position: relative;
    padding-bottom: .75rem;
}
.habout__title::after {
    content: '';
    position: absolute; inset-inline-start: 0; bottom: 0;
    width: 54px; height: 3px; border-radius: 3px;
    background: var(--color-primary, #e20015);
}
.habout__body {
    font-size: .875rem;
    line-height: 2.15;
    color: #44536a;
    text-align: justify;
}
.habout__body p { margin: 0 0 .9rem; }
.habout__body p:last-child { margin-bottom: 0; }
.habout__body a { color: var(--color-primary, #e20015); font-weight: 700; }

@media (max-width: 767px) {
    .habout { margin: 1.75rem auto; }
    .habout__inner { padding: 1.15rem 1rem 1.25rem; border-radius: 1rem; }
    .habout__body { font-size: .8125rem; line-height: 2.05; text-align: right; }
}

/* ───────────────────────────────────────────────────────────
   بنر عریض (بعد از «پیشنهاد ویژه»)

   داخل همان .container mx-auto px-4 است که بقیه‌ی سکشن‌های صفحه‌ی اصلی
   دارند، پس فاصله‌ی چپ و راستش دقیقاً با کروسل‌ها و بنرهای دیگر یکی است
   و لبه‌ها تراز می‌شوند. فرقش با بنرهای دیگر فقط این است که آن‌ها دوتایی
   کنار هم می‌نشینند و این یکی کلِ عرض را می‌گیرد.
   ─────────────────────────────────────────────────────────── */
.hb-wide {
    display: block;
    width: 100%;
    margin: 2rem 0;
}
.hb-wide__link {
    display: block;
    width: 100%;
    /* هم‌شکل با .bw-banner-link تا بین بنرهای بالا و پایینش وصله نباشد */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    transition: box-shadow .35s ease, transform .35s ease;
    /* نسبت ابعاد از تصویر واقعی می‌آید (متغیر را PHP ست می‌کند). اگر
       ابعاد در دسترس نبود، aspect-ratio نامعتبر می‌شود و مرورگر خودش
       از ابعاد ذاتیِ تصویر استفاده می‌کند — یعنی فالبک امن است. */
    aspect-ratio: var(--hbw-ratio, auto);
}
/* هاور فقط وقتی واقعاً لینک است؛ بنر بدون لینک <div> رندر می‌شود و نباید
   طوری رفتار کند که انگار کلیک‌شدنی است. */
a.hb-wide__link:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
    transform: translateY(-4px);
}
.hb-wide__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}
a.hb-wide__link:hover .hb-wide__img { transform: scale(1.04); }

@media (max-width: 767px) {
    .hb-wide { margin: 1.35rem 0; }
    .hb-wide__link { border-radius: 12px; }
    /* فقط وقتی تصویر موبایل جدا داده شده، نسبتِ خودش را می‌گیرد.
       بدون این، نسبتِ دسکتاپ می‌ماند و لحظه‌ی لود، صفحه می‌پرد. */
    .hb-wide--has-mobile .hb-wide__link { aspect-ratio: var(--hbw-ratio-m, auto); }
    /* روی موبایل هاور با لمس گیر می‌کند و بنر تکان‌خورده می‌ماند */
    a.hb-wide__link:hover { transform: none; box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }
    a.hb-wide__link:hover .hb-wide__img { transform: none; }
}