/* Frontpage redesign — layered on top of mojaloss-movie-redesign/assets/style.css.
   Shared tokens (--bg, --teal, --font-display, etc.) and chrome (navbar, search,
   bell, profile, footer) come from the movie sheet. */

body.mj-fp-redesign { background: var(--bg); }
/* No top padding on main — the hero extends under the translucent navbar
   exactly like the movie page, so the backdrop reads to the very top edge. */
body.mj-fp-redesign .mj-fp-main { padding-top: 0; }

/* =====================================================================
   Hero carousel
   ===================================================================== */
/* Fixed hero height so the backdrop gradient stops in the same place
   regardless of how long any slide's overview text is. The active slide
   no longer drives the height, so swapping slides cannot reflow the page. */
.mj-fp-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
  margin: 0 0 32px;
  overflow: hidden;
}
/* Content anchored to the top (under the translucent navbar) so the title
   sits close to the topbar — same vertical rhythm as the movie/TV pages. */
.mj-fp-hero-slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 220px var(--gutter-page) 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
  z-index: 1;
}
.mj-fp-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.mj-fp-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 20%;
  background-color: #1a1a28;
}
/* The first 70% of the image is fully visible; the bottom 30% fades to the
   page background so content reads against a solid base. The right-side
   horizontal gradient is intentionally subtle so faces in the backdrop are
   never tinted by the dark side panel. */
.mj-fp-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(8,8,13,0.16) 0%, rgba(8,8,13,0.08) 38%, rgba(8,8,13,0.78) 88%, var(--bg) 100%),
    linear-gradient(to right, rgba(8,8,13,0.94) 0%, rgba(8,8,13,0.78) 30%, rgba(8,8,13,0.36) 56%, rgba(8,8,13,0.06) 82%, transparent 100%);
}
.mj-fp-hero-content {
  position: relative; z-index: 1;
  max-width: 640px;
}
.mj-fp-hero-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.mj-fp-pill {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 500; letter-spacing: 0.5px;
  padding: 4px 10px;
  background: rgba(8,8,13,0.62);
  color: rgba(232,230,225,0.86);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  white-space: nowrap;
}
.mj-fp-pill--accent { background: var(--teal-dim); color: var(--teal); }
.mj-fp-pill--info   { background: rgba(91,156,255,0.15); color: #8bb4ff; }

/* Match the movie page hero title size exactly so headings read consistently
   across the frontpage and single-post takeover. */
body.mj-fp-redesign .mj-fp-hero-title {
  font-family: var(--font-display) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 0 0 12px !important;
  background: none !important; padding: 0 !important; box-shadow: none !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.74), 0 1px 2px rgba(0,0,0,0.92);
}
/* Cap overview to three lines so a long synopsis can't push the action row
   onto a different vertical position than a short one — keeps the hero
   layout stable as the carousel rotates. */
body.mj-fp-redesign .mj-fp-hero-overview {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-secondary);
  max-width: 540px;
  margin: 0 0 24px;
  background: none; padding: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0,0,0,0.78);
}

/* Hero action row — buttons themselves use the shared .mj-btn / .mj-btn-primary
   / .mj-btn-secondary / .mj-favorite-wrap rules from mojaloss-movie-redesign
   style.css so movie page and frontpage stay visually identical. */
body.mj-fp-redesign .hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
  margin-top: 4px;
}
body.mj-fp-redesign .hero-actions .mj-btn,
body.mj-fp-redesign .hero-actions .simplefavorite-button {
  min-width: 132px;
  height: 42px !important;
}

.mj-fp-hero-dots {
  position: absolute; right: var(--gutter-page); bottom: 32px;
  display: flex; gap: 8px;
  z-index: 4;
}
.mj-fp-hero-dot {
  width: 24px; height: 4px;
  background: rgba(255,255,255,0.18);
  border: none; border-radius: 2px;
  cursor: pointer; padding: 0;
  transition: background var(--dur-base), width var(--dur-base);
}
.mj-fp-hero-dot.is-active {
  background: var(--teal);
  width: 32px;
}

/* =====================================================================
   Filter pills
   ===================================================================== */
.mj-fp-filter-pills {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 var(--gutter-page);
  margin: 0 0 32px;
}
.mj-fp-filter-pill {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  padding: 8px 18px;
  background: var(--tag-bg);
  color: var(--fg-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
  white-space: nowrap;
}
.mj-fp-filter-pill:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.08);
  border-color: var(--border-hover);
}
.mj-fp-filter-pill.is-active {
  background: var(--teal-dim);
  color: var(--teal);
  border-color: rgba(61,217,160,0.30);
}

/* =====================================================================
   Section rails
   ===================================================================== */
