/* ─── Mobiloptimering (leo 2026-10-08) ─────────────────────────────────────
   Kör som sista blocket i style.css. Två brytpunkter:
   - 780px: planshet/liten laptop (utökad variant av den gamla)
   - 480px: telefon (spelarkontroller staplas, touch-ytor ≥40px, grids 2-kol)
   Gällande regler: layouten ska inte hoppa — samma DOM, bara omstämning. */

@media (max-width: 780px) {
  .topnav-inner { padding: 0 16px; }
  .main-nav { gap: 0; }
  .nav-link { padding: 8px 9px; font-size: 13.5px; }
  .brand-word { display: none; }
  .hero-content, .row-title, .row-scroller, .search-head, .search-grid, .pl-head, .pl-grid, .pl-detail-head { padding-left: 16px; padding-right: 16px; }
  .media-card { width: 132px; }
  .hero { height: 56vh; min-height: 420px; }
  .row-scroller { scroll-snap-type: x mandatory; }
  .media-card { scroll-snap-align: start; }
}

@media (max-width: 480px) {
  /* Topnav: mindre brand, kompakta länkar */
  .topnav { height: 52px; }
  .nav-link { padding: 8px 8px; font-size: 12.5px; }
  .brand-mark { width: 26px; height: 26px; }

  /* Hem: hero + rader */
  .hero { height: 48vh; min-height: 360px; }
  .hero-content { padding-top: 12px; }
  .hero-title { font-size: 26px !important; }
  .row-title { font-size: 16px; }
  .media-card { width: 118px; }
  .media-card-title { font-size: 12px; }
  .row-scroller { gap: 10px; }

  /* Sök + spellistor: 2–3 kolumner, mindre padding */
  .search-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 10px; }
  .search-bar-xl { font-size: 16px !important; } /* ≥16px = iOS zoomar inte vid fokus */
  .search-bar-xl input { font-size: 16px !important; }
  .pl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pl-card { padding: 16px; }
  .pl-head h1, .pl-detail-head h1 { font-size: 22px; }

  /* Modals: kant-till-kant-ish */
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal { border-radius: 16px; max-height: 86vh; }

  /* ── Spelaren ── */
  .player-top { padding: 10px 12px; }
  .player-title-wrap h2 { font-size: 16px; }
  .watch-meta { font-size: 11.5px; gap: 8px; flex-wrap: wrap; }
  .player-bottom { padding: 0 10px 10px; }
  .seek-bar { height: 8px; } /* touch-mål */
  .seek-thumb { width: 20px; height: 20px; }

  /* Kontrollrad: volym-slider är meningslös på telefon → dölj, behåll mute.
     pc-left/pc-right tillåts wrappa i två rader istället för att hoppa ut. */
  .player-controls { flex-wrap: wrap; gap: 4px 6px; }
  .volume-group input#pp-vol { display: none; }
  .player-time { font-size: 11.5px; margin-left: 2px; }
  .player-btn { padding: 10px; } /* ≥40px touch-ytor */
  .player-btn svg { width: 22px; height: 22px; }

  /* Selects (Källa/Text/Kvalitet): full bredd i raden, större font */
  .quality-selector { gap: 4px; }
  .quality-selector label { display: none; } /* selecten berättar redan */
  .quality-selector select {
    max-width: 108px; font-size: 12px; padding: 8px 6px;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #9a9aad 50%), linear-gradient(135deg, #9a9aad 50%, transparent 50%);
    background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 20px;
  }

  /* Avsnittsgrid: 2-kolumner, kortare översikt */
  .episode-picker { padding: 14px; max-height: 78vh; }
  .ep-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ep-overview { display: none; }
  .ep-tab { padding: 6px 12px; font-size: 12px; }

  /* Info-panel: centrerad ruta istället för högerflytande */
  .player-info-panel { left: 12px; right: 12px; top: auto; bottom: 76px; max-width: none; padding: 14px; }

  /* Toasts: över kontrollerna */
  .toast-container { bottom: 90px; }
  .toast { max-width: 92vw; font-size: 13px; padding: 10px 16px; }

  /* Nedladdnings-chips: radbryt */
  .watch-downloads { flex-wrap: wrap; gap: 6px; }
}

/* Landskap på telefon: höjd-låg — dölj info-panel och minska topp */
@media (max-width: 900px) and (max-height: 480px) {
  .player-top { padding: 6px 12px; }
  .player-title-wrap h2 { font-size: 14px; }
  .player-info-panel { display: none; }
  .episode-picker { max-height: 86vh; }
}