/* Desktop: the full-screen mobile search view becomes a centred command palette
   floating over a dimmed page. */
@media (min-width: 768px) {
  .search-overlay {
    align-items: flex-start;
    padding: var(--space-5);
    background: rgba(4, 5, 7, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .search-panel {
    width: 100%;
    max-width: 620px;
    height: auto;
    max-height: 74vh;
    margin-top: 8vh;
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    transform: translateY(-12px) scale(0.985);
  }

  .search-overlay.is-open .search-panel {
    transform: translateY(0) scale(1);
  }

  /* The back arrow is a mobile affordance; desktop closes via Esc or scrim. */
  .search-back {
    display: none;
  }

  .search-input-row {
    padding-inline: var(--space-4) var(--space-2);
  }

  .search-results {
    padding-bottom: var(--space-2);
  }
}

/* Desktop: more room for the slide copy and a slightly taller title clamp. */
@media (min-width: 1200px) {
  .hero-slide-content {
    max-width: 40rem;
  }
}

/* Large / ultra-wide monitors: keep content from stretching edge to edge */
@media (min-width: 1920px) {
  :root {
    --container-max: 1760px;
  }
}

/* Fine pointer devices get a slightly richer hover lift; touch devices keep it flat
   to avoid a "stuck hover" state after a tap. */
@media (hover: none) {
  .card:hover {
    transform: none;
  }

  .card:hover .card-poster img {
    transform: none;
  }
}

/* ---------- Touch ergonomics (PWA / TWA) ----------
   On coarse pointers every control must clear the ~44px comfortable-tap floor,
   even where the visual chrome is smaller. */
@media (pointer: coarse) {
  .icon-btn,
  .bottom-nav-item,
  .btn,
  .ex-mode-btn,
  .nav-logo {
    min-height: var(--tap-min);
  }

  .btn {
    padding-block: var(--space-3);
  }

  .section-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }

  /* Row arrows are a mouse affordance — touch users swipe the carousel. */
  .row-arrow {
    display: none !important;
  }
}

/* Landscape phones: keep the hero from eating the whole short viewport so at
   least one content row stays visible. */
@media (orientation: landscape) and (max-height: 34rem) {
  .hero-carousel {
    height: 15rem;
  }

  .hero-slide-content {
    padding-block: var(--space-3) var(--space-4);
    gap: var(--space-1);
  }

  .hero-title {
    -webkit-line-clamp: 1;
  }

  .hero-fa-title {
    display: none;
  }
}

/* Landscape phones: the login card grew taller than most short viewports
   once the theme/language switches were added (see login.css) — the page
   scrolls to reach the QR code and button, but nothing hinted that, and a
   first-time visitor has no reason to expect a "sign in" screen to scroll.
   Compact every non-essential dimension so the common landscape-phone case
   needs no scrolling at all, same goal as the hero rule above. */
@media (orientation: landscape) and (max-height: 34rem) {
  .login-screen {
    padding-block: var(--space-2);
  }

  .login-card {
    padding: var(--space-3) var(--space-5);
    gap: var(--space-1);
  }

  .login-brand {
    margin-bottom: 0;
  }

  .login-subtitle {
    display: none;
  }

  .theme-switch-compact .theme-option,
  .lang-switch-compact .lang-option {
    min-height: 2rem;
  }

  .qr-frame {
    width: 6.5rem;
    margin-block: var(--space-2);
  }

  .login-status {
    margin-top: var(--space-2);
  }
}

/* Tablets: the search palette and hero copy get a little more room. */
@media (min-width: 640px) and (max-width: 1199px) {
  .hero-slide-content {
    max-width: 34rem;
  }
}