/*
 * Components — buttons, cards, badges, sliders, logos, testimonials.
 */

/* ── Page hero (shared by ALL inner pages — archive, single, page templates) ──
 * Lives here (globally enqueued) so every template that uses .page-hero gets a
 * dark backdrop, white text, and top padding that clears the fixed .site-header.
 * Page-specific stylesheets add only their gradient variant (--speaking, etc.). */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-16);
  background-color: var(--color-prussian);
  color: var(--color-white);
  overflow: hidden;
}

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

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Generic dark gradient (archive.php, single.php) */
.page-hero--dark {
  background: linear-gradient(135deg, var(--color-purple-dark) 0%, var(--color-prussian) 100%);
}

/* Hero text legibility on the dark backdrop */
.page-hero h1,
.page-hero .hero__title {
  color: var(--color-white);
}

.page-hero .eyebrow {
  color: var(--color-verdigris);
}

.page-hero p,
.page-hero .lead,
.page-hero .hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

/* Body links keep their default color on dark heroes would be low-contrast;
 * hero CTAs use .btn classes, so plain links here are rare — force white. */
.page-hero a:not(.btn) {
  color: var(--color-white);
}

/* Hero layout: single column by default; splits to text + portrait once a
 * featured image is set (page-hero--has-image). Shared by every inner-page
 * hero (Speaking, Testimonials, …). */
.page-hero__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.page-hero--has-image .page-hero__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .page-hero--has-image .page-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.page-hero__media {
  position: relative;
}

.page-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

/* ── Buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    transform var(--transition-fast),
    box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

/* Primary — Verdigris (deep ink so white labels meet WCAG AA) */
.btn--primary {
  background-color: var(--color-verdigris-ink);
  border-color: var(--color-verdigris-ink);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-verdigris-hover);
  border-color: var(--color-verdigris-hover);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(14, 110, 110, 0.35);
}

/* Secondary — Dark Poppy (deepened so white labels meet WCAG AA) */
.btn--secondary {
  background-color: var(--color-poppy-btn);
  border-color: var(--color-poppy-btn);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: var(--color-poppy-hover);
  border-color: var(--color-poppy-hover);
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(219, 58, 52, 0.35);
}

/* Outline — white border (for dark backgrounds) */
.btn--outline {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--outline:hover {
  background-color: var(--color-white);
  color: var(--color-prussian);
}

/* Outline accent (on light backgrounds — use deep teal ink for AA) */
.btn--outline-accent {
  background-color: transparent;
  border-color: var(--color-verdigris-ink);
  color: var(--color-verdigris-ink);
}

.btn--outline-accent:hover {
  background-color: var(--color-verdigris-ink);
  color: var(--color-white);
}

/* Large variant */
.btn--lg {
  font-size: var(--text-sm);
  padding: var(--space-5) var(--space-10);
  letter-spacing: var(--tracking-widest);
}

/* Small variant */
.btn--sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
}

/* Button group */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* ── Cards ──────────────────────────────────────────────────────── */

.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  position: relative;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.card:hover .card__image img {
  transform: scale(1.04);
}

.card__body {
  padding: var(--space-6);
}

.card__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-verdigris-ink);
  margin-bottom: var(--space-2);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

.card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

/* ── Talk Card ──────────────────────────────────────────────────── */

.talk-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.talk-card__image {
  position: absolute;
  inset: 0;
}

.talk-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.talk-card:hover .talk-card__image img {
  transform: scale(1.06);
}

.talk-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 48, 73, 0.90) 0%,
    rgba(0, 48, 73, 0.50) 50%,
    transparent 100%
  );
  transition: background var(--transition-base);
}

/* On hover the full description and CTA fade in over the image, so darken the
   whole overlay to keep that text and the link readable against it. */
.talk-card:hover .talk-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 48, 73, 0.94) 0%,
    rgba(0, 48, 73, 0.82) 55%,
    rgba(0, 48, 73, 0.55) 100%
  );
}

/* The title and the reveal (full description + CTA) are stacked in the same grid
   cell, both bottom-aligned. The reveal is laid out full-size at all times — so
   on hover it simply fades in place while the title fades and drifts upward out
   of the way. Nothing is pushed, the card never grows, and because the
   description + CTA alone fit the card, the title never overflows the top. */
.talk-card__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-6);
  display: grid;
}

.talk-card__title {
  grid-area: 1 / 1;
  align-self: end;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-white);
  letter-spacing: var(--tracking-wide);
  line-height: 1.05;
  margin: 0;
  transition: opacity var(--transition-base), transform var(--transition-slow);
}

.talk-card:hover .talk-card__title {
  opacity: 0;
  transform: translateY(-0.75em);
  pointer-events: none;
}

.talk-card__reveal {
  grid-area: 1 / 1;
  align-self: end;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.talk-card:hover .talk-card__reveal {
  opacity: 1;
  pointer-events: auto;
}

.talk-card__excerpt {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.talk-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-verdigris);
}

/* On the narrowest single-column cards a full-length description can run taller
   than the small card; nudge the teaser text down a step so it fits on hover
   without the top line clipping. */
@media (max-width: 640px) {
  .talk-card__excerpt {
    font-size: var(--text-xs);
    line-height: 1.5;
  }
}

