/**
 * Zyonix Journal — assets/css/responsive.css
 *
 * Dedicated responsive stylesheet.
 * Covers component-level breakpoint adjustments that do not belong
 * in main.css (tokens/reset/base) or layout.css (grid wrappers).
 *
 * Mobile-first behavior: base layouts stay dense (MDPI-style) in layout/*.css
 * and page inline blocks; this file layers max-width overrides so small
 * screens read comfortably without changing permalinks or grid semantics.
 *
 * Breakpoints used throughout the theme
 * ──────────────────────────────────────
 *  1440px  Large desktop (wide content, extra whitespace)
 *  1200px  Standard desktop
 *  1100px  Narrow desktop / wide tablet landscape
 *  1024px  Tablet landscape / small laptop
 *   900px  Tablet portrait — mobile nav kicks in
 *   768px  Large phone / small tablet
 *   600px  Standard phone landscape
 *   480px  Standard phone portrait
 *   360px  Small phone (minimum supported width)
 *
 * File structure
 * ──────────────
 *  01. Responsive helpers & show/hide utilities
 *  02. Typography scale (fluid / step-down)
 *  03. Header responsive
 *  04. Navigation responsive
 *  05. Breadcrumb responsive
 *  06. Front-page responsive
 *  07. Journal home (taxonomy-journal) responsive
 *  08. Volume page (taxonomy-volume) responsive
 *  09. Issue TOC (taxonomy-issue) responsive
 *  10. Article page (single-article) responsive
 *  11. Archive page (archive-article) responsive
 *  12. Page template responsive
 *  13. Index / blog / search responsive
 *  14. Journal / issue card grids responsive
 *  15. Pagination responsive
 *  16. Widgets responsive
 *  17. Footer responsive
 *  18. Journal browser (sidebar) responsive
 *  19. Popovers & dropdowns responsive
 *  20. Print responsive (supplements main.css print block)
 *
 * @package Zyonix_Journal
 * @since   1.0.0
 */


/* ============================================================
   01. RESPONSIVE HELPERS & SHOW / HIDE UTILITIES
   ============================================================ */

/* Prefer reduced motion (moved from main.css) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Show only at specific sizes */
.show-mobile  { display: none !important; }
.show-tablet  { display: none !important; }
.show-desktop { display: block !important; }

.hide-mobile  { display: block !important; }
.hide-desktop { display: none !important; }

@media (max-width: 900px) {
    .show-mobile  { display: block !important; }
    .show-desktop { display: none !important; }
    .hide-mobile  { display: none !important; }
    .hide-desktop { display: block !important; }
}

@media (min-width: 600px) and (max-width: 1024px) {
    .show-tablet  { display: block !important; }
}

/* Flex variants */
@media (max-width: 900px) {
    .show-mobile-flex  { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
}

/* Container padding adjustments */
@media (max-width: 1200px) {
    .container {
        padding-left:  var(--space-5);
        padding-right: var(--space-5);
    }
}

@media (max-width: 768px) {
    .container {
        padding-left:  var(--space-4);
        padding-right: var(--space-4);
    }
}

@media (max-width: 480px) {
    .container {
        padding-left:  var(--space-3);
        padding-right: var(--space-3);
    }
}


/* ============================================================
   02. TYPOGRAPHY SCALE
   ============================================================ */

/* Step-down heading sizes on small screens */
@media (max-width: 1024px) {
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
}

@media (max-width: 768px) {
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl);  }
    h4 { font-size: var(--text-lg);  }
}

@media (max-width: 480px) {
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl);  }
    h3 { font-size: var(--text-lg);  }
}

/* Body copy size: shrink on very small phones */
@media (max-width: 360px) {
    body {
        font-size: 13px;
    }
}

/* Reduce blockquote padding on mobile */
@media (max-width: 600px) {
    blockquote {
        padding: var(--space-3) var(--space-4);
        margin:  var(--space-4) 0;
    }
}

/* Pre / code overflow */
@media (max-width: 600px) {
    pre {
        font-size: 12px;
        padding:   var(--space-3);
    }
}


/* ============================================================
   03. HEADER RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .site-header-inner {
        gap: var(--space-3);
    }
}

@media (max-width: 1024px) {
    /* Collapse journal sub-nav items into a scrollable row */
    .journal-subnav-nav a {
        padding: 8px var(--space-2);
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    /* Header height reduction (inner pages; homepage stacks utility + main row). */
    body:not(.home) #masthead {
        height: 60px;
    }

    body.home #masthead {
        height: auto;
    }

    :root {
        --header-height: 60px;
    }

    .site-title-text {
        font-size: var(--text-lg);
    }

    .site-tagline {
        display: none;
    }

    .site-logo-img {
        height: 32px;
    }

    /* Hide site tagline on mobile */
    .site-description {
        display: none;
    }
}

