/*
 * ReaderX -- Top 100 page-specific rules extracted from style_new.css
 * (Performance Phase 2A).
 *
 * Every selector below is exclusively prefixed with .top-100-manga-page,
 * the wrapper <section> class applied ONLY in template-top-100-manga.php
 * (confirmed via a full-theme grep: no other template applies this
 * class). Moving these rules here does not change their visual effect,
 * since every declaration that could conflict with css/top-100.css's
 * own .top-manga-card/.manga-info rules already uses !important on this
 * side (confirmed via direct source comparison), making the two files'
 * relative load order irrelevant to the cascade outcome.
 *
 * Enqueued with the exact same condition as the existing
 * 'mangayummy-top-100' handle (get_query_var('automatic_page') ===
 * 'top_100_manga'), so this file never downloads anywhere else,
 * including the homepage.
 */

/* Top 100 page overrides: enforce uniform cover size and keep titles single-line */
.top-100-manga-page .manga-cover {
  height: 280px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.top-100-manga-page .manga-cover img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.top-100-manga-page .manga-info {
  padding: 10px !important;
}

.top-100-manga-page .manga-title a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block;
}

/* Modern corner ribbon for Top-100 cards */
.top-100-manga-page .top-manga-card .ribbon {
  position: absolute;
  top: 12px;
  left: -38px;
  width: 150px;
  height: 36px;
  background: linear-gradient(90deg,#ff7a18,#13667a);
  color: #fff;
  transform: rotate(-12deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 3;
  border-radius: 6px;
  pointer-events: none;
}

.top-100-manga-page .top-manga-card .ribbon span {
  transform: rotate(12deg);
  display: block;
  width: 100%;
  text-align: center;
}

/* Top-3 ribbon variants: visual emphasis only (no z-index/image size changes) */
.top-100-manga-page .top-manga-card[data-position="1"] .ribbon {
  background: linear-gradient(90deg,#ffd700 0%,#ffcf40 100%);
  box-shadow: 0 10px 30px rgba(255,200,0,0.18), 0 2px 8px rgba(0,0,0,0.25);
}
.top-100-manga-page .top-manga-card[data-position="1"] .ribbon span {
  font-size: 0.98rem;
  letter-spacing: 0.4px;
}

.top-100-manga-page .top-manga-card[data-position="2"] .ribbon {
  background: linear-gradient(90deg,#cfcfcf 0%,#9ea0a3 100%);
  box-shadow: 0 8px 22px rgba(150,150,150,0.12), 0 2px 6px rgba(0,0,0,0.18);
}
.top-100-manga-page .top-manga-card[data-position="2"] .ribbon span {
  font-size: 0.92rem;
}

.top-100-manga-page .top-manga-card[data-position="3"] .ribbon {
  background: linear-gradient(90deg,#b87333 0%,#d08a4a 100%);
  box-shadow: 0 8px 22px rgba(184,115,51,0.12), 0 2px 6px rgba(0,0,0,0.18);
}
.top-100-manga-page .top-manga-card[data-position="3"] .ribbon span {
  font-size: 0.92rem;
}