/**
 * Clinical Skills — تجاوب شامل (جميع الشاشات)
 */

/* ── أساس ── */
.clinical-landing-body {
    overflow-x: clip;
    max-width: 100%;
}

.clinical-landing-body img,
.clinical-landing-body video,
.clinical-landing-body svg:not(.cl-nav-toggle__bar) {
    max-width: 100%;
    height: auto;
}

.cl-page .container,
.cl-header .container,
.cl-footer .container {
    width: 100%;
    max-width: min(1120px, 100%);
    padding-left: clamp(0.85rem, 3vw, 1.25rem);
    padding-right: clamp(0.85rem, 3vw, 1.25rem);
}

.cl-header .container {
    max-width: min(1280px, 100%);
}

/* ── الهيدر: قائمة جوال حتى 1199px ── */
@media (max-width: 1199.98px) {
    .cl-nav,
    .cl-header__actions {
        display: none !important;
    }

    .cl-nav-toggle {
        display: flex !important;
    }

    .cl-brand__logo {
        max-height: 42px;
    }

    .cl-header__inner {
        min-height: 64px;
    }
}

@media (min-width: 1200px) {
    .cl-nav,
    .cl-header__actions {
        display: flex !important;
    }

    .cl-nav-toggle {
        display: none !important;
    }

    .cl-mobile-nav {
        display: none !important;
    }
}

.cl-mobile-nav .cl-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.35rem;
}

/* ── صفحات عامة ── */
@media (max-width: 767.98px) {
    .cl-page {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .cl-page-hero__title {
        font-size: clamp(1.35rem, 5vw, 1.75rem);
        word-break: break-word;
    }

    .cl-page-hero__lead {
        font-size: var(--cl-fs-sm);
    }

    .cl-breadcrumb {
        font-size: var(--cl-fs-xs);
    }

    .cl-hero__cta {
        flex-direction: column;
    }

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

    .cl-cta__inner {
        align-items: stretch !important;
    }

    .cl-cta__actions {
        flex-direction: column;
        width: 100%;
    }

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

    .cl-auth-card {
        padding: 1.25rem;
    }

    .cl-detail-grid {
        grid-template-columns: 1fr;
    }

    .cl-sidebar-card {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 575.98px) {
    .cl-pillars {
        grid-template-columns: 1fr;
    }

    .cl-sponsors__grid {
        grid-template-columns: 1fr;
    }
}

/* ── صفحات الكورسات (LMS + clinical) ── */
body.cl-lms-bridge .container {
    width: 100% !important;
    max-width: min(1120px, 100%) !important;
}

.cl-courses-page {
    overflow-x: clip;
    max-width: 100%;
}

.cl-courses-page .row {
    margin-left: 0;
    margin-right: 0;
}

.cl-courses-page .entry-title h3,
.cl-courses-page .en-title h3,
.cl-courses-page .entry-title h3.w-100 {
    width: 100% !important;
    max-width: 100% !important;
}

.cl-courses-page .courses-img img,
.cl-courses-page .Ecard .card-head img,
.cl-courses-page .card-head img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 140px;
    max-height: 220px;
    object-fit: cover;
}

.cl-courses-page .Ecard,
.cl-courses-page .single-feature,
.cl-courses-page .g-card,
.cl-courses-page .c-card {
    max-width: 100%;
}

.cl-courses-page .eNtry-item {
    margin-top: 0 !important;
}

.cl-courses-page .form-area .form-group .form-control {
    width: 100% !important;
    max-width: 100% !important;
}

.cl-courses-page .tab-list ul {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .cl-courses-page .sidebar {
        margin-bottom: 1.25rem;
    }

    .cl-courses-page .overlay-content-max-h-400,
    .cl-courses-page .widget.overlay-content {
        max-height: none !important;
        overflow: visible !important;
    }

    .cl-courses-page [class*="col-lg-"],
    .cl-courses-page [class*="col-md-"] {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .cl-courses-page .col-lg-4.col-md-6,
    .cl-courses-page .col-lg-4.col-md-6.col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cl-courses-page .details-page-content .nav-tabs,
    .cl-courses-page .ps-box .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        white-space: nowrap;
        border-bottom: 1px solid rgba(15, 39, 68, 0.1);
        padding-bottom: 0.25rem;
    }

    .cl-courses-page .details-page-content .nav-item,
    .cl-courses-page .ps-box .nav-item {
        flex-shrink: 0;
    }

    .cl-courses-page .details-page-content .nav-link,
    .cl-courses-page .ps-box .nav-link {
        white-space: nowrap;
        font-size: var(--cl-fs-xs) !important;
        padding: 0.5rem 0.75rem;
    }

    .cl-courses-page .row.row-gap-4.mb-4 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cl-courses-page .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
    }

    .cl-courses-page .page-link {
        margin-right: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .cl-courses-page .col-lg-4.col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ── منطقة الطالب ── */
@media (max-width: 991.98px) {
    .cl-student-page .col-lg-3,
    .cl-student-page .col-lg-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cl-student-page .gradient-border {
        margin-bottom: 0.5rem;
    }

    .cl-student-page .couses-tab-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
    }
}

@media (max-width: 575.98px) {
    .cl-student-page .couses-tab-list {
        grid-template-columns: 1fr;
    }
}

/* ── صفحة المدرّس ── */
@media (max-width: 767.98px) {
    .cl-instructor-page .cl-instructor-photo {
        max-width: 100%;
        margin-inline: auto;
    }

    .cl-instructor-page .cl-instructor-stats {
        justify-content: center;
    }
}

/* ── جداول وتمرير أفقي عند الحاجة ── */
.cl-page .table-responsive,
.cl-courses-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Bootstrap modals داخل clinical */
.clinical-landing-body .modal-dialog {
    max-width: min(560px, calc(100vw - 1.5rem));
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .clinical-landing-body .modal-dialog.modal-lg,
    .clinical-landing-body .modal-dialog.modal-xl {
        max-width: calc(100vw - 1rem);
    }
}

/* ── فلاتر ورش الطالب على الجوال ── */
@media (max-width: 767.98px) {
    .cl-student-page .ws-filter-form .col-md-4,
    .cl-student-page .ws-filter-form .col-md-3,
    .cl-student-page .ws-filter-form .col-md-2,
    .cl-student-page .ws-filter-form .col-md-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .cl-student-page .ws-filter-form .d-flex.gap-1 {
        width: 100%;
    }

    .cl-student-page .my-course-content .d-flex.gap-2 {
        flex-direction: column;
    }

    .cl-student-page .my-course-content .d-flex.gap-2 .form-control,
    .cl-student-page .my-course-content .d-flex.gap-2 .btn {
        width: 100%;
    }
}