/* === CHI Mobile Layout Enhancements (layout-only, no functionality changes) === */
/* Load this AFTER app.css (e.g., <link rel="stylesheet" href="/app.css"><link rel="stylesheet" href="/app.mobile.css">) */

/* 1) Viewport & safe areas */
@supports (padding: max(0px)) {
  body {
    padding-top: max(env(safe-area-inset-top), 0px);
    padding-left: max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
    padding-bottom: max(env(safe-area-inset-bottom), 0px);
  }
}

/* 2) Fluid typography & spacing (mobile-first) */
html { font-size: 16px; }
body { font-size: clamp(15px, 1.2vw + 0.6rem, 18px); line-height: 1.5; }
h1 { font-size: clamp(1.25rem, 4.5vw, 2rem); }
h2 { font-size: clamp(1.1rem, 3.6vw, 1.6rem); }
h3 { font-size: clamp(1rem, 3.2vw, 1.25rem); }

/* 3) Container width & gutters */
main { padding-inline: clamp(12px, 4vw, 24px); max-width: 68rem; }
.card { border-radius: 16px; }

/* 4) Better responsive grids (keep your existing .grid.two/.three but make them mobile first) */
.grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 720px) { .grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* Auto-fit helper for places with unknown item counts */
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* 5) Touch targets & inputs */
a.button, button, .btn { min-height: 44px; padding: 0.75rem 1rem; }
input, select, textarea { font-size: 16px; } /* avoid iOS zoom on focus */

/* 6) Navigation: prevent wrap/overflow, enable horizontal scroll on small screens */
.topbar { gap: 8px; }
.topbar .logo-container { display:flex; align-items:center; gap:8px; min-width: 0; }
.topbar nav { display:flex; align-items:center; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display:none; }
.topbar nav a { white-space: nowrap; flex: 0 0 auto; }

/* 7) Tables: make them scrollable on small screens without breaking layout */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 0.5rem; text-align: left; }

/* 8) Dialogs/cards spacing on smaller screens */
@media (max-width: 399px) {
  .card, .modal { padding: 12px; }
}

/* 9) Forms: align labels/fields vertically on narrow screens */
.form-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* 10) Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 11) Utility: clamp long text to avoid overflows in cards/lists */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* All Feedback: wider, scrollable table on mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.feedback-table { min-width: 860px; table-layout: auto; }
.feedback-table th, .feedback-table td { vertical-align: top; }
.feedback-table td.message { white-space: normal; } /* let long messages wrap */

/* Keep the big image card from stretching to match the right card */
@media (min-width: 1024px) {
  .card.hero-card {            /* this is the class used by your big image card */
    aspect-ratio: 16 / 9;
    align-self: start;         /* don't stretch to the row's full height */
  }
  .card.hero-card .hero-img {
    background-position: center top; /* optional: show more of the top of the photo */
  }
}