/* Desktop XL polish (>=1440 already covered by default; this just caps width growth) */
@media (min-width: 1920px) {
  .shell { max-width: 1360px; }
}

/* Laptop / small desktop */
@media (max-width: 1180px) {
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .brand small { display: none; }
  .nav { gap: 0; }
  .nav a { padding: 10px 9px; font-size: 0.85rem; }
  .network { padding: 8px 10px; font-size: 0.72rem; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .grid.three { grid-template-columns: repeat(2, 1fr); }
  .feature { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .tool-row { grid-template-columns: repeat(2, 1fr); }
  .split-even { grid-template-columns: 1fr; gap: 32px; }
  .posts { border-left: 0; padding-left: 0; }
}

/* Tablet portrait & below: switch to mobile nav */
@media (max-width: 860px) {
  .nav { display: none; }
  .network { display: none; }
  .menu { display: inline-flex; align-items: center; }
  .header-row { height: 60px; }
  .brand img { width: 32px; height: 32px; }
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .section { padding: 32px 0; }
  .hero-content, .hero.compact .hero-content { padding: 30px 20px 24px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .class-portrait { width: 96px; height: 96px; }
}

@media (max-width: 640px) {
  .shell { padding: 0 16px; }
  .status-grid { grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 14px 16px; }
  .tool-row { gap: 8px; }
  .tool-link { display: flex; align-items: center; padding: 12px 14px; }
  .tool-link span { display: none; }
  .shell.hero-content { padding: 26px 16px 22px; }
  .source-strip .text-link { margin-left: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; padding: 28px 16px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; }
  .hero h1 { word-break: break-word; }
  .actions .btn { flex: 1 1 100%; }
  table { font-size: 0.85rem; }
}

@media (max-width: 420px) {
  h1 { font-size: 1.85rem; }
}

/* Nine nav items: keep labels on one line; the MoP Classic pill steps aside on narrow desktops. */
.nav a { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1100px) {
  .network { display: none; }
  .nav a { padding: 10px 8px; }
}

/* Blocks that are both .shell and .section: keep the side gutter and the vertical rhythm
   (the two shorthand paddings used to cancel each other out). */
.shell.section { padding: 44px 24px; }
@media (max-width: 860px) { .shell.section { padding: 32px 24px; } }
@media (max-width: 640px) { .shell.section { padding: 28px 16px; } }