/**
 * taxonomy-page.css — Immature Comics
 * Styles for taxonomy term listing pages (Genre, etc.)
 * View CSS class: all-taxo-list
 *
 * Field order in markup:
 *   1. views-field-type           — content type badge (Series/Episode/Update)
 *   2. views-field-field-feature-image — thumbnail, left column
 *   3. views-field-title          — title, right column
 *   4. views-field-body           — excerpt, right column
 *   5. views-field-created        — date, right column bottom
 *
 * Layout: horizontal rows, image left / content right
 * Badge: overlaid top-left on image via absolute positioning
 *
 * Colour tokens:
 *   Accent orange:  #e8671a
 *   Accent blue:    #1a4acc
 *   Text primary:   #0a0a0a
 *   Text muted:     #666
 *   Border:         rgba(0,0,0,0.07)
 */


/* ─────────────────────────────────────────────────────────────
   LIST WRAPPER
───────────────────────────────────────────────────────────── */

.all-taxo-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hide the RSS feed link Drupal appends */
.all-taxo-list .feed-icon {
  display: none;
}

/* Hide the taxonomy term header block Drupal injects */
.all-taxo-list header {
  display: none;
}


/* ─────────────────────────────────────────────────────────────
   EACH ROW
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row.views-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "image  title"
    "image  body"
    "image  created"
    "image  .";
  gap: 0 1.75rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  position: relative;
}

.all-taxo-list .all-taxonomy-row.views-row:last-child {
  border-bottom: none;
}


/* ─────────────────────────────────────────────────────────────
   TYPE BADGE — overlaid top-left on image
   Field sits before image in DOM so we position it absolutely
   relative to the row, pinned to image column top-left.
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row .views-field-type {
  position: absolute;
  top: calc(1.75rem + 0.6rem); /* row padding + inset */
  left: 0.6rem;
  z-index: 2;
}

.all-taxo-list .all-taxonomy-row .views-field-type .field-content {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: #0a0a0a;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  display: inline-block;
  line-height: 1.5;
}

/* Colour-code badge by content type */
.all-taxo-list .all-taxonomy-row .views-field-type .field-content:has-text("Series") {
  background: #1a4acc;
}

/* Fallback: use data or class-based colouring if :has-text not supported */
/* Series = blue, Episode = orange, Update = dark */


/* ─────────────────────────────────────────────────────────────
   FEATURE IMAGE — left column
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row .views-field-field-feature-image {
  grid-area: image;
  align-self: start;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f0f0;
}

.all-taxo-list .all-taxonomy-row .views-field-field-feature-image a {
  display: block;
  width: 100%;
}

.all-taxo-list .all-taxonomy-row .views-field-field-feature-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.all-taxo-list .all-taxonomy-row:hover .views-field-field-feature-image img {
  transform: scale(1.03);
}


/* ─────────────────────────────────────────────────────────────
   TITLE — right column
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row .views-field-title {
  grid-area: title;
  align-self: start;
  padding-top: 0.1rem;
}

.all-taxo-list .all-taxonomy-row .views-field-title .field-content a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #0a0a0a;
  text-decoration: none;
  display: block;
}

.all-taxo-list .all-taxonomy-row .views-field-title .field-content a:hover {
  color: #e8671a;
}


/* ─────────────────────────────────────────────────────────────
   BODY — excerpt, right column
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row .views-field-body {
  grid-area: body;
  align-self: start;
  padding-top: 0.5rem;
}

.all-taxo-list .all-taxonomy-row .views-field-body .field-content,
.all-taxo-list .all-taxonomy-row .views-field-body p {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────
   DATE — right column bottom
───────────────────────────────────────────────────────────── */

.all-taxo-list .all-taxonomy-row .views-field-created {
  grid-area: created;
  align-self: end;
  padding-top: 0.75rem;
}

.all-taxo-list .all-taxonomy-row .views-field-created .field-content,
.all-taxo-list .all-taxonomy-row .views-field-created time {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #aaa;
}


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

@media (max-width: 768px) {
  .all-taxo-list {
    padding: 0 1rem;
  }

  .all-taxo-list .all-taxonomy-row.views-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "title"
      "body"
      "created";
    gap: 0.75rem 0;
    padding: 1.25rem 0;
  }

  .all-taxo-list .all-taxonomy-row .views-field-type {
    top: calc(1.25rem + 0.5rem);
    left: 0.5rem;
  }

  .all-taxo-list .all-taxonomy-row .views-field-title .field-content a {
    font-size: 1.15rem;
  }

  .all-taxo-list .all-taxonomy-row .views-field-field-feature-image img {
    border-radius: 6px;
  }
}