/**
 * @file
 * Podcast page styles — pixel-perfect from Figma (1140:5630).
 */

/* ===== HERO ===== */
.pod-hero {
  position: relative;
  background: var(--color-blue-light);
  overflow: hidden;
  height: 801px;
  margin-top: -86px;
  padding-top: 86px;
}

/* Hero with background image */
.pod-hero--has-image {
  height: 801px;
}

.pod-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

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

.pod-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.pod-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin-inline: auto;
  padding: 90px 80px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pod-hero__title {
  font-family: var(--font-heading);
  font-size: 75px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--color-blue);
  line-height: 1;
  margin: 16px 0 24px;
  max-width: none;
}

/* White text when hero has image */
.pod-hero--has-image .pod-hero__title {
  color: var(--color-white);
}

.pod-hero__title-pill {
  border: 1px solid var(--color-blue);
  border-radius: 100px;
  padding: 0 16px;
  display: inline-block;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.pod-hero--has-image .pod-hero__title-pill {
  border-color: var(--color-white);
}

.pod-hero__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  max-width: none;
}

/* Reset p margin inside hero text (Drupal wraps field value in <p>) */
.pod-hero__text p {
  margin: 0;
}

.pod-hero--has-image .pod-hero__text {
  color: var(--color-white);
}

/* Breadcrumb white text when hero has image */
.pod-hero--has-image .hub-breadcrumb__sep,
.pod-hero--has-image .hub-breadcrumb__current,
.pod-hero--has-image .hub-breadcrumb__link,
.pod-hero--has-image .hub-breadcrumb__home {
  color: var(--color-white);
}

/* ===== EPISODES ===== */
.pod-episodes {
  background: var(--color-white);
  border-radius: 40px 40px 0 0;
  margin-top: -80px;
  padding: 80px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.pod-episodes__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 34px;
}

/* Keep heading centered */
.pod-episodes__inner > .hub-heading {
  align-self: center;
}

/* Episode grid — Figma: fixed 600px+80px+600px = 1280px layout.
 * Cards keep exact proportions; the whole grid scales down uniformly
 * on viewports narrower than 1280px inner width via CSS zoom.
 * --pod-zoom is set by JS (podcast.js) based on container width and column mode. */
.pod-episode-grid {
  display: grid;
  grid-template-columns: 600px 600px;
  column-gap: 80px;
  row-gap: 24px;
  width: 1280px;
  zoom: var(--pod-zoom, 1);
}

/* Below 1200px: single column, 600px fixed width, still zoomed */
@media (max-width: 1200px) {
  .pod-episode-grid {
    grid-template-columns: 600px;
    width: 600px;
    column-gap: 0;
  }
}

/* Tablet single-col also needs 600px SVG — same as desktop, no change needed */

/* Episode card — Figma: shape with notch, 165px tall */
.pod-episode-card {
  position: relative;
  height: 165px;
  overflow: visible;
  color: var(--color-blue);
  background: transparent;
}

/* Card shape via inline SVG background — exact Figma path adapted to 600px width.
 * Notch keeps fixed proportions relative to the right edge. */
.pod-episode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 165' fill='none'%3E%3Cpath d='M24 0.5H484.769C493.329 0.5 500.269 7.44 500.269 16V27.312C500.269 36.373 507.574 43.738 516.633 43.812L584.128 44.369C592.638 44.44 599.5 51.358 599.5 59.868V141C599.5 153.979 589.203 164.5 576 164.5H24C11.021 164.5 0.5 153.979 0.5 141V24C0.5 11.021 11.021 0.5 24 0.5Z' fill='%23E9F3FF' stroke='%230F65E4'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Card content — centered overlay */
.pod-episode-card__content {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* Duration tag (orange outline pill) */
.tag--small {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  padding: 4px 16px;
  border: 1px solid var(--color-orange);
  border-radius: 100px;
  color: var(--color-orange);
  line-height: 1.3;
}

/* Episode number + title wrapper */
.pod-episode-card__text {
  display: flex;
  flex-direction: column;
  color: var(--color-blue);
  font-size: 16px;
  width: 100%;
}

.pod-episode-card__number {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-blue);
}

.pod-episode-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--color-blue);
  line-height: 1.3;
  margin: 0;
}

/* Player */
.pod-episode-card__player {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.pod-episode-card__play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-blue-light);
  color: var(--color-blue);
  border: 0.8px solid var(--color-blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.pod-episode-card__play:hover {
  background: var(--color-blue);
  color: var(--color-white);
}

/* Playing state: solid blue button */
.pod-episode-card.is-playing .pod-episode-card__play {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.pod-episode-card__progress {
  flex: 1;
  height: 3px;
  background: var(--color-white);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
}

.pod-episode-card__progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-blue);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Hide native audio element */
.pod-episode-card__audio {
  display: none;
}

.pod-episode-card__duration {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-blue);
  flex-shrink: 0;
  line-height: 1.5;
}

/* ===== PLATFORMS ===== */
.pod-platforms {
  background: var(--color-orange-light);
  border-radius: 32px;
  padding: 80px;
}

.pod-platforms__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
}

/* Episodes heading — match Figma 114px height (line-height: normal vs 1) */
.pod-episodes .hub-heading__text,
.pod-episodes .hub-heading__pill {
  line-height: normal;
}

