/* CityBit — responsive breakpoints and TV mode
 *
 * Breakpoint strategy:
 *   ≤ 640px    → mobile (phones)
 *   641–1024   → tablet
 *   1025–1599  → desktop (default)
 *   1600–2199  → HD TV
 *   ≥ 2200     → 4K TV
 */

/* ═══════════════════════════════════════════════════════
   MOBILE (≤ 640px)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root {
    --header-height: 64px;
    --gutter-x: 20px;
    --card-w: 140px;
  }

  /* Header: condensed nav, hide language label */
  .app-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }

  .brand__name { font-size: 20px; }

  .nav {
    display: none;
  }

  .header-actions {
    gap: var(--space-2);
  }

  .search-box__input {
    width: 40px;
    padding: 0 var(--space-3) 0 36px;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
  }

  .search-box__input:hover,
  .search-box__input:focus {
    width: 180px;
    background: var(--surface-2);
    border-color: var(--border-strong);
  }

  .search-box__input::placeholder { color: transparent; }
  .search-box__input:focus::placeholder { color: var(--text-dim); }

  .lang-switch__button {
    padding: 0 var(--space-2);
    height: 36px;
  }
  .lang-switch__button svg { display: none; }

  /* Hero: tighter padding, smaller title */
  .hero {
    height: clamp(420px, 80vh, 620px);
  }

  .hero__inner {
    max-width: 100%;
  }

  .hero__title {
    font-size: var(--fs-2xl);
  }

  .hero__summary {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: var(--fs-sm);
  }

  .hero__meta {
    gap: var(--space-3);
    font-size: var(--fs-xs);
  }

  .hero__actions {
    gap: var(--space-2);
  }

  .hero__actions .btn {
    height: 46px;
    padding: 0 var(--space-5);
  }

  .hero__controls {
    bottom: var(--space-6);
  }

  /* Hide arrow nav on mobile, keep only indicators */
  .hero__nav { display: none; }

  /* Section rows — smaller heads */
  .section-row {
    margin-top: var(--space-8);
  }

  .section-row__title {
    font-size: var(--fs-lg);
  }

  /* Library view */
  .library__title { font-size: var(--fs-xl); }
  .library__titleblock { gap: var(--space-3); }

  .filter-bar {
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .filter-bar__label { display: none; }
  .filter-bar__spacer { display: none; }
  .dropdown__trigger {
    height: 36px;
    padding: 0 var(--space-3);
  }
  .dropdown__label { display: none; }
  .dropdown__menu { min-width: 180px; }

  .library__grid {
    gap: var(--space-5) var(--space-3);
  }

  /* Modal: full-screen on mobile, stack poster on top */
  .modal {
    padding: 0;
  }

  .modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }

  .modal__hero {
    aspect-ratio: 16 / 9;
  }

  .modal__body {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: 0 var(--space-5) var(--space-7);
    margin-top: -60px;
  }

  .modal__poster {
    width: 140px;
    margin: 0 auto;
    position: relative;
  }

  .modal__title {
    font-size: var(--fs-xl);
    text-align: center;
  }

  .modal__tagline,
  .modal__meta,
  .modal__chips,
  .modal__summary,
  .modal__actions {
    text-align: center;
    justify-content: center;
  }

  .modal__dl {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .modal__dl dt {
    padding-top: var(--space-3);
  }

  /* Series detail */
  .series__hero { height: clamp(380px, 70vh, 560px); }
  .series__title { font-size: var(--fs-2xl); }
  .series__summary {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--fs-sm);
  }

  .season-tab {
    font-size: var(--fs-sm);
    padding: var(--space-3) var(--space-4);
  }

  .episode {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .episode:hover {
    transform: none;
  }

  .episode__thumb {
    width: 100%;
  }

  /* Search view */
  .search-view {
    padding: var(--space-6) var(--gutter-x) var(--space-9);
  }
  .search-view__query {
    font-size: var(--fs-xl);
  }

  /* Player */
  .player__topbar {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }

  .player__title { font-size: var(--fs-sm); }

  .player__controls {
    padding: var(--space-5) var(--space-4) var(--space-4);
    gap: var(--space-3);
  }

  .player__buttons {
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .player__btn {
    width: 40px;
    height: 40px;
  }

  .player__btn--primary {
    width: 50px;
    height: 50px;
  }

  .player__time {
    font-size: 10px;
    min-width: 44px;
  }

  .player__volume-slider { display: none; }

  .player .dropdown__menu {
    right: auto;
    left: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   TABLET (641–1024px)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --gutter-x: 32px;
    --card-w: 160px;
  }

  .nav { gap: var(--space-5); }
  .nav__link { font-size: 12px; }

  .search-box__input:focus { width: 240px; }

  .hero__title { font-size: var(--fs-2xl); }

  .modal__body {
    grid-template-columns: 150px 1fr;
    gap: var(--space-5);
    padding: 0 var(--space-6) var(--space-7);
  }

  .episode {
    grid-template-columns: 220px 1fr;
  }

  .series__title { font-size: var(--fs-2xl); }
}

/* ═══════════════════════════════════════════════════════
   HD TV (1600–2199px)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  :root {
    --card-w: 220px;
    --gutter-x: 72px;
    --focus-ring-w: 4px;
  }

  .library__grid {
    gap: var(--space-7) var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════
   4K TV (≥ 2200px)
   ═══════════════════════════════════════════════════════ */

@media (min-width: 2200px) {
  :root {
    --container-max: 2400px;
    --card-w: 280px;
    --gutter-x: 96px;
    --header-height: 96px;
    --focus-ring-w: 5px;
    --fs-base: 18px;
  }

  body {
    font-size: 18px;
  }

  .hero {
    height: clamp(680px, 68vh, 960px);
  }

  .hero__title {
    font-size: clamp(80px, 6vw, 140px);
  }

  .brand__name { font-size: 30px; }
  .brand__hex { width: 40px; height: 40px; }

  .nav__link { font-size: 15px; }

  .btn {
    height: 62px;
    padding: 0 var(--space-7);
  }

  .card__title { font-size: var(--fs-md); }
  .card__sub { font-size: var(--fs-sm); }

  .section-row__title { font-size: var(--fs-2xl); }
}

/* ═══════════════════════════════════════════════════════
   FOCUS RING — more prominent when D-pad is in use
   ═══════════════════════════════════════════════════════ */

/* When the user is navigating with keyboard/remote, amp up the
   focus ring contrast. `.focused` is set by keyboard.js. */

[data-focusable].focused {
  position: relative;
  outline: var(--focus-ring-w) solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
  z-index: 1;
}

.card[data-focusable].focused .card__poster {
  outline: var(--focus-ring-w) solid var(--accent);
  outline-offset: 4px;
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--shadow-glow), 0 30px 60px rgba(0, 0, 0, 0.55), var(--shadow-inset);
}

.card[data-focusable].focused {
  outline: none;
}

.episode[data-focusable].focused {
  background: var(--surface-2);
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-md), 0 0 0 var(--focus-ring-w) var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════
   Orientation edge cases
   ═══════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  /* Compact landscape — phones in landscape, small laptops */
  .hero {
    height: clamp(340px, 92vh, 500px);
  }
  .hero__summary { -webkit-line-clamp: 2; line-clamp: 2; }
  .section-row { margin-top: var(--space-7); }
}

/* ═══════════════════════════════════════════════════════
   Hover-free inputs — finer details for touch devices
   ═══════════════════════════════════════════════════════ */

@media (hover: none) {
  .card:hover .card__poster { transform: none; }
  .card:hover .card__overlay { opacity: 0; }
  .episode:hover { transform: none; }
  .hero__controls { bottom: var(--space-5); }
}