/* ============================================
   JMS RESEARCH CENTER - RESPONSIVE
   Mobile-First Breakpoints & Adaptive Layout
   ============================================ */

/* ========== TABLET: 768px ========== */
@media (max-width: 768px) {

    /* --- Typography --- */
    .jms-section__title {
        font-size: var(--jms-text-3xl);
    }

    .jms-section__subtitle {
        font-size: var(--jms-text-sm);
    }

    /* --- Header --- */
    .jms-header__toggle {
        display: flex;
    }

    .jms-nav {
        position: fixed;
        top: var(--jms-header-height);
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: calc(100vh - var(--jms-header-height));
        background: #fff;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--jms-space-6);
        transition: right var(--jms-transition-base);
        overflow-y: auto;
        z-index: var(--jms-z-overlay);
    }

    .jms-nav--open {
        right: 0;
    }

    .jms-nav__list {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .jms-nav__link {
        width: 100%;
        padding: var(--jms-space-3) var(--jms-space-4);
        border-radius: var(--jms-radius-sm);
        font-size: var(--jms-text-base);
    }

    .jms-nav__submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: var(--jms-space-4);
        display: none;
    }

    .jms-nav__item--has-children.is-open > .jms-nav__submenu {
        display: block;
    }

    .jms-header__actions {
        gap: 8px;
    }

    .jms-header__actions .jms-btn--ghost,
    .jms-header__actions .jms-btn--primary:not(.jms-header__toggle) {
        display: none;
    }

    .jms-header__notif,
    .jms-header__profile-dropdown {
        display: flex;
    }

    .jms-header__profile-name {
        display: none;
    }

    .jms-nav__mobile-actions {
        display: flex;
        flex-direction: column;
        gap: var(--jms-space-3);
        margin-top: var(--jms-space-6);
        padding-top: var(--jms-space-6);
        border-top: 1px solid var(--jms-gray-200);
    }

    .jms-nav__mobile-user {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .jms-nav__mobile-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Mobile overlay */
    .jms-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: calc(var(--jms-z-overlay) - 1);
    }

    .jms-nav-overlay--active {
        display: block;
    }

    /* --- Hero --- */
    .jms-hero__inner,
    .jms-hero__grid {
        flex-direction: column;
        text-align: center;
        padding: var(--jms-space-10) 0 var(--jms-space-8);
    }

    .jms-hero__content {
        max-width: 100%;
    }

    .jms-hero__title {
        font-size: var(--jms-text-3xl);
    }

    .jms-hero__actions {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .jms-hero__visual {
        max-width: 350px;
        margin: 0 auto;
    }

    .jms-hero__trust {
        justify-content: center;
    }

    .jms-hero__floating-card {
        display: none;
    }

    /* --- Stats --- */
    .jms-stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--jms-space-4);
    }

    .jms-stats__number {
        font-size: var(--jms-text-3xl);
    }

    /* --- Modules --- */
    .jms-modules__grid {
        grid-template-columns: 1fr;
    }

    .jms-module-card {
        padding: var(--jms-space-6);
    }

    /* --- Courses --- */
    .jms-courses__track {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Jobs --- */
    .jms-jobs__grid {
        grid-template-columns: 1fr;
    }

    .jms-job-listing__filters {
        flex-direction: column;
    }

    .jms-job-listing__filters .jms-form__group {
        min-width: 100%;
    }

    /* --- Testimonials --- */
    .jms-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- CTA --- */
    .jms-cta__inner {
        flex-direction: column;
        text-align: center;
    }

    .jms-cta__title {
        font-size: var(--jms-text-2xl);
    }

    .jms-cta__actions {
        justify-content: center;
    }

    /* --- Footer --- */
    .jms-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jms-footer__bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--jms-space-3);
    }

    /* --- Blog --- */
    .jms-blog__grid {
        grid-template-columns: 1fr;
    }

    /* --- Dashboard --- */
    .jms-dashboard {
        flex-direction: column;
    }

    .jms-dashboard__sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--jms-gray-200);
    }

    .jms-dashboard__nav {
        display: flex;
        overflow-x: auto;
        padding: var(--jms-space-3);
        gap: var(--jms-space-2);
        -webkit-overflow-scrolling: touch;
    }

    .jms-dashboard__nav-item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .jms-dashboard__stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== SMALL MOBILE: 480px ========== */