/* Platforms heading — Figma shows tighter line-height than default */
.pod-platforms .hub-heading__text,
.pod-platforms .hub-heading__pill {
  line-height: 55px;
}

.pod-platforms__links {
  display: flex;
  justify-content: space-between;
  width: 846px;
  max-width: 100%;
}

/* Code article — zone blanche sous le bloc plateformes, même style que l'accueil */
.pod-code {
  padding: 24px 80px 0;
}

.pod-code__inner {
  max-width: var(--container-width);
  margin: 0 auto;
}

.pod-code__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-black);
  margin: 0;
}

a.pod-platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 93px;
  width: 196px;
  text-decoration: none;
  gap: 16px;
}

.pod-platform:hover .pod-platform__cta {
  border-color: var(--color-blue);
}

.pod-platform:hover .pod-platform__arrow {
  transform: scale(1.3);
}

/* Logo container — Figma: 196×61, overflow clip */
.pod-platform__logo {
  width: 196px;
  height: 61px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pod-platform__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* CTA — Figma: Work Sans SemiBold 14px, uppercase, tracking -0.7px */
.pod-platform__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--color-blue);
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--transition-base);
}

.pod-platform__arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

/* White background behind sections after hero */
.page--podcast {
  background: var(--color-white);
}

/* ===== BLOC MEDECIN (override for podcast page) ===== */
.page--podcast .hub-medecin {
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.page--podcast .hub-medecin__inner {
  align-items: center;
}

/* Decorative globules in podcast medecin section — Figma 1140:5630 */

/* Left globule: type3, ~420×415, rotation 11.28°, opacity 0.27 (0.9 × 0.30 overlay) */
.globule--pod-medecin-left {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: 50%;
  left: -169px;
  width: 420px;
  height: 415px;
  opacity: 0.9;
  transform: translateY(calc(-50% + 199px)) rotate(11.28deg);
}

.globule--pod-medecin-left img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Right globule: type2, ~800×777, rotation 106.25°, opacity 0.35 (0.7 × 0.50 overlay) */
.globule--pod-medecin-right {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  top: -174px;
  right: -442px;
  width: 800px;
  height: 777px;
  opacity: 0.7;
  transform: rotate(106.25deg);
}

.globule--pod-medecin-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== LAYOUT GAPS between sections ===== */
.page--podcast .pod-platforms {
  margin-top: 0;
}

.page--podcast .hub-medecin {
  margin-top: 80px;
}

.page--podcast .hub-related {
  padding: 80px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .pod-hero {
    padding: 73px 6px 166px;
  }

  .pod-hero,
  .pod-hero--has-image {
    height: auto;
  }

  .pod-hero__inner {
    height: auto;
    padding: 24px 16px 60px;
  }

  .pod-hero__title {
    font-size: 42px;
    margin: 12px 0 16px;
    max-width: 100%;
  }

  .pod-hero__text,
  .pod-hero__text p {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
  }

  .pod-episodes {
    padding: 40px 16px;
    border-radius: 24px 24px 0 0;
    margin-top: -42px;
  }

  .pod-episodes__inner {
    gap: 24px;
  }

  /* Mobile Figma: cards are 358px × 165px (390px - 32px padding) */
  .pod-episode-grid {
    grid-template-columns: 358px;
    row-gap: 24px;
    width: 358px;
    column-gap: 0;
    /* zoom still driven by JS --pod-zoom */
  }

  /* Mobile SVG: notch anchored same distance from right edge as desktop */
  .pod-episode-card::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 358 165' fill='none'%3E%3Cpath d='M24 0.5H242.769C251.329 0.5 258.269 7.44 258.269 16V27.312C258.269 36.373 265.574 43.738 274.633 43.812L342.128 44.369C350.638 44.44 357.5 51.358 357.5 59.868V141C357.5 153.979 347.203 164.5 334 164.5H24C11.021 164.5 0.5 153.979 0.5 141V24C0.5 11.021 11.021 0.5 24 0.5Z' fill='%23E9F3FF' stroke='%230F65E4'/%3E%3C/svg%3E");
  }

  .pod-platforms {
    padding: 40px 16px;
    border-radius: 24px;
  }

  .pod-platforms__inner {
    gap: 32px;
  }

  /* Fix 2: Titre plateformes — line-height compact comme Figma */
  .pod-platforms .hub-heading__text,
  .pod-platforms .hub-heading__pill {
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -2px;
  }

  .pod-platforms__links {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .pod-platform {
    width: auto;
  }

  .pod-platform svg {
    width: 40px;
    height: 40px;
  }

  .pod-platform__name {
    font-size: 14px;
  }

  .pod-code {
    padding: 16px;
  }

  /* Fix 3: Moins d'espace entre plateformes et médecin */
  .page--podcast .hub-medecin {
    margin-top: initial;
  }

  /* Fix 5: Section "Envie d'en savoir plus" — moins de padding */
  .page--podcast .hub-related {
    padding: 0;
    padding-bottom: 30px;
  }

  .page--podcast .hub-related__inner {
    padding: 24px 16px 42px;
    gap: 24px;
  }

  .page--podcast .hub-related-card__img {
    max-width: 80%;
  }

  .page--podcast .hub-related-card__img > img:first-child,
  .page--podcast .hub-related-card__img-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}