/* ==========================================================================
   Homepage-specific styles. Only enqueued on the front page.
   ========================================================================== */

/* Hero — compact card: image on top, solid-background text block directly
   beneath it (not overlaid on the photo). Keeps the whole thing shorter
   than the overlay version and gives the headline a clean, guaranteed-
   contrast surface instead of depending on a gradient scrim over a photo
   that might already be busy or high-key. */
.bd-story-grid--hero { grid-template-columns: 1fr; }

/* Small retro "play" triangle after every homepage module title (Featured
   Content, Trending, Reviews, etc.) — VCR/media-player flourish. Scoped to
   homepage.css only, so it doesn't affect .bd-module__title's other use
   on the single-post "Related" module. */
.bd-module__title::after {
  content: "\25B6";
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.6em;
  color: var(--bd-red);
  vertical-align: middle;
}

/* Make Hero visually distinct from the flat-color modules below it.
   Padding is tighter than other modules — the card itself is the visual
   anchor, so it doesn't need a big surrounding gutter to feel
   substantial. */
.bd-module--hero { padding-top: var(--space-2); padding-bottom: var(--space-3); }
.bd-module--hero { background: var(--bd-black); }

.bd-hero__media img { display: block; }

.bd-hero__content {
  position: relative;
  z-index: 1;
  background: var(--bd-black);
  padding: var(--space-3) var(--space-2);
  margin: -1.5rem var(--space-2) 0;
}
.bd-hero__content .bd-story-grid__meta { margin-bottom: 0.4rem; }
.bd-hero__content .bd-story-grid__category { color: var(--bd-red); font-weight: 800; }

.bd-hero__headline {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bd-off-white);
  margin: 0;
}

/* Secondary Featured — same overlap treatment as Hero (image on top, solid
   black text block pulled up over the bottom edge) but simpler: no side
   panel at any breakpoint, since this is a multi-column grid of several
   cards rather than one large lead story. The box matches the image's
   full width, so it reads as centered rather than offset to one side. */
.bd-module--secondary-featured .bd-story-grid__content,
.bd-module--custom-horizontal .bd-story-grid__content {
  position: relative;
  z-index: 1;
  background: var(--bd-black);
  margin: -3rem var(--space-2) 0;
  padding: var(--space-2);
}

/* Horizontal module, mobile only: scroll sideways instead of stacking.
   Each card gets a fixed width (with the next one peeking in at the
   edge — a standard "there's more, keep scrolling" cue) and the row
   snaps to each card as you scroll. Desktop is untouched, so it falls
   through to the same responsive grid every other module uses. */
@media (max-width: 559px) {
  .bd-module--custom-horizontal .bd-story-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-2);
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 var(--space-2) var(--space-1);
    -webkit-overflow-scrolling: touch;
  }
  .bd-module--custom-horizontal .bd-story-grid__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* List-style news module: AJAX "Load More" button (homepage-only feature,
   powered by the front-page module registry — archive pages use standard
   WP pagination instead, see archive.css). The row/grid layout itself
   (.bd-news-list, .bd-list-module__layout) lives in main.css since it's
   shared with the category/tag archive templates. */
/* Podcast Network — always a horizontal scroll row, at every screen
   size (unlike the Custom "Horizontal Scroll" display option, which
   reverts to a grid on desktop). Module is always red regardless of the
   bg setting chosen in Appearance > Homepage Modules, same reasoning as
   Hero always being black — this module should read as a distinct,
   branded "shelf" rather than blend into whatever color surrounds it.
   Each show sits in its own black card so the art+title read as one
   contained unit against the red background.

   That "always branded, never blends in" intent predates light mode and
   applies to it too — re-declaring the tokens here pins every var(--bd-*)
   reference in this module's subtree (card, art placeholder, name, arrow
   buttons) back to the dark values regardless of what
   html[data-theme="light"] .bd-page-wrap set further up the tree. Custom
   properties only cascade to descendants of wherever they're declared, so
   this re-anchors the scope locally without touching style.css. */
.bd-module--podcasts {
  --bd-black: #0b0b0d;
  --bd-charcoal: #17171b;
  --bd-charcoal-2: #222228;
  --bd-off-white: #f2f1ee;
  --bd-gray: #9a9aa2;
  --bd-gray-dim: #55555e;
  background: var(--bd-red);
}
.bd-module--podcasts .bd-module__title::after { color: var(--bd-black); }

.bd-podcast-row-wrap { position: relative; }

