/**
 * episodes-page.css — Immature Comics
 * Styles for the /episodes listing page View
 * View row CSS class: episodes-page-major
 *
 * Layout per row:
 *   Col 1 (180px) — thumbnail
 *   Col 2 (1fr)   — series name, badge, title, body
 *   Col 3 (auto)  — date, state badge, arrow
 *
 * Consistent with homepage.css colour tokens:
 *   Accent:      #e8671a
 *   Accent blue: #1a4acc
 *   Text:        #0a0a0a / #666 / #aaa
 *   Border:      rgba(0,0,0,0.08)
 */


/* ─────────────────────────────────────────────────────────────
   OUTER CONTAINER
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .views-element-container {
  max-width: 900px;
  margin: 2rem auto;
  /* padding: 0 2rem; */
}

.episodes-list {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}
/* ─────────────────────────────────────────────────────────────
   EACH EPISODE ROW
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major.views-row {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 1.5rem;
  padding: 1.25rem 3.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: background 0.2s ease;
  cursor: pointer;
}

.episodes-list .episodes-list-major.views-row:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.episodes-list .episodes-list-major.views-row:hover {
  background: #faf8f6;
}


/* ─────────────────────────────────────────────────────────────
   THUMBNAIL — col 1, spans all rows
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major .views-field-field-episode-thumbnail {
  grid-column: 1;
  grid-row: 1 / 5;
  width: 180px;
  height: auto;
  overflow: hidden;
  align-self: center;
}

.episodes-list .episodes-list-major .views-field-field-episode-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.episodes-list .episodes-list-major.views-row:hover .views-field-field-episode-thumbnail img {
  transform: scale(1.04);
}


/* ─────────────────────────────────────────────────────────────
   ROW 1 — SERIES NAME
   Orange, uppercase, small — above the badge line
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major .views-field-field-comic-series {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.episodes-list .episodes-list-major .views-field-field-comic-series .field-content {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8671a;
}

.episodes-list .episodes-list-major .views-field-field-comic-series a {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}


/* ─────────────────────────────────────────────────────────────
   ROW 2 — BADGE LINE: S1 + E9 side by side
   Uses display:contents so both .field-content elements
   participate in a shared flex row via the series field flex
───────────────────────────────────────────────────────────── */

/* Flex row wrapper for the badge — reuse series field row */
.episodes-list .episodes-list-major .views-field-field-issue-number,
.episodes-list .episodes-list-major .views-field-field-episode-number {
  display: contents;
}

