/* ------------------------------------------------------------------
   Dunwell — responsive hardening layer
   Desktop rendering (>=1024px) is intentionally left byte-identical to
   the original build. Everything below only engages on smaller screens
   or is visually neutral (overflow / shrink safety).
   ------------------------------------------------------------------ */

/* ---------- Visually neutral safety rules (all sizes) ---------- */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

section,
header,
footer,
main > div {
  overflow-x: clip;
}

[class*="blur-3xl"],
[class*="blur-2xl"] {
  pointer-events: none;
}

img,
svg,
video,
iframe,
canvas,
embed,
object {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  max-width: 100%;
}

.flex > *,
.grid > * {
  min-width: 0;
}

/* Hero heights account for mobile browser chrome */
[class*="min-h-screen"] {
  min-height: 100svh;
}

/* ---------- Below desktop only (<1024px) ---------- */
@media (max-width: 1023.98px) {
  body {
    overflow-wrap: break-word;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  p,
  li,
  a,
  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  dd,
  dt,
  label,
  td,
  th {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Fluid headings — only scaled down, never up */
  h1,
  [class*="text-7xl"],
  [class*="text-6xl"],
  [class*="text-5xl"] {
    font-size: clamp(1.85rem, 6.2vw, 3.75rem) !important;
    line-height: 1.08 !important;
  }

  h2:not(h1),
  :not(h1)[class*="text-4xl"] {
    font-size: clamp(1.5rem, 4.6vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }

  h3,
  :not(h1):not(h2)[class*="text-3xl"] {
    font-size: clamp(1.25rem, 3.4vw, 1.875rem) !important;
    line-height: 1.2 !important;
  }

  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Tablet & phone (<768px) ---------- */
@media (max-width: 767.98px) {
  [class*="h-[400px]"] {
    height: clamp(220px, 55vw, 400px) !important;
  }

  [class*="h-[300px]"] {
    height: clamp(200px, 48vw, 300px) !important;
  }
}

/* ---------- Phones (<=480px) ---------- */
@media (max-width: 480px) {
  button,
  a[class*="inline-flex"],
  [role="button"] {
    white-space: normal !important;
    max-width: 100%;
  }

  [class*="px-8"] {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  [class*="gap-8"] {
    gap: 1.5rem !important;
  }

  [class*="py-24"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  [class*="py-20"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ---------- Pricing rows stay legible ---------- */
@media (max-width: 420px) {
  .grid.grid-cols-3 {
    font-size: 0.75rem;
  }

  .grid.grid-cols-3[class*="px-4"] {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }
}

/* ---------- Ultra-narrow phones (<=380px) ---------- */
@media (max-width: 380px) {
  [class*="grid-cols-2"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols-4"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023.98px) {
  [class*="min-h-screen"] {
    min-height: auto;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
  }
}

/* ---------- Touch targets on touch devices below desktop ---------- */
@media (pointer: coarse) and (max-width: 1023.98px) {
  button,
  a[class*="inline-flex"],
  [role="button"] {
    min-height: 44px;
  }
}