/* ==========================================================================
   Responsive rules — mobile is a first-class layout, not a shrunk desktop.
   Breakpoints: ≤1024 (tablet), ≤768 (phone), ≤480 (small phone), ≤360.
   ========================================================================== */

/* ---------- ≤1280: tighter desktop ---------- */
@media (max-width: 1280px) {
  :root { --card-w: 156px; }
  .detail-content { grid-template-columns: minmax(0, 1fr) 280px; }
  .player-under { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------- ≤1024: tablet ---------- */
@media (max-width: 1024px) {
  :root { --card-w: 148px; }
  .nav a { padding: 8px 9px; font-size: .9rem; }
  .hdr-search input { width: 200px; }
  .hdr-search input:focus { width: 260px; }
  .detail-wrap { grid-template-columns: 220px 1fr; gap: 26px; }
  .detail-content { grid-template-columns: 1fr; }
  .player-under { grid-template-columns: 1fr; }
  .ep-mini-list { max-height: none; }
  .hero { height: min(66vh, 600px); }
}

/* ---------- ≤768: phone layout ---------- */
@media (max-width: 768px) {
  :root { --card-w: 128px; --hdr-h: 58px; --gutter: 16px; }
  body { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
  .mobile-only { display: inline-flex !important; }
  .desktop-only { display: none !important; }
  .hdr-in { gap: 8px; }
  .nav, .hdr .btn-register-desktop { display: none; }
  .hdr-search { display: none; }
  .hdr-search.open { display: flex; position: fixed; top: var(--hdr-h); left: 0; right: 0; padding: 10px var(--gutter); background: var(--bg-2); border-bottom: 1px solid var(--line); z-index: 520; }
  .hdr-search.open input, .hdr-search.open input:focus { width: 100%; max-width: none; }
  .hdr-search.open button { inset-inline-end: calc(var(--gutter) + 4px); top: 14px; }
  .hdr-search.open .search-suggest { position: fixed; top: calc(var(--hdr-h) + 62px); inset-inline: var(--gutter); width: auto; }
  .hdr-actions .profile-name, .hdr-actions .lang-btn { display: none; }
  .hdr.solid, .hdr.scrolled { background: rgba(10, 10, 18, .94); }
  .bnav { display: flex; }
  .toast-container { bottom: calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom)); inset-inline: 16px; max-width: none; }
  .next-episode { inset-inline: 12px; bottom: calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom)); max-width: none; }

  /* hero: portrait-style; the active slide flows in-document so the text can never be clipped */
  .hero { height: auto; min-height: 0; aspect-ratio: auto; max-height: none; }
  .hero-slide.active { position: relative; }
  .hero-body { position: relative; inset: auto; bottom: auto; padding: min(46vh, 340px) var(--gutter) 52px; max-width: none; }
  .hero-bg { background-position: center 25%; }
  .hero-bg::after { background: linear-gradient(to top, var(--bg) 0%, var(--scrim-strong) 30%, rgba(10, 13, 15, .25) 60%, rgba(10, 13, 15, .5) 100%); }
  [dir="rtl"] .hero-bg::after { background: linear-gradient(to top, var(--bg) 0%, var(--scrim-strong) 30%, rgba(10, 13, 15, .25) 60%, rgba(10, 13, 15, .5) 100%); }
  .hero-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .hero-desc { -webkit-line-clamp: 2; font-size: .92rem; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 0; }
  .hero-nav { bottom: 12px; inset-inline: var(--gutter); justify-content: center; }
  .hero-arrow { display: none; }
  .hero-dots button { width: 18px; }
  .hero-plain { aspect-ratio: auto; padding: 110px var(--gutter) 40px; }

  .section { margin-bottom: 30px; }
  .row-arrow { display: none; }
  .last-watched { min-height: 170px; }
  .lw-body { padding: 20px; }
  .lw-body strong { font-size: 1.15rem; }

  /* detail page: stacked mobile layout */
  .detail-hero { min-height: 0; background-position: center top; }
  .detail-hero::after { background: linear-gradient(to top, var(--bg) 0%, var(--scrim-strong) 35%, rgba(10, 13, 15, .5) 100%); }
  .detail-wrap { grid-template-columns: 1fr; gap: 16px; padding: calc(var(--hdr-h) + 150px) var(--gutter) 22px; align-items: start; }
  .detail-poster { width: 132px; }
  .detail-title { font-size: 1.6rem; }
  .detail-meta { font-size: .85rem; }
  .detail-actions .btn { flex: 1 1 auto; }
  .detail-content { padding-top: 20px; gap: 24px; }
  .facts { grid-template-columns: 1fr; }
  .episode-card { grid-template-columns: 1fr; gap: 0; }
  .episode-body { padding: 12px 14px 14px; }
  [dir="rtl"] .episode-body { padding: 12px 14px 14px; }
  .episode-body .btn { align-self: stretch; }
  .season-select { width: 100%; }
  .season-select select { width: 100%; }
  .section-head { flex-wrap: wrap; }

  /* player: edge-to-edge video, stacked panels */
  .player-top { padding: 10px 0 8px; }
  .player-crumb { font-size: .8rem; }
  .player-frame { border-radius: 0; margin-inline: calc(-1 * var(--gutter)); width: auto; box-shadow: none; }
  .player-under { margin-top: 14px; gap: 18px; }
  .player-actions .btn { flex: 1 1 auto; min-width: 0; }
  .ep-nav { flex-direction: row; }

  /* misc */
  .auth-card { padding: 26px 20px; border-radius: var(--r-md); }
  /* The pairing card gives its side padding back to the digit boxes so six of
     them still fit across a narrow phone without shrinking too far. */
  .tv-pair-card { padding-inline: 14px; }
  .avatar-lg { width: 84px; height: 84px; font-size: 2rem; border-radius: 18px; }
  .profile-tile { width: 100px; }
  .profile-grid { gap: 20px 14px; }
  .list-item { flex-wrap: wrap; }
  .list-item > form, .list-item > .btn { margin-inline-start: auto; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { margin-top: 8px; }
  .panel { padding: 18px; }
  .ftr { padding-top: 28px; }
  .ftr-in { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ftr-brand { grid-column: 1 / -1; }
  .search-bar .btn span { display: none; }
  .search-bar .btn { width: 46px; padding: 0; justify-content: center; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
}

/* ---------- ≤480: small phones ---------- */
@media (max-width: 480px) {
  .ftr-in { grid-template-columns: 1fr; gap: 18px; }
  :root { --card-w: 112px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .detail-wrap { padding-top: calc(var(--hdr-h) + 120px); }
  .detail-poster { width: 116px; }
  .grid { gap: 14px 10px; }
  .btn { padding-inline: 16px; }
  .btn-lg { height: 48px; }
}

/* ---------- ≤360: very small phones ---------- */
@media (max-width: 360px) {
  :root { --card-w: 104px; --gutter: 12px; }
  .hdr-actions { gap: 0; }
  .icon-btn { width: 36px; height: 36px; }
  .bnav a, .bnav button { font-size: .62rem; }
  .hero-title { font-size: 1.4rem; }
}

/* landscape phones: keep the player fully visible */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .watch-page .bnav { display: none; }
  .watch-page body { padding-bottom: 0; }
  .player-frame { max-height: calc(100vh - var(--hdr-h) - 40px); }
}

/* ---------- rebuild additions ---------- */
@media (max-width: 1024px) {
  .lp-hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 24px; }
  .lp-hero .hero-actions { justify-content: center; }
  .lp-lead { margin-inline: auto; }
  .lp-art { max-width: 560px; margin: 0 auto; width: 100%; }
  .lp-steps { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  /* The account navigation becomes one horizontal strip: the TV-mode entry
     leads it, then the sections scroll beside it rather than stacking. */
  .settings-nav { position: static; flex-direction: row; align-items: center; overflow-x: auto; scrollbar-width: none; }
  .settings-nav-list { flex-direction: row; }
  .settings-nav a { white-space: nowrap; }
  .settings-tv { margin-bottom: 0; margin-inline-end: 8px; flex: none; }
  .settings-tv .ico:last-child { display: none; }
  .sub-hero { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .lp-section { padding: 36px 0; }
  .lp-screen { transform: none; inset: 0 6% 12% 0; }
  .lp-features { grid-template-columns: 1fr 1fr; }
  .device-grid { grid-template-columns: 1fr; }
  .tabs-lg button { padding: 10px 12px; font-size: .9rem; }
  .minimal-main { padding: 40px 16px 20px; justify-content: flex-start; }
  .picker-page .minimal-main { justify-content: center; }
  .steps-mini li { font-size: .68rem; }
  .sub-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .lp-features { grid-template-columns: 1fr; }
  .lp-phone { display: none; }
  .lp-screen { inset: 0; }
}