/* Narrow-viewport layer for the website kit.
   The kit was authored at a 1280x820 canvas and uses inline style objects, which
   outrank stylesheets — hence the !important here. This file only collapses
   multi-column structures below 900px; it changes nothing on desktop and can be
   removed wholesale once the layouts carry their own breakpoints. */

@media (max-width: 900px) {
  /* Top bar: let the nav wrap instead of pushing the page wide */
  header > div {
    height: auto !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
  }
  header nav {
    flex-wrap: wrap !important;
    gap: var(--space-4) !important;
  }

  /* Every multi-column grid in the kit becomes a single column */
  #root [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Fixed-width typeset page plates (the bilingual spread) */
  #root [style*="width: 400px"] {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: 420px;
  }

  /* Footer colophon: the link row must wrap (it gained a fifth link) */
  footer [style*="display: flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: var(--space-3) !important;
  }

  /* The form's left rule reads as a stray line once stacked */
  #root form {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Section rhythm tightens on small screens */
  #root section {
    padding-top: var(--space-8) !important;
    padding-bottom: var(--space-8) !important;
  }
}

@media (max-width: 480px) {
  #root h1 { overflow-wrap: break-word; }
}