@media (max-width: 480px) {
    body:not(.home) #masthead {
        height: 56px;
    }

    body.home #masthead {
        height: auto;
    }

    :root {
        --header-height: 56px;
    }

    .site-title-text {
        font-size: var(--text-base);
    }

    .site-logo-img {
        height: 28px;
    }

    .header-search-toggle {
        width:  32px;
        height: 32px;
    }
}

/* Top bar: hide on small phones */
@media (max-width: 600px) {
    .site-top-bar {
        display: none;
    }
}

/* Sticky header + admin bar combined */
@media screen and (max-width: 782px) {
    .admin-bar #masthead {
        top: 46px;
    }
    .admin-bar :root {
        --header-height: calc(60px + 46px);
    }
}


/* ============================================================
   04. NAVIGATION RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    /* Mobile nav open: body scroll lock */
    body.nav-open {
        overflow: hidden;
    }

    /* Mobile navigation overlay positioning (moved from layout.css) */
    .primary-navigation {
        display:    none;
        position:   fixed;
        top:        var(--header-height);
        left:       0;
        right:      0;
        bottom:     0;
        z-index:    var(--z-overlay);
        background: var(--color-white);
        overflow-y: auto;
        padding:    var(--space-4) var(--space-5) var(--space-10);
        box-shadow: var(--shadow-xl);
    }

    .primary-navigation.is-open {
        display: block;
    }

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

    .mobile-nav-backdrop.is-visible {
        display: block;
    }

    /* Mobile nav items — stacked, generous tap targets */
    .primary-navigation.is-open .nav-menu > li > a {
        padding:       var(--space-3) var(--space-4);
        font-size:     var(--text-lg);
        font-weight:   var(--font-semibold);
        border-radius: var(--radius-md);
        margin-bottom: 2px;
    }

    /* Separator between top-level items */
    .primary-navigation.is-open .nav-menu > li {
        border-bottom: 1px solid var(--color-border-light);
    }

    .primary-navigation.is-open .nav-menu > li:last-child {
        border-bottom: none;
    }

    /* Sub-menus displayed inline in mobile */
    .primary-navigation.is-open .nav-menu li ul {
        position:      static;
        display:       block;
        box-shadow:    none;
        border:        none;
        padding:       0 0 var(--space-2) var(--space-5);
        background:    none;
        border-radius: 0;
    }

    .primary-navigation.is-open .nav-menu li ul a {
        font-size:  var(--text-base);
        padding:    var(--space-2) var(--space-3);
        color:      var(--color-text-muted);
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* Journal sub-nav: smaller font on tablet */
@media (max-width: 768px) {
    .journal-subnav-nav a {
        font-size:   10px;
        padding:     8px var(--space-2);
        white-space: nowrap;
    }
}

/* Journal sub-nav: horizontal scroll on mobile */
@media (max-width: 600px) {
    .journal-subnav-inner {
        padding-left:  max(var(--space-3), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
        overscroll-behavior-x: contain;
    }

    .journal-subnav-nav a {
        font-size:   11px;
        min-height:  44px;
        align-items: center;
    }
}


/* ============================================================
   05. BREADCRUMB RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .breadcrumb-inner {
        padding: 0 var(--space-4);
    }
}

@media (max-width: 600px) {
    /* Collapse long breadcrumbs: show only parent and current */
    .breadcrumb-list li:not(:first-child):not(:nth-last-child(-n+3)) {
        display: none;
    }

    .breadcrumb-list li:nth-last-child(3) ~ li:not(:last-child):not(:nth-last-child(-n+2)) {
        display: none;
    }
}

@media (max-width: 480px) {
    .breadcrumb-current {
        max-width: 160px;
    }
}


/* ============================================================
   06. FRONT-PAGE RESPONSIVE
   ============================================================ */

/* ── 1100px ── */
@media (max-width: 1100px) {
    .fp-columns {
        grid-template-columns: 220px 1fr 240px;
        gap: var(--space-5);
    }

    .fp-hero-title {
        font-size: calc(var(--text-5xl) * 0.9);
    }

    .fp-journal-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ── 900px ── */
@media (max-width: 900px) {
    .fp-hero {
        padding: var(--space-12) 0 var(--space-8);
    }

    .fp-hero-title {
        font-size: var(--text-4xl);
    }

    .fp-hero-subtitle {
        font-size: var(--text-lg);
    }

    .fp-columns {
        grid-template-columns: 1fr;
        grid-template-areas:   "main" "left" "right";
        gap:                   var(--space-5);
        padding:               0 var(--space-4);
    }

    .fp-col-left,
    .fp-col-right {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-4);
    }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .fp-hero {
        padding: var(--space-10) 0 var(--space-6);
    }

    .fp-hero-title {
        font-size: var(--text-3xl);
    }

    .fp-hero-subtitle {
        font-size: var(--text-base);
    }

    .fp-featured {
        margin:  var(--space-6) auto;
        padding: 0 var(--space-4);
    }

    .fp-subjects-inner {
        padding: 0 var(--space-4);
    }

    .fp-journal-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--space-4);
    }

    .fp-col-left,
    .fp-col-right {
        grid-template-columns: 1fr;
    }
}

