/*
  PMK Custom Responsive Styles
  Amélioration de la responsivité pour le site du Prytanée Militaire de Kati
*/

/* === BREAKPOINTS ===
   - Extra small: < 576px (Mobile)
   - Small: 576px - 767px (Mobile landscape)
   - Medium: 768px - 991px (Tablet)
   - Large: 992px - 1199px (Desktop)
   - Extra large: ≥ 1200px (Large desktop)
*/

/* ====================================
   GLOBAL RESPONSIVE UTILITIES
   ==================================== */

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    h1 {
        font-size: 36px !important;
    }

    h2 {
        font-size: 30px !important;
    }

    h3 {
        font-size: 24px !important;
    }
}

@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }

    /* Hide desktop-only elements */
    .d-desktop-only {
        display: none !important;
    }

    /* Stack columns */
    .row-cols-auto > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .container {
        max-width: 540px;
        padding-left: 15px;
        padding-right: 15px;
    }

    h1 {
        font-size: 28px !important;
    }

    h2 {
        font-size: 24px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px !important;
    }

    /* Reduce padding on sections */
    section {
        padding: 40px 0 !important;
    }

    .pt-120, .pt-110, .pt-100 {
        padding-top: 50px !important;
    }

    .pb-120, .pb-110, .pb-100 {
        padding-bottom: 50px !important;
    }
}

@media (max-width: 575px) {
    .container {
        max-width: 100%;
    }

    h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 16px !important;
    }

    p {
        font-size: 13px !important;
    }

    /* Smaller buttons */
    .btn, .main-btn {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }
}

/* ====================================
   IMAGES & MEDIA RESPONSIVE
   ==================================== */

@media (max-width: 991px) {
    img {
        max-width: 100%;
        height: auto;
    }

    .card img,
    .singel-course img,
    .singel-blog img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* ====================================
   TABLES RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        font-size: 12px;
    }

    table th,
    table td {
        padding: 8px 5px !important;
        white-space: nowrap;
    }
}

/* ====================================
   FORMS RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .form-control {
        font-size: 14px;
        padding: 10px 15px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    label {
        font-size: 14px;
    }

    select.form-control {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .form-control {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* ====================================
   CARDS RESPONSIVE
   ==================================== */

@media (max-width: 991px) {
    .card {
        margin-bottom: 20px;
    }

    .card-body {
        padding: 15px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-text {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .card-body {
        padding: 12px;
    }

    .card-title {
        font-size: 16px;
    }

    .card-text {
        font-size: 13px;
    }
}

/* ====================================
   GRID SYSTEM RESPONSIVE
   ==================================== */

@media (max-width: 991px) {
    .col-lg-3,
    .col-lg-4,
    .col-lg-6,
    .col-lg-8 {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-8 {
        margin-bottom: 20px;
    }

    /* Full width on mobile */
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* ====================================
   SPACING UTILITIES RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .mt-50, .mt-60, .mt-70 {
        margin-top: 30px !important;
    }

    .mb-50, .mb-60, .mb-70 {
        margin-bottom: 30px !important;
    }

    .pt-50, .pt-60, .pt-70 {
        padding-top: 30px !important;
    }

    .pb-50, .pb-60, .pb-70 {
        padding-bottom: 30px !important;
    }
}

@media (max-width: 575px) {
    .mt-50, .mt-60, .mt-70 {
        margin-top: 20px !important;
    }

    .mb-50, .mb-60, .mb-70 {
        margin-bottom: 20px !important;
    }

    .pt-50, .pt-60, .pt-70 {
        padding-top: 20px !important;
    }

    .pb-50, .pb-60, .pb-70 {
        padding-bottom: 20px !important;
    }
}

/* ====================================
   TEXT ALIGNMENT RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .text-md-center {
        text-align: center !important;
    }

    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }
}

@media (max-width: 575px) {
    .text-sm-center {
        text-align: center !important;
    }
}

/* ====================================
   MODALS RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-content {
        border-radius: 8px;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 15px;
    }

    .modal-title {
        font-size: 18px;
    }
}

/* ====================================
   PAGINATION RESPONSIVE
   ==================================== */

@media (max-width: 575px) {
    .pagination {
        font-size: 12px;
    }

    .pagination .page-link {
        padding: 5px 10px;
    }
}

/* ====================================
   BREADCRUMB RESPONSIVE
   ==================================== */

@media (max-width: 575px) {
    .breadcrumb {
        font-size: 12px;
        padding: 8px 10px;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 5px;
    }
}

/* ====================================
   VIDEO PLAYER RESPONSIVE
   ==================================== */

@media (max-width: 991px) {
    .video-wrapper,
    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
    }

    .video-wrapper iframe,
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ====================================
   SLIDERS / CAROUSELS RESPONSIVE
   ==================================== */

@media (max-width: 767px) {
    .slick-prev,
    .slick-next {
        width: 30px !important;
        height: 30px !important;
    }

    .slick-dots li button {
        width: 8px;
        height: 8px;
    }
}

/* ====================================
   OVERFLOW MANAGEMENT
   ==================================== */

@media (max-width: 991px) {
    body {
        overflow-x: hidden;
    }

    .container-fluid {
        overflow-x: hidden;
    }
}

/* ====================================
   SCROLLBAR MOBILE
   ==================================== */

@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 5px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 5px;
    }
}

/* ====================================
   PRINT STYLES
   ==================================== */

@media print {
    .no-print,
    header,
    footer,
    .navbar,
    .btn,
    .navigation {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }
}