/* Movie detail background preview and detail layout v1.0.4 */
.detail-hero{
  position:relative;
  display:block;
  min-height:480px;
  margin-top:0;
  overflow:hidden;
  background:#080a10;
}
.detail-bg,
.detail-bg-video{
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:540px;
  margin:0;
}
.detail-bg{
  z-index:0;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
}
.detail-bg-video{
  z-index:0;
  display:block;
  object-fit:cover;
  object-position:center top;
  background:#080a10;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.detail-bg-video.is-ready{opacity:1}

/* Google TV movie Stage 1 preview: enlarge only the decorative preview video
   so letterbox/pillarbox bars baked into source videos stay outside the viewport.
   The real Player is intentionally untouched. */
html.doofree-tv-app body .detail-hero .detail-bg-video{
  transform:scale(1.50) !important;
  transform-origin:center center !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.detail-hero:after{z-index:1;pointer-events:none}

/* Desktop: poster stays on the left. Information and synopsis stay on the right. */
.detail-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  grid-template-areas:
    "poster info"
    "poster synopsis";
  column-gap:30px;
  row-gap:16px;
  align-items:start;
  min-height:480px;
  padding-top:24px;
  padding-bottom:30px;
}
.detail-poster-column{
  grid-area:poster;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-self:start;
}
.detail-poster{
  width:100%;
  margin:0;
  align-self:start;
}
.detail-watch-button{
  width:100%;
  min-height:46px;
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
}
.detail-info{display:contents}
.detail-info-main{
  grid-area:info;
  min-width:0;
  align-self:start;
  padding-top:8px;
}
.detail-info-main h1{
  margin:0 0 10px;
}
.detail-alt-title{
  margin:0;
}
.detail-labels{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
  margin:14px 0 0;
}
.detail-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  max-width:100%;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#d8dbe4;
  font-size:12px;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}
a.detail-label:hover{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.15);
}
.detail-synopsis-block{
  grid-area:synopsis;
  min-width:0;
  align-self:start;
}
.detail-synopsis{
  width:100%;
  max-width:800px;
  margin:0;
  color:#c6cad5;
  line-height:1.8;
}

@media (max-width:760px){
  /* Preview/backdrop begins exactly at the hero's top edge below the sticky topbar. */
  .detail-bg,
  .detail-bg-video{
    top:0;
    height:clamp(360px,52vh,500px);
  }
  .detail-wrap{
    grid-template-columns:minmax(105px,31vw) minmax(0,1fr);
    grid-template-areas:
      "poster info"
      "synopsis synopsis";
    column-gap:14px;
    row-gap:18px;
    min-height:0;
    padding-top:16px;
    padding-bottom:24px;
  }
  .detail-info-main{
    padding-top:2px;
  }
  .detail-info-main h1{
    font-size:clamp(24px,7.4vw,31px);
    line-height:1.16;
    margin-bottom:10px;
  }
  .detail-alt-title{
    font-size:13px;
    line-height:1.5;
  }
  .detail-labels{
    gap:7px;
    margin-top:12px;
  }
  .detail-label{
    padding:7px 9px;
    font-size:11px;
  }
  .detail-watch-button{
    min-height:40px;
    padding:9px 7px;
    border-radius:10px;
    font-size:13px;
  }
  .detail-synopsis-block{
    width:100%;
    max-width:none;
    margin-top:0;
  }
  .detail-synopsis{
    width:100%;
    max-width:none;
    margin:0;
    font-size:14px;
    line-height:1.75;
  }
}

@media (max-width:440px){
  .detail-bg,
  .detail-bg-video{
    height:clamp(340px,50vh,450px);
  }
  .detail-wrap{
    grid-template-columns:minmax(100px,32vw) minmax(0,1fr);
    column-gap:12px;
    row-gap:16px;
    padding-top:14px;
  }
  .detail-poster{
    width:100%;
    margin:0;
  }
  .detail-info-main h1{
    font-size:clamp(23px,7.8vw,29px);
  }
  .detail-labels{
    gap:6px;
    margin-top:10px;
  }
  .detail-label{
    padding:6px 8px;
    font-size:10.5px;
  }
  .detail-watch-button{
    min-height:38px;
    font-size:12px;
  }
  .detail-synopsis{
    font-size:13px;
    line-height:1.7;
  }
}

/* Stage 1 poster orientation only.
   Keep the existing grid/column/button geometry exactly as-is.
   This intentionally does NOT use .cover-landscape because legacy global CSS
   changes the detail grid width for that class. */
.detail-wrap[data-detail-cover-layout="portrait"] .detail-poster{
  aspect-ratio:2/3 !important;
  background:transparent !important;
}
.detail-wrap[data-detail-cover-layout="landscape"] .detail-poster{
  aspect-ratio:16/9 !important;
  background:transparent !important;
}
.detail-wrap[data-detail-cover-layout] .detail-poster img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}