/* ── 600px ── */
@media (max-width: 600px) {
    .fp-journal-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .fp-section-heading {
        font-size:     var(--text-xl);
        flex-direction: column;
        align-items:   flex-start;
        gap:           var(--space-2);
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .fp-hero-title {
        font-size: var(--text-2xl);
    }

    .fp-hero-actions {
        flex-direction: column;
        align-items:    stretch;
    }

    .fp-hero-actions .btn {
        width:           100%;
        justify-content: center;
    }

    .fp-journal-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   07. JOURNAL HOME RESPONSIVE  (taxonomy-journal)
   ============================================================ */

@media (max-width: 1200px) {
    .tj-wrap {
        grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 180px);
    }
}

@media (max-width: 1024px) {
    .tj-wrap {
        grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
        grid-template-areas:   "left main" "left right";
    }

    .tj-right {
        position:    static;
        max-height:  none;
        border-left: none;
        border-top:  2px solid var(--color-border);
        overflow-y:  visible;
    }
}

@media (max-width: 768px) {
    .tj-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main" "left" "right";
    }

    .tj-left {
        position:     static;
        max-height:   none;
        overflow-y:   visible;
        border-right: none;
        border-top:   1px solid var(--color-border);
    }

    .tj-main {
        border-left:  none;
        border-right: none;
    }

    .tjm-banner-img {
        height: 140px;
    }

    .tjm-journal-header,
    .tjm-aims-text,
    .tjm-highlights-list,
    .tjm-articles-section {
        padding-left:  12px;
        padding-right: 12px;
    }

    .tjm-highlights-list {
        padding-left: 24px;
    }

    .tjm-article-title {
        font-size:   clamp(0.875rem, 2.8vw, 0.9375rem);
        line-height: 1.35;
    }

    .tjm-article-authors,
    .tjm-article-abstract {
        line-height: 1.45;
    }
}

