/* Responsive refinements shared by the Help Centre entry-point templates. */

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .tech-tip {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 84px;
    width: auto;
    max-width: none;
  }

  .tech-tip::after {
    display: none;
  }
}

@media (max-width: 1023px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .help-home-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 26px;
  }

  .help-category-grid,
  .help-guide-grid,
  .help-safety-grid,
  .help-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-home-grid > *,
  .help-category-grid > *,
  .help-guide-grid > *,
  .help-safety-grid > *,
  .help-related-grid > *,
  .guide-meta > *,
  .help-step > *,
  .help-service-cta > *,
  .help-search-row > *,
  .glossary-controls > * {
    min-width: 0;
  }

  .help-narrow {
    max-width: calc(100% - 32px);
  }

  .help-home-hero h1,
  .help-hero h1,
  .help-category-card,
  .help-guide-card,
  .help-related-card,
  .help-search-result,
  .glossary-item {
    overflow-wrap: anywhere;
  }

  .help-category-card,
  .help-guide-card,
  .help-related-card {
    min-width: 0;
  }

  .guide-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .help-service-cta .action-row {
    width: 100%;
    max-width: 100%;
  }

  .help-service-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .help-service-cta .btn,
  .help-search-row .btn,
  .action-row .btn {
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .help-search-row input,
  .glossary-controls input,
  .glossary-controls select {
    min-width: 0;
  }

  .help-article img,
  .help-source-box img {
    max-width: 100%;
    height: auto;
  }

  .help-article pre,
  .help-source-box pre,
  .help-article .table-wrap,
  .help-source-box .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .help-article code,
  .help-source-box code {
    overflow-wrap: anywhere;
  }

  .tech-tip {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 820px) {
  .help-example {
    width: 100%;
    max-width: none;
  }

  .guide-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .help-home-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
  }

  .help-example {
    padding: 16px;
  }

  .help-example h2 {
    font-size: clamp(22px, 4vw, 28px);
    overflow-wrap: anywhere;
  }

  .help-home-hero,
  .help-hero {
    padding: 34px 0;
  }

  .help-home-hero h1,
  .help-hero h1,
  .help-hero-guide h1 {
    font-size: clamp(31px, 9vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
  }

  .help-category-grid,
  .help-guide-grid,
  .help-safety-grid,
  .help-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-category-card,
  .help-guide-card,
  .help-related-card,
  .help-search-result,
  .help-search-examples,
  .help-search-empty,
  .glossary-item {
    padding: 18px;
  }

  .help-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
  }

  .help-step-number {
    width: 36px;
    height: 36px;
  }

  .help-step h2 {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  .help-search-row,
  .action-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-search-row .btn,
  .action-row .btn,
  .help-service-cta .btn {
    width: 100%;
  }

  .glossary-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .glossary-item-heading {
    display: block;
  }

  .glossary-category-tag {
    margin-bottom: 8px;
  }

  .help-article table,
  .help-source-box table {
    min-width: 560px;
  }
}

@media (max-width: 599px) {
  .help-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .help-narrow {
    max-width: calc(100% - 20px);
  }

  .help-home-hero h1,
  .help-hero h1,
  .help-hero-guide h1 {
    font-size: 30px;
  }

  .guide-meta span,
  .help-alert,
  .help-source-box,
  .help-service-cta {
    padding: 16px;
  }

  .glossary-letters .btn {
    min-width: 42px;
    flex: 1 1 42px;
  }
}