/* ==== Hero ==== */
.hero-banner {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  overflow: hidden;
}

.hero-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Shows until a hero video/image is set on the homepage (Homepage
     Hero fields) — dark on purpose so an empty hero still looks
     intentional instead of a blank gray box. */
  background-color: var(--color-near-black);
}

.hero-banner__video,
.hero-banner__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.hero-banner__content {
  position: relative;
  z-index: 1;
}

.hero-banner__content .sub-h {
  color: var(--color-accent);
  font-size: clamp(0.75rem, 2.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap !important;
}

@media (max-width: 400px) {
  .hero-banner__content .sub-h {
    letter-spacing: 0.08em;
  }
}

@media (max-width: 480px) {
  /* The eyebrow text is admin-editable (Homepage Hero fields) with no
     length limit — forcing nowrap on it has no escape hatch on the
     narrowest phones if a longer string gets entered, and can push
     past the container edge. Letting it wrap here costs nothing on
     the short strings it's shipped with so far. */
  .hero-banner__content .sub-h {
    white-space: normal !important;
  }
}

.hero-banner__content .h {
  max-width: 20ch;
  color: var(--color-white);
  font-size: clamp(2.75rem, 7vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
}

.hero-banner__social {
  position: absolute;
  z-index: 1;
  top: var(--space-8);
  right: var(--space-8);
  display: flex;
  gap: var(--space-4);
}

.hero-banner__scroll {
  position: absolute;
  z-index: 1;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
}

/* ==== Category strip: colored panel carousel ==== */
.category-strip-wrap {
  position: relative;
}

.category-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  /* .category-strip__nav (below) is a 40px circle sitting at
     var(--space-4) from each edge — same overlap bug as
     .home-grid-strip/.patreon-row__track/.shorts-row__track had:
     without matching track padding, the first panel's number/label
     rendered right underneath the prev arrow. */
  padding: 0 56px;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-strip li {
  flex: 1 0 240px;
  scroll-snap-align: start;
}

.category-strip a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 260px;
  padding: var(--space-6);
  color: var(--color-white);
  background: var(--color-category-bg, var(--color-accent));
}

/* The six "retro" brand colors, in order, from the brand guide. */
.category-strip li:nth-child(6n+1) a { --color-category-bg: var(--color-retro-1); }
.category-strip li:nth-child(6n+2) a { --color-category-bg: var(--color-retro-2); }
.category-strip li:nth-child(6n+3) a { --color-category-bg: var(--color-retro-3); }
.category-strip li:nth-child(6n+4) a { --color-category-bg: var(--color-retro-4); }
.category-strip li:nth-child(6n+5) a { --color-category-bg: var(--color-retro-5); }
.category-strip li:nth-child(6n+6) a { --color-category-bg: var(--color-retro-6); }

.category-strip__number {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
}

.category-strip__label {
  font-size: var(--font-size-h3);
  font-weight: bold;
  margin: var(--space-4) 0 auto;
}

.category-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
  border-top: 1px dotted rgba(255, 255, 255, 0.4);
  padding-top: var(--space-3);
}

.category-strip__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  cursor: pointer;
}

.category-strip__nav--prev { left: var(--space-4); }
.category-strip__nav--next { right: var(--space-4); }

/* ==== Shared section spacing ==== */
.home-section {
  padding: var(--space-12) 0;
}

