/* =============================================================
   MOBILE FIXES — loaded LAST to override prior rules.
   Targets specific bugs found in the mobile experience:
   1) Nav drawer not fully hiding (ZAR Sites poking through)
   2) .article grid overflowing on mobile (every content page)
   3) Tables scrolling the whole page horizontally
   4) Compare hub: 25 screens of scrolling — compactified
   5) All-groups: each group too tall — compactified
   6) Universal text safety (long words, URLs, etc.)
   ============================================================= */


/* ─── 1. NAV DRAWER ─────────────────────────────────────────── */
/* Replace the fragile transform-based hide with visibility+opacity. */

@media (max-width: 880px) {
  .nav-links {
    position: fixed !important;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2, #14171A);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 8px 16px 16px;
    transform: none !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    z-index: 99;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav-links.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  /* When the WC strip is showing, push the menu down to clear it. */
  body:has(.wc-strip:not([hidden])) .nav-links {
    top: 115px;
    max-height: calc(100vh - 115px);
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 15px;
  }
  .nav-links a:last-child,
  .nav-links li:last-child a {
    border-bottom: none;
  }
  .nav-cta {
    margin-top: 12px !important;
    text-align: center;
    padding: 14px 16px !important;
    border-radius: 4px;
  }
}


/* ─── 2. ARTICLE GRID OVERFLOW (the big one) ────────────────── */
/* CSS Grid items default to min-width:auto which means min-content.
   On mobile, this lets long content blow out the column. Force them
   to allow shrinking. Applies to every page using .article. */

@media (max-width: 1024px) {
  .article > *,
  .home-hero-grid > *,
  .home-feature-pair > *,
  .home-reading-grid > *,
  .home-directory-grid > *,
  .wc-home-grid > *,
  .dj-spotlight > *,
  .hero-grid > *,
  .featured > * {
    min-width: 0;
    max-width: 100%;
  }
  /* Prose should fully fill its column on mobile, not stick to 720px max */
  .prose {
    max-width: 100%;
  }
}


/* ─── 3. TABLE OVERFLOW ─────────────────────────────────────── */
/* Tables auto-size to content width. On mobile, wrap them in
   horizontal scroll so they don't blow out the page width.
   Add a faint right-edge fade as a scroll affordance. */

@media (max-width: 720px) {
  .table-wrap,
  .dj-field-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
    position: relative;
  }
  .prose .table-wrap {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
  /* For tables that aren't wrapped, give them block + scroll directly. */
  .dj-field,
  .wc-fixtures-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  .dj-field thead,
  .dj-field tbody {
    display: table;
    width: max-content;
    min-width: 100%;
  }
  .dj-field th, .dj-field td {
    white-space: normal;
  }
  /* Compact table text on small screens */
  .table-wrap table, .tbl, .dj-field {
    font-size: 13px;
  }
  .table-wrap th, .table-wrap td,
  .tbl th, .tbl td,
  .dj-field th, .dj-field td {
    padding: 8px 10px;
  }
}


/* ─── 4. COMPARE HUB COMPACTNESS ─────────────────────────────── */
/* Platform cards were ~1000px tall each on mobile (×5 = 5000px+
   of platform content alone). Restructure to ~400px each. */

@media (max-width: 720px) {
  /* Each platform card body */
  .compare-platform,
  .platform-card,
  .compare-card {
    padding: 20px 18px !important;
    margin-bottom: 16px !important;
  }
  /* Platform header: name + license badge inline if possible */
  .compare-platform-header,
  .platform-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 8px;
  }
  .compare-platform-header h2,
  .compare-platform-header h3,
  .platform-card-header h2,
  .platform-card-header h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  /* License pill */
  .license-badge,
  .platform-license,
  .compare-license {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    letter-spacing: 0.1em;
  }
  /* The tagline / sub-label */
  .platform-tagline,
  .compare-platform-tagline,
  .platform-subhead {
    font-size: 10.5px !important;
    letter-spacing: 0.14em;
    margin-bottom: 12px !important;
  }
  /* Description paragraph */
  .platform-description,
  .compare-description,
  .compare-platform p {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
  }
  /* Feature checklist: 2-column grid instead of one-per-row */
  .platform-features,
  .compare-features,
  .feature-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin: 0 0 16px !important;
    list-style: none;
    padding: 0;
  }
  .platform-features li,
  .compare-features li,
  .feature-list li {
    font-size: 12.5px !important;
    padding: 4px 0 !important;
    border-bottom: none !important;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  /* Buttons row: side by side, equal width */
  .compare-platform-actions,
  .platform-actions,
  .compare-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .compare-platform-actions a,
  .platform-actions a,
  .compare-card-actions a {
    font-size: 12px !important;
    padding: 10px 8px !important;
    text-align: center;
    letter-spacing: 0.08em;
  }
}


/* ─── 5. ALL-GROUPS PAGE COMPACTNESS ────────────────────────── */
/* Each group block was ~800px tall. Compress to ~450px. */

