/**
 * series-page.css — Immature Comics
 * Styles for the /series listing page
 * View CSS class: main-series-list
 *
 * Layout: 4-column card grid
 * Each card: cover image, genre, title, tagline, episode count
 *
 * Consistent with homepage.css colour tokens:
 *   Accent orange: #e8671a
 *   Accent blue:   #1a4acc
 *   Text primary:  #0a0a0a
 *   Text muted:    #666
 *   Border:        rgba(0,0,0,0.08)
 */


/* ─────────────────────────────────────────────────────────────
   PAGE WRAPPER
───────────────────────────────────────────────────────────── */

.main-series-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 2rem;
}


/* ─────────────────────────────────────────────────────────────
   EACH SERIES CARD
   Scoped to .series-page.views-row to avoid matching other
   .views-row elements elsewhere on the page
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s ease,
              box-shadow 0.25s ease,
              transform 0.25s ease;
}

.main-series-list .series-page.views-row:hover {
  border-color: rgba(232, 103, 26, 0.4);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-3px);
}


/* ─────────────────────────────────────────────────────────────
   COVER IMAGE
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-field-feature-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  flex-shrink: 0;
}

.main-series-list .series-page.views-row .views-field-field-feature-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.main-series-list .series-page.views-row .views-field-field-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.main-series-list .series-page.views-row:hover .views-field-field-feature-image img {
  transform: scale(1.05);
}


/* ─────────────────────────────────────────────────────────────
   CARD BODY — genre, title, tagline, count
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-field-genre,
.main-series-list .series-page.views-row .views-field-title,
.main-series-list .series-page.views-row .views-field-field-tagline,
.main-series-list .series-page.views-row .views-field-view {
  padding-left: 1rem;
  padding-right: 1rem;
}


/* ─────────────────────────────────────────────────────────────
   GENRE — small orange caps above title
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-field-genre {
  /* padding-top: 1rem; */
  padding-bottom: 0.25rem;
}

.main-series-list .series-page.views-row .views-field-field-genre .field-content {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8671a;
  position: relative;
  z-index: 2;
}

.main-series-list .series-page.views-row .views-field-field-genre a {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

/* Multiple genre terms — slash separated */
.main-series-list .series-page.views-row .views-field-field-genre .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-series-list .series-page.views-row .views-field-field-genre .field__item + .field__item::before {
  content: ' / ';
  color: #e8671a;
  margin: 0 0.15rem;
}


/* ─────────────────────────────────────────────────────────────
   TITLE
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-title {
  padding-top:1rem;
  padding-bottom: 0.4rem;
}

.main-series-list .series-page.views-row .views-field-title .field-content {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #0a0a0a;
}

.main-series-list .series-page.views-row .views-field-title a {
  color: inherit;
  text-decoration: none;
  display: block;
}

/* Clickable row — title link covers entire card */
.main-series-list .series-page.views-row .views-field-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* ─────────────────────────────────────────────────────────────
   TAGLINE
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-field-tagline {
  padding-bottom: 1rem;
  flex: 1;
}

.main-series-list .series-page.views-row .views-field-field-tagline .field-content {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #666;
}


/* ─────────────────────────────────────────────────────────────
   EPISODE COUNT — bottom of card
   Rendered by Global: View field (episode_count_by_series)
   CSS class on that View: episode-count-by-series
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row .views-field-view {
  padding-top: 0.75rem;
  padding-bottom: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main-series-list .series-page.views-row .views-field-view .field-content {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa;
  position: relative;
  z-index: 2;
}

/* Icon before episode count */
.main-series-list .series-page.views-row .views-field-view .field-content::before {
  content: '▦';
  margin-right: 0.35rem;
  font-size: 0.75rem;
  color: #e8671a;
}


/* ─────────────────────────────────────────────────────────────
   FAVOURITE ICON placeholder — bottom right of card
   Add when you implement favourites/bookmarks
───────────────────────────────────────────────────────────── */

.main-series-list .series-page.views-row::after {
  content: '♡';
  position: absolute;
  bottom: 0.85rem;
  right: 1rem;
  font-size: 0.9rem;
  color: #ddd;
  z-index: 2;
  transition: color 0.2s ease;
  pointer-events: none;
}

.main-series-list .series-page.views-row:hover::after {
  color: #e8671a;
}


/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */

/* Tablet — 2 columns */
@media (max-width: 900px) {
  .main-series-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 0 1.5rem;
  }
}

/* Mobile — 2 columns tight */
@media (max-width: 500px) {
  .main-series-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0 1rem;
  }

  .main-series-list .series-page.views-row .views-field-title .field-content {
    font-size: 0.85rem;
  }

  .main-series-list .series-page.views-row .views-field-field-tagline {
    display: none;
  }
}