/* BOPAVI v5 — narrow-screen stability; original styling is unchanged at desktop widths. */
/* Ensure grid/flex children may shrink instead of forcing the viewport wider. */
main .grid > *, main .flex > *, footer .grid > * {min-width: 0;}
main img {max-width: 100%;}
main input, main textarea, main select {min-width: 0;max-width: 100%;}
main p, main li {overflow-wrap: break-word;}
@media (max-width: 359px) {
  header > .panel {gap: .5rem; padding-inline: .5rem;}
  header .flex.items-center.gap-2 {gap: .25rem;}
  main .w-80.snap-start {width: min(20rem, calc(100vw - 2.5rem));}
  footer .grid.grid-cols-3 {grid-template-columns: repeat(2, minmax(0, 1fr));}
  footer .grid.grid-cols-3 > :last-child {grid-column: span 2;}
  main .panel {max-width: 100%;}
}
@media (max-width: 767px) {
  main .panel :is(input,textarea,select) {font-size: 16px;}
  main .panel img {height: auto;}
}
@media (max-width: 1023px) {
  main img.panel {width: min(100%, 28rem);min-width: 0;}
}
@media (prefers-reduced-motion: reduce) {
  .float-anim {animation: none !important;}
}
/* Horizontal card carousels scroll inside their own region, never the page. */
html, body { overflow-x: clip; }

/* v5: functional focus, touch targets, narrow-screen resilience. */
:where(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #f5d86b;
  outline-offset: 3px;
}
:where(button,[role="button"],a) { -webkit-tap-highlight-color: transparent; }
main :where(h1,h2,h3,p,li) { overflow-wrap: break-word; }
@media (max-width: 479px) {
  main .panel { min-width: 0; }
  main .panel :where(input,textarea,select) { width: 100%; }
  header .panel { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .scroll-smooth { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}