/* Dream Lands — Saved overlay */
/* =====================================================
   MOBILE OVERRIDES — header-less shell, sticky explore
   filter, toggleable filters, close-less overlays.
   Appended last so these win over earlier mobile rules.
   ===================================================== */
@media (max-width: 768px) {

  /* ---- Hide the header bar on non-home pages (has own header); show on home ---- */
  .explore-page header#site-header,
  .contact-page header#site-header,
  .reels-page header#site-header {
    display: none;
  }

  /* Mobile header: show only the brand title, hide logo, nav, bell, CTA */
  header#site-header .header-logo,
  header#site-header #header-nav,
  header#site-header #header-bell,
  header#site-header .nav-hamburger,
  header#site-header .header-right-actions {
    display: none !important;
  }

  header#site-header .brand {
    font-size: 1.1rem;
    font-weight: 700;
  }

  /* Hero clears the fixed header */
  .hero {
    padding-top: 52px;
  }

  .contact-page-main {
    padding-top: calc(env(safe-area-inset-top) + 1rem);
  }

  /* ---- Explore: sticky title + filter, only the list scrolls ---- */
  body.explore-page {
    height: 100dvh;
    overflow: hidden;
    padding-bottom: 0;
  }

  .explore-page .explore-main {
    padding-top: 0;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    height: calc(100dvh - 58px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }

  /* min-width:0 stops these flex items from expanding to the card grid's
     intrinsic min-content width, which would otherwise push the section
     wider than the viewport and clip the view toggle + Filters button. */
  .explore-page #explore.section {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-top: calc(env(safe-area-inset-top) + .75rem);
    padding-bottom: 0;
  }

  .explore-page .section-head,
  .explore-page .explore-toolbar {
    flex: 0 0 auto;
    min-width: 0;
  }

  .explore-page #explore-list {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Grid tracks default to min-content (the card's intrinsic width); allow them
     to shrink so the 1fr/1fr grid fits the viewport instead of stretching the
     whole sticky shell wider than the screen. */
  .explore-page .reel-grid {
    min-width: 0;
  }

  .explore-page .reel-grid>* {
    min-width: 0;
  }

  .explore-page #map-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
  }

  .explore-page #map-view .map-split {
    height: 100%;
  }

  /* Fullscreen map escapes the constrained shell but keeps the bottom nav. */
  .explore-page #map-view.map-fullscreen {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 1400;
    margin: 0;
  }

  /* ---- Explore: only the type chips show; rest fold behind "Filters" ---- */
  .explore-types-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    max-width: 100%;
  }

  .explore-types {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
  }

  /* Mild scrim only on the side(s) that have hidden, scrollable chips —
     toggled by .fade-left / .fade-right in updateExploreTypesScrim(). */
  .explore-types.fade-left {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 100%);
  }

  .explore-types.fade-right {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 18px, #000 100%);
  }

  .explore-types.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  /* Icon-only Filters toggle — square, takes minimal width. */
  .explore-filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: var(--card-bg);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
  }

  .explore-filters-toggle-label {
    display: none;
  }

  .explore-toolbar.filters-open .explore-filters-toggle {
    border-color: var(--acid);
    color: var(--acid);
  }

  .explore-selects {
    display: none;
  }

  .explore-toolbar.filters-open .explore-selects {
    display: grid;
  }

  /* ---- Reels: no close button (use the bottom nav to leave) ---- */
  .ryc-float-bar,
  .reels-close-btn {
    display: none;
  }

  /* ---- Saved: keep the bottom nav visible, no close icon ---- */
  .saved-overlay {
    bottom: calc(58px + env(safe-area-inset-bottom));
  }

  .saved-head {
    padding: calc(env(safe-area-inset-top) + .75rem) 1rem .75rem;
  }

  .saved-body {
    padding-bottom: 1rem;
  }
}