/* ==========================================================================
   NEXORA — Responsive Foundation
   Breakpoint strategy: mobile-first base in style.css, progressive
   enhancement here at 480 / 768 / 1024 / 1280 / 1440 / 1920.
   Tested reference widths: 320, 375, 390, 430, 768, 1024, 1280, 1440, 1920
   ========================================================================== */

/* Small phones (320–479px) — base styles in style.css already apply.
   Tighten container gutter slightly at the very smallest widths. */
@media (max-width: 374px) {
  :root {
    --container-pad: 16px;
  }
}

/* Large phones (480px+) */
@media (min-width: 480px) {
  :root {
    --container-pad: clamp(24px, 6vw, 40px);
  }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  :root {
    --container-pad: clamp(32px, 6vw, 56px);
  }

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

/* Small desktop / large tablet landscape (1024px+) */
@media (min-width: 1024px) {
  .grid-lg-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop (1280px+) */
@media (min-width: 1280px) {
  :root {
    --container-pad: clamp(40px, 4vw, 64px);
  }
}

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  :root {
    --container-max: 1360px;
  }
}

/* Extra-large desktop (1920px+) — cap growth so content never over-stretches */
@media (min-width: 1920px) {
  :root {
    --container-max: 1440px;
  }
}

/* Touch-friendly tap targets on coarse pointers (phones/tablets) */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
    padding-block: 0.95em;
  }
}

/* Guard against any accidental horizontal overflow from wide children */
img,
svg,
video,
table,
pre,
.card,
.container {
  max-width: 100%;
}