@media (max-width: 600px) {
    .tjm-articles-section {
        padding-left:  max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .tjm-article-title a {
        word-break: break-word;
        hyphens:    auto;
    }

    .tjm-show-figures-btn,
    .tjm-read-more {
        min-height: 44px;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .tjm-article-topmeta {
        flex-direction: column;
        align-items:    flex-start;
    }

    .tjm-meta-bar {
        gap: 6px;
    }

    .tjl-volume-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tj-wrap {
        margin-left:  max(0px, env(safe-area-inset-left, 0px));
        margin-right: max(0px, env(safe-area-inset-right, 0px));
    }
}


/* ============================================================
   08. VOLUME PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .tv-wrap {
        grid-template-columns: 220px 1fr 46px;
    }

    .tvm-issue-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .tv-wrap {
        grid-template-columns: 200px 1fr 44px;
    }

    .tvm-issue-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5) var(--space-4);
    }
}

@media (max-width: 900px) {
    .tv-wrap {
        grid-template-columns: 1fr 44px;
        grid-template-areas:   "main right" "left right";
    }

    .tvm-issue-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tv-main {
        padding: var(--space-4) var(--space-4) var(--space-8);
    }

    .tvm-heading {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 768px) {
    .tvm-issue-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4) var(--space-3);
    }

    .tvm-issue-cover,
    .tvm-issue-cover--placeholder,
    .tvm-issue-cover--forthcoming {
        width:  120px;
        height: 158px;
    }

    .tv-main {
        padding: var(--space-4) var(--space-3) var(--space-8);
    }
}

@media (max-width: 600px) {
    .tv-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main" "left";
    }

    .tv-right {
        display: none;
    }

    .tvm-issue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-3);
    }

    .tvm-heading {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    .tvm-issue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .tvm-issue-cover,
    .tvm-issue-cover--placeholder,
    .tvm-issue-cover--forthcoming {
        width:  105px;
        height: 138px;
    }
}

@media (max-width: 360px) {
    .tvm-issue-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tvm-issue-cover,
    .tvm-issue-cover--placeholder,
    .tvm-issue-cover--forthcoming {
        width:  90px;
        height: 118px;
    }
}


/* ============================================================
   09. ISSUE TOC RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .ti-wrap {
        grid-template-columns: 220px 1fr 46px;
    }

    .ti-main {
        padding: var(--space-5) var(--space-5) var(--space-8);
    }
}

@media (max-width: 1024px) {
    .ti-wrap {
        grid-template-columns: 200px 1fr 44px;
    }

    .ti-main {
        padding: var(--space-5) var(--space-5) var(--space-8);
    }
}

@media (max-width: 900px) {
    .ti-wrap {
        grid-template-columns: 1fr 44px;
        grid-template-areas:   "main right" "left right";
    }

    .ti-left {
        position:     static;
        max-height:   none;
        border-right: none;
        border-top:   1px solid var(--color-border);
        overflow-y:   visible;
    }

    .ti-main {
        padding: var(--space-4) var(--space-4) var(--space-8);
    }

    .tim-heading {
        font-size: var(--text-2xl);
    }

    .tim-cover-story {
        flex-direction: column;
    }

    .tim-cover-img {
        width:  110px;
        height: 145px;
    }

    .tir-popover {
        right: 48px;
    }
}

@media (max-width: 768px) {
    .tim-filter-form {
        flex-direction: column;
        gap:            var(--space-3);
    }

    .tim-select {
        min-width: unset;
        width:     100%;
    }

    .tim-export-wrap {
        margin-left: 0;
    }

    .tim-article-card {
        padding: var(--space-4) 0;
    }

    .tim-card-toprow {
        flex-direction: column;
        align-items:    flex-start;
    }

    .ti-main {
        padding: var(--space-4) var(--space-3) var(--space-8);
    }
}

@media (max-width: 600px) {
    .ti-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main" "left";
        margin-left:           max(0px, env(safe-area-inset-left, 0px));
        margin-right:          max(0px, env(safe-area-inset-right, 0px));
    }

    .ti-right {
        display: none;
    }

    .ti-main {
        padding-left:  max(var(--space-4), env(safe-area-inset-left, 0px));
        padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
    }

    .tim-heading {
        font-size: var(--text-xl);
    }

    .tim-info-bullets {
        padding-left: var(--space-5);
    }

    .tim-export-wrap {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .tim-card-title {
        font-size: var(--text-lg);
    }

    .tim-card-actions {
        flex-direction: column;
        align-items:    flex-start;
    }
}


/* ============================================================
   10. ARTICLE PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .zyonix-mdpi-wrap {
        grid-template-columns: 220px 1fr 54px;
    }

    .zyonix-main {
        padding: var(--space-5) var(--space-6);
    }
}

@media (max-width: 1100px) {
    .zyonix-mdpi-wrap {
        grid-template-columns: 200px 1fr 56px;
    }

    .zyonix-main {
        padding: var(--space-5) var(--space-5);
    }
}

@media (max-width: 900px) {
    .zyonix-mdpi-wrap {
        grid-template-columns: 1fr 56px;
        grid-template-areas:   "main right" "left right";
    }

    .zyonix-left {
        position:     static;
        max-height:   none;
        border-right: none;
        border-top:   1px solid var(--color-border);
        overflow-y:   visible;
    }

    .zyonix-main {
        padding: var(--space-4) var(--space-4);
    }

    .zm-title {
        font-size: var(--text-2xl);
    }

    .zm-action-row {
        flex-wrap: wrap;
        gap:       var(--space-2);
    }

    .zm-topbar {
        padding-bottom: var(--space-3);
        margin-bottom:  var(--space-3);
    }
}

@media (max-width: 768px) {
    .zyonix-mdpi-wrap {
        grid-template-columns: 1fr 46px;
    }

    .zyonix-main {
        padding: var(--space-4) var(--space-3);
    }

    .zm-title {
        font-size: var(--text-xl);
    }

    .zm-action-row {
        flex-direction: column;
    }

    .zm-action-row .zm-btn,
    .zm-action-row .zm-dropdown {
        width:           100%;
        justify-content: center;
    }

    .zm-dropdown-menu {
        width: 100%;
    }

    .zm-affiliations {
        padding: var(--space-2) var(--space-3);
    }

    /* Right popover flips left of the strip */
    .zr-popover {
        right: 50px;
        min-width: 200px;
    }
}

@media (max-width: 600px) {
    .zyonix-mdpi-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main" "left";
        margin-left:           max(0px, env(safe-area-inset-left, 0px));
        margin-right:          max(0px, env(safe-area-inset-right, 0px));
        border-radius:         var(--radius-md);
    }

    .zyonix-right {
        display: none;
    }

    .zyonix-main {
        padding:       var(--space-4) max(var(--space-3), env(safe-area-inset-right, 0px)) var(--space-4) max(var(--space-3), env(safe-area-inset-left, 0px));
    }

    .zm-title {
        font-size:     1.2rem;
        margin-bottom: var(--space-3);
        line-height:   var(--leading-snug);
        word-break:    break-word;
        hyphens:       auto;
    }

    .zm-authors {
        font-size: var(--text-sm);
        flex-wrap: wrap;
        gap:       2px var(--space-1);
    }

    .zm-action-row {
        flex-direction: column;
    }

    .zm-action-row .zm-btn,
    .zm-action-row .zm-dropdown {
        width:           100%;
        justify-content: center;
    }

    .zm-section-h {
        font-size: var(--text-lg);
    }

    .zm-abstract-text {
        font-size:   var(--text-sm);
        text-align:  start;
        hyphens:     auto;
    }

    .zm-reprints-btn {
        font-size:   var(--text-xs);
        padding:     6px var(--space-3);
        white-space: nowrap;
        max-width:   100%;
        overflow:    hidden;
        text-overflow: ellipsis;
    }

    .zm-topbar {
        flex-wrap: wrap;
        gap:       var(--space-2);
    }

    .zm-topbar-right {
        flex:       1 1 auto;
        min-width:  0;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .zyonix-main {
        padding: var(--space-3) max(var(--space-3), env(safe-area-inset-right, 0px)) max(var(--space-3), env(safe-area-inset-bottom, 0px)) max(var(--space-3), env(safe-area-inset-left, 0px));
    }

    .zm-dates {
        font-size: var(--text-xs);
    }

    .zm-cite-string {
        font-size: var(--text-xs);
    }

    .zm-ref-list {
        padding-left: var(--space-5);
    }

    .zm-ref-list li {
        font-size: var(--text-xs);
    }

    /* TOC box */
    .zl-toc-list li a {
        padding: 4px var(--space-3);
    }
}


/* ============================================================
   11. ARCHIVE PAGE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .aa-wrap {
        grid-template-columns: 230px 1fr;
    }
}

@media (max-width: 900px) {
    .aa-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main";
    }

    .aa-sidebar {
        /* Hidden on mobile — toggled via JS button */
        display: none;
        position: fixed;
        top:      0;
        left:     0;
        right:    0;
        bottom:   0;
        z-index:  var(--z-overlay);
        border-radius: 0;
        max-height: 100vh;
        overflow-y: scroll;
    }

    .aa-sidebar.is-open {
        display: block;
    }

    .aa-main {
        margin-left: 0;
    }

    .aam-mobile-filter-toggle {
        display: inline-flex;
    }

    .aam-title {
        font-size: var(--text-2xl);
    }
}

