/* Fit phone viewports without collapsing SVG header logos */
html {
  overflow-x: clip;
  max-width: 100%;
}
html, body {
  max-width: 100vw;
  overflow-x: clip;
}
body > * {
  max-width: 100vw;
}

@media (max-width: 1023px) {
  .container-page {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    min-width: 0 !important;
  }

  header.sticky,
  main,
  footer,
  section {
    overflow-x: clip;
    max-width: 100vw;
  }

  header .container-page {
    gap: 0.5rem;
    min-width: 0;
  }

  header a[aria-label*="home"] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 7rem;
    max-width: min(70vw, 220px);
  }

  /* Keep logo intrinsic; do NOT set width:auto + min-width:0 (SVG collapses to 0×0) */
  header a[aria-label*="home"] img {
    display: block !important;
    height: 2.75rem !important;
    width: auto !important;
    max-height: 2.75rem !important;
    max-width: 100% !important;
    min-width: 6rem !important;
    min-height: 2.75rem !important;
    flex-shrink: 0 !important;
  }

  main [class*="max-w-3xl"],
  main [class*="max-w-2xl"],
  main [class*="max-w-xl"] {
    max-width: 100% !important;
  }

  main [class*="grid"] {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  main [class*="grid"] > * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  main article,
  main [class*="rounded-3xl"],
  main [class*="rounded-2xl"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Never zero out header images */
  main * {
    min-width: 0;
  }
  header *:not(img) {
    min-width: 0;
  }

  main [class*="whitespace-nowrap"] {
    white-space: normal !important;
  }
  main [class*="min-w-"] {
    min-width: 0 !important;
  }

  main a[class*="inline-flex"],
  main button[class*="inline-flex"] {
    max-width: 100% !important;
    flex-wrap: wrap;
    white-space: normal !important;
    box-sizing: border-box;
  }

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

  main iframe { width: 100% !important; }
}

@media (max-width: 480px) {
  header a[aria-label*="home"] {
    min-width: 5.5rem;
    max-width: min(58vw, 180px);
  }
  header a[aria-label*="home"] img {
    height: 2.4rem !important;
    max-height: 2.4rem !important;
    min-height: 2.4rem !important;
    min-width: 5rem !important;
  }
}