/*
 * Video page (watch_poetry.php).
 *
 * Builds on home.css (panels, buttons, avatars, chips, video cards): this
 * file adds the player, the poet line, comments, the side-bar video list and
 * the phone rules for #pv-watch. main.css still styles the header, the login
 * box and the side bar frame. The ids js/standard_dev.js drives
 * (#button_video, #comment_table, img#delete, .error, .success) are kept.
 */

.pvw-crumb { font-size: 12px; color: var(--pvh-muted); }
.pvh .pvw-crumb a { color: var(--pvh-muted); }

/* ---- Player and details ---------------------------------------------- */
.pvh-panel.pvw-video { padding: 0; overflow: hidden; }
.pvw-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pvw-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pvw-player__missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--pvh-muted);
  text-align: center;
}
.pvw-details { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px 22px; }
.pvw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--pvh-muted); }
.pvw-meta .pvh-chip { margin: 0; }
.pvw-details h1 { margin: 0; font-size: 30px; line-height: 1.15; color: #fff; overflow-wrap: anywhere; }

.pvw-poet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pvw-poet__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pvw-poet .pvh-avatar { width: 52px; height: 52px; font-size: 22px; margin: 0; }
.pvw-poet__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pvh .pvw-poet__name a { color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pvh .pvw-poet__name a:hover { color: var(--pvh-gold-bright); }
.pvw-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.pvw-badge--pro { background: var(--pvh-gold-button); color: #000; }
.pvw-badge--mayor { border: 1px solid var(--pvh-gold-deep); color: var(--pvh-gold-bright); }
.pvw-poet__status { display: block; margin-top: 2px; font-size: 12px; color: var(--pvh-muted); overflow-wrap: anywhere; }

.pvw-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #262626; }
.pvw-share > span { font-size: 12px; color: var(--pvh-muted); }

.pvw-ad { text-align: center; }
.pvw-ad:empty { display: none; }
.pvw-side-ad { margin-top: 14px; }

/* ---- Comments -------------------------------------------------------- */
.pvh .pvw-comments h2 { color: var(--pvh-gold-bright); font-size: 15px; }
.pvh .pvw-comments h2 span { color: var(--pvh-muted); }
.pvw-note { margin: 10px 0 14px !important; font-size: 13px; color: #dcdcdc; }
.pvw-karma { color: #b5e48c; font-weight: 700; }

.pvw-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid #3c2e08;
  border-radius: 8px;
  background: #141006;
}
.pvw-join p { flex: 1 1 260px; font-size: 13px; color: #dcdcdc; }
.pvw-join strong { display: block; font-size: 14px; color: #fff; }

.pvw-form { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.pvw-form .pvh-avatar { width: 44px; height: 44px; font-size: 18px; margin: 0; flex: none; }
.pvw-form__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pvw-form label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--pvh-muted); }
#pv-watch .pvw-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 5px;
  background: #111;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}
#pv-watch .pvw-form textarea:focus-visible { outline: 2px solid var(--pvh-gold-bright); outline-offset: 1px; }
.pvw-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#pv-watch button.pvh-btn { border-top: 0; border-right: 0; border-bottom: 0; color: #000; font-family: inherit; cursor: pointer; }
#pv-watch button.pvh-btn:hover { background: var(--pvh-gold-bright); }
#pv-watch button.pvh-btn:focus-visible { outline: 2px solid var(--pvh-gold-bright); outline-offset: 1px; }
.pvw-form__hint { font-size: 11px; color: var(--pvh-muted); }

#pv-watch .pvw-comments .error,
#pv-watch .pvw-comments .success { display: none; margin: 6px 0; padding: 10px 12px; border-radius: 5px; font-size: 13px; }
#pv-watch .pvw-comments .error { border: 1px solid #5a2323; background: #200f0f; color: #ff9a9a; }
#pv-watch .pvw-comments .success { border: 1px solid #2f5d2b; background: #10200f; color: #8fd18f; }

#pv-watch #comment_table { width: 100%; border-collapse: collapse; }
#pv-watch #comment_table td { padding: 14px 0 12px; border-top: 1px solid #262626; vertical-align: top; text-align: left; }
#pv-watch #comment_table tr:first-child td { padding: 0; border: 0; }
#pv-watch #comment_table td.pvw-c__pic { width: 58px; position: relative; }
#pv-watch #comment_table td.pvw-c__pic .pvh-avatar { width: 44px; height: 44px; font-size: 18px; margin: 0; }
/* Rows the comment button adds before the page reloads. */
#pv-watch #comment_table td img { max-width: 44px; height: auto; border-radius: 50%; }
#pv-watch #comment_table p.poster { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.pvw-c__trophy {
  position: absolute;
  left: 30px;
  top: 42px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}
.pvh .pvw-c__who { font-weight: 700; color: #fff; text-decoration: none; }
.pvh .pvw-c__who:hover { color: var(--pvh-gold-bright); }
.pvw-c__text { margin: 4px 0 6px !important; font-size: 14px; color: #dcdcdc; overflow-wrap: anywhere; }
.pvw-c__poems { font-size: 12px; }
#pv-watch #comment_table td.pvw-c__del { width: 40px; text-align: right; }
#pv-watch #comment_table img#delete { width: 15px; height: 15px; border-radius: 0; cursor: pointer; padding: 8px; }

/* ---- More from this poet --------------------------------------------- */
.pvh .pvw-more h2 { color: var(--pvh-gold-bright); font-size: 15px; }
.pvh .pvw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pvw-grid strong { font-size: 13px; overflow-wrap: anywhere; }

/* ---- Not found ------------------------------------------------------- */
.pvw-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pvw-missing h1 { margin: 0; font-size: 26px; color: #fff; }
.pvw-missing p { max-width: 520px; color: #dcdcdc; }
.pvw-missing__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- Side bar videos ------------------------------------------------- */
.pvh.pvw-side { margin-top: 14px; }
.pvh .pvw-side h2 { margin-bottom: 12px; font-size: 13px; color: var(--pvh-gold-bright); }
.pvw-side__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px !important; }
.pvh .pvw-side__list a { display: flex; gap: 10px; color: #fff; text-decoration: none; }
.pvh .pvw-side__list a:hover strong { color: var(--pvh-gold-bright); }
.pvw-side__thumb { flex: none; width: 104px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: #1a1a1a; }
.pvw-side__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pvw-side__list strong { display: block; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.pvw-side__list .pvh-muted { display: block; }
.pvw-side > .pvh-panel > a { font-size: 12px; }

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

  .pvh-panel.pvw-video { margin: 0 -12px; border-left: 0; border-right: 0; border-radius: 0; }
  .pvw-details { padding: 14px 16px 16px; }
  .pvw-details h1 { font-size: 22px; }
  .pvw-poet .pvh-btn { flex: 1 1 100%; }
  .pvw-join .pvh-btn { flex: 1 1 100%; }
  .pvh .pvw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvw-side__thumb { width: 112px; }
}