@charset "UTF-8";

/*
 * Issue #145/#146: shared series-master-page-derived box chrome + card
 * grid -- the exact rules previously defined only in series-master-v42.css
 * for the series master page's シリーズ内作品 quicknav
 * (.trend-box/.trend-box-h/.quicknav-body outer chrome, plus
 * .quicknav-grid/.quicknav-card/.qn-thumb/.qn-foot/.qn-text/.qn-jump card
 * grid), relocated here verbatim (property-for-property identical,
 * including the SP grid-column override) so post content's 作品一覧 card
 * list (inc/work-list.php) can wrap itself in the same design instead of a
 * second, drifting copy. series-master-v42.css keeps every rule that is
 * either omnibus/.compil-specific or that this feature does not use at all
 * (.quicknav-grid-compil, .quicknav-card.compil .qn-thumb/.qn-jump,
 * .quicknav-note) -- only the base, shared ruleset moved. .trend-box is
 * also still used as-is by series-master-v42.css's own ヒロイン人数の推移
 * section -- moving it here does not change that usage at all.
 *
 * Uses the same --c-main/--c-dark/--c-border-strong custom-property names
 * series-master-v42.css's #hd-master scope already declares (unchanged,
 * still hardcoded hex there -- this file does not touch that
 * declaration or its resolved color on the master page). Post content's
 * own wrapper (.paimori-work-list, assets/css/work-list.css) declares the
 * same three custom properties locally as plain aliases of this theme's
 * already-global --hd-c-* tokens (style.css's :root), so the identical
 * rules below resolve to the identical color in both contexts without
 * hardcoding a second hex literal anywhere.
 *
 * Enqueued as an explicit dependency of both paimori-series-master
 * (series-master-v42.css) and paimori-work-list (work-list.css, post-only)
 * -- see functions.php / inc/work-list.php.
 */

.trend-box {
  background: #fff;
  border: 1px solid var(--c-border-strong);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.3rem 0;
}
.trend-box-h {
  background: var(--c-light);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trend-box-h .tbh-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: #555;
}
.quicknav-body {
  padding: 14px 16px 16px;
}

.quicknav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.quicknav-card {
  display: block;
  min-width: 0;
  text-decoration: none !important;
  color: inherit;
  background: #fff;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(44, 94, 71, .08);
  transition: box-shadow .15s, transform .15s;
}
.quicknav-card:hover {
  box-shadow: 0 6px 18px rgba(44, 94, 71, .14);
  transform: translateY(-1px);
}
.qn-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-main), var(--c-dark));
  display: flex;
  align-items: center;
  justify-content: center;
}
.qn-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
}
.qn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 9px;
}
.qn-text {
  flex: 1;
  min-width: 0;
  min-height: 2.7em;
  font-size: 12.5px;
  font-weight: 700;
  color: #333;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.qn-jump {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-main);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qn-jump svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .quicknav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}