@media (max-width: 480px) {

    /* --- Global --- */
    .jms-container {
        padding-left: var(--jms-space-4);
        padding-right: var(--jms-space-4);
    }

    .jms-section {
        padding: var(--jms-space-10) 0;
    }

    /* --- Typography --- */
    .jms-section__title {
        font-size: var(--jms-text-2xl);
    }

    /* --- Hero --- */
    .jms-hero__title {
        font-size: var(--jms-text-2xl);
    }

    .jms-hero__subtitle {
        font-size: var(--jms-text-sm);
    }

    .jms-hero__visual {
        max-width: 280px;
    }

    .jms-hero__trust {
        flex-direction: column;
        gap: var(--jms-space-2);
    }

    .jms-btn--lg {
        width: 100%;
    }

    /* --- Stats --- */
    .jms-stats__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--jms-space-3);
    }

    .jms-stats__number {
        font-size: var(--jms-text-2xl);
    }

    .jms-stats__label {
        font-size: var(--jms-text-xs);
    }

    /* --- Cards --- */
    .jms-courses__track {
        grid-template-columns: 1fr;
    }

    .jms-card__body {
        padding: var(--jms-space-4);
    }

    .jms-card__title {
        font-size: var(--jms-text-base);
    }

    /* --- Testimonials --- */
    .jms-testimonials__grid {
        grid-template-columns: 1fr;
    }

    /* --- CTA --- */
    .jms-cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .jms-cta__actions .jms-btn {
        width: 100%;
    }

    /* --- Footer --- */
    .jms-footer__grid {
        grid-template-columns: 1fr;
    }

    /* --- Dashboard --- */
    .jms-dashboard__stats-grid {
        grid-template-columns: 1fr;
    }

    .jms-dashboard__nav {
        gap: var(--jms-space-1);
    }
}

/* ========== LARGE TABLET: 1024px ========== */
@media (max-width: 1024px) {
    .jms-hero__inner,
    .jms-hero__grid {
        gap: var(--jms-space-8);
    }

    .jms-modules__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jms-courses__track {
        grid-template-columns: repeat(2, 1fr);
    }

    .jms-testimonials__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========== DESKTOP: 1200px+ ========== */
@media (min-width: 1200px) {
    .jms-courses__track {
        grid-template-columns: repeat(4, 1fr);
    }

    .jms-testimonials__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ========== MOBILE BOTTOM CTA BAR === */
.jms-mobile-cta {
    display: none;
}

@media (max-width: 768px) {
    .jms-mobile-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--jms-z-fixed);
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        padding: var(--jms-space-3) var(--jms-space-4);
    }

    .jms-mobile-cta .jms-btn {
        width: 100%;
    }

    /* Add bottom space for body to account for sticky CTA */
    body {
        padding-bottom: 72px;
    }

    /* Reduce animation stagger for mobile */
    .jms-animate--delay-3,
    .jms-animate--delay-4,
    .jms-animate--delay-5,
    .jms-animate--delay-6 {
        transition-delay: 0.2s;
    }
}

/* ========== TOUCH-FRIENDLY UI === */
@media (hover: none) and (pointer: coarse) {
    .jms-btn {
        min-height: 44px;
    }

    .jms-nav__link {
        min-height: 44px;
    }

    .jms-card:hover {
        transform: none;
    }

    .jms-card:active {
        transform: scale(0.98);
    }

    .jms-module-card:hover {
        transform: none;
    }

    .jms-module-card:active {
        transform: scale(0.98);
    }
}

/* ========== PRINT STYLES === */
@media print {
    .jms-header,
    .jms-footer,
    .jms-mobile-cta,
    .jms-hero__visual,
    .jms-slider__controls,
    .jms-cta {
        display: none !important;
    }

    body {
        padding-top: 0;
    }

    .jms-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    a {
        color: inherit;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}