.bd-podcast-row {
  list-style: none; margin: 0; padding: 0 0 var(--space-1);
  display: flex; gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.bd-podcast-row::-webkit-scrollbar { display: none; } /* Chrome, Safari */

.bd-podcast-row__arrow {
  display: none; /* shown on desktop only — mobile/touch scrolls by swipe */
}
.bd-podcast-row__item {
  flex: 0 0 140px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
}
.bd-podcast-row__link { display: flex; flex-direction: column; width: 100%; }
.bd-podcast-row__card {
  background: var(--bd-black);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.bd-podcast-row__art {
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--bd-charcoal);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.bd-podcast-row__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bd-podcast-row__name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700; font-size: 0.9375rem; line-height: 1.3;
  color: var(--bd-off-white); transition: color 0.15s ease;
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
  padding: 0 0.25rem 0.25rem;
}
.bd-podcast-row__link:hover .bd-podcast-row__name { color: var(--bd-red); }

@media (min-width: 560px) {
  .bd-podcast-row__item { flex-basis: 170px; }
  .bd-podcast-row__name { font-size: 1rem; }
}

@media (min-width: 1024px) {
  .bd-podcast-row__item { flex-basis: 190px; }

  .bd-podcast-row__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(11, 11, 13, 0.75);
    color: var(--bd-off-white);
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease;
  }
  .bd-podcast-row__arrow:hover { background: var(--bd-black); }
  .bd-podcast-row__arrow--prev { left: var(--space-1); }
  .bd-podcast-row__arrow--next { right: var(--space-1); }
}

.bd-load-more-btn.bd-button {
  display: block; margin: var(--space-3) auto 0; cursor: pointer;
  width: 100%; max-width: 420px; padding: 0.875rem 2rem;
  border: 2px solid var(--bd-off-white); color: var(--bd-off-white); background: transparent;
  text-align: center; font-size: 0.9375rem;
}
.bd-load-more-btn.bd-button:hover { background: var(--bd-off-white); color: var(--bd-black); }

/* Horizontal ad banner module — no title, just the widget area. Tighter
   vertical gutter than a normal content module: there's no heading or
   text block to fill the space, so the standard .bd-module padding reads
   as excess air around the ad creative itself. */
.bd-module--ad-banner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.bd-module--ad-banner .bd-module__inner { display: flex; justify-content: center; }

@media (min-width: 560px) {
  .bd-hero__content { padding: var(--space-3); margin: -1.75rem var(--space-3) 0; }
  .bd-hero__headline { font-size: 2.125rem; }
}

@media (min-width: 768px) {
  /* Image stays basically full-size; the text panel sits beside it on
     the right (vertically centered) and overlaps just slightly onto the
     image's right edge, instead of sitting below and overlapping the
     bottom edge like the mobile/tablet layout. */
  .bd-hero__card {
    display: flex;
    align-items: center;
  }
  .bd-hero__media {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    max-height: 60vh;
  }
  .bd-hero__content {
    flex: 0 0 360px;
    width: 360px;
    margin: 0 0 0 -4rem;
    padding: var(--space-3) var(--space-4);
  }
  .bd-hero__headline { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
  .bd-hero__content { flex-basis: 440px; width: 440px; margin-left: -4.5rem; }
  .bd-hero__headline { font-size: 2.5rem; }
}

/* Trending Keywords Bar — thin, single-row strip directly under the Hero
   module. No background strip (sits on the page background), no module
   padding — deliberately lighter-weight than a real homepage module. The
   "Trending" label is pinned and never scrolls; only the tag list scrolls
   horizontally when it overflows. */
.bd-trending-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) 0;
}
.bd-trending-bar__label {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bd-red);
}
.bd-trending-bar__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  min-width: 0; /* allow this flex item to shrink and scroll internally
                   instead of forcing the nav wider than its container —
                   same class of bug as the Grid min-width gotcha */
}
.bd-trending-bar__list::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.bd-trending-bar__list li { flex-shrink: 0; }
.bd-trending-bar__list a { display: block; }
.bd-trending-bar__chip {
  display: inline-block;
  padding: 0.3rem 1rem;
  background: var(--bd-charcoal);
  color: var(--bd-off-white);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
  font-size: 0.8125rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bd-trending-bar__list a:hover .bd-trending-bar__chip {
  background: var(--bd-red);
  color: #fff;
}

@media (min-width: 768px) {
  .bd-trending-bar { padding: var(--space-3) var(--space-3) 0; justify-content: center; }
}