/**
 * Vertical Player view template — metadata + 9:16 player layout.
 *
 * OWNERSHIP: resources/css/frontend/vertical_player.css
 * Enqueued by zype_enqueue_vertical_player_assets() for zype_vertical_player.php.
 */

.zype-vertical-player {
  --zype-vertical-player-gap: 1.5rem;
  --zype-vertical-player-shell-max: 28rem;
  --zype-vertical-player-text: inherit;
  --zype-vertical-player-text-muted: var(--zype-color-text-muted, #666);

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  color: var(--zype-vertical-player-text);
}

/*
 * Theme Page wide-content contract: root.alignwide participates in the Theme
 * wide column. Component layout stays width/max-width 100% inside that host.
 */
.zype-vertical-player.alignwide {
  width: 100%;
  max-width: 100%;
}

.zype-vertical-player *,
.zype-vertical-player *::before,
.zype-vertical-player *::after {
  box-sizing: border-box;
}

.zype-vertical-player__layout {
  display: grid;
  align-items: start;
  gap: var(--zype-vertical-player-gap);
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  width: 100%;
}

.zype-vertical-player__metadata {
  min-width: 0;
}

.zype-vertical-player__title {
  margin: 0 0 0.75rem;
  font-size: var(--zype-catalog-title-font-size, 1.5rem);
  line-height: var(--zype-catalog-title-line-height, 1.3);
  font-weight: var(--zype-catalog-title-font-weight, 600);
}

.zype-vertical-player__publish-date {
  margin: 0 0 1rem;
  color: var(--zype-vertical-player-text-muted);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.zype-vertical-player__description {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
}

.zype-vertical-player__description > :first-child {
  margin-top: 0;
}

.zype-vertical-player__description > :last-child {
  margin-bottom: 0;
}

.zype-vertical-player__keywords {
  margin: 0;
}

.zype-vertical-player__keywords-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--zype-vertical-player-text-muted);
}

.zype-vertical-player__keywords-list {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.zype-vertical-player__player {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.zype-vertical-player .player-container.vertical,
.zype-vertical-player-container .player-container.vertical {
  width: 100%;
  max-width: min(100%, var(--zype-vertical-player-shell-max));
  margin: 0 auto;
}

.zype-vertical-player .player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
  border-radius: 10px;
}

.zype-vertical-player .player-wrapper > div,
.zype-vertical-player .player-wrapper .video-player,
.zype-vertical-player .player-wrapper .zype_player_container,
.zype-vertical-player .player-wrapper .zype_player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zype-vertical-player .player-wrapper .bitmovinplayer-container,
.zype-vertical-player .player-wrapper video,
.zype-vertical-player .player-wrapper iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zype-vertical-player .player-wrapper .player-auth-required {
  position: absolute;
  z-index: 20;
}

.zype-vertical-player .channel-info,
.zype-vertical-player .playlist-info {
  padding: 1rem;
  background: #f5f5f5;
}

.zype-vertical-player .channel-info h3,
.zype-vertical-player .playlist-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}

.zype-vertical-player .zype-player-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 1rem;
  color: #fff;
  text-align: center;
}

@supports not (aspect-ratio: 9 / 16) {
  .zype-vertical-player .player-wrapper {
    padding-bottom: 177.78%;
    height: 0;
  }
}

/* Match Vertical Playlist collapse: stack metadata above player. */
@media (max-width: 781px) {
  .zype-vertical-player__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .zype-vertical-player .player-container.vertical,
  .zype-vertical-player-container .player-container.vertical {
    max-width: min(100%, var(--zype-vertical-player-shell-max));
  }
}