.mj-fp-row {
  padding: 0 var(--gutter-page);
  margin: 0 0 40px;
}
.mj-fp-row-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
body.mj-fp-redesign .mj-fp-row-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
  background: none !important; padding: 0 !important; box-shadow: none !important;
  text-align: left !important;
  letter-spacing: -0.3px !important;
}
.mj-fp-row-link {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base);
}
.mj-fp-row-link:hover { color: #5ee5b3; }
.mj-fp-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mj-fp-rail-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mj-fp-rail-controls.is-hidden { display: none; }
body.mj-fp-redesign .mj-fp-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), opacity var(--dur-base);
}
body.mj-fp-redesign .mj-fp-rail-btn:hover:not(:disabled) {
  background: var(--teal-dim);
  border-color: rgba(61,217,160,0.34);
  color: var(--teal);
}
body.mj-fp-redesign .mj-fp-rail-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
body.mj-fp-redesign .mj-fp-rail-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.mj-fp-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 16px;
}
.mj-fp-grid--continue {
  gap: 14px;
}
.mj-fp-rail {
  grid-auto-flow: column;
  grid-auto-columns: clamp(136px, 10vw, 178px);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter-page);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.mj-fp-rail::-webkit-scrollbar { display: none; }
.mj-fp-rail .mj-fp-card { scroll-snap-align: start; }
.mj-fp-rail.mj-fp-grid--continue {
  grid-auto-columns: clamp(220px, 18vw, 340px);
}

@media (max-width: 1280px) {
  .mj-fp-grid:not(.mj-fp-rail) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mj-fp-rail { grid-auto-columns: clamp(132px, 13vw, 168px); }
  .mj-fp-rail.mj-fp-grid--continue { grid-auto-columns: clamp(204px, 19vw, 300px); gap: 12px; }
}
@media (max-width: 960px) {
  .mj-fp-grid:not(.mj-fp-rail) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mj-fp-rail { grid-auto-columns: clamp(124px, 18vw, 158px); }
  .mj-fp-rail.mj-fp-grid--continue { grid-auto-columns: minmax(190px, 44vw); }
}
@media (max-width: 640px) {
  .mj-fp-grid:not(.mj-fp-rail) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .mj-fp-rail { grid-auto-columns: clamp(112px, 30vw, 148px); gap: 12px; padding-bottom: 6px; }
  .mj-fp-rail.mj-fp-grid--continue { grid-auto-columns: minmax(168px, 72vw); gap: 12px; }
}

/* =====================================================================
   Card
   ===================================================================== */