.home-section .container-fluid {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Section header: title on the left, "View all …" on the same baseline
   to the right — instead of a small button stranded in a tall gap under
   the grid. */
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.home-section__head .h {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: 800;
  line-height: 1.1;
}

.home-section__viewall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.home-section__viewall:hover {
  color: var(--color-accent-dark);
  gap: var(--space-3);
}

/* Thumbnail crop (fixed 4:3 ratio, rounded corners) now lives in the
   shared css/components/blog-card.css, used by every template that
   renders content-archive-post.php, not just the homepage. */

/* ==== "Wide" homepage grids (Reviews/Interviews/News) as a scroll
   strip instead of a wrapping grid — same wheel-to-scroll + overlay
   arrow pattern as Patreon Exclusives and the About page's "Meet the
   Team" slider. The cards inside (.blog-item, from content-archive-
   post.php) keep their existing markup/col-* classes from the legacy
   main.css grid system; this just overrides that grid's wrap/percent-
   width behavior to a fixed-width nowrap strip instead, scoped to
   .home-grid-strip so the non-wide Podcasts grid (still a real
   wrapping grid) is untouched. */
.home-grid-strip {
  position: relative;
  /* Contains the row below so its legacy negative margin (see next
     rule) can never blow out the page's own width — the arrows are
     positioned just inside this box instead of overhanging it, so
     nothing needs to escape this boundary to stay visible. */
  overflow: hidden;
}

.home-grid-strip .row.blog-grid {
  /* .row (-15px each side) and the legacy .blog-items (-35px each
     side, css/main.css) both target this same element for gutter
     compensation in the wrapping-grid layout this was built for —
     irrelevant now that it's a fixed-width scroll strip, and actively
     breaks it: combined with overflow-x:auto, that negative margin
     was extending past this section's own box and taking the whole
     page's width with it. Reset to 0 and use `gap` for spacing
     instead. */
  margin: 0 !important;
  gap: var(--space-4);
  flex-wrap: nowrap;
  /* .blog-grid (css/components/blog-card.css) centers a ragged last
     row on the category-feed grids — correct there, but on this
     single-line, horizontally-overflowing strip "center" makes the
     browser start the scroll frame in the *middle* of the content
     instead of at the first card, so the true first card renders
     partially (or fully) scrolled off past the left edge before any
     scrolling happens. That was the real cause of the recurring
     "first thumbnail cut off" bug, not the arrow-clearance padding
     below (needed too, but wasn't the actual culprit). */
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* .home-grid-strip__nav (below) is a 40px circle sitting at 8px from
     each edge, positioned relative to .home-grid-strip itself, not the
     scroll track — with only 2px of track padding, the first card sat
     right underneath the prev arrow at rest (and the last card under
     the next arrow at full scroll) instead of clearing it. */
  padding: 2px 56px var(--space-2);
}

.home-grid-strip .row.blog-grid::-webkit-scrollbar {
  display: none;
}

.home-grid-strip .blog-item {
  flex: 0 0 300px !important;
  max-width: none !important;
  /* .blog-items .col-12 (css/main.css) gives every card 35px of
     left/right padding, sized for the wrapping grid's gutters — with
     `gap` now doing that job instead, this just wastes real width. */
  padding: 0 !important;
  scroll-snap-align: start;
}

.home-grid-strip__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.home-grid-strip__nav:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.home-grid-strip__nav--prev { left: 8px; }
.home-grid-strip__nav--next { right: 8px; }

@media (max-width: 640px) {
  .home-grid-strip .blog-item {
    flex-basis: 82% !important;
  }

  .home-grid-strip__nav {
    display: none;
  }

  /* No arrows to clear at this width — back to the original minimal
     padding instead of wasting 56px of space on either side. */
  .home-grid-strip .row.blog-grid {
    padding: 2px 2px var(--space-2);
  }
}

/* Shared heading row so the "Publications" title and the "Popular This
   Week" sidebar heading line up at the same baseline regardless of their
   different font sizes — keeps the carousel image and the first popular
   post thumbnail starting at the same vertical position underneath. */
.section-heading {
  display: flex;
  align-items: flex-end;
  height: 3.25rem;
  margin: 0 0 var(--space-4);
}

.section-heading .h,
.section-heading .popular-posts__heading {
  margin-bottom: 0;
}

/* "Publications" itself never got an explicit size like the
   .home-section__head headings (Podcasts/News/Interviews) did — it was
   falling back to the browser's plain <h2> default, smaller than the
   others next to it. Matches the same font-size/weight now. */
.section-heading .h {
  font-size: var(--font-size-h2);
  font-weight: 800;
}

/* ==== Shorts: latest Instagram Reels ====
   Heading uses the shared .home-section__head/.home-section__viewall
   treatment (same as "Become a Patron" next to Patreon Exclusives);
   the row itself carries .patreon-row alongside .shorts-row to reuse
   that row's overlay-arrow CSS (.patreon-row__nav) exactly rather than
   duplicating it — see template-parts/home/shorts.php. */
.shorts-row__track {
  gap: var(--space-4);
  /* Same fix as .home-grid-strip / .patreon-row__track — clears the
     reused .patreon-row__nav overlay arrows. */
  padding: 2px 56px var(--space-2);
}

@media (max-width: 640px) {
  .shorts-row__track {
    padding: 2px 2px var(--space-2);
  }
}

.shorts-item {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  /* It's a <button> now (opens the inline player), not a link —
     reset the default button chrome back to plain, clickable text. */
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shorts-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-2);
}

.shorts-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shorts-item__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}

.shorts-item__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--color-white);
}

