/* CineREEL 44.17.1 — authoritative device layout + 10-foot icon sizing overrides */

/* Device Lab profiles must never inherit another mode's navigation surface. */
html[data-cr-device-kind="mobile"] body:not(.tv) .cr-tv-rail,
html[data-cr-device-kind="tablet"] body:not(.tv) .cr-tv-rail,
html[data-cr-device-kind="desktop"] body:not(.tv) .cr-tv-rail{display:none!important}
html[data-cr-device-kind="mobile"] body:not(.tv),
html[data-cr-device-kind="tablet"] body:not(.tv){overflow-x:hidden!important}

/* Device Lab cannot change Chrome's real pointer media features. Treat forced
   phone/tablet profiles as touch-first even when the host PC has a mouse. */
body.cr-emulated-touch .media-card:hover .landscape img,
body.cr-emulated-touch .actor-card:hover,
body.cr-emulated-touch .episode-card:hover,
body.cr-emulated-touch .btn:hover{transform:none!important}
body.cr-emulated-touch .cr412-card-hover{display:none!important}

/* ---------------- 10-foot / Smart TV ---------------- */
body.tv{
  --cr-tv-icon-xs:clamp(24px,1.35vw,30px);
  --cr-tv-icon-sm:clamp(27px,1.55vw,34px);
  --cr-tv-icon-md:clamp(30px,1.8vw,40px);
  --cr-tv-control:clamp(58px,3.5vw,72px);
  --cr-tv-rail-w:clamp(82px,4.8vw,96px);
}
body.tv .header .navitem{min-height:var(--cr-tv-control)!important;padding-inline:clamp(18px,1.3vw,28px)!important}
body.tv .header .navitem svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important;flex:0 0 var(--cr-tv-icon-sm)!important}
body.tv .header .iconbtn{width:var(--cr-tv-control)!important;height:var(--cr-tv-control)!important;min-width:var(--cr-tv-control)!important;min-height:var(--cr-tv-control)!important}
body.tv .header .iconbtn svg{width:var(--cr-tv-icon-md)!important;height:var(--cr-tv-icon-md)!important}
body.tv .brandmark-img{width:clamp(50px,3vw,64px)!important;height:clamp(50px,3vw,64px)!important}
body.tv .brand span{font-size:clamp(27px,1.7vw,34px)!important}

body.tv .cr-tv-rail{width:var(--cr-tv-rail-w)!important;padding:calc(var(--cr-header-h) + 12px) 10px 22px!important;gap:clamp(9px,1vh,14px)!important}
body.tv .cr-tv-rail button{width:calc(var(--cr-tv-rail-w) - 22px)!important;height:calc(var(--cr-tv-rail-w) - 22px)!important;min-width:56px!important;min-height:56px!important;border-radius:16px!important}
body.tv .cr-tv-rail button svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important;stroke-width:1.9!important}
body.tv .header{padding-left:calc(var(--cr-tv-rail-w) + 26px)!important}
body.tv .page,body.tv .cr-page,body.tv .feature-page{padding-left:calc(var(--cr-tv-rail-w) + 30px)!important}

body.tv .hero-copy .btn svg,body.tv .detail-copy .btn svg{width:var(--cr-tv-icon-xs)!important;height:var(--cr-tv-icon-xs)!important;flex:0 0 var(--cr-tv-icon-xs)!important}
body.tv .browse-icon .square svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important}
body.tv .personal>svg,body.tv .adsrow>svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important;flex:0 0 var(--cr-tv-icon-sm)!important}
body.tv .detail-back,body.tv .detail-home,body.tv .detail-mute,body.tv .to-top{width:var(--cr-tv-control)!important;height:var(--cr-tv-control)!important;min-width:var(--cr-tv-control)!important;min-height:var(--cr-tv-control)!important}
body.tv .detail-back svg,body.tv .detail-home svg,body.tv .detail-mute svg,body.tv .to-top svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important}
body.tv .detail-home{left:calc(max(22px,var(--cr-safe-left)) + var(--cr-tv-control) + 12px)!important}

body.tv #cr37Player .cr37-btn{min-width:var(--cr-tv-control)!important;height:var(--cr-tv-control)!important;font-size:clamp(13px,1vw,18px)!important;border-radius:14px!important}
body.tv #cr37Player .cr37-btn svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important}
body.tv #cr37Player .cr37-back{width:var(--cr-tv-control)!important;height:var(--cr-tv-control)!important}
body.tv #cr37Player .cr37-back svg{width:var(--cr-tv-icon-sm)!important;height:var(--cr-tv-icon-sm)!important}
body.tv #cr37Player .cr37-drawer-close{width:54px!important;height:54px!important}
body.tv #cr37Player .cr37-drawer-close svg{width:27px!important;height:27px!important}

