/**
 * Shared public mobile polish for collection / poster / abstract / blog / presentation pages.
 * Loaded after page-specific CSS. Prefer reusable rules over page-only patches.
 */

html {
  overflow-x: clip;
}

body.mobile-nav-open,
body.poster-preview-open,
body.blog-accessibility-open,
body.presentation-accessibility-open,
body.poster-mobile-viewer-open {
  overflow: hidden;
}

body.poster-preview-open {
  /* Keep page from scrolling; allow the modal dialog itself to scroll on iOS. */
  touch-action: pan-y;
}

@media (max-width: 1023px) {
  .collection-filter-row,
  .collection-branded .collection-toolbar,
  .collection-branded .collection-toolbar--no-theme {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .collection-filter-row .collection-search,
  .collection-filter-row select,
  .collection-branded .collection-toolbar .theme-filter,
  .collection-branded .collection-toolbar .sort-filter {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .btn-secondary {
    min-height: 44px;
  }

  .collection-section-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .collection-link-accent {
    white-space: normal;
  }

  .collection-branded .poster-card-fav {
    min-width: 44px;
    min-height: 44px;
  }

  .collection-presentation-card__play {
    min-width: 44px;
    min-height: 44px;
  }

  .collection-detail-pagination__nav.btn-secondary {
    min-height: 44px;
    padding: 0.4rem 0.65rem;
  }

  .collection-detail-pagination__slot,
  .collection-detail-pagination__page.btn-secondary {
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    min-height: 44px;
  }

  .collection-landing-tabs {
    padding-inline: 0.15rem;
    margin-inline: -0.15rem;
  }

  .poster-preview__dialog {
    max-height: min(92vh, 92dvh);
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .poster-preview__close {
    width: 44px;
    height: 44px;
  }

  .poster-card__image-area {
    height: 170px;
  }

  .poster-comment__actions button {
    min-height: 44px;
    padding: 0.45rem 0.35rem;
  }

  .blog-reader__hero-actions .poster-like-button,
  .blog-reader__hero-actions .poster-share-icon-button,
  .presentation-reader__hero-actions .poster-like-button,
  .presentation-reader__hero-actions .poster-share-icon-button,
  .presentation-reader__header-actions .poster-like-button,
  .presentation-reader__header-actions .poster-share-icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .link-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.55rem;
    width: auto;
  }

  .landing-browse-types__link,
  .search-type-filters .landing-browse-types__link {
    min-height: 44px;
  }

  .search-filters .search-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-filters select {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
  }

  .poster-comments__field input,
  .poster-comments__field textarea,
  .poster-comments__field select,
  .poster-comments__sort-select {
    font-size: 16px;
  }

  .blog-accessibility-panel__close,
  .presentation-accessibility-panel__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .blog-reader__accessibility-trigger {
    min-height: 44px;
  }

  .site-brand-app .logo--landing-brand .brand-wordmark {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(42vw, 9.5rem);
  }
}

@media (max-width: 360px) {
  .site-brand-app .logo--landing-brand .brand-wordmark {
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    flex-shrink: 0;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
  }
}

/*
 * Short landscape: constrain desktop/tablet inline viewer height only.
 * Phone widths (≤767px) use a static width-fitted poster + full-screen explore viewer.
 */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 768px) {
  .poster-sample__viewer-wrap--landscape {
    height: min(260px, 58dvh) !important;
    min-height: 0 !important;
    max-height: min(260px, 58dvh) !important;
  }

  .poster-sample__viewer-wrap--portrait {
    max-height: min(280px, 62dvh) !important;
  }

  .poster-sample__viewer-wrap--landscape .poster-sample__viewport,
  .poster-sample__viewport {
    padding: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-preview__backdrop,
  .poster-preview__dialog,
  .blog-accessibility-panel,
  .presentation-accessibility-panel {
    transition: none !important;
  }
}