/* ============================================================
   home.css — Minimal Homepage template only.
   Loaded on: is_page_template('home.php')

   Homepage poster grid uses the compact card variant (12px
   titles / 10-11-13 padding) — deliberately smaller than the
   Latest Update & Trending pages (grid.css). Also carries the
   horizontal "Trending" scroll strip unique to the homepage.
   ============================================================ */

/* ---------- Latest Posts grid ---------- */
.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;          /* tall portrait — classic poster ratio */
  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:  10px 11px 13px;
}
.post-card .card-title {
  font-size:     12px;
  font-weight:   700;
  line-height:   1.35;
  color:         #fff;
  margin-bottom: 4px;
  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:      10px;
  color:          rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Pagination ---------- */
.pagination {
  display:         flex;
  justify-content: center;
  gap:             6px;
  margin-top:      40px;
}
.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); }

/* ---------- Trending scroll strip ---------- */
.trending-section { padding: 0 0 48px; }

.trending-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   16px;
}
/* Reuse .section-heading but drop its own margin-bottom here */
.trending-header .section-heading { margin-bottom: 0; }

.view-all-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--accent);
  border:        1px solid rgba(43, 238, 52, 0.35);
  border-radius: 20px;
  padding:       5px 14px;
  white-space:   nowrap;
  transition:    background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink:   0;
}
.view-all-btn svg { width: 13px; height: 13px; }
.view-all-btn:hover {
  background:   rgba(43, 238, 52, 0.1);
  border-color: var(--accent);
  color:        var(--accent-hover);
}

.trending-scroll-wrap { position: relative; }

.trending-row {
  display:          flex;
  gap:              12px;
  overflow-x:       auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom:   10px; /* space for scrollbar */
  scrollbar-width:  thin;
  scrollbar-color:  var(--border) transparent;
}
.trending-row::-webkit-scrollbar       { height: 4px; }
.trending-row::-webkit-scrollbar-track { background: transparent; }
.trending-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Fade the right edge to hint at scrollability */
.trending-scroll-wrap::after {
  content:        '';
  position:       absolute;
  top:            0;
  right:          0;
  width:          48px;
  height:         calc(100% - 10px); /* exclude scrollbar area */
  background:      linear-gradient(to left, var(--bg), transparent);
  pointer-events: none;
}

/* Trending card — portrait, fixed width */
.trend-card {
  position:         relative;
  flex-shrink:      0;
  width:            130px;
  aspect-ratio:     2 / 3;
  border-radius:    10px;
  overflow:         hidden;
  background:       #1c1c1c;
  border:           1px solid var(--border);
  scroll-snap-align: start;
  transition:       border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display:          block;
}
.trend-card:hover {
  border-color: var(--accent);
  transform:    translateY(-4px) scale(1.02);
  box-shadow:   0 14px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(43, 238, 52, 0.2);
  z-index:      2;
}

/* Rank badge — top-left corner */
.trend-rank {
  position:        absolute;
  top:             7px;
  left:            7px;
  z-index:         3;
  width:           22px;
  height:          22px;
  border-radius:   6px;
  background:      rgba(0, 0, 0, 0.72);
  border:          1px solid rgba(255, 255, 255, 0.12);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     800;
  color:           var(--accent);
  line-height:     1;
  backdrop-filter: blur(4px);
}
/* Ranks 1-3 get gold / silver / bronze tints */
.trend-card:nth-child(1) .trend-rank { color: #FFD700; border-color: rgba(255,215,0,0.35); }
.trend-card:nth-child(2) .trend-rank { color: #C0C0C0; border-color: rgba(192,192,192,0.35); }
.trend-card:nth-child(3) .trend-rank { color: #CD7F32; border-color: rgba(205,127,50,0.35); }

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

.trend-card .card-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent          30%,
    rgba(0, 0, 0, 0.4)   58%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.trend-card .card-body {
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  padding:  8px 9px 10px;
}
.trend-card .card-title {
  font-size:   11px;
  font-weight: 700;
  line-height: 1.3;
  color:       #fff;
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  transition:         color 0.15s ease;
}
.trend-card:hover .card-title { color: var(--accent); }

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

/* Mobile: 2-col grid + slightly wider trend cards for grip */
@media (max-width: 780px) {
  .post-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .trend-card { width: 120px; }
}

/* Small phones */
@media (max-width: 420px) {
  .post-grid             { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .post-card .card-title { font-size: 11px; }
  .trend-card            { width: 110px; }
  .trend-card .card-title { font-size: 10px; }
}

/* ---------- SEO / about copy ----------
   Renders only when the front page is a static Page with content in the editor.
   Mirrors the single-post synopsis card: clamped by main.js and revealed by
   "Show more", so the full text ships in the HTML while the page stays short.

   Width is capped at the Request banner's 900px rather than the full .wrap, so
   the two stack as one column and the lines stay readable.

   Tokens are only the ones main.css defines — --hairline / --surface-1 live in
   single.css, which never loads on the homepage. */
.home-seo-section { padding: 8px 0 0; }

.home-seo-card {
  max-width:     900px;
  margin:        0 auto;
  padding:       20px 22px;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: 12px;
}

.home-seo-body {
  position:    relative;
  overflow:    hidden;
  color:       var(--text);
  font-size:   0.95rem;
  line-height: 1.7;
}
.home-seo-body > * + *   { margin-top: 0.9em; }
.home-seo-body h1,
.home-seo-body h2,
.home-seo-body h3        { color: #fff; line-height: 1.3; }
.home-seo-body h1        { font-size: 1.35rem; }
.home-seo-body h2        { font-size: 1.15rem; }
.home-seo-body h3        { font-size: 1rem; }
.home-seo-body a         { color: var(--accent); }
.home-seo-body a:hover   { color: var(--accent-hover); }
.home-seo-body ul,
.home-seo-body ol        { padding-left: 1.25rem; }

/* Added by main.js only when the copy is taller than this — roughly 3 lines. */
.home-seo-body.is-clamped { max-height: 96px; }

/* Fade the cut-off line so the text trails away instead of being chopped
   mid-glyph. The transparent stop matches --bg-card (#1a1a1a) exactly, or the
   gradient would show as a grey wash at the top. */
.home-seo-body.is-clamped::after {
  content:       '';
  position:      absolute;
  left:          0;
  right:         0;
  bottom:        0;
  height:        48px;
  background:    linear-gradient(to bottom, rgba(26, 26, 26, 0), var(--bg-card));
  pointer-events: none;
}

/* [hidden] has to beat the display rule below, or the button leaks onto pages
   whose copy is short enough that main.js never enables it. */
.home-seo-more[hidden] { display: none; }
.home-seo-more:not([hidden]) {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  margin-top:  14px;
  padding:     0;
  background:  none;
  border:      none;
  color:       var(--accent);
  font-family: inherit;
  font-size:   12.5px;
  font-weight: 700;
  cursor:      pointer;
  transition:  color 0.15s ease;
}
.home-seo-more:hover { color: var(--accent-hover); }
.home-seo-chevron    { transition: transform 0.2s ease; }
.home-seo-more[aria-expanded="true"] .home-seo-chevron { transform: rotate(180deg); }

@media (max-width: 780px) {
  .home-seo-card { padding: 16px 18px; }
}