/* ============================================================
   Loudbol — Responsive Breakpoints
   All media queries for layout shifts across devices.
   ============================================================ */

/* ── Large Desktop (>1400px) ── */
@media (min-width: 1400px) {
  .page-hero { padding: 140px 96px 100px; }
  .section    { padding: 120px 96px; }
}

/* ── Tablet Landscape (1024px) ── */
@media (max-width: 1024px) {
  .page-hero    { padding: 110px 40px 70px; min-height: 45vh; }
  .page-hero h1 { font-size: clamp(44px, 6vw, 80px); }
  .section      { padding: 80px 40px; }
}

/* ── Tablet Portrait (768px) ── */
@media (max-width: 768px) {
  .page-hero    { padding: 100px 24px 60px; min-height: 40vh; }
  .page-hero h1 { font-size: clamp(38px, 8vw, 64px); }
  .section      { padding: 60px 24px; }

  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 16px; }

  .page-hero-sub { font-size: 15px; }
}

/* ── Mobile (480px) ── */
@media (max-width: 480px) {
  .page-hero    { padding: 90px 16px 50px; }
  .page-hero h1 { font-size: clamp(32px, 10vw, 52px); }
  .section      { padding: 48px 16px; }

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

  .btn-red, .btn-ghost { width: 100%; text-align: center; padding: 15px 24px; }
}