/* ---------------------------
   Responsive — SlashSkill v2
---------------------------- */

/* Tablet */
@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .whatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .subscribe {
    min-width: auto;
    width: 100%;
  }
  .featuredGrid {
    grid-template-columns: 1fr;
  }
  .featuredSide {
    grid-template-rows: auto;
  }

  /* Homepage sections */
  .sectionHeading {
    font-size: 24px;
  }
  .sectionCategory .gridTitleRow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  /* TOC sidebar responsive rules moved to 09-article.css (loads after this file) */

  /* Section pages: small grid → 3 cols on tablet */
  .pageGrid.pageGrid--sm {
    grid-template-columns: repeat(3, 1fr);
  }

  /* List view image shrink */
  .pageGrid.pageGrid--list .card .cover {
    width: 180px;
    min-width: 180px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .whatGrid {
    grid-template-columns: 1fr;
  }
  .cover-product {
    height: 190px;
  }

  /* Footer: logo full width, 3 link columns below */
  .footGrid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-4);
  }
  .footGrid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: var(--sp-4);
  }
  footer {
    text-align: left;
  }

  .articleHeader {
    padding: var(--sp-6) 0 var(--sp-5);
  }
  .articleTitle {
    font-size: 28px;
  }
  .articleSubtitle {
    font-size: 16px;
  }
  .articleBody {
    max-width: 100%;
  }
  .articleBody h1 { font-size: 28px; }
  .articleBody h2 { font-size: 24px; }
  .articleBody h3 { font-size: 20px; }
  .articleBody p,
  .articleBody li,
  .articleBody dd { font-size: 15px; }

  .prosCons {
    grid-template-columns: 1fr;
  }
  .contentLinks {
    grid-template-columns: 1fr;
  }

  /* Featured grid stacks */
  .sectionFeatured .featuredGrid {
    grid-template-columns: 1fr;
  }
  .sectionFeatured .featuredSide {
    grid-template-rows: auto;
  }
  .sectionFeatured .featuredMain .cover-product {
    height: 220px;
  }

  /* Homepage sections mobile */
  .sectionHeading {
    font-size: 22px;
  }
  .sectionCategory {
    padding-top: var(--sp-8);
    margin-top: var(--sp-8);
  }
  .sectionCategory .gridTitleRow {
    align-items: center;
    text-align: center;
  }
  .sectionCategory .sectionSub {
    text-align: center;
  }
  .sectionCategory .sortToggle {
    justify-content: center;
  }

  /* Section pages: center everything on mobile */
  .gridTitleRow {
    justify-content: center;
    text-align: center;
  }
  .filterBar {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .filterBar__controls {
    margin-left: 0;
  }
  .filterBar__chips {
    justify-content: center;
  }
  .viewToggle {
    justify-content: center;
  }

  /* Small grid → 2 cols on mobile */
  .pageGrid.pageGrid--sm {
    grid-template-columns: repeat(2, 1fr);
  }

  /* List view image shrink */
  .pageGrid.pageGrid--list .card .cover {
    width: 120px;
    min-width: 120px;
    min-height: 100px;
  }
}