/**
 * WAVE-16 D16-8 — Mobile ≤768 visual (nav / sticky CTAs / card stacks / touch)
 * Loaded last so hamburger collapse + 44px targets win over listings horizontal flood.
 * prefers-reduced-motion: no new motion here.
 */

@media (max-width: 768px) {
  /* —— Nav: compact bar + hamburger panel (force collapse) —— */
  .rcy-nav[data-rcl-mobile-nav] {
    position: relative;
    z-index: 50;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    flex-shrink: 0;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__burger-text {
    display: none !important;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__inner {
    flex-wrap: nowrap !important;
    align-items: center;
    min-height: 56px;
    gap: 0.5rem;
    position: relative;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__actions {
    order: 0;
    width: auto !important;
    overflow: visible !important;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__cta,
  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__lang,
  .rcy-nav[data-rcl-mobile-nav] .rcl-lang-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Kill listings.css ≤720 horizontal chrome flood */
  .rcy-nav[data-rcl-mobile-nav] #rcl-primary-nav.rcy-nav__links,
  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__links:not(.rcy-nav__actions) {
    display: none !important;
    order: 3;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    width: 100%;
    max-height: min(70vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.65rem;
    background: var(--rc-bg-elev, #121c2e);
    border: 1.5px solid var(--rc-bg-line, rgba(120, 160, 220, 0.18));
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    scrollbar-width: thin;
    box-sizing: border-box;
  }

  .rcy-nav[data-rcl-mobile-nav].is-nav-open #rcl-primary-nav.rcy-nav__links,
  .rcy-nav[data-rcl-mobile-nav].is-nav-open .rcy-nav__links:not(.rcy-nav__actions) {
    display: flex !important;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__browse-summary,
  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__browse-item,
  .rcy-nav[data-rcl-mobile-nav] #rcl-primary-nav > .rcy-nav__link {
    min-height: 44px !important;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__browse {
    width: 100%;
  }

  .rcy-nav[data-rcl-mobile-nav] .rcy-nav__browse-menu {
    position: static;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  /* —— Sticky CTA bar (extend to ≤768; was 720-only) —— */
  .rcl-mobile-cta[data-testid="mobile-sticky-cta"],
  .rcl-mobile-cta {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    padding-left: calc(0.85rem + env(safe-area-inset-left, 0px));
    padding-right: calc(0.85rem + env(safe-area-inset-right, 0px));
    background: color-mix(in srgb, #0b1424 94%, transparent);
    border-top: 1px solid var(--rc-bg-line, rgba(120, 160, 220, 0.18));
    backdrop-filter: blur(12px);
    box-sizing: border-box;
  }

  body:not(.rcl-theme-dark) .rcl-mobile-cta {
    background: rgba(255, 249, 239, 0.96);
    border-top: 1.5px solid var(--rcy-border, #e8d9b0);
  }

  .rcl-mobile-cta.is-hidden-compose {
    display: none !important;
  }

  .rcl-mobile-cta .rcy-btn {
    flex: 1;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .rcl-mobile-cta .rcl-mobile-cta__post {
    flex: 1.55;
    font-weight: 800;
  }

  main.rcl-main,
  main.rcy-wrap.rcl-main {
    padding-bottom: 5.5rem;
  }

  /* —— Card stacks: single column —— */
  .rcy-card-grid,
  .rcl-skeleton-grid,
  .rcl-mixed-board__grid,
  .rcl-job-grid,
  .rcl-cat-grid,
  .rcl-vertical-grid,
  .rcl-hub-grid,
  .rcl-feed-grid {
    grid-template-columns: 1fr !important;
  }

  /* 2-up cat tiles OK on very narrow only when room; prefer stack below 480 */
  .rcl-cat-grid {
    gap: 0.65rem;
  }

  /* —— Touch targets —— */
  .rcy-btn,
  .rcy-chip,
  a.rcy-btn,
  button.rcy-btn,
  .rcl-empty-state__actions .rcy-btn,
  .rcl-mixed-board__empty-actions .rcy-btn {
    min-height: 44px;
  }

  .rcy-chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding-block: 0.45rem;
  }
}

/* Mid tablet: keep sticky CTA from 721–768 (listings was 720-only) */
@media (min-width: 721px) and (max-width: 768px) {
  .rcl-pwa-install {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 769px) {
  .rcl-mobile-cta[data-testid="mobile-sticky-cta"],
  .rcl-mobile-cta {
    display: none !important;
  }
}