/* ══════════════════════════════════════════════════════════
   MOBILE.CSS — linked from every page. Selectors are scoped to
   classes that only exist on the page(s) noted in each comment,
   so this file is safe to share site-wide even though class
   names aren't globally unique.

   Sections:
   0. Nav — its own 860px breakpoint (wider than everything else below,
      see comment above that block for why), responsive + tap targets
   1. Overflow safety net (no horizontal scroll)
   2. Grid collapse (768px / 480px)
   3. Container edge padding (16px)
   4. Tap target sizing (buttons, links, cards)
   5. Body text minimum size + line-height
   6. Heading size reduction
   ══════════════════════════════════════════════════════════ */

/* ── NAV — all pages share this six-item markup (Heroes/Items/Concepts/
   Guides/Support/Coaching). It stops fitting on one line well above the
   768px content breakpoint below, so it gets its own wider one: measured
   overflow starting ~800-810px, comfortably clear by 840px. Below this
   width the link row scrolls horizontally within the nav bar itself
   rather than wrapping (wrapping would change nav height and require
   re-tuning every page's top padding). Nav height stays 56px throughout. ── */
@media (max-width: 860px) {
  nav {
    padding: 0 16px;
  }
  .nav-brand {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1.3;
    max-width: 110px;
  }
  .nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    gap: 22px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .nav-links::-webkit-scrollbar {
    display: none;
  }
  .nav-links li {
    flex-shrink: 0;
  }
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (max-width: 768px) {

  /* ── 1. OVERFLOW SAFETY NET ─────────────────────────────── */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
  img, svg {
    max-width: 100%;
  }
  /* footer-links is a single nowrap row on desktop (5 links across every
     page); at ~320px width it no longer fits and pushes past the edge. */
  .footer-links {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* items/iron_branch.html — .header is a flex row (avatar + name + badge)
     here. hero_template.html reuses the same class name for its grid
     header (handled separately below), so these rules are scoped with
     :has(.item-avatar) — a marker only the item-page header contains —
     rather than touching bare .header and risking the 16 hero pages. */
  .header:has(.item-avatar) {
    flex-wrap: wrap;
    padding: 16px;
    gap: 16px;
    row-gap: 16px;
  }
  .header:has(.item-avatar) > * {
    min-width: 0;
  }
  .header:has(.item-avatar) .header-right {
    margin-left: 0;
    align-items: flex-end;
    width: 100%;
  }
  .item-name {
    font-size: 18px;
    letter-spacing: 1.5px;
  }

  /* ── 2. GRID COLLAPSE ── */

  /* index.html */
  .tiles-grid,
  .philosophy-three,
  .about-grid {
    grid-template-columns: 1fr;
  }

  /* coaching.html */
  .philosophy-grid,
  .expect-grid,
  .for-grid {
    grid-template-columns: 1fr;
  }

  /* concepts.html */
  .concepts-grid {
    grid-template-columns: 1fr;
  }

  /* guides.html */
  .guide-card {
    grid-template-columns: 1fr;
  }

  /* guides/wasting_time.html */
  .stat-callout,
  .solutions-grid {
    grid-template-columns: 1fr;
  }

  /* hero_template.html */
  .header,
  .pros-cons,
  .gameplan-grid,
  .syn-grid {
    grid-template-columns: 1fr;
  }

  /* hero_template.html — hero-loader.js sets an inline grid-template-columns
     on this one based on build count, so the override needs !important */
  .builds-grid {
    grid-template-columns: 1fr !important;
  }

  /* items.html — section layout */
  .sections-grid {
    grid-template-columns: 1fr;
  }

  /* items.html — shop icon grid: item tiles are much larger than hero
     tiles, so auto-fill on their own min width (matching the pattern
     .heroes-grid-section uses below) rather than a fixed column count. */
  .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  }

  /* items.html — search/recently-added sidebar no longer fits beside search at this width */
  .search-recently-row {
    flex-direction: column;
  }
  .search-recently-right {
    width: 100%;
  }
  .recently-grid-items,
  .item-progress-wrap {
    width: 100%;
  }

  /* heroes.html — filters/recently-added sidebar, same reasoning as above */
  .filters-top-row {
    flex-direction: column;
  }
  .filters-right {
    width: 100%;
  }
  .recently-grid,
  .progress-wrap {
    width: 100%;
  }

  /* heroes.html — hero icon grid: shrink tile minimum instead of collapsing to 1 */
  .heroes-grid-section {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* heroes.html — attribute/role filter buttons wrap raggedly in a flex
     row at this width; lay them out as an even 2-column grid instead,
     with the label on its own row above. */
  .filter-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .filter-label {
    grid-column: 1 / -1;
    margin-right: 0;
    margin-bottom: 4px;
  }

  /* concepts.html, guides.html, heroes.html, items.html share this exact
     page-header markup: title/eyebrow/desc on the left, a count widget on
     the right. Side-by-side doesn't fit once the title wraps at this width. */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* items.html — item-count carries a fixed 340px width for the desktop
     two-column header; drop it so it doesn't force horizontal scroll. */
  .item-count {
    width: auto;
    align-self: flex-start;
  }

  /* concepts.html / guides.html / heroes.html / items.html — these count
     widgets are a single nowrap line on desktop; at 16px edge padding the
     full sentence no longer fits and pushes past the viewport edge. */
  .concept-count,
  .guide-count,
  .hero-count,
  .item-count {
    white-space: normal;
  }

  /* ── 3. CONTAINER EDGE PADDING — 16px everywhere, overriding
     the 20–40px desktop side padding. Top/bottom padding is left
     alone; only the left/right edge is touched. ── */
  .hero,
  section,
  .philosophy-section,
  .content,
  .philosophy,
  .page-header,
  .search-bar,
  .concepts-section,
  .guides-section,
  .filters-bar,
  .filters-top-row,
  .heroes-section,
  .tabs-wrap,
  .shop-content,
  .search-recently-row,
  .page,
  .article-header,
  .article-body,
  .article-footer,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  nav {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ── 4. TAP TARGET SIZING — 44px minimum in the smallest dimension ── */
  .btn-primary,
  .btn-secondary,
  .back-link-bottom,
  .filter-btn,
  .tab-btn,
  .nav-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* hero/item card links and tiles are already well over 44px tall via
     their image + body content, so they're not listed here. */

  /* iOS Safari zooms in on any focused input under 16px — these were 15px */
  #search {
    font-size: 16px;
  }

  /* ── 5. BODY TEXT — minimum 16px, ~1.6 line-height, on mobile.
     Scoped to actual reading content (descriptions, notes, tips,
     list items). Decorative UI chrome — nav links, badges/tags,
     section eyebrows, footer links, button labels, timestamps —
     is intentionally left at its smaller design size. ── */

  /* index.html */
  .hero-desc,
  .tile-desc,
  .phil-desc {
    font-size: 16px;
  }
  .tile-desc,
  .phil-desc {
    line-height: 1.6;
  }

  /* coaching.html */
  .phil-desc,
  .expect-desc,
  .for-item {
    font-size: 16px;
    line-height: 1.6;
  }

  /* concepts.html */
  .concept-desc {
    font-size: 16px;
  }

  /* guides.html */
  .guide-desc {
    font-size: 16px;
  }

  /* guides/wasting_time.html */
  .solution-desc {
    font-size: 16px;
  }
  .author-bio {
    font-size: 16px;
    line-height: 1.6;
  }

  /* hero_template.html */
  .pros-cons-col ul li,
  .gameplan-phase p,
  .extras-box p,
  .tip,
  .syn-note,
  .build-note,
  .item-note-inline,
  .sit-item-note {
    font-size: 16px;
    line-height: 1.6;
  }

  /* items/iron_branch.html */
  .itc-active-desc,
  .itc-lore,
  .use-case {
    font-size: 16px;
    line-height: 1.6;
  }
  .coaching-text,
  .itc-passive {
    font-size: 16px;
  }

  /* ── 6. HEADING SIZE REDUCTION — the hero titles and section
     titles already use clamp() and self-limit at mobile widths.
     .page-title (concepts/guides/heroes/items) is a fixed 36px
     and doesn't — it's the one heading that needs a mobile override. ── */
  .page-title {
    font-size: 26px;
  }
}

@media (max-width: 480px) {

  /* items.html + heroes.html — recently-added strips: 2 columns rather than
     1, since a single-column icon would render full-width and oversized.
     .item-grid keeps its auto-fill(95px) rule from the 768px block above —
     it doesn't need a narrower-breakpoint override. */
  .recently-grid-items,
  .recently-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .heroes-grid-section {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  }

  .page-title {
    font-size: 22px;
  }

  /* hero_template.html — .spell-row packs six 32px .spell-icon elements
     plus .timestamp-group into one card row; on phones that's wider than
     the card, so timestamps and position circles render outside the
     border. Shrink the icons and the timestamp columns to match. */
  .spell-icon {
    width: 26px;
    height: 26px;
  }
  .spell-row {
    gap: 4px;
  }
  .timestamp-col,
  .timestamp-header-inner .th-col {
    min-width: 26px;
  }
  .timestamp {
    font-size: 9px;
  }
  .timestamp-header-inner {
    gap: 4px;
  }
  .build-card {
    padding: 10px;
  }
}

/* replay-review.html — the form/callout padding (40px 48px / 28px 32px)
   eats too much of a phone's width below 640px. */
@media (max-width: 640px) {
  .review-form {
    padding: 24px 20px;
  }
  .callout-box {
    padding: 20px 20px;
  }

  /* Role checkbox rows: bump to a full 44px tap target, matching the
     min-height convention used for buttons/links elsewhere on mobile. */
  .form-checkbox-label {
    min-height: 44px;
  }
}