/* =====================================================
   /podcast: I've Got Skin in The Game (EN + FR)
   Layout ruled by Christian on 14/September/2026 (v2: the forms are
   quiz-style journeys, one or two questions a screen). Revised
   15/September/2026: full-width hero with the text over the picture,
   editorial copy in place of the numbered questions, no "why we ask"
   panel beside the journeys. Built on the shared tokens in styles.css;
   nothing here overrides a shared class.
   ===================================================== */

/* Hero: the picture runs the full width, the text sits over it */
.pod-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, calc(100vh - 72px), 880px);
  padding-block: clamp(64px, 8vw, 120px);
  overflow: hidden;
  background: var(--bg-soft);
}
.pod-hero-media { position: absolute; inset: 0; margin: 0; }
.pod-hero-media picture,
.pod-hero-media img { display: block; width: 100%; height: 100%; }
.pod-hero-media img { object-fit: cover; object-position: 72% 40%; }
/* A pale wash from the left keeps the ink text readable over the picture. */
.pod-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(250,250,247,0.94) 0%,
    rgba(250,250,247,0.80) 34%,
    rgba(250,250,247,0.20) 60%,
    rgba(250,250,247,0) 72%);
}
.pod-hero-inner { position: relative; z-index: 1; }
.pod-hero-text { max-width: 620px; }
.pod-title {
  font-size: clamp(3rem, 7.2vw, 6.2rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-top: var(--s-5);
}
.pod-title em { display: block; }
.pod-hero .lede { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); max-width: 46ch; color: var(--ink); }
.pod-hero-cta { margin-top: var(--s-6); }
.pod-cadence {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: var(--s-5);
}

/* The conversation: editorial copy on ink */
.pod-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.pod-editorial .display { color: var(--paper); max-width: 16ch; }
.pod-editorial .body-copy { color: rgba(255,255,255,0.74); font-size: clamp(1.02rem, 1.3vw, 1.15rem); }

/* Section heads */
.pod-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); flex-wrap: wrap; }
.pod-head .display { max-width: 18ch; }
.pod-empty {
  margin-top: var(--s-7);
  padding: var(--s-7) var(--s-6);
  border: 1px dashed rgba(13,13,13,0.18);
  color: var(--ink-muted);
  text-align: center;
}
.pod-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: var(--s-8);
}
.pod-intro .display { max-width: 16ch; }
.pod-intro-aside { align-self: end; }
/* Guest and sponsor: the lists beside the heading are the taller column now. */
.pod-guest .pod-intro, .pod-sponsor .pod-intro { align-items: start; }

.pod-steps { counter-reset: podstep; }
.pod-steps li {
  counter-increment: podstep;
  display: flex;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink);
}
.pod-steps li::before { content: counter(podstep); font-size: 0.72rem; color: var(--ink-muted); min-width: 1.2em; padding-top: 0.2em; }

.pod-packages > div { padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.pod-packages dt { font-size: 1.05rem; color: var(--ink); }
.pod-packages dd { margin: var(--s-1) 0 0; font-size: 0.9rem; color: var(--ink-muted); }
.pod-note { font-size: 0.82rem; font-weight: 700; color: var(--ink); }

/* Community cards */
.pod-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.pod-card-media { margin: 0 0 var(--s-5); aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--bg-soft); }
.pod-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pod-card h3 { font-size: 1.35rem; font-weight: 300; color: var(--ink); }
.pod-card p { font-size: 0.9rem; color: var(--ink-muted); margin-top: var(--s-2); }

/* ── The journey ───────────────────────────────────── */
.journey {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: clamp(20px, 3.2vw, 40px);
}
.journey-head { display: none; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); }
.journey-show { font-size: 0.75rem; font-style: italic; color: var(--brand-gold-deep); }
.journey-count { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); }
.journey-bars { display: none; gap: 4px; margin-bottom: var(--s-5); }
.journey-bars span { flex: 1; height: 3px; background: var(--rule); border-radius: 2px; transition: background 0.3s var(--ease); }
.journey-bars span.is-done { background: var(--ink); }

.journey-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); counter-reset: pill; }
.journey-pills li { counter-increment: pill; }
.journey-pill {
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(13,13,13,0.16);
  border-radius: 999px;
  padding: 0.45em 1em;
  cursor: default;
}
.journey-pill::before { content: counter(pill) ". "; }
.journey-pill.is-visited { cursor: pointer; color: var(--ink); }
.journey-pill.is-visited:hover { border-color: var(--ink); }
.journey-pill.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.journey-body { max-width: 760px; }

.journey-step[hidden], .journey-done[hidden] { display: none; }
.js .journey-step:not(.is-active) { display: none; }
.journey-step.is-active { animation: step-in 0.3s var(--ease-out); }

.journey-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -0.018em; color: var(--ink); margin-bottom: var(--s-5); }
.journey-field { margin-bottom: var(--s-5); }
.journey-label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: var(--s-3); }
.journey-note { margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-4); }
.journey-input {
  width: 100%;
  max-width: 520px;
  padding: 0.8em 1em;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(13,13,13,0.16);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}
.journey-input:focus { border-color: var(--ink); }
.journey-input.has-error { border-color: #b33; }
.journey-textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.journey-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); max-width: 520px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgba(13,13,13,0.2);
  border-radius: 999px;
  padding: 0.5em 1.05em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:focus-visible, .journey-pill:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.chips.has-error .chip { border-color: #b33; }

.journey-check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.journey-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ink); flex-shrink: 0; }

.journey-error { font-size: 0.85rem; font-weight: 700; color: #b33; margin-top: var(--s-2); }
.journey-nav { display: flex; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule-soft); }
.journey-submit[disabled] { opacity: 0.6; cursor: progress; }

.journey-done { padding-block: var(--s-6); }
.journey-done-body { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }

.journey.is-done .journey-pills,
.journey.is-done .journey-bars { display: none; }

/* Edit mode (?edit=1): every step and screen is shown at once so every
   string on the journey can be clicked and edited. */
.journey--editing .journey-step,
.journey--editing .journey-done,
.journey--editing .journey-error,
.journey--editing [data-show-if] { display: block !important; }
.journey--editing .journey-step, .journey--editing .journey-done { border-bottom: 1px dashed var(--rule); padding-bottom: var(--s-5); margin-bottom: var(--s-5); }

@media (max-width: 767px) {
  /* On a phone the text needs more height than the picture has sky, so the
     picture runs full width directly under the text, its top edge fading in
     behind the last lines. */
  .pod-hero { flex-direction: column; align-items: stretch; min-height: 0; padding-block: 40px 0; }
  .pod-hero-inner { order: 1; }
  .pod-hero-media { order: 2; position: relative; inset: auto; aspect-ratio: 1 / 1; max-width: 100%; margin-top: -8px; }
  .pod-hero-media::after { background: linear-gradient(180deg, rgba(244,241,233,1) 0%, rgba(244,241,233,0) 32%); }
  .pod-editorial-grid, .pod-intro { grid-template-columns: 1fr; }
  .pod-cards { grid-template-columns: 1fr; }
  .journey-pills { display: none; }
  .journey-head, .journey-bars { display: flex; }
  .journey-pair { grid-template-columns: 1fr; }
  .journey-nav .btn { flex: 1; justify-content: center; text-align: center; }
  .journey-nav .journey-back { flex: 0 0 auto; }
}