.shorts-item__caption {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* ==== Reel player — plays a clicked Reel in place instead of leaving
   the site for Instagram (js/interactions.js's initReelPlayer()). ==== */
.reel-player {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

/* .reel-player's own `display: flex` above otherwise wins over the
   browser's default `[hidden] { display: none }` (a class selector
   beats a bare attribute selector), which is why the player was
   showing up open on every page load instead of staying closed until
   a Reel is actually clicked. */
.reel-player[hidden] {
  display: none;
}

.reel-player__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.reel-player__box {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.reel-player__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}

.reel-player__close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only shown if the video itself fails to load (e.g. Instagram's
   signed media URL has expired since this Reel was cached) — see
   initReelPlayer()'s <video> error handler. */
.reel-player__fallback {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-4);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.6);
  text-decoration: underline;
}

.reel-player__fallback.is-visible {
  display: block;
}

/* ==== Patreon Exclusives: same scroll-strip pattern as Shorts, plus
   overlay nav arrows (same treatment as the "Meet the Team" slider /
   .home-grid-strip__nav). ==== */
.patreon-row {
  position: relative;
  overflow: hidden;
}

.patreon-row__track {
  gap: var(--space-4);
  /* Same fix as .home-grid-strip: .patreon-row__nav is a 40px circle
     sitting 8px from each edge — without this, the first/last card
     sat right underneath it instead of clearing it. */
  padding: 2px 56px var(--space-2);
}

@media (max-width: 640px) {
  .patreon-row__track {
    padding: 2px 2px var(--space-2);
  }
}

.patreon-row__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.patreon-row__nav:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.patreon-row__nav--prev { left: 8px; }
.patreon-row__nav--next { right: 8px; }

@media (max-width: 640px) {
  .patreon-row__nav {
    display: none;
  }
}

.patreon-item {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.patreon-item__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
  margin-bottom: var(--space-2);
}

.patreon-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.patreon-item__lock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.patreon-item__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}

.patreon-item__date {
  font-size: 11px;
  color: var(--color-text-faint);
  font-weight: 600;
}

/* ==== Publications fade carousel ==== */
.carousel-fade .carousel-slide__link {
  display: block;
  color: inherit;
}

.carousel-fade .carousel-slide__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Caption sits below the image, outside the crossfading track, so only
   the active slide's caption is in the layout (its sibling captions are
   display:none, not just faded out) and the arrows above can center on
   the image alone. Stretches the full width of the carousel. */
.carousel-fade .carousel-caption {
  display: none;
  padding-top: var(--space-4);
  color: inherit;
}

.carousel-fade .carousel-caption.is-active {
  display: block;
}

.carousel-fade .carousel-caption .post-title {
  font-size: var(--font-size-h3);
  font-weight: bold;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

/* Matches the "Publications" section heading size next to it — the
   default h3 read as too small under a full-width carousel image. */
.carousel-fade .carousel-caption .post-title--lg {
  font-size: var(--font-size-h2);
}

/* ==== Popular This Week sidebar ==== */
.popular-posts__heading {
  font-size: var(--font-size-h2);
  font-weight: 800;
  margin-bottom: var(--space-4);
}

.popular-posts__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popular-posts__item {
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-4) 0;
}

.popular-posts__item:first-child {
  padding-top: 0;
}

.popular-posts__item:last-child {
  border-bottom: none;
}

.popular-posts__link {
  display: flex;
  gap: var(--space-3);
  color: inherit;
}

.popular-posts__thumb {
  flex: 0 0 auto;
}

.popular-posts__thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.popular-posts__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.popular-posts__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.popular-posts__tag {
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.popular-posts__title {
  font-weight: bold;
  line-height: 1.35;
}

/* ==== Awards Tape promo ==== */
.awards-tape-promo {
  text-align: center;
}

.awards-tape-promo__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* ==== Episode Calendar promo (Podcasts grid side column) — plain,
   borderless, on the section's own white background (no dark card),
   using the "light" variant of css/components/episode-calendar.css.
   The heading reuses the exact same .heading-block/.h markup as the
   "Podcasts" heading next to it (template-parts/home/content-grid.php)
   with no extra wrapper padding, so the two line up. ==== */
.podcast-calendar-promo__cta {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-light);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text) !important;
  text-decoration: none;
  text-align: center;
}

.podcast-calendar-promo__cta:hover {
  color: var(--color-accent) !important;
}

/* ==== CTA banner ==== */
.cta-banner {
  background: var(--color-near-black);
  color: var(--color-white);
  padding: var(--space-24) 0;
  text-align: center;
}

.cta-banner__link {
  display: block;
  color: inherit;
}

.cta-banner__heading {
  display: block;
  font-size: var(--font-size-h2);
  font-weight: bold;
  margin-bottom: var(--space-2);
}

.cta-banner__text {
  display: block;
  color: var(--color-text-faint);
}

@media (max-width: 768px) {
  .hero-banner__social {
    display: none;
  }

  .category-strip li {
    flex-basis: 200px;
  }

  .category-strip a {
    height: 220px;
  }
}

@media (max-width: 640px) {
  /* No room for 40px overlay arrows at this width — same treatment as
     the other homepage strips: hide them and give the track back its
     full width instead of reserving space for controls nobody sees. */
  .category-strip {
    padding: 0 2px;
  }

  .category-strip__nav {
    display: none;
  }
}