@media (max-width: 768px) {
    .aam-header {
        padding: var(--space-4) var(--space-4) 0;
    }

    .aam-article-list {
        padding: 0 var(--space-4);
    }

    .aam-sort-bar {
        flex-direction:  column;
        align-items:     flex-start;
        gap:             var(--space-2);
        padding-top:     var(--space-3);
        padding-bottom:  var(--space-3);
    }

    .aam-sort-links {
        flex-wrap: wrap;
        gap:       var(--space-1);
    }

    .aam-active-filters {
        margin-bottom: var(--space-3);
    }
}

@media (max-width: 600px) {
    .aam-header {
        padding: var(--space-3) var(--space-3) 0;
    }

    .aam-article-list {
        padding: 0 var(--space-3);
    }

    .aam-card-toprow {
        flex-direction: column;
        align-items:    flex-start;
    }

    .aam-card-title {
        font-size: var(--text-lg);
    }

    .aam-title {
        font-size: var(--text-xl);
    }
}

@media (max-width: 480px) {
    .aam-header-top {
        flex-direction: column;
        align-items:    flex-start;
        gap:            var(--space-2);
    }

    .aam-sort-link {
        font-size: 11px;
        padding:   3px var(--space-2);
    }

    .aam-card-actions {
        flex-wrap: wrap;
        gap:       var(--space-2);
    }
}


