/* ============================================================================
   PREVIOUSLY — Live TV MOBILE EXPERIENCE LAYER (2026-10-12, James: "not just
   a long scrolling list — a more creative, immersive experience" on phone).

   Self-contained layer: every rule is scoped to `body.pvlm`, a class that
   livetv-mobile.js adds ONLY on phones (<=640px wide, or landscape phones
   <=500px tall / <=1024px wide), and every rule lives inside a max-width
   media query. Desktop (>=1025px) can never match: the cinema stage + guide
   sidebar layout is untouched by construction.

   Bible identity throughout: cream paper, ink, Bible red #E10600, Previously Display,
   hairline rules, rectangular badges, underline tabs — NO pills.
   ============================================================================ */

/* ---------- shared component styles (elements exist only when JS runs) --- */
@media (max-width:1024px){

  /* ---- ON NOW ribbon ---- */
  body.pvlm .pvlm-ribbon-wrap{margin:16px 0 0;position:relative;z-index:6;background:var(--bible-bg,#000000)}
  /* The base stylesheet makes .pv-hero sticky under 900px, but it is trapped
     inside its parent and ends up painting over the ribbon while scrolling.
     The mini-stage is the pinned player now — the hero scrolls naturally. */
  body.pvlm .pv-hero{position:static}
  body.pvlm .pvlm-ribbon-k{
    display:flex;align-items:center;gap:7px;margin:0 2px 9px;
    font:800 10.5px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    letter-spacing:.18em;text-transform:uppercase;color:var(--bible-red,#E10600);
  }
  body.pvlm .pvlm-ribbon-k i{
    width:7px;height:7px;border-radius:50%;flex:none;
    background:var(--bible-red,#E10600);animation:pvlm-pulse 2s ease-in-out infinite;
  }
  @keyframes pvlm-pulse{0%,100%{opacity:1}50%{opacity:.35}}
  body.pvlm .pvlm-ribbon{
    display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
    margin:0 calc(-1 * var(--pv-gutter-sm,20px));
    padding:2px var(--pv-gutter-sm,20px) 10px;
  }
  body.pvlm .pvlm-ribbon::-webkit-scrollbar{display:none}
  body.pvlm .pvlm-chip{
    flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:9px;
    max-width:248px;padding:7px 12px 7px 8px;cursor:pointer;text-align:left;
    font:inherit;color:var(--bible-ink,#211910);
    background:var(--bible-card,#101010);
    border:1px solid var(--bible-rule,#E7DCC4);border-radius:10px;
    box-shadow:0 6px 16px rgba(33,25,16,.07);
  }
  body.pvlm .pvlm-chip:active{background:rgba(192,57,27,.06)}
  body.pvlm .pvlm-chip.is-active{box-shadow:inset 0 0 0 1px rgba(192,57,27,.5),0 6px 16px rgba(33,25,16,.07)}
  body.pvlm .pvlm-chip-logo{
    width:48px;height:29px;flex:none;border-radius:6px;overflow:hidden;position:relative;
    background:#fff;border:1px solid var(--bible-rule,#E7DCC4);
    display:flex;align-items:center;justify-content:center;
    font:800 14px var(--bible-serif,'Previously Display',Georgia,serif);color:var(--bible-ink,#211910);
  }
  body.pvlm .pvlm-chip-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
  body.pvlm .pvlm-chip-meta{display:flex;flex-direction:column;gap:1px;min-width:0}
  body.pvlm .pvlm-chip-name{
    font-size:12.5px;font-weight:700;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-chip-now{
    font-size:11px;line-height:1.3;color:var(--bible-ink-dim,#6B5D4F);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ---- Browse / Guide tabs: underline, never pills ---- */
  body.pvlm .pvlm-tabs{
    display:flex;gap:28px;margin:20px 0 2px;padding:0 2px;
    border-bottom:1px solid var(--bible-rule,#E7DCC4);
  }
  body.pvlm .pvlm-tab{
    appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
    font:800 12px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--bible-ink-dim,#6B5D4F);
    padding:0 2px 12px;position:relative;
  }
  body.pvlm .pvlm-tab::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--bible-red,#E10600);
    transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
  }
  body.pvlm .pvlm-tab[aria-selected="true"]{color:var(--bible-ink,#211910)}
  body.pvlm .pvlm-tab[aria-selected="true"]::after{transform:scaleX(1)}

  /* ---- GUIDE view: dense rows ---- */
  body.pvlm .pvlm-guide{display:none;margin-top:2px}
  body.pvlm.pvlm-guide-on .pvlm-guide{display:block}
  body.pvlm.pvlm-guide-on section.block[data-lane]{display:none}
  body.pvlm.pvlm-guide-on .pv-catnav{display:none}
  body.pvlm .pvlm-g-genre{
    font:800 11px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    letter-spacing:.16em;text-transform:uppercase;color:var(--bible-ink-dim,#6B5D4F);
    margin:20px 2px 4px;padding-top:16px;
    border-top:1px solid var(--bible-rule,#E7DCC4);
  }
  body.pvlm .pvlm-g-genre:first-child{border-top:0;padding-top:6px;margin-top:8px}
  body.pvlm .pvlm-g-row{
    display:flex;align-items:center;gap:11px;width:100%;
    padding:7px 6px;border:0;border-bottom:1px solid rgba(33,25,16,.07);
    border-radius:8px;background:transparent;cursor:pointer;text-align:left;
    font:inherit;color:var(--bible-ink,#211910);
  }
  body.pvlm .pvlm-g-row:active{background:rgba(192,57,27,.06)}
  body.pvlm .pvlm-g-row.is-active{
    background:rgba(192,57,27,.09);
    box-shadow:inset 0 0 0 1px rgba(192,57,27,.45);
  }
  body.pvlm .pvlm-g-num{
    flex:none;min-width:36px;
    font:700 10.5px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    color:var(--bible-red,#E10600);white-space:nowrap;
  }
  body.pvlm .pvlm-g-logo{
    width:58px;height:34px;flex:none;border-radius:7px;overflow:hidden;position:relative;
    background:#fff;border:1px solid var(--bible-rule,#E7DCC4);
    display:flex;align-items:center;justify-content:center;
    font:800 15px var(--bible-serif,'Previously Display',Georgia,serif);color:var(--bible-ink,#211910);
  }
  body.pvlm .pvlm-g-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;background:#fff}
  body.pvlm .pvlm-g-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  body.pvlm .pvlm-g-name{
    font-size:13.5px;font-weight:650;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-g-sub{
    font-size:11.5px;line-height:1.3;color:var(--bible-ink-dim,#6B5D4F);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-g-now{
    font-size:12px;line-height:1.35;color:var(--bible-ink-soft,#4A4036);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-g-next{
    font-size:11px;line-height:1.3;color:var(--bible-ink-dim,#6B5D4F);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-g-prog{
    height:3px;border-radius:2px;overflow:hidden;margin-top:4px;
    background:rgba(33,25,16,.12);
  }
  body.pvlm .pvlm-g-prog i{display:block;height:100%;background:var(--bible-red,#E10600)}
  body.pvlm .pvlm-g-row .badge{flex:none}

  /* ---- STICKY MINI-STAGE: the player pins to the top while browsing ---- */
  body.pvlm #livetvHero{scroll-margin-top:6px}
  body.pvlm .pvlm-mini-info,body.pvlm .pvlm-mini-expand{display:none}
  body.pvlm .pv-theater-player.pvlm-mini{
    position:fixed;left:0;right:0;top:0;z-index:120;
    display:flex;align-items:center;gap:10px;
    height:74px;padding:7px 10px;box-sizing:border-box;
    background:#171310;color:#F7F1E6;
    box-shadow:0 12px 32px rgba(20,10,4,.40);
    animation:pvlm-drop .22s ease-out;
  }
  @keyframes pvlm-drop{from{transform:translateY(-100%)}to{transform:none}}
  body.pvlm .pvlm-mini .pv-hero-stage{
    flex:0 0 107px;width:107px;height:60px;aspect-ratio:auto;
    border-radius:8px;box-shadow:none;background:#000;
  }
  body.pvlm .pvlm-mini .pv-hero-bar,
  body.pvlm .pvlm-mini .pv-hero-sub,
  body.pvlm .pvlm-mini .pv-hero-sound,
  body.pvlm .pvlm-mini .pv-hero-mute,
  body.pvlm .pvlm-mini .pv-hero-loading{display:none!important}
  body.pvlm .pvlm-mini .pvlm-mini-info{
    display:flex;flex:1;min-width:0;flex-direction:column;gap:2px;cursor:pointer;
  }
  body.pvlm .pvlm-mini-live{
    display:flex;align-items:center;gap:6px;
    font:800 9.5px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    letter-spacing:.15em;color:#FF7A57;
  }
  body.pvlm .pvlm-mini-live i{
    width:6px;height:6px;border-radius:50%;background:#FF7A57;flex:none;
    animation:pvlm-pulse 2s ease-in-out infinite;
  }
  body.pvlm .pvlm-mini-name{
    font:700 13.5px/1.2 var(--bible-serif,'Previously Display',Georgia,serif);color:#F7F1E6;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-mini-now{
    font-size:11px;line-height:1.25;color:rgba(247,241,230,.66);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.pvlm .pvlm-mini .pvlm-mini-expand{
    display:block;flex:none;cursor:pointer;
    font:800 9.5px var(--bible-sans,'Inter',-apple-system,'Segoe UI',sans-serif);
    letter-spacing:.13em;color:#F7F1E6;
    border:1px solid rgba(247,241,230,.45);border-radius:8px;padding:8px 9px;
    background:transparent;
  }
  @media (prefers-reduced-motion:reduce){
    body.pvlm .pv-theater-player.pvlm-mini{animation:none}
    body.pvlm .pvlm-ribbon-k i,body.pvlm .pvlm-mini-live i{animation:none}
    body.pvlm .pvlm-tab::after{transition:none}
  }
}

/* ---------- portrait phone: rails, not a list --------------------------- */
@media (max-width:640px){
  /* tight sections: kill the dead cream between rails */
  body.pvlm .block{margin-top:30px;padding-top:24px}
  body.pvlm .block-head{margin-bottom:10px}
  body.pvlm .block-head h2{font-size:21px}
  body.pvlm .kicker2{font-size:10.5px;margin-bottom:4px}

  /* compact logo-forward snap rails */
  body.pvlm .rail{
    display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--pv-gutter-sm,20px));
    padding:2px var(--pv-gutter-sm,20px) 12px;
    -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 93%,transparent 100%);
  }
  body.pvlm .rail::-webkit-scrollbar{display:none}
  body.pvlm .pv-cardwrap{flex:0 0 116px;scroll-snap-align:start;min-width:0}
  body.pvlm .chtile{width:100%;scroll-margin-top:84px}
  body.pvlm .chtile-art{border-radius:10px}
  body.pvlm .chtile-art img{padding:11% 12%}
  body.pvlm .chtile-meta{padding:7px 2px 0}
  body.pvlm .chtile-name{
    font-size:12.5px;line-height:1.3;font-weight:650;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.pvlm .chtile-genre{font-size:11px;margin-top:2px}
  body.pvlm .chtile-badge{top:6px;left:6px}
  body.pvlm .chtile-badge .badge{height:18px;padding:0 7px;font-size:8.5px;border-radius:4px}

  /* slimmer now-playing bar under the stage */
  body.pvlm .pv-nowbar{gap:10px;margin-top:12px}
  body.pvlm .pv-nowbar-logo{width:64px}
  body.pvlm .pv-nowbar-name{font-size:17px}
  body.pvlm .pv-nowbar-sub{display:none}
  body.pvlm .pv-remote-btn{width:42px;height:42px}

  /* hero stage: full-bleed on phone for the immersive feel */
  body.pvlm .pv-cinema .pv-theater-player .pv-hero-stage{border-radius:12px}
  body.pvlm .pv-hero-sub{padding:8px 2px 0;font-size:12px}
}

/* ---------- landscape phone: same layer, slightly larger cards ---------- */
@media (max-height:500px) and (max-width:1024px){
  body.pvlm .block{margin-top:26px;padding-top:20px}
  body.pvlm .block-head{margin-bottom:10px}
  body.pvlm .rail{
    display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--pv-gutter-sm,20px));
    padding:2px var(--pv-gutter-sm,20px) 12px;
  }
  body.pvlm .rail::-webkit-scrollbar{display:none}
  body.pvlm .pv-cardwrap{flex:0 0 150px;scroll-snap-align:start;min-width:0}
  body.pvlm .chtile{width:100%}
  body.pvlm .chtile-meta{padding:7px 2px 0}
  body.pvlm .chtile-name{
    font-size:12.5px;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  body.pvlm .chtile-genre{font-size:11px;margin-top:2px}
  body.pvlm .pv-nowbar-sub{display:none}
}