/* Subscribe/follow CTA — the site's one shared "follow us everywhere"
   component (macros/main.py subscribe_channels()). Embeddable on any page:
   homepage, about page, show pages, and episode pages (both as a mid-
   article nudge and an end-of-article one). Replaces two older, separate
   components — a per-episode platform-links box and an email-newsletter
   block that never had a working signup behind it. */
.pod-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  margin-block: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--pod-ink);
}

.pod-subscribe__intro {
  position: relative;
  max-width: 26rem;
  padding-top: var(--space-5);
}

/* Small editorial flourish — a short accent rule above the heading, echoing
   the one used elsewhere on cover/hero treatments. */
.pod-subscribe__intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--pod-accent-warm);
}

.pod-subscribe__intro h2 {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: none;
  color: var(--pod-bg);
  font-size: 1.5rem;
}

.pod-subscribe__intro p {
  margin: 0;
  color: var(--pod-bg);
  opacity: 0.75;
}

.pod-subscribe__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Multi-show case (site-wide pages: home, about) — one labeled row per
   show instead of a single flat link list, since a flat merge-by-platform
   would collide two shows' different URLs onto the same "spotify" key.
   Grid (not flex) so the icon column lines up across rows regardless of
   label length: `.pod-subscribe__group` is `display: contents`, so its
   label/links children become direct items of this grid, and the grid's
   first column auto-sizes to the widest label across *all* rows. */
.pod-subscribe__groups {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.pod-subscribe__group {
  display: contents;
}

.pod-subscribe__group-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pod-bg);
  opacity: 0.75;
  white-space: nowrap;
}

/* Compact icon-only variant, used inside .pod-subscribe__group — same
   circular-icon-button pattern as .pod-share__button (misc.css), sized down
   a touch since two rows of five sit close together here. Platform name
   drops to title/aria-label instead of visible text. */
.pod-subscribe__links--compact {
  gap: var(--space-2);
}

.pod-subscribe__link--compact {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  justify-content: center;
}

.pod-subscribe__link--compact .pod-icon {
  width: 1em;
  height: 1em;
}

.pod-subscribe__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--pod-bg);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* Qualified with the parent class (not just `.pod-subscribe__link`) so its
   specificity beats `.md-typeset a` / `.md-typeset a:hover` — the same
   pattern used throughout this repo's other link-style components (see the
   note in hero.css on `.pod-button--primary`). */
.pod-subscribe .pod-subscribe__link {
  color: var(--pod-ink);
}

.pod-subscribe__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pod-subscribe .pod-subscribe__link:hover,
.pod-subscribe .pod-subscribe__link:focus {
  color: var(--pod-accent);
}

@media (prefers-reduced-motion: reduce) {
  .pod-subscribe__link:hover {
    transform: none;
  }
}

/* Pending state — a show with no platform links yet (e.g. nonobi). Lighter
   treatment since there's no action to take, just a heads-up. */
.pod-subscribe--pending {
  background: var(--pod-bg-sunken);
  border: 1px solid var(--pod-border);
}

.pod-subscribe--pending .pod-subscribe__intro::before {
  display: none;
}

.pod-subscribe--pending .pod-subscribe__intro h2 {
  color: var(--pod-ink);
  font-size: 1.15rem;
}

.pod-subscribe--pending .pod-subscribe__intro p {
  margin-top: var(--space-2);
  color: var(--pod-ink-soft);
  opacity: 1;
}

@media screen and (max-width: 44.9375em) {
  .pod-subscribe {
    padding: var(--space-6) var(--space-5);
  }

  .pod-subscribe__intro {
    max-width: none;
  }

  /* Not enough width for a label column + 5 icons side by side — stack
     each show's label above its icon row instead. */
  .pod-subscribe__groups {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .pod-subscribe__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}