/* Unified responsive overrides for public-facing pages */

:root {
    --ui-mobile-space: clamp(12px, 3vw, 24px);
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
}

body,
input,
textarea,
select,
button {
    max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

.container,
.container-fluid {
    width: 100%;
    padding-inline: var(--ui-mobile-space);
}

.row > [class*="col-"] {
    min-width: 0;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-dialog {
    margin: 0.75rem auto;
}

.custom-navbar .container,
.navbar .container,
.navbar .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.navbar-brand,
.custom-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    min-width: 0;
}

.btn-back,
.btn-request,
.enroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero-section,
.premium-hero,
.hero-about,
.hero-team,
.talents-hero {
    overflow: hidden;
}

.user-menu,
.course-price,
.course-stats,
.hero-buttons,
.cta-buttons,
.nav-auth {
    display: flex;
    gap: 12px;
}

.login-card,
.register-card,
.auth-card,
.course-card,
.service-card,
.team-card,
.testimonial-card,
.faq-item,
.contact-form {
    max-width: 100%;
}

.form-control,
.form-select,
textarea {
    font-size: 16px;
}

@media (max-width: 991.98px) {
    .hero-section,
    .premium-hero,
    .hero-about,
    .hero-team,
    .talents-hero {
        min-height: auto !important;
        padding-top: clamp(88px, 16vw, 140px) !important;
        padding-bottom: clamp(48px, 10vw, 88px) !important;
    }

    h1,
    .display-1,
    .display-2,
    .display-3,
    .display-4,
    .display-5 {
        font-size: clamp(1.9rem, 6vw, 3.2rem) !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 4.8vw, 2.4rem) !important;
    }

    .lead,
    .subtitle,
    .description {
        font-size: clamp(1rem, 3vw, 1.15rem) !important;
    }
}

@media (max-width: 767.98px) {
    section {
        padding-top: clamp(24px, 5vw, 36px);
        padding-bottom: clamp(24px, 5vw, 36px);
    }

    .hero-buttons,
    .cta-buttons,
    .user-menu,
    .course-price,
    .course-stats,
    .nav-auth,
    .d-flex.gap-3,
    .d-flex.gap-4 {
        flex-wrap: wrap !important;
    }

    .hero-buttons > *,
    .cta-buttons > *,
    .user-menu > *,
    .nav-auth > * {
        width: 100%;
        justify-content: center;
    }

    .course-card,
    .service-card,
    .team-card,
    .testimonial-card,
    .faq-item,
    .contact-form,
    .feature-card {
        height: auto !important;
    }

    .course-thumbnail,
    .team-image,
    .member-image,
    .course-image {
        height: clamp(180px, 46vw, 240px) !important;
    }

    .hero-section {
        border-radius: 0 0 28px 28px !important;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-inline: 12px !important;
    }

    .btn,
    button,
    .nav-link,
    .btn-back,
    .btn-request,
    .enroll-btn {
        min-height: 44px;
        width: 100%;
        justify-content: center;
    }

    .navbar-brand,
    .custom-navbar .navbar-brand {
        width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .navbar-logo,
    .brand-logo-img {
        width: 36px !important;
        height: 36px !important;
    }

    .course-content,
    .service-card,
    .team-card,
    .login-card,
    .register-card,
    .auth-card {
        padding: 18px !important;
    }

    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .table {
        min-width: 560px;
    }

    .course-stats {
        gap: 8px !important;
    }
}

@media (max-width: 374.98px) {
    .navbar-brand {
        font-size: 1rem !important;
    }

    .btn-back,
    .btn-request,
    .enroll-btn {
        font-size: 0.92rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}