/* Subtle mobile layout fixes — loaded after production bundles */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

.lo-wrap,
.feed-page,
.feed-col,
.detail,
.explore,
.docs,
.detail-grid,
.detail-main,
.detail-side {
  min-width: 0;
  max-width: 100%;
}

/* Home hero + feed were clipped on small screens */
body.state-lo .lo-wrap {
  max-height: none !important;
  overflow: visible !important;
}

/* Nav tabs: scroll instead of breaking layout */
@media (max-width: 880px) {
  .nav {
    gap: 12px;
  }

  .nav-tabs {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Hero intro wordmark can overflow on narrow phones */
@media (max-width: 520px) {
  #hero-intro .intro-stage .wordmark {
    white-space: normal;
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.05;
    max-width: 100%;
  }

  #hero-intro .intro-stage .by-label {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Stories row */
.stories {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
}

.stories::-webkit-scrollbar {
  display: none;
}

/* Feed cards + posts */
.post-head {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}

.post-head .nm-row {
  flex-wrap: wrap;
  gap: 4px 8px;
}

.comm-card {
  min-width: 0;
}

.comm-card .ttl,
.comm-card .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Community + explore page padding */
@media (max-width: 880px) {
  .detail,
  .explore {
    padding-left: 16px;
    padding-right: 16px;
  }

  .crumb {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .ds-header .ident {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Auth modal wallet buttons */
@media (max-width: 520px) {
  .jit-modal .jm-step {
    align-items: flex-start;
  }

  .jit-modal .link-grid {
    width: 100%;
    align-items: stretch;
  }

  .jit-modal .link-grid .link-btn {
    width: 100%;
    justify-content: center;
  }
}

.share-menu__pop {
  max-width: calc(100vw - 24px);
}