/* Series pages: _layouts/series.html (one series) and series.html (the index). */

/* .panel-container is a 3-col grid; override to a centered single column,
   like .projects-container / .post-container do. */
.series-page { display: block; padding: 10px; }
.series-container {
  max-width: 820px; margin: 0 auto; padding: 30px;
  background-color: var(--color-panel-bg, rgba(255, 255, 255, 0.95));
  border-radius: 10px;
}
.series-intro { color: var(--color-text-muted, #6b6459); font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem; }
.series-intro p { margin: 0; }

/* One series: the ordered list of parts */
.series-list { list-style: none; padding: 0; margin: 0; }
.series-item { padding: 1.1rem 0; border-top: 1px solid var(--color-border, rgba(42, 37, 33, 0.12)); }
.series-item:first-child { border-top: none; }
.part-label {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent, #c9a227); font-weight: 700; margin-bottom: 0.15rem;
}
.part-date { color: var(--color-text-muted, #8d8478); font-size: 0.8rem; margin-left: 0.5rem; text-transform: none; letter-spacing: 0; font-weight: 400; }
.series-item h2 { font-size: 1.2rem; margin: 0.15rem 0 0.35rem; }
.series-item h2 a { text-decoration: none; }
.part-summary { color: var(--color-text-muted, #6b6459); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* Series index: one card per series */
.series-cards { display: grid; gap: 1.5rem; }
.series-card {
  display: grid; grid-template-columns: 240px 1fr; gap: 1.25rem;
  color: inherit; text-decoration: none;
  border: 1px solid var(--color-border, rgba(42, 37, 33, 0.12));
  border-radius: var(--radius-md, 8px); overflow: hidden;
  transition: box-shadow var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
}
.series-card:hover { box-shadow: var(--shadow-lg, 0 10px 20px rgba(0, 0, 0, 0.15)); transform: translateY(-2px); }
.series-card-cover { background-size: cover; background-position: center; background-color: var(--color-primary, #2a2521); min-height: 170px; }
.series-card-body { padding: 1rem 1.25rem 1rem 0; }
.series-card-body h2 { font-size: 1.25rem; margin: 0.15rem 0 0.5rem; color: var(--color-primary, #2a2521); }
.series-card:hover h2 { color: var(--color-accent, #c9a227); }
.series-card-body p { color: var(--color-text-muted, #6b6459); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.75rem; }
.series-card-meta { font-size: 0.8rem; color: var(--color-text-muted, #8d8478); }

/* Same phone padding as .simple-page-container, so the subscribe box keeps
   room for Turnstile's 300px challenge. */
@media (max-width: 600px) {
  .series-container { padding: 20px 16px; }
  .series-card { grid-template-columns: 1fr; gap: 0; }
  .series-card-cover { min-height: 150px; }
  .series-card-body { padding: 1rem; }
}