.mj-fp-card {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: var(--fg);
  transition: transform 0.25s var(--ease-default);
}
.mj-fp-card:hover { transform: translateY(-3px); }
.mj-fp-card-art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-poster);
  background-color: var(--card);
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s var(--ease-default);
}
.mj-fp-grid--continue .mj-fp-card-art { aspect-ratio: 16 / 9; }
.mj-fp-grid--continue .mj-fp-card-title {
  margin-top: 8px;
  font-size: 12px;
}
.mj-fp-grid--continue .mj-fp-card-year {
  font-size: 10px;
}
.mj-fp-card:hover .mj-fp-card-art {
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  transform: scale(1.02);
}
.mj-fp-card-art.is-empty {
  /* Soft gradient when no poster — color seeded from a fallback set so
     each card looks distinct rather than a wall of identical placeholders. */
  background-image: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(8,8,13,0.85) 70%);
}
.mj-fp-card-badge {
  position: absolute; top: 8px; right: 8px;
  max-width: calc(100% - 16px);
  background: rgba(8,8,13,0.78);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--fg-secondary);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mj-fp-card-rating span {
  font-size: 0.9em;
  line-height: 1;
}
.mj-fp-card-rating {
  position: absolute;
  left: 8px;
  bottom: 8px;
  min-width: 34px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(8,8,13,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f3c14b;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.36);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mj-fp-card-progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(255,255,255,0.10);
}
.mj-fp-card-progress span {
  display: block;
  height: 100%;
  background: var(--teal);
}
.mj-fp-card-title {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mj-fp-card-year {
  margin-top: 2px;
  font-size: 11px;
  color: var(--fg-muted);
}

/* =====================================================================
   Responsive — breakpoints align with the shared chrome (1024 / 820 /
   640 / 420) so the navbar height and hero spacing stay in sync. The
   navbar wraps the search field below the brand at 820px (≈+50px tall)
   and hides the search input entirely at 640px in favour of a search
   icon button (back to single-row).
   ===================================================================== */
@media (max-width: 1024px) {
  .mj-fp-hero-slide { padding-left: 24px; padding-right: 24px; }
  .mj-fp-row,
  .mj-fp-filter-pills { padding-left: 24px; padding-right: 24px; }
  .mj-fp-hero-dots { right: 24px; }
}

@media (max-width: 820px) {
  /* Navbar wraps to two rows here, so push the hero content down to clear
     the taller bar, and trim hero height a bit since real estate is tighter. */
  .mj-fp-hero { height: 58vh; min-height: 500px; max-height: 620px; }
  .mj-fp-hero-slide { padding-top: 252px; padding-bottom: 32px; }
  body.mj-fp-redesign .mj-fp-hero-title { font-size: 40px !important; }
  body.mj-fp-redesign .mj-fp-hero-overview { -webkit-line-clamp: 2; max-width: 100%; }
}

@media (max-width: 640px) {
  /* Navbar collapses back to one row (search becomes an icon button). */
  .mj-fp-hero { height: 48vh; min-height: 340px; max-height: 400px; }
  .mj-fp-hero-slide { justify-content: flex-end; padding: 0 20px 28px; }
  body.mj-fp-redesign .mj-fp-hero-title { font-size: 32px !important; letter-spacing: -0.5px !important; }
  body.mj-fp-redesign .mj-fp-hero-overview { font-size: 14px; -webkit-line-clamp: 1; margin-bottom: 16px; }
  .mj-fp-hero-pills { gap: 6px; margin-bottom: 12px; }
  .mj-fp-pill { font-size: 10px; padding: 3px 8px; }
  .mj-fp-card-rating { min-width: 30px; height: 22px; padding: 0 7px; font-size: 11px; }
  .mj-fp-hero-dots { right: 20px; bottom: 20px; }
  .mj-fp-row,
  .mj-fp-filter-pills { padding-left: 20px; padding-right: 20px; }
  .mj-fp-row { margin-bottom: 32px; }
  .mj-fp-row-head { gap: 12px; }
  .mj-fp-row-actions { gap: 8px; }
  body.mj-fp-redesign .mj-fp-rail-btn { width: 30px; height: 30px; }
  .mj-fp-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 24px;
  }
  .mj-fp-filter-pills::-webkit-scrollbar { display: none; }
  body.mj-fp-redesign .mj-fp-row-title { font-size: 18px !important; }
  /* Action row: keep buttons inline, but allow wrapping if all three exceed
     the viewport. Tighten button padding so they fit two-up on small phones. */
  body.mj-fp-redesign .hero-actions { gap: 7px; margin-top: 0; }
  body.mj-fp-redesign .hero-actions .mj-btn,
  body.mj-fp-redesign .hero-actions .simplefavorite-button {
    min-width: 104px;
    height: 34px !important;
    padding: 8px 13px !important;
    font-size: 12px !important;
    gap: 6px;
    border-radius: 8px !important;
  }
  body.mj-fp-redesign .hero-actions .mj-btn svg,
  body.mj-fp-redesign .hero-actions .mj-favorite-icon,
  body.mj-fp-redesign .hero-actions .mj-favorite-icon svg {
    width: 13px;
    height: 13px;
  }
  body.mj-fp-redesign .hero-actions .simplefavorite-button-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
  }
}

/* Small phones: 2 cards per row keeps posters readable; horizontal continue
   rail scales down to ~80% viewport width per card. */
@media (max-width: 420px) {
  .mj-fp-hero { height: 46vh; min-height: 300px; max-height: 340px; margin-bottom: 24px; }
  body.mj-fp-redesign .mj-fp-row-title { font-size: 17px !important; }
  .mj-fp-row-actions { gap: 6px; }
  body.mj-fp-redesign .mj-fp-rail-btn { width: 28px; height: 28px; }
  body.mj-fp-redesign .mj-fp-rail-btn svg { width: 18px; height: 18px; }
  .mj-fp-grid:not(.mj-fp-rail) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .mj-fp-rail { grid-auto-columns: clamp(108px, 30vw, 132px); gap: 10px; }
  .mj-fp-rail.mj-fp-grid--continue { grid-auto-columns: minmax(144px, 80vw); }
  body.mj-fp-redesign .mj-fp-hero-title { font-size: 28px !important; }
  body.mj-fp-redesign .mj-fp-hero-overview { display: none; }
  .mj-fp-hero-slide { padding: 0 20px 24px; }
  .mj-fp-card-rating { min-width: 28px; height: 20px; padding: 0 6px; font-size: 10px; }
  body.mj-fp-redesign .hero-actions { gap: 6px; }
  body.mj-fp-redesign .hero-actions .mj-btn,
  body.mj-fp-redesign .hero-actions .simplefavorite-button {
    min-width: 94px;
    height: 30px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
    gap: 5px;
  }
  body.mj-fp-redesign .hero-actions .mj-btn svg,
  body.mj-fp-redesign .hero-actions .mj-favorite-icon,
  body.mj-fp-redesign .hero-actions .mj-favorite-icon svg {
    width: 12px;
    height: 12px;
  }
}