/* POSTER THEME (theme_css=poster.css) — bold statement poster: a saturated
   yellow hero with mega grotesk type and tilted artwork, dropping into a dark
   gallery of episode thumbnails.

   Colors/type/radii/layout come from settings (homepage_header_background_color,
   background_color, primary_color, heading_font, title size/weight, feed layout).
   This file owns only the bespoke skin: the tilted hero artwork, the outline
   pill CTAs, the 4-up gallery, and the image-first cards. */

:root {
  --po-accent: var(--primary-color);   /* this look's accent — primary_color is protected, so own it here */
  --po-ink: var(--btn-text-color);      /* type on the yellow hero */
  --po-rule: color-mix(in srgb, var(--text-color) 12%, transparent);
}

/* ---------- NAV (sits on the yellow hero) ---------- */
.show-page .navbar-brand,
.show-page .navbar-brand div {
  color: var(--po-ink) !important;
  letter-spacing: -0.01em;
}
.navbar-nav .nav-link:hover { opacity: 0.65; }
/* nav CTA: solid ink pill on the yellow */
#nav-cta .btn, .navbar .btn-base-1 {
  border: none !important; font-weight: 600 !important; padding: 10px 22px !important;
}

/* ---------- HERO ---------- */
/* hero bg + type colour come from homepage_header_background_color /
   homepage_header_text_color — the design layer already paints #header-hero and
   its headings/paragraphs, so don't restate them here. */
#header-hero { border-bottom: none !important; }
/* the highlight span just inherits the hero ink (no gradient in this theme) */
#homepage-header-title .text-highlight {
  color: inherit !important; background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
#homepage-header-description { opacity: 0.82; max-width: 520px; line-height: 1.6 !important; }
/* artwork: tilted "stacked poster" card */
#header-hero #c-artwork img {
  transform: rotate(-5deg);
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(20,17,11,0.35);
  transition: transform 0.4s ease;
}
#header-hero #c-artwork img:hover { transform: rotate(-1deg) scale(1.02); }
/* hero CTAs: outline pills on yellow */
#header-hero #c-text .btn {
  background: transparent !important; color: var(--po-ink) !important;
  border: 1.5px solid var(--po-ink) !important; font-weight: 600 !important; padding: 10px 22px !important; box-shadow: none !important;
}
#header-hero #c-text .btn:hover { background: var(--po-ink) !important; color: #fff !important; }

/* ---------- THE GALLERY (dark feed) ---------- */
#recent-episodes-header h2,
.section-wrapper h2.heading-2 { letter-spacing: -0.02em; }
#recent-episodes-header .col-4 a {
  color: var(--po-accent) !important;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
}
/* 4-up gallery on wide screens (the .pp-list owns arrangement) */
@media (min-width: 1200px) {
  .feed-section .pp-list--grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* image-first cards: art leads, minimal text under it */
.feed-section .pp-card.card {
  background: transparent !important; border: none !important; }
.feed-section .pp-card .pp-card-image img {
  border-radius: 12px !important;
  transition: transform 0.3s ease;
}
.feed-section .pp-card:hover .pp-card-image img { transform: translateY(-4px); }
.feed-section .pp-card .pp-card-body { padding: 16px 0 0 0 !important; }
/* date sits above the title as a small eyebrow */
.feed-section .pp-card-date {
  color: var(--text-light-color) !important;
  font-size: 0.68rem !important; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px !important;
}
/* titles are links, so link_color would tint them accent — keep them plain and
   let the accent do the work on hover; clamp to 2 lines so the gallery rows stay even */
.feed-section .pp-card-title,
.feed-section .pp-card-title a {
  line-height: 1.3 !important; color: var(--heading-color) !important;
  font-size: 1rem !important; font-weight: 700 !important;
}
.feed-section .pp-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-section .pp-card-title a:hover { color: var(--po-accent) !important; }
/* the poster look is art + title + date — no excerpt, no CTA button */
.feed-section .pp-card-description { display: none !important; }
.feed-section .pp-card-cta { display: none !important; }

/* ---------- FOOTER ---------- */
#footer.footer { border-top: 1px solid var(--po-rule); }
.footer-links a:hover, .copy-links a:hover, #footer.footer a:hover { color: var(--po-accent) !important; }