/*
 * Latest poetry listing (poetry.php).
 *
 * Builds on home.css (panels, buttons, avatars, poem cards, leaderboard):
 * this file only makes the 100-a-page rows compact, adds the page links and
 * the search panel, and the phone rules for #pv-poetry. main3.css still
 * styles the header, the contest box, the login box and the pillar.
 */

/* ---- Search ---------------------------------------------------------- */
.pvl-search { margin-top: 16px; padding-top: 14px; border-top: 1px solid #262626; }
.pvl-search .pvh-label { margin: 0 0 8px; font-size: 11px; color: var(--pvh-muted); }
#pv-poetry .pvl-search #search { width: auto; margin: 0; padding: 0; background: none; border: 0; }
#pv-poetry .pvl-search .gsc-control-cse { padding: 0; background: transparent; border: 0; }
#pv-poetry .pvl-search .gsc-input-box { border-radius: 5px; }

/* ---- Page links ------------------------------------------------------ */
.pvl-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 4px 0 16px;
}
.pvl-feed + .pvl-pager { margin: 16px 0 0; }
.pvl-pager a,
.pvl-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.pvh .pvl-pager a { border: 1px solid #3a3a3a; color: #fff; }
.pvh .pvl-pager a:hover { border-color: var(--pvh-gold-deep); color: var(--pvh-gold-bright); }
.pvl-pager__now { background: var(--pvh-gold-button); color: #000; }
.pvl-pager__off { border: 1px solid #262626; color: #6b6b6b; }
.pvl .pvl-pager .pvl-pager__gap { min-width: 0; padding: 0 2px; color: var(--pvh-muted); }

/* ---- Rows: compact, one per line ------------------------------------- */
.pvl-feed { gap: 10px; }
.pvl-row { gap: 14px; padding: 14px 16px; }
.pvl-row .pvh-poem__poet { flex: 0 0 84px; gap: 4px; }
.pvl-row .pvh-avatar { width: 56px; height: 56px; font-size: 22px; }
.pvl-row .pvh-poem__name { font-size: 12px; overflow-wrap: anywhere; }
.pvl-row .pvh-poem__poet .pvh-muted { font-size: 11px; }
.pvl-row .pvh-poem__body { flex: 999 1 260px; gap: 6px; }
.pvl-row h3 { font-size: 17px; }
.pvl-row .pvh-poem__text { line-height: 1.55; }
.pvl-row .pvh-poem__foot { padding-top: 8px; }

/* The newest poem on page 1, featured (smaller than the home page's). */
.pvl-row.pvl-feat { gap: 20px; padding: 22px; margin-bottom: 4px; }
.pvl-row.pvl-feat .pvh-poem__poet { flex: 1 1 160px; gap: 6px; }
.pvl-row.pvl-feat .pvh-avatar { width: 140px; height: 140px; border-width: 4px; font-size: 56px; }
.pvl-row.pvl-feat .pvh-poem__name { font-size: 20px; }
.pvl-row.pvl-feat .pvh-poem__body { flex: 999 1 300px; gap: 12px; }
.pvl-row.pvl-feat h3 { font-size: 28px; line-height: 1.15; }
.pvl-row.pvl-feat .pvh-poem__text { font-size: 18px; line-height: 1.7; color: #f2f2f2; }

/* ---- Sidebar --------------------------------------------------------- */
.pvl-follow { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pvl-follow .pvh-btn { justify-content: flex-start; }
.pvh .pvl-follow .pvl-follow--fb { border-color: #4267b2; }

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

  .pvl-row.pvl-feat { padding: 18px 16px; }
  .pvl-row.pvl-feat .pvh-avatar { width: 110px; height: 110px; font-size: 44px; }
  .pvl-row.pvl-feat h3 { font-size: 24px; }
  .pvl-row.pvl-feat .pvh-poem__text { font-size: 17px; }
}