/* ============================================================
   12. PAGE TEMPLATE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .pg-wrap {
        grid-template-columns: 1fr 230px;
    }
}

@media (max-width: 900px) {
    .pg-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main";
    }

    .pg-sidebar {
        display: none;
    }

    .pg-header,
    .pg-content,
    .pg-footer {
        padding-left:  var(--space-5);
        padding-right: var(--space-5);
    }

    .pg-toc-box {
        margin-left:  var(--space-5);
        margin-right: var(--space-5);
    }

    .pg-child-pages {
        margin-left:  var(--space-5);
        margin-right: var(--space-5);
    }

    .pg-title {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    .pg-header {
        padding: var(--space-5) var(--space-4) var(--space-2);
    }

    .pg-content {
        padding: var(--space-5) var(--space-4);
    }

    .pg-title {
        font-size: var(--text-2xl);
    }

    .pg-banner-img {
        max-height: 200px;
    }

    .pg-child-pages-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .pg-header,
    .pg-content,
    .pg-footer,
    .pg-toc-box,
    .pg-child-pages {
        padding-left:  var(--space-3);
        padding-right: var(--space-3);
    }

    .pg-title {
        font-size: var(--text-xl);
    }

    .pg-footer {
        padding: var(--space-3);
    }

    .pg-footer-meta {
        flex-direction: column;
        align-items:    flex-start;
        gap:            var(--space-2);
    }
}


/* ============================================================
   13. INDEX / BLOG / SEARCH RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .ix-wrap {
        grid-template-columns: 1fr 240px;
    }

    .sr-wrap{
        grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,240px);
    }
}

@media (max-width: 900px) {
    .ix-wrap {
        grid-template-columns: 1fr;
        grid-template-areas:   "main";
    }

    .ix-sidebar {
        display: none;
    }

    .sr-wrap{
        grid-template-columns:1fr;
        grid-template-areas:"main" "left" "right";
        margin-left: max(0px, env(safe-area-inset-left, 0px));
        margin-right: max(0px, env(safe-area-inset-right, 0px));
    }

    .sr-left,
    .sr-right{
        position:static;
        max-height:none;
        overflow:visible;
        border-radius:var(--radius-lg);
        border:1px solid var(--color-border);
    }

    .sr-main{
        border-radius:var(--radius-lg);
        border:1px solid var(--color-border);
    }
}

@media (max-width: 768px) {
    .ix-archive-header {
        padding: var(--space-5) var(--space-4);
    }

    .ix-archive-title {
        font-size: var(--text-2xl);
    }

    /* Single post */
    .ix-post-title {
        font-size: var(--text-3xl);
    }

    .ix-post-header,
    .ix-post-content,
    .ix-post-footer,
    .ix-post-nav,
    .ix-comments-wrap {
        padding-left:  var(--space-5);
        padding-right: var(--space-5);
    }
}

@media (max-width: 600px) {
    /* Post card: stack image on top */
    .ix-post-card {
        flex-direction: column;
    }

    .ix-post-card-thumb {
        width:  100%;
        height: 200px;
    }

    .ix-post-card-body {
        padding: var(--space-4);
    }

    .ix-post-card-title {
        font-size: var(--text-lg);
    }

    .ix-post-title {
        font-size: var(--text-2xl);
    }

    .ix-post-header,
    .ix-post-content,
    .ix-post-footer,
    .ix-post-nav,
    .ix-comments-wrap {
        padding-left:  var(--space-4);
        padding-right: var(--space-4);
    }

    /* Post navigation */
    .ix-post-nav {
        grid-template-columns: 1fr;
    }

    .ix-post-nav-next {
        text-align: left;
    }

    .ix-404-code {
        font-size: 72px;
    }

    .ix-404-title {
        font-size: var(--text-2xl);
    }

    .ix-404-actions {
        flex-direction: column;
        align-items:    stretch;
    }
}

@media (max-width: 480px) {
    .ix-post-title {
        font-size: var(--text-xl);
    }

    .ix-search-form {
        flex-direction: column;
        border-radius:  var(--radius-md);
        overflow:       visible;
    }

    .ix-search-input {
        border-right:   1px solid var(--color-border-dark);
        border-radius:  var(--radius-md);
        border-bottom:  none;
    }

    .ix-search-btn {
        border-radius: var(--radius-md);
        width:         100%;
    }

    .sr-main{
        padding: var(--space-4);
    }
}


