.detail-content.has-trailer {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 18px 26px 24px;
}

.detail-dialog.has-trailer[open] {
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  width: min(1080px, 94vw);
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  background: #080b10;
}

.detail-dialog.has-trailer .detail-poster {
  display: block;
  min-height: 0;
  height: auto;
  margin: 18px 0 18px 18px;
  align-self: stretch;
  border: 1px solid #ffffff18;
  border-radius: 16px;
}

.detail-poster {
  background-color: #050505 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.detail-dialog.has-trailer .detail-content > :not(.trailer-shell) {
  position: relative;
  z-index: 2;
}

.detail-dialog.has-tmdb-backdrop .detail-content {
  background-image:
    linear-gradient(180deg, #080b10e8 0%, #080b10f5 42%, #080b10 78%),
    var(--tmdb-backdrop);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.trailer-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-height: min(38dvh, 340px);
  aspect-ratio: 16 / 9;
  margin: 0 0 14px;
  border: 0;
  border-radius: 15px;
  background: #020407;
  box-shadow: 0 20px 52px #000a;
}

.detail-dialog.has-trailer .detail-content h2 {
  margin: 6px 0 9px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}

.detail-dialog.has-trailer .eyebrow {
  margin: 0;
  font-size: 9px;
}

.detail-dialog.has-trailer .detail-meta {
  font-size: 11px;
}

.detail-dialog.has-trailer .detail-content > p:not(.eyebrow) {
  display: -webkit-box;
  margin: 9px 0;
  overflow: hidden;
  color: #aab6c9;
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.detail-dialog.has-trailer .subtitle-control,
.detail-dialog.has-trailer .series-control {
  margin: 12px 0 3px;
  padding: 9px 11px;
}

.detail-dialog.has-trailer .subtitle-control select,
.detail-dialog.has-trailer .series-control select {
  padding-top: 7px;
  padding-bottom: 7px;
}

.detail-dialog.has-trailer .primary-button,
.detail-dialog.has-trailer .ghost-button {
  padding-top: 10px;
  padding-bottom: 10px;
}

.trailer-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, #02040712 42%, #080b10f5 100%),
    radial-gradient(ellipse at center, transparent 48%, #080b1099 100%);
  pointer-events: none;
}

.trailer-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  filter: brightness(.92) saturate(.96);
  transform: none;
  pointer-events: none;
}

.trailer-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: none;
}

.trailer-embed[hidden] {
  display: none;
}

.detail-tmdb-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 5px;
}

.detail-tmdb-facts[hidden] {
  display: none;
}

.detail-tmdb-facts > span,
.detail-tmdb-facts > small {
  padding: 5px 8px;
  border: 1px solid #d5b15b30;
  border-radius: 999px;
  background: #17140ee0;
  color: #d9c589;
  font-size: 8px;
  line-height: 1.2;
}

.detail-tmdb-facts > small {
  color: #88847c;
}

.metadata-language-control {
  margin-top: 9px !important;
}

.trailer-shell > span {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  padding: 6px 9px;
  border: 1px solid #e1c57466;
  border-radius: 8px;
  background: #0b0a08e8;
  color: #eed78d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
  pointer-events: none;
}

.trailer-status {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at center, #241d10dd, #020407f5 68%);
  color: #f4e7bc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  text-align: center;
}

.trailer-audio-gate {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  min-width: min(290px, calc(100% - 34px));
  padding: 12px 16px;
  transform: translate(-50%, -50%);
  border: 1px solid #e1c574;
  border-radius: 11px;
  background: #0b0a08e8;
  color: #eed78d;
  box-shadow: 0 16px 40px #000c, 0 0 24px #d5b15b26;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .65px;
  cursor: pointer;
}

/* Los tráileres de Black Eye reproducen el audio directamente; no muestran
   botones superpuestos de silencio o activación. */
.trailer-audio-gate,
.home-card-preview-audio {
  display: none !important;
}

.trailer-audio-gate:hover,
.trailer-audio-gate:focus-visible {
  outline: none;
  background: #241d10;
  color: #fff3c9;
}

.trailer-shell.is-error .trailer-status {
  color: #ffb8b8;
}

@media (max-width: 760px) {
  .detail-dialog.has-trailer[open] {
    display: block;
    width: min(94vw, 620px);
  }

  .detail-content.has-trailer {
    padding: 18px 20px 22px;
  }

  .trailer-shell {
    width: 100%;
    height: auto;
    max-height: min(34dvh, 260px);
    aspect-ratio: 16 / 9;
    margin: 0 0 12px;
    border-radius: 14px;
  }

  .detail-tmdb-facts {
    gap: 4px;
    margin: 6px 0 3px;
  }

  .detail-tmdb-facts > span,
  .detail-tmdb-facts > small {
    padding: 4px 6px;
    font-size: 7px;
  }
}