/*
 * Monthly poetry contest (contests.php).
 *
 * Builds on home.css (panels, buttons, avatars, chips) and stats.css (the
 * month totals): this file adds the prize card, the winner panel, the steps,
 * tips, past winners, questions, the latest-entries list and the phone rules
 * for #pv-contests. main4.css still styles the header, the contest box, the
 * login box and the side bar.
 */

/* ---- Hero ------------------------------------------------------------ */
.pvc-hero { display: flex; flex-direction: column; gap: 14px; }
.pvc-hero .pvh-chip { align-self: flex-start; padding: 4px 10px; font-size: 11px; border-radius: 12px; }
.pvc h1 { margin: 0; font-size: 30px; line-height: 1.12; color: #fff; }
.pvc-lede { max-width: 560px; font-size: 16px; color: #dcdcdc; }
.pvc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pvc-actions .pvh-btn { min-height: 48px; }
.pvc .pvs-tiles { margin-top: 6px; }

/* ---- Prize ----------------------------------------------------------- */
.pvc-prize {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 2px solid var(--pvh-gold-deep);
  border-radius: 8px;
  background: linear-gradient(160deg, #1d1606, #0e0e0e 55%);
}
.pvc-prize__label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--pvh-muted); }
.pvc-prize h3 { margin: 0; font-size: 26px; line-height: 1.15; color: var(--pvh-gold-bright); }
.pvc-prize p { max-width: 560px; font-size: 14px; color: #dcdcdc; }
.pvh .pvc-disclaim { font-size: 11px; color: var(--pvh-muted); }
.pvh .pvc-note { margin-top: 12px; }

/* ---- Winner announced ------------------------------------------------ */
.pvh-panel.pvc-winner {
  border: 2px solid var(--pvh-gold-deep);
  background: linear-gradient(160deg, #1d1606, #0e0e0e 60%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pvc-winner .pvh-chip { align-self: flex-start; padding: 4px 10px; font-size: 11px; border-radius: 12px; }
.pvh .pvc-winner h2 { font-size: 22px; text-transform: none; }
.pvc-winner__card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #111;
}
.pvc-winner__card .pvh-avatar { width: 88px; height: 88px; border-color: var(--pvh-gold-bright); font-size: 36px; }
.pvc-winner__who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pvh .pvc-winner__title { font-size: 22px; font-weight: 700; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.pvh .pvc-winner__title:hover { color: var(--pvh-gold-bright); }
.pvc-winner p { font-size: 13px; color: #dcdcdc; }

/* ---- Steps and tips -------------------------------------------------- */
.pvh .pvc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pvc-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #111;
}
.pvc-steps__n { font-size: 26px; font-weight: 700; line-height: 1; color: var(--pvh-gold-bright); }
.pvc-steps strong { font-size: 15px; }
.pvc-steps span:last-child, .pvc-tips li { font-size: 13px; color: #dcdcdc; }
.pvh .pvc-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.pvc-tips strong { color: #fff; }

/* ---- Past winners ---------------------------------------------------- */
.pvh .pvc-winners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pvc-winners li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #262626;
  border-radius: 8px;
  background: #111;
}
.pvc-winners .pvh-avatar { width: 40px; height: 40px; font-size: 16px; }
.pvc-winners__who { min-width: 0; }
.pvh .pvc-winners__who a { display: block; font-weight: 700; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.pvh .pvc-winners__who a:hover { color: var(--pvh-gold-bright); }
.pvc-winners .pvh-chip { margin-top: 2px; font-size: 11px; text-transform: none; }

/* ---- Questions ------------------------------------------------------- */
.pvc-faq details { padding: 12px 0; border-top: 1px solid #262626; }
.pvc-faq details:last-of-type { border-bottom: 1px solid #262626; }
.pvc-faq summary { cursor: pointer; font-size: 15px; font-weight: 700; }
.pvh .pvc-faq details p { margin-top: 8px; font-size: 13px; color: #dcdcdc; }
.pvc-faq .pvc-actions { padding-top: 14px; }

/* ---- Latest entries (side bar) --------------------------------------- */
.pvh .pvc-latest { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pvc-latest li { display: flex; gap: 10px; min-width: 0; }
.pvc-latest .pvh-avatar { width: 40px; height: 40px; font-size: 16px; }
.pvc-latest__who { min-width: 0; }
.pvh .pvc-latest__who a { display: block; font-weight: 700; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.pvh .pvc-latest__who a:hover { color: var(--pvh-gold-bright); }
.pvh h2.pvc-side-h { font-size: 13px; color: var(--pvh-gold-bright); }

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

  .pvc h1 { font-size: 25px; }
  .pvc-lede { font-size: 15px; }
  .pvc-actions .pvh-btn { flex: 1 1 100%; }
  .pvs-tiles { grid-template-columns: repeat(2, 1fr); }
  .pvs-tiles dd { font-size: 22px; }
  .pvc-prize { padding: 16px; }
  .pvc-prize h3 { font-size: 22px; }
  .pvh .pvc-steps, .pvh .pvc-tips { grid-template-columns: 1fr; }
  .pvh .pvc-winners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pvc-winner__card { padding: 14px; gap: 14px; }
  .pvc-winner__card .pvh-avatar { width: 64px; height: 64px; font-size: 26px; }
  .pvh .pvc-winner__title { font-size: 18px; }
}