/* ==========================================================================
   DetroPick — Responsive Overrides
   Mobile-first base lives in style.css; this file layers in tablet/desktop.
   ========================================================================== */

/* ---------- Tablet: 640px+ ---------- */
@media (min-width: 640px) {
  .container { padding-inline: 32px; }

  /* Logo scales up slightly as there's more header room. Footer/admin
     sidebar logos keep their own fixed size (see style.css — those
     selectors are more specific, so they aren't affected here). */
  .brand__logo-img { height: 44px; }

  .hero__meta { gap: 14px 34px; }

  .about-values { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .pros-cons { grid-template-columns: repeat(2, 1fr); }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- Small desktop / large tablet: 860px+ ---------- */
@media (min-width: 860px) {
  .nav-toggle { display: none; }

  .brand__logo-img { height: 48px; }

  .nav-menu {
    position: static;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 2px;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    inset: auto;
    overflow: visible;
  }
  .nav-menu a {
    padding: 9px 16px;
    border-bottom: none;
    font-size: 0.94rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
  }
  .nav-menu a:hover { background: var(--color-bg-alt); }
  .nav-menu a.is-active { background: var(--color-accent-soft); color: var(--color-accent-dark); font-weight: 600; }

  body.nav-open { overflow: auto; }

  .trust-strip__inner { justify-content: center; text-align: center; }
  .trust-strip__list { justify-content: center; }

  .about-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1.3fr 1fr; }

  .product-detail__layout { grid-template-columns: 380px 1fr; }

  .legal-layout { grid-template-columns: 240px 1fr; gap: 48px; }
  .legal-toc { position: sticky; top: calc(var(--nav-height) + 24px); }

  .newsletter-band { flex-direction: row; align-items: center; justify-content: space-between; padding: 44px 48px; }
  .newsletter-band .newsletter-form { max-width: 380px; }

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

  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .category-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- Desktop: 1100px+ ---------- */
@media (min-width: 1100px) {
  .section { padding-block: 76px; }
  #featured { padding-top: 48px; }
  .hero { padding-block: 56px 60px; }

  /* Full-size H1 — see the mobile/tablet override in style.css */
  .hero__title {
    font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
    line-height: 1.1;
    margin-bottom: 20px;
  }

  .stat-row { max-width: 480px; }

  .product-grid { grid-template-columns: repeat(4, 1fr); }
}