/* ============================================================
   grid.css — Latest Update + Trending templates.
   Loaded on: is_page_template('latest-update.php')
              is_page_template('trending.php')

   Full-page poster grid using the larger card variant (13px
   titles / 12-14-16 padding), a no-image placeholder, and the
   paginated nav (with … dots). Adds the 48px footer margin
   these two pages use.
   ============================================================ */

.post-grid-section { padding: 40px 0; }

.post-grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   14px;
}

/* Anime poster card */
.post-card {
  position:      relative;
  display:       block;
  aspect-ratio:  2 / 3;
  border-radius: 10px;
  overflow:      hidden;
  background:    #1c1c1c;
  border:        1px solid var(--border);
  transition:    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.post-card:hover {
  border-color: var(--accent);
  transform:    translateY(-5px) scale(1.015);
  box-shadow:   0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(43, 238, 52, 0.2);
  z-index:      2;
}

.post-card .thumb           { position: absolute; inset: 0; }
.post-card .thumb img       { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.post-card:hover .thumb img { transform: scale(1.06); }

.post-card .card-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent          35%,
    rgba(0, 0, 0, 0.45)  60%,
    rgba(0, 0, 0, 0.93) 100%
  );
}

.post-card .card-body {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  12px 14px 16px;
}
.post-card .card-title {
  font-size:     13px;
  font-weight:   700;
  line-height:   1.35;
  color:         #fff;
  margin-bottom: 5px;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  transition:         color 0.15s ease;
}
.post-card:hover .card-title { color: var(--accent); }

.post-card .card-date {
  font-size:      11px;
  color:          rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Placeholder when a post has no featured image */
.post-card .thumb-placeholder {
  position:    absolute;
  inset:       0;
  display:     grid;
  place-items: center;
  background:  #222;
  color:       var(--muted);
  font-size:   12px;
  text-align:  center;
  padding:     16px;
}

/* ---------- Pagination ---------- */
.pagination {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             6px;
  margin-top:      40px;
  margin-bottom:   8px;
}
.pagination a,
.pagination span {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 10px;
  border:          1px solid var(--border);
  border-radius:   6px;
  font-size:       13px;
  color:           var(--muted);
  transition:      border-color 0.15s ease, color 0.15s ease;
}
.pagination a:hover  { border-color: var(--accent-hover); color: var(--accent-hover); }
.pagination .current { border-color: var(--accent); color: var(--accent); }
/* … dots — no interactive state */
.pagination .dots    { border-color: transparent; cursor: default; }

/* These two pages sit their footer 48px below the content. */
.site-footer { margin-top: 48px; }

/* ---------- Responsive ---------- */
/* Tablet: 3 columns */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Mobile: 2 columns */
@media (max-width: 780px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Small phones: tighten gap + shrink text */
@media (max-width: 420px) {
  .post-grid             { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .post-card .card-title { font-size: 11px; }
  .post-card .card-date  { font-size: 10px; }
  .post-card .card-body  { padding: 8px 10px 12px; }
}

/* Search results — highlight the searched term in the heading */
.section-heading .search-term { color: var(--accent); }