/* DS-037: useful mobile destinations replace the three decorative category tags. */
.site-footer .sf-mobile-links {
  display: none;
}

@media (max-width: 640px) {
  .site-footer .sf-col--brand > .sf-paths {
    display: none;
  }

  .site-footer .sf-mobile-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    max-inline-size: 380px;
    margin: 0;
    padding: 0;
  }

  .site-footer .sf-mobile-links a {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-inline-size: 0;
    min-block-size: 44px;
    padding: 8px 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    color: #f6f3ed;
    font: 600 12px/1.6 var(--font-body, 'IBM Plex Sans Arabic', system-ui, sans-serif);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 160ms ease, border-color 160ms ease;
  }

  .site-footer .sf-mobile-links a:active {
    border-color: #f36418;
    background: rgba(243, 100, 24, .16);
  }

  .site-footer .sf-mobile-links a:focus-visible {
    outline: 2px solid #ff9860;
    outline-offset: 3px;
  }
}

@media (max-width: 640px) and (hover: hover) {
  .site-footer .sf-mobile-links a:hover {
    border-color: rgba(243, 100, 24, .65);
    background: rgba(243, 100, 24, .12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .sf-mobile-links a {
    transition: none;
  }
}