/* Both badge halves sit in row 2 of col 2 via a shared flex context */
.episodes-list .episodes-list-major .views-field-field-comic-series {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Badge wrapper — sits below series name in the same flex column */
.episodes-list .episodes-list-major .views-field-field-comic-series::after {
  display: none; /* no pseudo content needed here */
}

/* Since display:contents can't reliably span grid rows,
   we use a different approach: float the badge fields
   into row 2 by assigning them grid-row: 2 explicitly */

.episodes-list .episodes-list-major .views-field-field-issue-number {
  display: block;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.episodes-list .episodes-list-major .views-field-field-episode-number {
  display: block;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

/* Both in the same grid cell — make them inline so they sit side by side */
.episodes-list .episodes-list-major .views-field-field-issue-number,
.episodes-list .episodes-list-major .views-field-field-episode-number {
  display: inline-flex;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Fix: grid can't place two items in same cell with inline-flex
   Solution: make issue number position relative and episode number
   follow naturally via the grid's auto-placement with subgrid trick.
   Cleanest CSS-only fix: nest both in a pseudo flex row using
   the grid's implicit inline context */

/* Override: place both in row 2 as a combined inline element */
.episodes-list .episodes-list-major .views-field-field-issue-number {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0;
}

.episodes-list .episodes-list-major .views-field-field-episode-number {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
    margin-left:1.5rem;
}

/* S1 — left half of badge */
.episodes-list .episodes-list-major .views-field-field-issue-number .field-content {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #0a0a0a;
  padding: 0.18rem 0.25rem 0.18rem 0.5rem;
  border-radius: 3px 0 0 3px;
  line-height: 1.5;
  white-space: nowrap;
}

/* E9 — right half of badge */
.episodes-list .episodes-list-major .views-field-field-episode-number .field-content {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #0a0a0a;
  padding: 0.18rem 0.5rem 0.18rem 0.25rem;
  border-radius: 0 3px 3px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1.5;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   ROW 3 — EPISODE TITLE
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major .views-field-title {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
}

.episodes-list .episodes-list-major .views-field-title .field-content {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #0a0a0a;
  line-height: 1.15;
}

.episodes-list .episodes-list-major .views-field-title a {
  color: inherit;
  text-decoration: none;
}

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


/* ─────────────────────────────────────────────────────────────
   ROW 4 — BODY / TAGLINE
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major .views-field-body {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
}

.episodes-list .episodes-list-major .views-field-body .field-content {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.5;
}

.episodes-list .episodes-list-major .views-field-body p {
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────
   COL 3 — DATE + EPISODE STATE + ARROW
   Stacked vertically, right-aligned
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major .views-field-created {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  text-align: right;
}

.episodes-list .episodes-list-major .views-field-created .field-content {
  font-size: 0.68rem;
  font-weight: 600;
  color: #aaa;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Episode State taxonomy badge — Released / Upcoming / In Production */
.episodes-list .episodes-list-major .views-field-field-episode-state {
  grid-column: 3;
  grid-row: 3 / 5;
  align-self: start;
  text-align: right;
}

.episodes-list .episodes-list-major .views-field-field-episode-state .field-content {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* Released — blue */
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content a[href*="released"],
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content:has(a[href*="released"]) {
  background: rgba(26, 74, 204, 0.1);
  color: #1a4acc;
}

/* Upcoming — orange */
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content a[href*="upcoming"],
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content:has(a[href*="upcoming"]) {
  background: rgba(232, 103, 26, 0.1);
  color: #e8671a;
}

/* In Production — muted */
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content a[href*="production"],
.episodes-list .episodes-list-major .views-field-field-episode-state .field-content:has(a[href*="production"]) {
  background: rgba(0, 0, 0, 0.06);
  color: #888;
}

/* Fallback state link styling */
.episodes-list .episodes-list-major .views-field-field-episode-state a {
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
}


/* ─────────────────────────────────────────────────────────────
   ARROW — absolute right edge
───────────────────────────────────────────────────────────── */

.episodes-list .episodes-list-major.views-row::after {
  content: '→';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: #ddd;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  z-index: 0;
}

.episodes-list .episodes-list-major.views-row:hover::after {
  color: #e8671a;
}


/* ─────────────────────────────────────────────────────────────
   PAGINATION
───────────────────────────────────────────────────────────── */

nav[aria-labelledby="pagination-heading"] {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 2rem;
}

nav[aria-labelledby="pagination-heading"] ul.js-pager__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

nav[aria-labelledby="pagination-heading"] ul.js-pager__items li {
  font-size: 0.75rem;
  font-weight: 600;
  color: #aaa;
}

nav[aria-labelledby="pagination-heading"] ul.js-pager__items li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #0a0a0a;
  text-decoration: none;
  font-size: 0.8rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}

nav[aria-labelledby="pagination-heading"] ul.js-pager__items li a:hover {
  background: #e8671a;
  border-color: #e8671a;
  color: #fff;
}


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

@media (max-width: 700px) {
  .episodes-list .episodes-list-major.views-row {
    grid-template-columns: 100px 1fr auto;
    padding-right: 2.5rem;
  }

  .episodes-list .episodes-list-major .views-field-field-episode-thumbnail {
    width: 100px;
    height: 100px;
  }

  .episodes-list .episodes-list-major .views-field-title .field-content {
    font-size: 0.9rem;
  }

  .episodes-list .episodes-list-major .views-field-created {
    display: none;
  }

  .episodes-list .episodes-list-major .views-field-field-episode-state {
    grid-row: 1 / 3;
  }
}

@media (max-width: 480px) {
  .views-element-container {
    padding: 0 1rem;
  }

  .episodes-list .episodes-list-major.views-row {
    grid-template-columns: 80px 1fr;
    padding-right: 1rem;
  }

  .episodes-list .episodes-list-major .views-field-field-episode-state,
  .episodes-list .episodes-list-major.views-row::after {
    display: none;
  }
}