/* =====================================================================
   PoshBBQ — Responsive layer
   Breakpoints: md = 768px, lg = 1024px  (matches Tailwind defaults)
   ===================================================================== */

/* ---------- Tablet / desktop (md ≥ 768px) --------------------------- */
@media (min-width: 768px) {
  :root { --pad: 3rem; }

  .grid12.gap-lg { gap: 2.5rem; }

  /* Section rhythm — py-breathe (200px) on larger screens */
  .section { padding-block: 8rem; }
  .section-breathe { padding-block: 12.5rem; }
  .pt-hero { padding-top: 7rem; }

  /* Nav */
  .nav-center { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .nav-left { grid-column: span 2; }
  .nav-right { grid-column: span 2; }
  .nav-mobile { display: none !important; }

  /* Column spans */
  .col-md-1 { grid-column: span 1 / span 1; }
  .col-md-2 { grid-column: span 2 / span 2; }
  .col-md-3 { grid-column: span 3 / span 3; }
  .col-md-4 { grid-column: span 4 / span 4; }
  .col-md-5 { grid-column: span 5 / span 5; }
  .col-md-6 { grid-column: span 6 / span 6; }
  .col-md-7 { grid-column: span 7 / span 7; }
  .col-md-8 { grid-column: span 8 / span 8; }
  .col-md-9 { grid-column: span 9 / span 9; }
  .col-md-10 { grid-column: span 10 / span 10; }
  .col-md-11 { grid-column: span 11 / span 11; }
  .col-md-12 { grid-column: span 12 / span 12; }

  .col-md-start-3 { grid-column-start: 3; }
  .col-md-start-4 { grid-column-start: 4; }
  .col-md-start-6 { grid-column-start: 6; }
  .col-md-start-7 { grid-column-start: 7; }

  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }

  /* Visibility */
  .md-inline { display: inline; }
  .md-hidden { display: none; }

  /* Lead paragraph steps up */
  .lead { font-size: 1.125rem; }

  /* Swatch grid → 7 cols */
  .swatch-grid { grid-template-columns: repeat(7, 1fr); }

  /* Configurator sticky preview */
  .config-preview { position: sticky; top: 6rem; align-self: flex-start; }

  /* Footer bottom → three columns */
  .footer-bottom { grid-template-columns: repeat(3, 1fr); align-items: center; }
  .footer-inner { padding-top: 10rem; }

  /* Config summary → 2 col list */
  .config-summary ul { grid-template-columns: repeat(2, 1fr); }

  /* Two-column checklist */
  .cols-2-md { grid-template-columns: repeat(2, 1fr); }

  /* Flex row helpers at md */
  .md-row { flex-direction: row; align-items: center; justify-content: space-between; }

  /* Larger display headings on md tweaks */
  h1.h-hero, .h-hero { margin-top: 3.5rem; }
}

/* Base (mobile) — hide desktop-only inline items */
.md-inline { display: none; }

/* ---------- Desktop (lg ≥ 1024px) ----------------------------------- */
@media (min-width: 1024px) {
  .col-lg-3 { grid-column: span 3 / span 3; }
  .col-lg-4 { grid-column: span 4 / span 4; }
  .col-lg-5 { grid-column: span 5 / span 5; }
  .col-lg-6 { grid-column: span 6 / span 6; }
  .col-lg-7 { grid-column: span 7 / span 7; }
  .col-lg-8 { grid-column: span 8 / span 8; }
}

/* ---------- Small screens polish ------------------------------------ */
@media (max-width: 767px) {
  .drift-track { gap: 2.25rem; }
  .drift-item { gap: 2.25rem; }
  .figure .frame-caption { padding: 1rem; }
  .h-hero { margin-top: 2.5rem; }
  .footer-wordmark { font-size: 2.25rem; }
  .swatch-grid { grid-template-columns: repeat(6, 1fr); }
}