/*
 * Video listing (videos.php).
 *
 * Builds on home.css (panels, buttons, avatars, video cards): this file adds
 * the featured newest video and the phone rules for #pv-videos. main.css
 * still styles the header, the login box and the side bar.
 */

/* ---- Newest video, featured ------------------------------------------ */
.pvv-feat {
  border: 2px solid var(--pvh-gold-deep);
  background: linear-gradient(160deg, #1d1606, #0e0e0e 55%);
}
.pvv-feat__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #333;
  border-radius: 8px;
  background: #000;
}
.pvv-feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pvv-feat__media:hover img { transform: scale(1.02); }

.pvv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  box-sizing: border-box;
  border: 3px solid var(--pvh-gold-bright);
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  transition: background .2s ease;
}
.pvv-play::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 21px;
  border-style: solid;
  border-width: 15px 0 15px 24px;
  border-color: transparent transparent transparent var(--pvh-gold-bright);
}
.pvv-feat__media:hover .pvv-play { background: var(--pvh-gold-button); }
.pvv-feat__media:hover .pvv-play::after { border-left-color: #000; }

.pvv-feat__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.pvv-feat__body .pvh-chip { margin: 0; }
.pvv-feat h2 { margin: 0; font-size: 26px; line-height: 1.2; text-transform: none; }
.pvh .pvv-feat h2 a { color: #fff; text-decoration: none; }
.pvh .pvv-feat h2 a:hover { color: var(--pvh-gold-bright); }
.pvv-feat__by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pvv-feat__by .pvh-avatar { width: 48px; height: 48px; font-size: 20px; }
.pvv-feat__name { display: block; font-size: 15px; font-weight: 700; text-decoration: none; }
.pvh .pvv-feat__name { color: #fff; }
.pvv-feat__by .pvh-muted { display: block; }

/* ---- Phones ---------------------------------------------------------- */
@media (max-width: 760px) {
  #pv-videos #site-wrapper,
  #pv-videos #top-wrapper,
  #pv-videos #middle-wrapper,
  #pv-videos #left-col,
  #pv-videos #right-col,
  #pv-videos #bottom-wrapper,
  #pv-videos #bottom-menu {
    width: auto;
    float: none;
  }
  #pv-videos #site-wrapper { padding: 0 12px; }
  #pv-videos #top-wrapper { height: auto; overflow: hidden; }
  #pv-videos #top-wrapper #logo { float: none; }
  #pv-videos #logo img { max-width: 70%; height: auto; }
  #pv-videos #top-wrapper #top-menu { float: none; }
  #pv-videos #bottom-wrapper { height: auto; }
  #pv-videos #right-col { padding: 0; margin-top: 14px; }

  .pvv-feat h2 { font-size: 22px; }
  .pvv-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .pvv-play::after { left: 22px; top: 16px; border-width: 13px 0 13px 20px; }
}