/* ── Testimonial Card ────────────────────────────────────────────── */

.testimonial-card {
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.testimonial-card__quote-mark {
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 0.6;
  color: var(--color-verdigris);
  opacity: 0.6;
  margin-bottom: var(--space-4);
  user-select: none;
}

.testimonial-card__text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: var(--fw-medium);
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-6);
  max-width: none;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.testimonial-card__headshot {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-verdigris);
  flex-shrink: 0;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-white);
}

.testimonial-card__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-wisteria);
  margin-top: var(--space-1);
}

/* Variant modifiers live here (not in testimonials.css) because the card is a
   shared partial used across pages (Testimonials, Coaching, …); a page-scoped
   stylesheet would leave the variant unstyled everywhere it isn't loaded. */

/* Purple: solid box for light-background sections. The base card already carries
   white text + verdigris quote-mark, so only the fill/border change; text color
   is restated so it never depends on the section. */
.testimonial-card--purple {
  background: var(--color-purple-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.testimonial-card--purple .testimonial-card__text {
  color: rgba(255, 255, 255, 0.92);
}

/* Float the quote mark behind the text as a faint watermark rather than letting
   it occupy its own vertical strip at the top — removes the empty space under it
   and shortens the card. Text and author sit above it. */
.testimonial-card--purple .testimonial-card__quote-mark {
  position: absolute;
  top: var(--space-2);
  left: var(--space-6);
  margin: 0;
  line-height: 1;
  opacity: 0.18;
  pointer-events: none;
}

.testimonial-card--purple .testimonial-card__text,
.testimonial-card--purple .testimonial-card__author {
  position: relative;
  z-index: 1;
}

/* Light: white box with border + shadow, dark text. */
.testimonial-card--light {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.testimonial-card--light .testimonial-card__text {
  color: var(--color-gray-800);
}

.testimonial-card--light .testimonial-card__name {
  color: var(--color-gray-800);
}

.testimonial-card--light .testimonial-card__title {
  color: var(--color-purple-dark);
}

/* ── Badge ──────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--accent {
  background: var(--color-verdigris-ink);
  color: var(--color-white);
}

.badge--dark {
  background: var(--color-purple-dark);
  color: var(--color-white);
}

/* ── Episode Card ────────────────────────────────────────────────── */

.episode-card {
  position: relative;
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  align-items: flex-start;
}

/* Card title link inherits the heading color (not the poppy link color). */
.episode-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Stretched link — the title's <a> covers the whole card so the entire card
 * is clickable, without wrapping the card in an <a> (which can't legally
 * contain the platform links below). Those links sit above via z-index. */
.episode-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.episode-card__links {
  position: relative;
  z-index: 2;
}

.episode-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.episode-card__thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.episode-card__meta {
  flex: 1;
  min-width: 0;
}

.episode-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-verdigris-ink);
  margin-bottom: var(--space-1);
}

.episode-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-gray-800);
  margin-bottom: var(--space-2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.episode-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--space-3);
  max-width: none;
}

.episode-card__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ── Section Header ─────────────────────────────────────────────── */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
}

.section-header--center p {
  margin-inline: auto;
}

/* Capped paragraphs (see --measure) need auto side-margins to truly center inside
   a centered block — text-align only centers the text run, not the capped box. */
.text-center p,
.talks-intro p {
  margin-inline: auto;
}

.section-header .eyebrow {
  margin-bottom: var(--space-3);
}

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* ── Divider line ───────────────────────────────────────────────── */

.divider {
  display: inline-block;
  width: 48px;
  height: 3px;
  background: var(--color-verdigris);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-full);
}

/* ── Logo item ──────────────────────────────────────────────────── */

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--transition-base), opacity var(--transition-base);
}

.logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.logo-item img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

/* ── Stats ──────────────────────────────────────────────────────── */

.stat-item {
  text-align: center;
}

.stat-item__number {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  color: var(--color-verdigris);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
}

.stat-item__label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-top: var(--space-2);
}

/* ── Platform listen links ─────────────────────────────────────── */

.listen-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-verdigris-ink);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.listen-link:hover {
  background: var(--color-verdigris-ink);
  color: var(--color-white);
  border-color: var(--color-verdigris-ink);
}

/* ── Slider (CSS Scroll Snap) ────────────────────────────────────── */

.slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.slider__track {
  display: flex;
  gap: var(--space-6);
}

.slider__item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ── Coaching program card ──────────────────────────────────────── */

.program-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.program-card__image {
  aspect-ratio: 9 / 5; /* 720 × 400, the mb-program-card crop */
  overflow: hidden;
}

.program-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-card__body {
  display: flex;
  flex-direction: column;
  flex: 1; /* fill the card height so the button can pin to the bottom */
  padding: var(--space-6);
}

/* Keep a minimum gap above the button; the button's auto top-margin absorbs the
   rest, so buttons line up along the bottom of every card in a row regardless of
   description length. */
.program-card__body .entry-content {
  margin-bottom: var(--space-4);
}

.program-card__body .btn {
  margin-top: auto;      /* pin to the bottom */
  align-self: flex-start; /* keep the button its natural width, not full-width */
}

.program-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}