/* ==============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Breakpoint: 768px
   Principles: touch targets ≥44px, no horizontal
   scroll, readable typography, breathing room
   ============================================== */

@media screen and (max-width: 768px) {

    /* ----- BASE RESET ----- */
    html { -webkit-text-size-adjust: 100%; }
    body { font-size: 15px; overflow-x: hidden; }

    /* ----- TOP BAR ----- */
    .top-bar { padding: 6px 12px; font-size: 11px; }
    .top-bar .in, .top-bar .inner { flex-direction: column; gap: 2px; text-align: center; }

    /* ----- TOP BAR (HIDE ON MOBILE) ----- */
    .top-bar, .header-top { display: none !important; }

    /* ----- STICKY HEADER ----- */
    .site-hd, .site-header { position: sticky; top: 0; }
    .hd-in, .header-main, .header-inner { padding: 8px 12px !important; min-height: 48px; }
    .logo { font-size: 15px !important; gap: 6px; }
    .logo i { font-size: 16px; }

    /* ----- MODERN MOBILE MENU ----- */
    .menu-toggle, .hamburger {
        display: flex !important;
        width: 40px; height: 40px;
        border-radius: 50%;
        border: 1.5px solid #dde0e5;
        background: #fff;
        cursor: pointer;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        flex-direction: column;
        padding-right: 10px;
        z-index: 200;
        position: relative;
    }
    .menu-toggle span, .hamburger span {
        display: block; height: 2px;
        background: #1a237e;
        border-radius: 2px;
        transition: all .25s cubic-bezier(.4,0,.2,1);
    }
    .menu-toggle span:nth-child(1), .hamburger span:nth-child(1) { width: 14px; }
    .menu-toggle span:nth-child(2), .hamburger span:nth-child(2) { width: 20px; }
    .menu-toggle span:nth-child(3), .hamburger span:nth-child(3) { width: 10px; }
    .menu-toggle.active span:nth-child(1), .hamburger.active span:nth-child(1) { width: 20px; transform: translateY(6px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2), .hamburger.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3), .hamburger.active span:nth-child(3) { width: 20px; transform: translateY(-6px) rotate(-45deg); }

    /* Slide-in menu panel */
    .main-nav, .nav {
        display: block;
        position: fixed;
        top: 0; right: 0;
        width: 85%; max-width: 340px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        padding: 0;
        box-shadow: -8px 0 40px rgba(0,0,0,.15);
        z-index: 150;
        transform: translateX(110%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        margin: 0 !important;
        gap: 0 !important;
    }
    .main-nav.active, .nav.open {
        display: flex !important;
        transform: translateX(0);
    }

    /* Menu header */
    .menu-header { padding: 24px 20px 16px; border-bottom: 1px solid #f0f0f0; display:flex; align-items:center; gap:12px }
    .menu-avatar { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1a237e,#1976d2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;flex-shrink:0 }
    .menu-user-info { flex:1 }
    .menu-user-name { font-weight:600;font-size:.95rem;color:#1a1a2e }
    .menu-user-role { font-size:.7rem;color:#999 }

    /* Menu items with icons */
    .nav-link, .nav a, .main-nav a {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 15px 20px !important;
        font-size: 15px !important;
        color: #1a1a2e !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        border-bottom: none !important;
        border-left: 3px solid transparent !important;
        transition: all .15s;
    }
    .nav-link:active, .nav a:active, .main-nav a:active { background: #f5f6fa; }
    .nav-link.active, .nav a.act, .main-nav a.active {
        color: #1a237e !important;
        font-weight: 700 !important;
        border-left-color: #1a237e !important;
        background: #eef2f9;
    }
    .nav-link i, .nav a i, .main-nav a i {
        width: 20px; text-align: center;
        font-size: 1rem; color: #1a237e; opacity: .7;
    }
    .nav-link.active i, .nav a.act i, .main-nav a.active i { opacity: 1; }

    /* Mobile auth buttons */
    .mobile-auth {
        padding: 20px;
        display: flex;
        gap: 10px;
        border-top: 1px solid #eee;
        margin-top: auto;
    }
    .mobile-auth .btn {
        flex: 1;
        padding: 13px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
    }

    /* Overlay */
    .menu-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.4);
        z-index: 140;
        display: none;
    }
    .menu-overlay.show { display: block; }

    /* ----- CONTAINERS ----- */
    .container, .art-container, .content-layout, .form-wrap {
        max-width: 100% !important;
        padding: 0 16px !important;
    }

    /* ----- TYPOGRAPHY ----- */
    h1, .art-title, .article-title, .hero h1 { font-size: 1.35rem !important; line-height: 1.3; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
    p, li { font-size: .92rem !important; line-height: 1.65; }
    .breadcrumb, .breadcrumb-nav { font-size: 11px; }

    /* ----- GRIDS -> SINGLE COLUMN ----- */
    .journals-grid, .articles-grid, .stats-grid, .charts-grid,
    .actions-grid, .info-grid, .metrics-grid, .tools-grid,
    .content-wrapper, .layout { grid-template-columns: 1fr !important; }

    /* ----- SIDEBARS -> HIDE OR STACK BELOW ----- */
    .art-side, .side-col, .sidebar, .side, .float-sidebar {
        display: none !important;
    }

    /* ----- CARDS ----- */
    .journal-card, .article-card, .stat-card, .chart-card, .form-card {
        margin-bottom: 12px;
        border-radius: 10px;
        padding: 14px;
    }
    .journal-card { cursor: pointer; }
    .j-card-mid { gap: .75rem; padding: .75rem 14px; }
    .j-card-stat .val { font-size: 1rem; }

    /* ----- ARTICLE DETAIL ----- */
    .article-hero, .hero { padding: 1.5rem 0 !important; }
    .masthead { margin-top: .5rem; padding: 0 12px; }
    .authors-row { font-size: .85rem !important; line-height: 1.5; }
    .authors-row .au-name { font-size: .88rem; }
    .affiliations { padding: 0 12px; }
    .affil-item { font-size: .72rem; }
    .corr, .dates, .editor, .copyright { padding: 0 12px; font-size: .68rem; text-align: left; }
    .dates { flex-direction: column; gap: 4px; }
    .dates span { margin: 0; }

    .abstract-box, .abstract-block { padding: 14px !important; margin-bottom: 10px; }
    .main-paper, .paper-body { padding: 14px !important; }
    .main-paper h2 { font-size: 1.15rem !important; margin-top: 1.25rem; }
    .main-paper h3 { font-size: 1rem !important; }

    .action-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
    .action-bar .ab-btn { padding: 8px 12px; font-size: 12px; min-height: 40px; display: inline-flex; align-items: center; }
    .action-bar .ab-spacer { display: none; }

    .stats-bar, .inline-stats { gap: .75rem; flex-wrap: wrap; padding: 8px 0; }
    .stats-bar .stat, .inline-stats .is { min-width: 60px; }
    .stats-bar .stat .val, .inline-stats .is .val { font-size: 1rem; }

    cite-ref { font-size: .8em; }

    /* ----- JOURNALS PAGE ----- */
    .filters-section { padding: 12px; }
    .filters-section .filter-row { flex-direction: column; gap: 8px; }
    .filters-section .search-box { width: 100%; min-width: 0; }
    .filters-section select, .filters-section input { width: 100%; }
    .filters-section .filter-group { width: 100%; justify-content: space-between; }

    /* ----- SUBMIT FORM ----- */
    .steps { gap: 4px; margin-bottom: 12px; }
    .step { padding: 8px 6px; font-size: 10px; min-width: 0; }
    .step .sn { font-size: 14px; }
    .form-card { padding: 14px !important; }
    .form-row { gap: 8px; }
    .form-group { margin-bottom: 10px; }
    .form-control { padding: 10px 12px; font-size: 15px; }
    .form-label { font-size: 13px; }
    .btn { min-height: 42px; font-size: 14px !important; padding: 10px 16px !important; }
    .btn-row { flex-direction: column; gap: 8px; }
    .btn-row .btn-group { flex-direction: column; gap: 8px; width: 100%; }
    .btn-row .btn-group .btn, .btn-row .btn { width: 100%; justify-content: center; }

    /* ----- TABLES ----- */
    .table-container, table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    th, td { padding: 8px 10px; font-size: 12px; white-space: nowrap; }

    /* ----- HEADER ACTIONS ----- */
    .search-bar, .search-box { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
    .search-bar input, .search-box input { width: 100% !important; }
    .header-actions { margin-left: 0 !important; gap: 8px; }
    .header-actions .btn { padding: 8px 12px; font-size: 13px; }

    /* ----- ARTICLES LISTING ----- */
    .articles-grid { gap: 10px; }
    .article-card { padding: 14px; }
    .article-card .article-header { flex-direction: column; gap: 6px; }
    .article-card .article-badges { margin-top: 4px; }
    .article-card .article-abstract { font-size: .88rem; }
    .article-card .article-metadata { flex-wrap: wrap; gap: 8px; font-size: .75rem; }
    .article-card .article-footer { flex-direction: column; gap: 8px; }
    .article-card .article-actions { justify-content: center; }
    .search-filters { grid-template-columns: 1fr !important; }
    .results-bar { flex-direction: column !important; align-items: stretch !important; }
    .results-bar-left, .results-bar-right { flex-direction: column !important; align-items: stretch !important; }

    /* ----- JOURNAL BADGE ROW ----- */
    .journal-bar { padding: 8px 0; flex-wrap: wrap; gap: 8px; }
    .journal-bar .open-access { margin-left: 0; }

    /* ----- REFERENCE SECTION ----- */
    .ref-item { font-size: .8rem; padding: 6px 0; }
    .ref-item .rn { min-width: 20px; font-size: .75rem; }

    /* ----- KEYWORD TAGS ----- */
    .keyword-tag { font-size: .7rem; padding: 4px 8px; }

    /* ----- STATEMENTS ----- */
    .statement, .section-box, .stmt { padding: 10px 12px; font-size: .8rem; }

    /* ----- AUTHOR BIOS ----- */
    .bio-card { flex-direction: row; padding: 10px 0; }
    .bio-av { width: 40px; height: 40px; font-size: .85rem; }

    /* ----- STATS BAR ON JOURNALS ----- */
    .stats-bar .stat { padding: 8px 4px; }
    .stats-bar .stat-val { font-size: 1.2rem; }
    .stats-bar .stat-lbl, .stats-bar .stat .lbl { font-size: .6rem; }

    /* ----- PAGINATION ----- */
    .pagination, .pagination-bar { padding: 12px 0; }
    .page-btns button { padding: 6px 10px; font-size: .75rem; min-width: 32px; min-height: 32px; }

    /* ----- SCROLL TOP BUTTON ----- */
    #scrollTopBtn { width: 40px; height: 40px; bottom: 20px; right: 16px; font-size: 1rem; }
    .ftr, .footer, .site-footer { padding: 1.5rem 16px; font-size: 12px; }

    /* ----- MISC ----- */
    .hide-mobile { display: none !important; }
    .dm-btn { display: none !important; }
    img { max-width: 100%; height: auto; }
    iframe { max-width: 100%; }

    /* Touch-friendly tap targets */
    a, button, .btn, [onclick], select, input[type="checkbox"], input[type="radio"] {
        -webkit-tap-highlight-color: transparent;
    }
    button, .btn, [role="button"] { cursor: pointer; }

    /* Smooth scrolling */
    * { -webkit-overflow-scrolling: touch; }
}

/* ========== TABLET (768px - 1024px) ========== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container, .art-container, .content-layout { padding: 0 24px; }
    .journals-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid { grid-template-columns: 1fr; }
}