/* ===========================================================
   responsive-fix.css  —  رفع بریدگی اسلایدر و دکمه‌ها
   باید «بعد از» css3.css و site-consistency.css لود شود.
   علت مشکل: ارتفاع ثابت (60vh) + overflow:hidden روی اسلاید،
   و عرض ثابت 220px روی دکمه‌ها. اینجا ارتفاع از روی محتوا
   محاسبه می‌شود تا هیچ‌چیز بریده نشود.
   =========================================================== */

/* ---------- 1) اسلایدر صفحه اصلی ---------- */
.header-carousel .owl-carousel-item {
    height: auto !important;
    max-height: none !important;
    min-height: clamp(420px, 62vh, 640px) !important;
    display: flex;
    align-items: stretch;
}

.header-carousel .owl-carousel-item img {
    /* تصویر پس‌زمینه کل اسلاید را می‌پوشاند، بدون اینکه ارتفاع را تعیین کند */
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover !important;
    object-position: center !important;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto !important;
    min-height: inherit;
    display: flex;
    align-items: center;
    padding-top: 56px !important;
    padding-bottom: 72px !important;   /* جا برای نقطه‌های اسلایدر */
}

.hero-content > .row { width: 100%; margin-inline: 0; }

/* متن بدون برش (line-clamp قبلی حذف شد) */
.hero-text {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    max-width: 600px;
}

/* گرادیان تیره باید سمت راست (محل متن در RTL) باشد */
.hero-overlay {
    background:
        linear-gradient(270deg, rgba(8,12,25,.82) 0%, rgba(8,12,25,.55) 50%, rgba(8,12,25,.25) 100%),
        radial-gradient(circle at right center, rgba(200,164,93,.20), transparent 35%) !important;
}

/* ---------- 2) دکمه‌ها ---------- */
.hero-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-buttons .btn {
    width: auto !important;          /* به‌جای 220px ثابت */
    min-width: 150px;
    max-width: 100%;
    white-space: normal;             /* متن بلند دکمه شکسته شود، بیرون نزند */
    text-align: center;
    line-height: 1.5;
}

/* عمومی: دکمه‌های همه صفحات اجازه‌ی شکستن متن داشته باشند */
.btn { white-space: normal; }
.d-flex.flex-wrap .btn,
.contact-hero .btn, .exam-hero .btn, .translation-hero .btn,
.page-header .btn, .about-hero .btn { max-width: 100%; }

/* ---------- 3) تصاویر و المان‌های عمومی ---------- */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
.header-carousel .owl-carousel-item img { height: 100% !important; }
table { max-width: 100%; }
.table-responsive, .compare-table { overflow-x: auto; }

/* ---------- 4) هیرو صفحه‌های داخلی ---------- */
.contact-hero, .exam-hero, .translation-hero, .page-header, .about-hero {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
}
.page-header img, .contact-hero img, .exam-hero img, .translation-hero img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* ---------- 5) تبلت ---------- */
@media (max-width: 991px) {
    .header-carousel .owl-carousel-item { min-height: clamp(400px, 56vh, 560px) !important; }
    .hero-content { padding-top: 48px !important; padding-bottom: 64px !important; }
    .hero-text { max-width: 100%; }
}

/* ---------- 6) موبایل ---------- */
@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        min-height: 440px !important;
        border-radius: 0 0 24px 24px !important;
    }
    .hero-content { padding-top: 36px !important; padding-bottom: 56px !important; }
    .hero-text { font-size: .9rem !important; }
    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-buttons .btn { width: 100% !important; max-width: 300px; }
    .header-carousel .owl-nav button { width: 38px; height: 38px; }
    .quick-links-strip { margin-top: 16px; }
}

@media (max-width: 420px) {
    .header-carousel .owl-carousel-item { min-height: 460px !important; border-radius: 0 0 18px 18px !important; }
    .hero-badge { font-size: .75rem; }
}

/* ---------- 7) صفحه‌نمایش‌های کم‌ارتفاع (لپ‌تاپ‌های کوچک / زوم بالا) ---------- */
@media (max-height: 700px) and (min-width: 769px) {
    .header-carousel .owl-carousel-item { min-height: 460px !important; }
    .hero-content { padding-top: 32px !important; padding-bottom: 60px !important; }
    .hero-title { font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important; }
}