/* =============================================================
   SEO PRACTICE LAB — RESPONSIVE RULES
   -------------------------------------------------------------
   Loaded after style.css. Kept in its own file on purpose so it's
   easy to see, in isolation, every rule that changes at each
   breakpoint — useful when practicing CSS/perf audits later.
   ============================================================= */

/* -------------------------------------------------------------
   TABLET (<= 1024px)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }

  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; order: 2; }
  .layout > .main { order: 1; }

  .hero .container { grid-template-columns: 1fr; }
  .hero-illustration { order: -1; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------
   MOBILE (<= 720px)
   ------------------------------------------------------------- */
@media (max-width: 720px) {
  .section { padding: 48px 0; }

  .grid,
  .grid--2 { grid-template-columns: 1fr; }

  /* Mobile navigation: hidden off-canvas panel toggled by JS.
     Content order is unchanged in the DOM — nothing important
     is removed for mobile users, only visually collapsed. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-primary {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--primary);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    overflow-y: auto;
  }
  .nav-primary.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-primary ul { flex-direction: column; align-items: stretch; padding: 18px; gap: 2px; }
  .nav-primary a { padding: 14px 12px; font-size: 1.02rem; }

  .hero { padding: 56px 0 64px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .post-card { grid-template-columns: 1fr; }
  .post-thumb { min-height: 140px; }
  .post-body { padding: 18px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .form-grid { grid-template-columns: 1fr; }

  .path-item { grid-template-columns: 40px 1fr; }
  .path-item .btn { display: none; }

  .notice-panel { padding: 32px 20px; }
}

/* -------------------------------------------------------------
   SMALL MOBILE (<= 420px)
   ------------------------------------------------------------- */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  .inspector-body { padding: 16px; }
  .gauges { flex-wrap: wrap; }
}