/*
 * Shared public-page layout guards.
 * Keep content reachable on narrow screens instead of hiding overflow at body level.
 */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
  }

  main,
  article,
  section,
  .container,
  .main-content,
  .article-content,
  .calculator-grid,
  .calculator-grid > *,
  .form-row > *,
  .form-row-3 > *,
  .info-grid > * {
    min-width: 0;
  }

  table:not([data-fixed-layout]) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .calculator-grid,
  .info-grid,
  .form-row,
  .form-row-3,
  .comparison-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .calc-card,
  .results-card,
  .info-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .calc-card,
  .results-card {
    padding-inline: 18px !important;
  }

  input,
  select,
  textarea,
  button {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  img,
  iframe,
  video,
  canvas {
    max-width: 100%;
  }

  pre {
    max-width: 100%;
    overflow-x: auto;
  }
}