/* ───────────────────────────────────────────────────────────────────────────
   Layout de toque (telefone e tablet). O app e desenhado num canvas fixo de
   1920 escalado por
   --app-scale, otimo para TV e desktop. Numa tela estreita isso encolhe tudo,
   entao aqui o canvas e desligado e o conteudo reflui: a navegacao vira barra
   inferior, a lateral de categorias vira faixa horizontal, e cada area mantem
   o proprio scroll para a virtualizacao de lista/grade continuar funcionando. Desktop (>=1024px) e TV (>=1920px) ficam intocados.

   O corte em 1023 e medido, nao escolhido: a 768px o canvas escalava para
   0.4, o que renderiza texto de 7.2px e alvo de toque de 10px. Tablet ficava
   entre dois mundos — largo demais para o layout de telefone antigo (640) e
   estreito demais para o canvas ser legivel.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  html { overflow: hidden; }

  /* Drop the 1920 canvas: render at device pixels, no shrink. */
  body {
    position: relative;
    width: 100vw;
    height: 100vh;
    /* dynamic vh: excludes the mobile address bar so nothing is cut. Phone-only
       (inside @media), so the Chrome-68 TV — which lacks dvh — never sees it. */
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
    transform: none;
    overflow: hidden;
    font-size: 15px;
  }

  .view {
    width: 100vw;
    height: 100vh;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
  }

  /* Stack: content on top, nav as a fixed bottom bar. */
  .home-shell,
  .channel-view {
    flex-direction: column;
    height: 100vh;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    height: 100dvh;
  }

  /* ── Bottom navigation bar ─────────────────────────────────────────────── */
  .nav-rail {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow: visible;
    z-index: 600;
  }
  .nav-rail-item {
    flex: 1;
    margin: 0;
    padding: 5px 1px;
    border-radius: 0;
    border: none;
    gap: 2px;
  }
  .nav-rail-icon { width: 22px; height: 22px; }
  .nav-rail-icon .icon { width: 20px; height: 20px; }
  .nav-rail-label { font-size: 13px; }
  .nav-rail-item.active { background: transparent; }
  .nav-rail-profile { margin-top: 0; }
  .nav-rail-avatar { width: 22px; height: 22px; font-size: 13px; }

  /* ── Home ──────────────────────────────────────────────────────────────── */
  .home-view {
    height: 100%;
    padding: 14px 12px 70px; /* bottom pad clears the nav bar */
  }
  .home-header { margin-bottom: 16px; }
  .home-title { font-size: 26px; }
  .home-upgrade {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .home-upgrade strong { font-size: 15px; }
  .home-search-btn { padding: 8px 14px; font-size: 15px; }
  .home-tiles { display: none; } /* shortcuts live in the bottom bar on phones */
  .home-rail { margin-bottom: 22px; }
  .home-rail-title { font-size: 17px; }
  /* Carousel: hide the side arrows on phones (auto-rotate + dots carry it). */
  .home-hero-arrow { display: none; }
  .home-hero-dots { right: 12px; bottom: 10px; }
  .home-card { width: 33vw; max-width: 150px; padding: 4px; }
  .home-card-thumb { height: 46vw; max-height: 210px; }
  .home-card-live .home-card-thumb { height: 22vw; max-height: 100px; }
  /* Let titles wrap to 2 lines instead of being cut off to one ellipsis word —
     unreadable on a ~115px card in portrait. */
  .home-card-title {
    font-size: 13px;
    margin-top: 6px;
    white-space: normal;
    display: -webkit-box;
    /* stylelint-disable-next-line value-no-vendor-prefix, property-no-vendor-prefix */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
    min-height: 2.5em;
  }
  .resume-remove { width: 30px; height: 30px; font-size: 15px; opacity: 1; } /* always tappable */

  /* ── Browser (Live / Movies / Series / +18) ────────────────────────────── */
  /* Category sidebar → a compact strip at the top (block, NOT a growing flex
     column), so it can never push the content off-screen. Chips scroll
     horizontally; the content area below takes the rest of the height. */
  .sidebar {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    overflow: visible;
    padding: 8px 10px 4px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-header { margin-bottom: 6px; }
  .sidebar-title h2 { font-size: 20px; }
  .channel-count { font-size: 13px; }
  .group-list,
  .playlist-tabs {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 2px 0 6px;
  }
  .group-item {
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 12px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
  }
  .group-item .group-count { display: none; }
  .group-item .group-name { font-size: 13px; white-space: nowrap; }

  .channel-main {
    flex: 1 1 0; /* basis 0 → fills the height left by the sidebar (matches Home) */
    min-height: 0;
    padding: 8px 10px 64px; /* bottom pad clears the nav bar */
  }
  .channel-search { margin-bottom: 8px; }
  .channel-search-input { font-size: 16px; padding: 10px 12px; }

  /* Grid poster titles: wrap to 2 readable lines instead of one cut-off word. */
  .poster-title {
    font-size: 13px;
    white-space: normal;
    display: -webkit-box;
    /* stylelint-disable-next-line value-no-vendor-prefix, property-no-vendor-prefix */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
  }

  /* Detail (movie/series) stacks the poster above the meta. */
  .series-detail,
  .movie-detail { flex-direction: column; gap: 14px; }
  .series-detail-poster { width: 50vw; max-width: 200px; margin: 0 auto; }
  .series-detail-title { font-size: 22px; }

  /* ── Settings / Account ────────────────────────────────────────────────── */
  .settings-view { padding: 14px 12px 70px; height: 100%; }
  .settings-title { font-size: 26px; }
  .settings-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .playlist-header-row { display: none; } /* column labels make no sense stacked */
  .xtream-fields { flex-direction: column; }
  .settings-input { font-size: 16px; padding: 12px; } /* ≥16px avoids iOS zoom-on-focus */
  .playlist-add-buttons { flex-direction: column; }
  .upload-section { flex-direction: column; }

  .account-box { width: 92vw; padding: 28px 20px; }
  .account-box-wide { min-width: 0; }
  .account-input { font-size: 16px; }
  .account-brand-panel { display: none; }
  .account-login-box { width: 92vw; padding: 30px 22px 24px; }
  .account-login-heading h2 { font-size: 26px; }
  .account-login-heading p { font-size: 15px; }
  .profile-grid { gap: 16px; }
  .profile-avatar { width: 96px; height: 96px; font-size: 44px; }

  /* ── Player ────────────────────────────────────────────────────────────── */
  #view-player { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
  .player-sidebar { width: 84vw; }

  /* On-screen display (channel info + transport) scaled down from TV sizes. */
  .player-osd {
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
  }
  .osd-channel { gap: 10px; margin-bottom: 6px; }
  .osd-channel-number { font-size: 22px; min-width: 32px; }
  .osd-channel-logo { width: 30px; height: 30px; }
  .osd-channel-name { font-size: 16px; }
  .osd-now-label,
  .osd-next-label { font-size: 13px; }
  .osd-programme-detail { gap: 10px; }
  .osd-programme-icon { width: 60px; height: 40px; }
  .osd-programme-title { font-size: 15px; }
  .osd-programme-time,
  .osd-remaining,
  .osd-time-current,
  .osd-time-end,
  .osd-next-time { font-size: 13px; }
  .osd-description,
  .osd-next-title { font-size: 13px; }
  .osd-message { font-size: 15px; }

  /* Transport buttons: smaller, but still finger-friendly. */
  .osd-transport { gap: 8px; flex-wrap: wrap; }
  .osd-btn { min-width: 46px; height: 44px; font-size: 17px; }
  .osd-btn-play { min-width: 56px; font-size: 20px; }
  .osd-back { min-width: 44px; height: 44px; font-size: 22px; }
  .osd-progress[data-seekbar] { height: 28px; }

  /* ── Landing publica ───────────────────────────────────────────────────────
     Ela nunca teve versao de toque: as classes .public-* foram desenhadas para
     o canvas de 1920 e, com o canvas desligado, 34 elementos ficavam cortados
     a 320px (medido) — cortados, nao rolaveis, porque o body e overflow:hidden.
     Aqui a grade vira coluna unica, os tamanhos fixos viram fluidos e os alvos
     de toque sobem para 48px. */
  .public-landing { padding: 20px 16px 40px; }

  .public-landing img { max-width: 100%; height: auto; }

  .public-header {
    flex-wrap: wrap;
    gap: 14px;
    max-width: none;
  }
  .public-brand { gap: 12px; }
  .public-brand img { width: 44px; height: 44px; }
  .public-brand strong { font-size: 24px; }
  .public-brand span { font-size: 15px; }

  /* O menu quebra para a linha de baixo e ocupa a largura toda, em vez de
     espremer dois botoes ao lado da marca. */
  .public-nav {
    width: 100%;
    gap: 10px;
  }
  .public-nav > * {
    flex: 1 1 0;
    min-height: 48px;
    justify-content: center;
  }

  .public-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .public-copy h1 {
    margin-top: 18px;
    /* 8vw acompanha a tela; o teto de 48px impede titulo gigante no celular e
       o piso de 30px mantem hierarquia sobre o corpo de 17px. */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    font-size: clamp(30px, 8vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }
  .public-copy p { font-size: 17px; }
  .public-eyebrow { font-size: 13px; }

  .public-actions { gap: 12px; margin-top: 24px; }
  .public-actions .public-button {
    flex: 1 1 240px;
    min-height: 52px;
    justify-content: center;
  }
  .public-price-row { gap: 10px; font-size: 15px; }
  .public-hero-downloads { font-size: 15px; margin-top: 14px; }
  .public-hero-downloads > * { min-height: 44px; display: inline-flex; align-items: center; }

  .public-product-card { padding: 12px; }
  .public-mini-shots { gap: 10px; }

  /* Grades fixas viram coluna unica; o tablet reabre para duas mais abaixo. */
  .public-trust,
  .public-download-cards,
  .public-device-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  /* Item de grid nao encolhe abaixo do proprio conteudo por padrao
     (min-width: auto), entao o rotulo do botao "Baixar para PC (.exe)" fixava
     uma largura minima e o cartao estourava 7px a 320px. */
  .public-download-cards > *,
  .public-trust > *,
  .public-device-grid > *,
  .public-mini-shots > * { min-width: 0; }

  .public-downloads { padding: 22px 14px; }

  /* Tela de conta: a caixa mede 584px de altura. Num aparelho de 568px ela ia
     de -8 a 576 com a view em overflow visible — o formulario ficava cortado e
     inalcancavel, porque o body e overflow:hidden. Agora a view rola. */
  .account-view {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }
  .account-box,
  .account-login-box {
    /* align-self: center na caixa vencia o align-items do container: com a
       caixa mais alta que a tela ela comecava 8px ACIMA do topo, e nao existe
       rolar para cima de zero — o topo do formulario ficava inalcancavel. */
    align-self: flex-start;
    margin: 16px auto;
  }

  /* Modal de screenshot: cabe no viewport e o botao de fechar vira alvo de dedo. */
  .public-lightbox { padding: 12px; }
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  .public-lightbox img { max-width: 100%; max-height: 78dvh; height: auto; }
  .public-lightbox-close { min-width: 48px; min-height: 48px; }

  /* ── Telas legais ──────────────────────────────────────────────────────── */
  .legal-card { padding: 20px 16px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Tablet (768–1023px). Mesmo layout de toque do telefone, com a folga que a
   tela maior permite: duas colunas onde o telefone usa uma, cartaz maior,
   linha de ajuste voltando a caber lado a lado. Nada aqui alcanca desktop
   (>=1024) nem TV (>=1920).
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Navegacao: a barra inferior ganha altura e rotulo legivel de perto. */
  .nav-rail { height: 64px; }
  .nav-rail-icon { width: 26px; height: 26px; }
  .nav-rail-icon .icon { width: 24px; height: 24px; }
  .nav-rail-label { font-size: 15px; }
  .nav-rail-avatar { width: 26px; height: 26px; font-size: 15px; }

  /* Home: cartaz maior porque cabe, e os atalhos voltam (no telefone eles
     vivem so na barra inferior por falta de espaco). */
  .home-view { padding: 18px 20px 84px; }
  .home-title { font-size: 30px; }
  .home-rail-title { font-size: 20px; }
  .home-card { width: 23vw; max-width: 210px; }
  .home-card-thumb { height: 31vw; max-height: 290px; }
  .home-card-live .home-card-thumb { height: 15vw; max-height: 140px; }
  .home-tiles { display: flex; }

  /* Lista de canais: a faixa de categorias respira. */
  .group-item .group-name { font-size: 15px; }
  .poster-title { font-size: 15px; }

  /* Ajustes: com 768px a linha volta a caber em duas colunas. */
  .settings-view { padding: 20px 24px 84px; }
  .settings-row { flex-direction: row; align-items: center; gap: 16px; }
  .playlist-header-row { display: flex; }
  .xtream-fields { flex-direction: row; }

  /* Conta: caixa com largura de leitura, nao 92vw. */
  .account-box { width: 92vw; max-width: 560px; }
  .account-login-box { width: 92vw; max-width: 520px; }

  /* Landing: duas colunas onde o telefone usa uma. */
  .public-landing { padding: 28px 32px 48px; }
  .public-nav { width: auto; }
  .public-nav > * { flex: 0 0 auto; }
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  .public-copy h1 { font-size: clamp(40px, 6vw, 60px); }
  .public-copy p { font-size: 19px; }
  .public-trust,
  .public-download-cards,
  .public-device-grid { grid-template-columns: repeat(2, 1fr); }
}