/* Shared narrow-screen polish for the static ALLLKnow site. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

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

main [class*="grid"] > *,
main [class*="flex"] > * {
  min-width: 0;
}

@media (max-width: 767px) {
  nav > div,
  footer > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .alllknow-brand-logo {
    height: 1.65rem;
    max-width: 148px;
  }

  .static-mobile-menu {
    inset: 64px 0 auto;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 10px 20px 18px;
    overscroll-behavior: contain;
  }

  .static-mobile-menu a,
  .mobile-service-toggle {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  main h1 {
    max-width: 100%;
    font-size: clamp(2.05rem, 10vw, 2.8rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: anywhere;
  }

  main h1 > span.block,
  main h1 > span:not([class*="text-transparent"]) {
    font-size: clamp(1.05rem, 4.8vw, 1.4rem) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  main h2 {
    font-size: clamp(1.65rem, 7.5vw, 2.15rem) !important;
    line-height: 1.22 !important;
  }

  main h3 {
    overflow-wrap: anywhere;
  }

  main section[class*="py-20"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  main section[class*="py-16"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  main section,
  main article,
  main form {
    max-width: 100%;
  }

  main .p-8,
  main .sm\:p-8 {
    padding: 1.25rem !important;
  }

  main .gap-6,
  main .gap-8 {
    row-gap: 1.25rem !important;
  }

  main .flex.gap-4,
  main .flex.gap-6,
  main .flex.gap-8 {
    flex-wrap: wrap;
  }

  main a.inline-flex,
  main button.inline-flex {
    max-width: 100%;
    min-height: 44px;
    white-space: normal !important;
    text-align: center;
    line-height: 1.4;
  }

  main .mobile-bilingual-action {
    position: relative;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px !important;
    min-height: 50px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 1.3;
    text-wrap: balance;
  }

  main .mobile-bilingual-action > span {
    margin: 0 !important;
  }

  main .mobile-bilingual-action > span:not(.mobile-bilingual-copy) {
    font-size: .72rem !important;
    font-weight: 500;
    line-height: 1.35;
    opacity: .78;
  }

  main .mobile-bilingual-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  main .mobile-bilingual-copy strong {
    font-size: .9rem;
    font-weight: 650;
  }

  main .mobile-bilingual-copy small {
    font-size: .68rem;
    font-weight: 500;
    line-height: 1.3;
    opacity: .78;
  }

  main .mobile-bilingual-action > svg {
    position: absolute;
    right: 13px;
    top: 50%;
    margin: 0 !important;
    transform: translateY(-50%);
  }

  main .mobile-bilingual-action:has(> svg) {
    padding-left: 18px !important;
    padding-right: 42px !important;
  }

  .static-mobile-menu .fastshare-publish-trigger {
    display: flex;
    min-height: 50px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
  }

  .static-mobile-menu .fastshare-publish-trigger span {
    font-size: .9rem;
    font-weight: 700;
  }

  .static-mobile-menu .fastshare-publish-trigger small {
    font-size: .68rem;
    font-weight: 500;
    opacity: .72;
  }

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

  button[data-orientation="vertical"][aria-controls] {
    width: 100%;
    gap: 14px;
    align-items: flex-start;
  }

  button[data-orientation="vertical"][aria-controls] > div,
  button[data-orientation="vertical"][aria-controls] > span {
    min-width: 0;
  }

  button[data-orientation="vertical"][aria-controls] svg {
    margin-top: 5px;
  }

  .static-faq-answer {
    font-size: .94rem;
    line-height: 1.72;
  }

  footer {
    text-align: left;
  }

  footer .grid {
    gap: 2rem !important;
  }

  .fastshare-publish-modal {
    padding: 14px;
  }

  .fastshare-publish-dialog {
    width: 100%;
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    padding: 28px 18px 22px;
    border-radius: 16px;
  }

  .fastshare-publish-dialog h2 {
    padding: 0 24px;
    font-size: 1.5rem;
  }

  .fastshare-publish-qr {
    width: min(210px, 70vw);
    height: min(210px, 70vw);
  }

  .media-list-page {
    padding-top: 64px !important;
  }

  .media-hero {
    padding: 48px 0 34px !important;
  }

  .media-hero-copy,
  .media-toolbar,
  .media-filterbar,
  .media-disclaimer,
  .media-grid,
  .media-pagination-wrap {
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
  }

  .media-summary {
    gap: 8px;
  }

  .media-summary span {
    padding: 8px 11px;
    font-size: .78rem;
  }

  .media-toolbar,
  .media-filterbar {
    padding: 12px;
  }

  .media-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .media-tab {
    padding: 10px 6px;
    font-size: .82rem;
  }

  .media-card {
    padding: 17px;
  }

  .media-card-head {
    gap: 12px;
    padding-right: 0;
  }

  .media-card h2 {
    font-size: 1.12rem;
  }

  .media-price strong {
    font-size: 1.45rem;
  }

  .media-stats div {
    padding: 10px;
  }

  .media-pagination-wrap {
    margin-bottom: 56px;
  }

  .media-pagination {
    justify-content: center;
    width: 100%;
  }

  .media-pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
  }

  .alllknow-back-to-top {
    right: 14px;
    bottom: 108px;
  }
}

@media (max-width: 390px) {
  main h1 {
    font-size: 2rem !important;
  }

  .media-hero-copy,
  .media-toolbar,
  .media-filterbar,
  .media-disclaimer,
  .media-grid,
  .media-pagination-wrap {
    max-width: calc(100vw - 20px);
  }

  .media-tabs {
    grid-template-columns: 1fr;
  }

  .media-stats {
    grid-template-columns: 1fr !important;
  }

  .media-stats div {
    border-right: 0 !important;
    border-bottom: 1px solid hsl(var(--border));
  }

  .media-stats div:last-child {
    border-bottom: 0;
  }

}