/* public/mobile.css */

/* Base readability */
html, body {
  font-size: 16px;
  line-height: 1.5;
}

/* Main container: ensure content isn't hidden behind fixed header/footer */
main {
  max-width: 94vw !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  /* Top/bottom paddings are set in layout via responsive classes;
     this file is a light guard-rail only. */
}

/* Cards: slightly denser on small screens */
.card {
  padding: 1rem !important;
  border-radius: 1rem !important;
}

/* Heading scale to avoid wrap chaos */
h1 { font-size: 1.625rem !important; line-height: 1.2; }  /* ~26px */
h2 { font-size: 1.25rem !important; line-height: 1.3; }   /* ~20px */
h3 { font-size: 1.125rem !important; line-height: 1.3; }  /* ~18px */

/* Buttons: larger targets */
.btn, .btn-ice, .btn-accent {
  padding: 0.675rem 1rem !important;
  border-radius: 0.9rem !important;
}

/* Lists in content pages */
ul { padding-left: 1.25rem; }
ul > li { margin: 0.4rem 0; }

/* Media elements behave */
img, video, iframe { max-width: 100%; height: auto; border-radius: 0.75rem; }