/* LOUNGE THEME
   A warm conversation pit: one graphic cover-art moment, followed by a
   disciplined image-free editorial feed. Color, type, radius, and standard
   component styling remain controlled by Podpage design settings. */

:root {
  --lg-rule: color-mix(in srgb, var(--text-color) 18%, transparent);
  --lg-soft-primary: color-mix(in srgb, var(--primary-color) 14%, var(--bg-color));
  --lg-accent-ink: color-mix(in srgb, var(--primary-color) 70%, var(--text-color));
}

/* Overflowed player links inherit the inverse menu surface, not Bootstrap's
   dark default link ink. */
.overflow-nav-more .dropdown-menu-inverse {
  color: var(--text-color);
}

/* ---------- HERO ---------- */
#header-hero {
  min-height: min(840px, 94vh);
  overflow: hidden;
  isolation: isolate;
}

#header-hero::before {
  content: "";
  position: absolute;
  width: clamp(340px, 44vw, 650px);
  aspect-ratio: 1;
  right: clamp(-110px, 2vw, 30px);
  top: 50%;
  border-radius: 50%;
  background: var(--primary-color);
  transform: translateY(-50%);
  z-index: 0;
}

#header-hero::after {
  content: "";
  position: absolute;
  width: clamp(160px, 20vw, 300px);
  aspect-ratio: 1;
  right: clamp(250px, 35vw, 520px);
  bottom: -12%;
  border-radius: 50%;
  border: clamp(22px, 4vw, 56px) solid color-mix(in srgb, var(--primary-color) 24%, transparent);
  z-index: 0;
}

#header-hero .container {
  position: relative;
  z-index: 1;
}

#header-hero #header-content-wrapper > .row {
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(36px, 6vw, 88px);
  margin-inline: 0;
}

#header-hero #c-text,
#header-hero #c-artwork {
  padding-inline: 0;
}

#header-hero #c-text {
  position: relative;
  z-index: 2;
}

#homepage-header-title {
  max-width: 8ch;
  text-wrap: balance;
}

#homepage-header-description {
  max-width: 48ch;
}

#header-hero #c-artwork {
  position: relative;
  z-index: 2;
  transform: rotate(4deg);
}

#header-hero #c-artwork::before {
  content: "";
  position: absolute;
  inset: -18px;
  border: 2px solid var(--text-color);
  border-radius: 50%;
  transform: rotate(-7deg);
  z-index: -1;
}

#header-hero #c-artwork img {
  clip-path: circle(50%);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

#header-hero #c-artwork:hover img {
  transform: rotate(-3deg) scale(1.025);
}

#header-hero #c-text .btn {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#header-hero #c-text .btn:hover {
  transform: translateY(-3px) rotate(-1deg);
}

#header-hero #c-text .btn-styled:hover {
  box-shadow: 0 10px 0 color-mix(in srgb, var(--primary-color) 28%, transparent) !important;
}

/* Keep the playful lift inside the overflow track's vertical clipping area;
   horizontal clipping still determines which player links move into More. */
#header-hero .overflow-nav-items {
  padding-block: 5px;
  margin-block: -5px;
}

/* ---------- EPISODE CONVERSATION GRID ---------- */
#feed-section {
  position: relative;
  border-top: 1px solid var(--lg-rule);
}

#feed-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(160px, 22vw, 300px);
  pointer-events: none;
  background: linear-gradient(180deg, var(--lg-soft-primary), transparent);
  z-index: 0;
}

#feed-section .container {
  position: relative;
  z-index: 1;
}

#recent-episodes-header {
  align-items: end;
  border-bottom: 1px solid var(--lg-rule);
  padding-bottom: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(30px, 5vw, 64px) !important;
}

#recent-episodes-header h2 {
  max-width: 8ch;
  margin-bottom: 0 !important;
  text-wrap: balance;
}

#feed-section .pp-list--text-block {
  gap: clamp(18px, 2.5vw, 34px);
}

#feed-section .pp-card--textblock {
  position: relative;
  min-height: 100%;
  overflow: visible;
}

#feed-section .pp-card--textblock .pp-card-episode-number {
  position: absolute;
  top: 22px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--btn-text-color);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  z-index: 2;
}

#feed-section .pp-card--textblock .pp-card-body:has(.pp-card-episode-number) {
  padding-right: 82px !important;
}

