/* v0.7.3: keep the page inside the device viewport while allowing photo/area carousels to scroll independently. */
html, body { max-width: 100%; overflow-x: clip; }
#app, main, .header, .footer, .container, .page-head, .section,
.form-layout, .formbox, .guided-contribute, .performance-area-selector,
.manager-wrapper, .manager-panel { min-width: 0; max-width: 100%; }
img, svg, video { max-width: 100%; }
/* Prevent long submitted names, addresses and field values widening grid tracks. */
.card, .card-content, .card-link, .panel, .info, .fact, .manager-select,
.area-selector-heading, .area-mini-link { min-width: 0; }
.card h3, .card-town, .area-mini-link, .page-head h1, .info-row b,
.performance-area-selector h2 { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .hero-bottom { width: 100%; margin-left: 0; transform: none; }
  .hero-bottom .container { width: 100%; }
  .area-selector-heading { flex-wrap: wrap; }
  .area-selector-heading > * { min-width: 0; }
  .area-tabs { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; }
  .venue-photo-strip { max-width: 100%; min-width: 0; }
  .form-layout, .formbox, .guided-contribute, .manager-wrapper { width: 100%; }
  .form-layout input:not([type="checkbox"]):not([type="radio"]),
  .form-layout textarea, .form-layout select,
  .manager-panel input:not([type="checkbox"]):not([type="radio"]),
  .manager-panel select, .manager-panel textarea { max-width: 100%; min-width: 0; }
}
@media (max-width: 490px) {
  /* Percentage tracks plus intrinsic text sizes can otherwise grow beyond a phone. */
  .card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .card-art, .card-content, .card-link { min-width: 0; }
  .card-link { gap: 8px; }
  .card-link span:first-child { overflow-wrap: anywhere; }
  .hero h1, .intro h2, .community h2, .features h2 { overflow-wrap: anywhere; }
  .form-step { min-width: 0; }
  .form-step > div:not(.step-number) { min-width: 0; }
}