/* Small-TV CSS viewports (some Android/Google TV WebViews expose ~960x540 CSS px). */
@media (max-width:1100px) and (min-width:761px){
  body.tv{--cr-header-h:76px;--cr-page-x:max(42px,4vw);--cr-tv-control:54px;--cr-tv-rail-w:74px;--cr-tv-icon-xs:22px;--cr-tv-icon-sm:26px;--cr-tv-icon-md:29px}
  body.tv .hero{min-height:540px!important;height:86vh!important}
  body.tv .hero-copy{width:min(650px,68vw)!important;bottom:12%!important}
  body.tv .hero-title{font-size:clamp(44px,5.5vw,64px)!important}
  body.tv .hero-desc{font-size:16px!important;line-height:1.45!important}
  body.tv .section-title{font-size:25px!important}
  body.tv .row-scroll{grid-auto-columns:minmax(280px,31vw)!important;gap:16px!important}
  body.tv .top10 .row-scroll{grid-auto-columns:minmax(185px,19vw)!important}
  body.tv .detail-hero{min-height:540px!important;height:86vh!important}
  body.tv .detail-logo-title{font-size:clamp(46px,5.5vw,66px)!important}
  body.tv .detail-desc{font-size:16px!important}
  body.tv .browse-menu{width:min(390px,46vw)!important;max-height:calc(100vh - 92px)!important}
}

/* ---------------- Phones ---------------- */
@media (max-width:600px){
  html[data-cr-device-kind="mobile"] body:not(.tv) .header,
  body.cr-mobile-ui:not(.tv) .header{padding-left:max(12px,var(--cr-safe-left))!important;padding-right:max(12px,var(--cr-safe-right))!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .brand span,
  body.cr-mobile-ui:not(.tv) .brand span{display:none!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .brand,
  body.cr-mobile-ui:not(.tv) .brand{flex:0 0 auto!important;min-width:0!important;margin-right:auto!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .header-right,
  body.cr-mobile-ui:not(.tv) .header-right{gap:1px!important;min-width:0!important;max-width:calc(100vw - 66px)!important;overflow:visible!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .header #homeBtn,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header .browse-wrap,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header #browseBtn,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header .iconbtn,
  body.cr-mobile-ui:not(.tv) .header #homeBtn,
  body.cr-mobile-ui:not(.tv) .header .browse-wrap,
  body.cr-mobile-ui:not(.tv) .header #browseBtn,
  body.cr-mobile-ui:not(.tv) .header .iconbtn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex:0 0 40px!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .header svg,
  body.cr-mobile-ui:not(.tv) .header svg{max-width:22px!important;max-height:22px!important}

  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy,
  body.cr-mobile-ui:not(.tv) .hero-copy{left:14px!important;right:14px!important;width:auto!important;max-width:calc(100vw - 28px)!important;bottom:10%!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-title,
  body.cr-mobile-ui:not(.tv) .hero-title{font-size:clamp(30px,9vw,40px)!important;line-height:.98!important;max-width:min(88vw,390px)!important;overflow-wrap:normal!important;word-break:normal!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions,
  body.cr-mobile-ui:not(.tv) .hero-copy .actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 46px!important;gap:8px!important;width:100%!important;max-width:100%!important;align-items:stretch!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions>.btn,
  body.cr-mobile-ui:not(.tv) .hero-copy .actions>.btn{min-width:0!important;width:100%!important;max-width:100%!important;height:48px!important;min-height:48px!important;padding:0 10px!important;margin:0!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;transform:none!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions>.btn span,
  body.cr-mobile-ui:not(.tv) .hero-copy .actions>.btn span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions>.cr412-hero-watch,
  body.cr-mobile-ui:not(.tv) .hero-copy .actions>.cr412-hero-watch{width:46px!important;min-width:46px!important;padding:0!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions>.cr412-hero-watch span,
  body.cr-mobile-ui:not(.tv) .hero-copy .actions>.cr412-hero-watch span{display:none!important}

  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-pips,
  body.cr-mobile-ui:not(.tv) .hero-pips{right:14px!important;max-width:calc(100vw - 28px)!important;overflow:hidden!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .detail-copy,
  body.cr-mobile-ui:not(.tv) .detail-copy{max-width:calc(100vw - 28px)!important}
}
@media (max-width:370px){
  html[data-cr-device-kind="mobile"] body:not(.tv) .header #homeBtn,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header .browse-wrap,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header #browseBtn,
  html[data-cr-device-kind="mobile"] body:not(.tv) .header .iconbtn{width:37px!important;height:37px!important;min-width:37px!important;min-height:37px!important;flex-basis:37px!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important;gap:6px!important}
  html[data-cr-device-kind="mobile"] body:not(.tv) .hero-copy .actions>.btn{font-size:11px!important;padding-inline:8px!important}
}

/* ---------------- Tablets / narrow desktops ---------------- */
@media (min-width:761px) and (max-width:1180px){
  html[data-cr-device-kind="tablet"] body:not(.tv) .header{padding-inline:24px!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .header-right{gap:8px!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .header .navitem{padding-inline:12px!important;min-width:44px!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .hero-copy{width:min(650px,63vw)!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .hero-title{font-size:clamp(44px,5vw,64px)!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .hero-copy .actions{flex-wrap:wrap!important}
  html[data-cr-device-kind="tablet"] body:not(.tv) .row-scroll{grid-auto-columns:minmax(300px,38vw)!important}
}