#feed-section .pp-card--textblock:first-child {
  grid-column: 1 / -1;
  background: var(--primary-color) !important;
  color: var(--btn-text-color) !important;
}

/* After the full-width lead card, center a final singleton instead of leaving
   an accidental-looking hole in the two-column conversation grid. */
#feed-section .pp-card--textblock:last-child:nth-child(even) {
  grid-column: 1 / -1;
  width: calc((100% - clamp(18px, 2.5vw, 34px)) / 2);
  justify-self: center;
}

#feed-section .pp-card--textblock:first-child .pp-card-episode-number {
  background: var(--btn-text-color);
  color: var(--primary-color);
}

#feed-section .pp-card--textblock:first-child .pp-card-body {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: clamp(36px, 7vw, 96px);
  align-items: start;
}

#feed-section .pp-card--textblock:first-child .pp-card-date,
#feed-section .pp-card--textblock:first-child .pp-card-title,
#feed-section .pp-card--textblock:first-child .pp-card-title a,
#feed-section .pp-card--textblock:first-child .pp-card-description {
  color: var(--btn-text-color) !important;
}

#feed-section .pp-card--textblock:first-child .pp-card-title {
  font-size: clamp(calc(var(--card-title-font-size) * 1.4), 5vw, calc(var(--card-title-font-size) * 2)) !important;
  line-height: .94 !important;
  grid-column: 1;
}

#feed-section .pp-card--textblock:first-child .pp-card-date {
  grid-column: 1;
}

#feed-section .pp-card--textblock:first-child .pp-card-description,
#feed-section .pp-card--textblock:first-child .pp-card-guests,
#feed-section .pp-card--textblock:first-child .pp-card-cta {
  grid-column: 2;
}

#feed-section .pp-card--textblock:first-child .pp-card-cta a {
  background: var(--btn-text-color) !important;
  border-color: var(--btn-text-color) !important;
  color: var(--primary-color) !important;
}

#recent-episodes-header .col-4 a,
#feed-section .pp-card--textblock:not(:first-child) .pp-card-cta a {
  border-color: var(--lg-accent-ink) !important;
  color: var(--lg-accent-ink) !important;
}

/* ---------- SUPPORTING SECTIONS / SUBPAGES ---------- */
.section-wrapper > .section-title h2,
.subpage-header h1 {
  text-wrap: balance;
}

.episode-list-page .pp-list--text-block {
  gap: clamp(18px, 2.5vw, 34px);
}

@media (max-width: 991px) {
  #header-hero {
    min-height: auto;
  }

  #header-hero::before {
    right: -150px;
  }

  #header-hero #header-content-wrapper > .row {
    gap: 36px;
  }

  #feed-section .pp-card--textblock:first-child .pp-card-body {
    grid-template-columns: 1fr;
  }

  #feed-section .pp-card--textblock:first-child .pp-card-description,
  #feed-section .pp-card--textblock:first-child .pp-card-guests,
  #feed-section .pp-card--textblock:first-child .pp-card-cta {
    grid-column: 1;
  }
}

@media (max-width: 767px) {
  #header-hero::before {
    width: 115vw;
    right: -54vw;
    top: 30%;
  }

  #header-hero::after {
    display: none;
  }

  #header-hero #header-content-wrapper > .row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  #header-hero #c-artwork {
    width: min(82vw, 430px);
    margin-inline: auto !important;
  }

  #homepage-header-title {
    max-width: 9ch;
  }

  #recent-episodes-header {
    display: block;
  }

  #recent-episodes-header > .col-8,
  #recent-episodes-header > .col-4 {
    max-width: 100%;
    flex: 0 0 100%;
    text-align: left !important;
  }

  #recent-episodes-header h2 {
    max-width: 100%;
    font-size: min(14vw, var(--h2-font-size)) !important;
  }

  #recent-episodes-header > .col-4 {
    margin-top: 1rem;
  }

  #feed-section .pp-list--text-block,
  .episode-list-page .pp-list--text-block {
    grid-template-columns: 1fr;
  }

  #feed-section .pp-card--textblock:first-child {
    grid-column: auto;
  }

  #feed-section .pp-card--textblock:last-child:nth-child(even) {
    grid-column: auto;
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  #header-hero #c-artwork img,
  #header-hero #c-text .btn,
  #feed-section .pp-card--textblock {
    transition: none !important;
    transform: none !important;
  }
}