/* public/css/mobile-overrides.css */

/* ========== Global mobile polish ========== */
@media (max-width: 640px) {

  /* Reduce heavy paddings for tighter mobile spacing */
  .p-10 { padding: 1.25rem !important; }   /* 20px */
  .p-8  { padding: 1rem !important; }      /* 16px */

  /* Softer big radii on small screens */
  .rounded-3xl { border-radius: 1rem !important; } /* 16px */

  /* Prevent iOS zoom on inputs (must be >=16px) */
  input, select, textarea { font-size: 16px !important; }

  /* Make primary CTAs full-width on phones */
  button[type="submit"],
  .btn,
  [class*="bg-[#C63D0F]"].text-white {
    width: 100% !important;
  }

  /* Typography: slightly smaller big headings to avoid wrapping */
  .text-3xl { font-size: 1.5rem !important; line-height: 2rem !important; }     /* 24px */
  .text-2xl { font-size: 1.375rem !important; line-height: 1.875rem !important; }/* 22px */

  /* Card shadows a bit lighter to reduce “heaviness” on small screens */
  .shadow-2xl { box-shadow: 0 10px 24px rgba(0,0,0,.10) !important; }

  /* Safer word wrapping for long names/labels */
  .truncate, .overflow-ellipsis { white-space: normal !important; }
  .break-words, .break-all { word-break: break-word !important; overflow-wrap: anywhere !important; }

  /* Make any 4-col grids collapse to 2 cols (gallery, etc.) */
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Gallery thumbs: slightly shorter to keep more above the fold */
  .h-48 { height: 9rem !important; } /* 144px */

  /* Tighter horizontal gutters */
  .px-10 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-8  { padding-left: .875rem !important; padding-right: .875rem !important; }

  /* Reduce banner/hero vertical space if present */
  .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

/* ========== Touch-target & safe-area niceties ========== */
@media (pointer: coarse) {
  a, button, label, .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iPhone safe-area padding (if you ever pin sticky bars/footers) */
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* Lazy rendering defaults (does not affect desktop) */
img { height: auto; max-width: 100%; }
img[loading="lazy"] { content-visibility: auto; }