/* ============================================================
   14. JOURNAL / ISSUE CARD GRIDS RESPONSIVE
   ============================================================ */

/* Legacy `.article-page` shell (non-MDPI templates) */
@media (max-width: 960px) {
    .article-page {
        grid-template-columns: 1fr;
        gap:                   var(--space-5);
        padding:               var(--space-4) 0;
    }
}

/* Shared list cards: taxonomy-issue, archive-article (`article-card.php`) */
@media (max-width: 768px) {
    .zy-article-card .tim-card-title a,
    .zy-article-card .aam-card-title a {
        word-break: break-word;
        hyphens:    auto;
    }

    .zy-article-card .tim-card-abstract,
    .zy-article-card .aam-card-abstract {
        line-height: var(--leading-relaxed);
    }

    .zy-article-card .tim-pdf-link,
    .zy-article-card .aam-pdf-link,
    .zy-article-card .tim-show-figs-btn,
    .zy-article-card .aam-show-figs-btn {
        min-height:  44px;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .zy-article-card .tim-card-authors,
    .zy-article-card .aam-card-authors {
        font-size: var(--text-sm);
    }

    .zy-article-card .tim-card-cite,
    .zy-article-card .aam-card-cite {
        font-size:   var(--text-xs);
        line-height: var(--leading-relaxed);
    }
}

/* Journal card grid (front-page subject section) */
@media (max-width: 1100px) {
    .fp-journal-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    }
}

@media (max-width: 768px) {
    .fp-journal-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .journal-card-cover {
        height: 130px;
    }
}

@media (max-width: 600px) {
    .fp-journal-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journal-card-title {
        font-size: var(--text-sm);
    }
}

@media (max-width: 360px) {
    .fp-journal-grid {
        grid-template-columns: 1fr;
    }
}

/* Issue cover cards (volume page) */
@media (max-width: 1100px) {
    .tvm-issue-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5) var(--space-4);
    }
}

@media (max-width: 600px) {
    .tvm-issue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 360px) {
    .tvm-issue-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
}


/* ============================================================
   15. PAGINATION RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
    .pagination {
        gap: 4px;
    }

    /* Narrow the page number buttons */
    .pagination .page-numbers {
        min-width: 32px;
        height:    32px;
        font-size: var(--text-xs);
        padding:   0 var(--space-1);
    }

    /* Hide middle pages on very small screens (keep first, last, prev, next, current) */
    .pagination .page-numbers:not(.prev):not(.next):not(.current):not(:first-child):not(:last-child) {
        display: none;
    }

    /* But keep neighbours of current */
    .pagination .page-numbers.current + .page-numbers,
    .pagination .page-numbers:has(+ .page-numbers.current) {
        display: inline-flex;
    }

    .post-navigation { grid-template-columns: 1fr; }
    .nav-next { text-align: left; }
    .nav-next .nav-subtitle { justify-content: flex-start; }
}

@media (max-width: 480px) {
    .pagination {
        padding: var(--space-4) 0;
    }

    /* Simple prev/next only on very small phones */
    .simple-pagination__inner {
        flex-direction: column;
        gap:            var(--space-3);
    }

    .simple-pagination a {
        width:           100%;
        justify-content: center;
    }
}


/* ============================================================
   16. WIDGETS RESPONSIVE
   ============================================================ */

/* Journal list widget */
@media (max-width: 480px) {
    .zw-journal-list li {
        padding: 6px 0;
    }
}

/* Volume browser widget accordion */
@media (max-width: 600px) {
    .zw-volume-browser .zw-issue-list {
        columns: 2;
        padding-left: var(--space-3);
    }
}

/* Email alert widget */
@media (max-width: 480px) {
    .tjr-email-form {
        gap: var(--space-2);
    }
}

/* Impact factor widget */
@media (max-width: 360px) {
    .zw-if-value {
        font-size: var(--text-3xl);
    }
}


/* ============================================================
   17. FOOTER RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 180px 1fr 1fr 1fr;
        gap:                   var(--space-6);
    }
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-6) var(--space-8);
    }

    .footer-branding {
        grid-column: 1 / 3;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap:                   var(--space-6);
    }

    #colophon {
        padding: var(--space-8) 0 var(--space-5);
    }

    .footer-email-form {
        flex-direction: column;
    }

    .footer-email-btn {
        width:           100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap:                   var(--space-5);
    }

    .footer-branding {
        grid-column: auto;
    }

    .footer-bottom .footer-inner {
        flex-direction: column;
        text-align:     center;
        justify-content: center;
    }

    .footer-bottom-right {
        justify-content: center;
    }

    .footer-legal-links {
        flex-wrap:       wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    #colophon {
        padding: var(--space-6) 0 0;
    }

    .footer-social-row {
        flex-wrap: wrap;
    }
}


/* ============================================================
   18. JOURNAL BROWSER SIDEBAR RESPONSIVE
   ============================================================ */