@media (max-width: 720px) {
  .wc-group-block {
    padding: 22px 0 !important;
  }
  .wc-group-block-head h2 {
    font-size: 22px !important;
  }
  .wc-group-block-head {
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
  }
  .wc-group-block-teams {
    font-size: 9.5px !important;
    letter-spacing: 0.1em;
  }
  .wc-group-block-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    margin-bottom: 14px !important;
  }
  .wc-group-block-grid > div {
    font-size: 13.5px !important;
    gap: 8px !important;
  }
  .wc-group-block-grid .wc-flag {
    width: 22px !important;
    height: 15px !important;
  }
  .wc-group-block-note {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .wc-inline-badge {
    font-size: 8px !important;
    padding: 1px 4px !important;
    margin-left: 4px !important;
  }
}


/* ─── 6. UNIVERSAL MOBILE SAFETY ────────────────────────────── */

@media (max-width: 720px) {
  /* Prevent any element from forcing horizontal scroll */
  html, body { overflow-x: hidden; }
  /* Long words break instead of busting layout */
  p, h1, h2, h3, h4, h5, h6, li, td, th, dd, dt, a, span, blockquote {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Images and media never exceed container */
  img, video, iframe, svg, picture, source {
    max-width: 100%;
    height: auto;
  }
  /* Pre/code blocks scroll horizontally instead of escaping */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─── 7. HOMEPAGE HERO COMING-UP PANEL ──────────────────────── */
/* The right-side panel was good on mobile but could be tighter. */

@media (max-width: 480px) {
  .home-now {
    padding: 18px 16px;
  }
  .home-now-event-title {
    font-size: 16px;
    line-height: 1.3;
  }
  .home-now-event-meta {
    flex-wrap: wrap;
    gap: 4px;
  }
}


/* ─── 8. COMPARE HUB — TOOL CARDS + TABLE ───────────────────── */
/* The compare hub has 15 tool-cards (10 H2H pairs + 5 features) and
   a 24-row × 6-col comparison table. On mobile both bloat the page. */

@media (max-width: 720px) {
  /* Tool card grid: 2 columns on mobile (was 1) */
  .tools-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .tool-card {
    padding: 16px 14px !important;
    min-height: auto !important;
  }
  .tool-card-num {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  .tool-card-glyph {
    margin-bottom: 8px !important;
    transform: scale(0.85);
    transform-origin: left top;
  }
  .tool-card-title {
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  .tool-card-desc {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 10px !important;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tool-card-foot {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
    gap: 4px !important;
  }
  /* The big comparison table — let it scroll horizontally */
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-left: -12px;
    margin-right: -12px;
    padding: 0 12px;
    /* fade out right edge as scroll affordance */
    mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
  }
  .compare-table {
    font-size: 12px;
    min-width: 560px;
  }
  .compare-table th,
  .compare-table td {
    padding: 8px 10px !important;
  }
  .compare-table-section-head th {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }
  /* Filter pills tighter */
  .compare-filter-bar { padding: 18px 16px !important; }
  .compare-filter-grid { gap: 14px !important; }
  .compare-filter-pill {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 380px) {
  /* Smallest screens: revert to single column for tool-cards */
  .tools-grid {
    grid-template-columns: 1fr !important;
  }
  .tool-card-desc {
    -webkit-line-clamp: 4;
  }
}


/* ─── 10. MOBILE-ONLY COLLAPSIBLE PROSE ─────────────────────── */
/* <details class="mobile-collapse" open> shows content always on
   desktop, collapses on mobile until tapped. Default `open` plus
   tiny JS in main.js removes it on small viewports. */

.mobile-collapse > summary {
  display: none;
  list-style: none;
}
.mobile-collapse > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 720px) {
  .mobile-collapse > summary {
    display: block;
    cursor: pointer;
    padding: 16px 44px 16px 18px;
    background: rgba(201, 161, 74, 0.05);
    border: 1px solid rgba(201, 161, 74, 0.22);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    position: relative;
    user-select: none;
  }
  .mobile-collapse > summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.2s;
  }
  .mobile-collapse[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
  }
  .mobile-collapse[open] > summary {
    margin-bottom: 18px;
  }
}


/* ─── 11. PROSE FONT-SIZE TIGHTER ON MOBILE ─────────────────── */
/* Default prose is 17px / line-height 1.8. On a 350px column,
   that's beautiful but eats vertical space. Tighten on mobile. */

@media (max-width: 720px) {
  .prose {
    font-size: 15.5px;
    line-height: 1.65;
  }
  .prose h2 {
    font-size: 24px !important;
    margin-top: 1.6em !important;
    margin-bottom: 0.4em !important;
  }
  .prose h3 {
    font-size: 18px !important;
    margin-top: 1.4em !important;
    margin-bottom: 0.4em !important;
  }
  .prose > * + * {
    margin-top: 1em;
  }
  .prose ul, .prose ol {
    padding-left: 20px;
  }
  .prose li {
    margin-top: 0.4em;
  }
}
/* Default sections use clamp(64px, 9vw, 128px). On mobile that's 64px.
   Still a lot of dead space. Tighten to 40-48px on the smallest screens. */

@media (max-width: 480px) {
  section {
    padding: 48px 0;
  }
  .home-hero,
  .home-right-now,
  .home-directory,
  .home-reading,
  .home-faq {
    padding: 40px 0 !important;
  }
}