/**
 * homepage-grid.css — Immature Comics
 * Instagram-style episode grid for the homepage View
 *
 * Based on confirmed rendered markup from your Unformatted List View.
 *
 * Confirmed selectors from your HTML:
 *   Wrapper:    #block-immaturecomics-content
 *   Row:        .views-row
 *   Thumbnail:  .views-field-field-episode-thumbnail
 *   Title:      .views-field-title
 */


/* ─────────────────────────────────────────────────────────────
   GRID CONTAINER
   The .views-element-container holds all rows —
   we turn it into a CSS Grid
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .views-element-container {
  width: 100%;
}

#block-immaturecomics-content .episode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 700px;
  margin:80px auto;
}

/* ─────────────────────────────────────────────────────────────
   EACH EPISODE CELL
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .episode-grid .episodes-by-series {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   THUMBNAIL — fills the entire square cell
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .episodes-by-series .views-field-field-episode-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#block-immaturecomics-content .episodes-by-series .views-field-field-episode-thumbnail .field-content {
  width: 100%;
  height: 100%;
}

#block-immaturecomics-content .episodes-by-series .views-field-field-episode-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

#block-immaturecomics-content .episodes-by-series .views-field-field-episode-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.35s ease;
  border:2px solid #222;
}

/* ─────────────────────────────────────────────────────────────
   HOVER — zoom image, reveal title
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .episodes-by-series:hover
  .views-field-field-episode-thumbnail img {
  transform: scale(1.06);
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────
   TITLE OVERLAY — slides up on hover
───────────────────────────────────────────────────────────── */
#block-immaturecomics-content .episodes-by-series .main-series-list .views-field-title {
  position: relative;
}


#block-immaturecomics-content .episodes-by-series .views-field-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 0.6rem 0.6rem;
  /* background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.5) 65%,
    transparent 100%
  ); */
  background:rgba(0,0,0,.8);
  opacity: 1;
  transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;   /* title overlay doesn't block thumbnail link */
  z-index: 2;
}

#block-immaturecomics-content .episodes-by-series:hover .views-field-title {
  opacity: 1;
  transform: translateY(0);
}

#block-immaturecomics-content .episodes-by-series .views-field-title .field-content {
  display: block;
}

#block-immaturecomics-content .episodes-by-series .views-field-title a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   RSS FEED LINK — hide it, it shouldn't be in the grid
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .episodes-by-series .feed-icon {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   CONTEXTUAL LINKS (admin edit overlay) — keep above grid
───────────────────────────────────────────────────────────── */

#block-immaturecomics-content .episodes-by-series .contextual {
  position: absolute;
  z-index: 10;
  grid-column: 1;
  grid-row: 1;
}

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

/* Tablet — keep 3 cols, tighten gap */
@media (max-width: 768px) {
  #block-immaturecomics-content .episodes-by-series .contextual-region {
    gap: 3px;
  }
}

/* Mobile — 2 columns, titles always visible (no hover on touch) */
@media (max-width: 480px) {
  #block-immaturecomics-content .episodes-by-series .contextual-region {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  #block-immaturecomics-content .episodes-by-series .views-field-title {
    opacity: 1;
    transform: translateY(0);
  }
}