/* Shared responsive safeguards for training.2ab.it. */
:root {
  --responsive-gutter: clamp(0.75rem, 3vw, 1.5rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
picture,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

pre,
code,
.formula,
.sources a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre,
.formula {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto !important;
  white-space: normal;
  -webkit-overflow-scrolling: touch;
}

th,
td {
  min-width: 8rem;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

@media (max-width: 900px) {
  .layout {
    width: 100%;
    min-width: 0;
  }

  nav {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 620px) {
  header,
  main,
  footer,
  .hero,
  .layout {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(1.85rem, 10vw, 2.75rem) !important;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(1.4rem, 7vw, 1.8rem) !important;
    overflow-wrap: anywhere;
  }

  .grid,
  .grid.three {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  nav a {
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem;
  }
}

@media (max-width: 380px) {
  header {
    padding-inline: var(--responsive-gutter) !important;
  }

  .layout {
    padding-inline: 0.5rem !important;
  }

  section,
  .card,
  nav {
    padding-inline: var(--responsive-gutter) !important;
  }
}

@media print {
  body {
    overflow: visible;
  }

  table,
  pre,
  .formula {
    display: table;
    overflow: visible !important;
  }
}