/* The browser sits inside .tj-left, .tv-left, .ti-left, .zyonix-left */

@media (max-width: 900px) {
    /* On mobile the sidebar is full-width, browser can expand */
    .journal-browser-box,
    .til-browser-box,
    .tvl-browser-box,
    .zl-vol-grid,
    .tvl-vol-grid,
    .til-vol-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .journal-browser-vol-grid,
    .zl-vol-grid,
    .tvl-vol-grid,
    .til-vol-grid {
        display:               grid;
        grid-template-columns: repeat(4, 1fr);
        gap:                   var(--space-1) var(--space-4);
    }
}

@media (max-width: 600px) {
    .journal-browser-vol-grid,
    .zl-vol-grid,
    .tvl-vol-grid,
    .til-vol-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .journal-browser-vol-grid,
    .zl-vol-grid,
    .tvl-vol-grid,
    .til-vol-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .journal-browser-select,
    .zl-browser-select,
    .tvl-browser-select,
    .til-select {
        font-size: var(--text-xs);
        padding:   4px var(--space-2);
    }
}


/* ============================================================
   19. POPOVERS & DROPDOWNS RESPONSIVE
   ============================================================ */

/* Share / cite popovers (right sidebar) */
@media (max-width: 900px) {
    /* Wider strip on single article (56px) — keep popover clear of icons */
    .zr-popover {
        right:     60px;
        min-width: 190px;
    }

    .tir-popover,
    .tvr-popover {
        right:     54px;
        min-width: 190px;
    }
}

@media (max-width: 768px) {
    /* Popovers attached to right strip: flip above button */
    .zr-popover,
    .tir-popover,
    .tvr-popover {
        right:   unset;
        left:    0;
        top:     auto;
        bottom:  calc(100% + 4px);
        min-width: 220px;
    }
}

/* Dropdown menus (nav, download) */
@media (max-width: 600px) {
    .zm-dropdown-menu,
    .zm-export-menu {
        width:    100%;
        left:     0;
        right:    0;
        min-width: unset;
    }
}

/* Filter bar export menu */
@media (max-width: 480px) {
    .tim-export-menu {
        left:      0;
        right:     auto;
        min-width: 150px;
    }
}


/* ============================================================
   20. PRINT RESPONSIVE
   ============================================================ */

@media print {
    /* Ensure all template grid containers collapse to single column */
    .zyonix-mdpi-wrap,
    .tj-wrap,
    .tv-wrap,
    .ti-wrap,
    .aa-wrap,
    .pg-wrap,
    .ix-wrap,
    .fp-columns {
        display:               block !important;
        grid-template-columns: 1fr  !important;
    }

    /* Hide sidebars on print */
    .zyonix-left,
    .zyonix-right,
    .tj-left,
    .tj-right,
    .tv-left,
    .tv-right,
    .ti-left,
    .ti-right,
    .aa-sidebar,
    .pg-sidebar,
    .ix-sidebar,
    .site-top-bar,
    .journal-subnav-bar,
    .site-breadcrumb-bar {
        display: none !important;
    }

    /* Full-width main areas */
    .zyonix-main,
    .tj-main,
    .tv-main,
    .ti-main,
    .aa-main,
    .pg-main,
    .ix-main {
        width:        100% !important;
        padding:      0    !important;
        border:       none !important;
        box-shadow:   none !important;
        margin-left:  0    !important;
    }

    /* Issue grids: 4-up on paper */
    .tvm-issue-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        display:               grid           !important;
    }

    /* Journal grid: 4-up on paper */
    .fp-journal-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        display:               grid           !important;
    }

    /* Pagination hidden on print */
    .pagination,
    .simple-pagination,
    .post-navigation,
    .volume-nav {
        display: none !important;
    }

    /* Footer simplified */
    #colophon {
        padding:    var(--space-4) 0 !important;
        background: none           !important;
        color:      #000           !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap:                   0   !important;
        border:                none !important;
    }

    .footer-bottom {
        justify-content: center !important;
        font-size:        9pt   !important;
    }

    .footer-logo img {
        filter: none !important;
    }
}