/* /episoder/ — arkiv-side for Full tillit-podkasten (#105). Alt scopet under
   #ageri-episoder-root. On-brand: mørk hero (espresso), lyst innhold, oliven
   aksent. Knapp inverterer på hover, aldri blå, egne focus/active +
   -webkit-text-fill-color. */

#ageri-episoder-root {
  --brun: #382D2E;
  --brun-800: #2C2323;
  --oliven: #A09B5F;
  --oliven-lys: #C1BC91;
  --oliven-tekst: #5E5934;
  --sand: #E8E4D5;
  --papir: #F5F3EC;
  --graa: #4B4B4D;
  --lysgraa: #D8D7D2;

  font-family: "Libre Franklin", system-ui, -apple-system, sans-serif;
  color: var(--brun);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
}

#ageri-episoder-root *, #ageri-episoder-root *::before, #ageri-episoder-root *::after {
  box-sizing: border-box;
}

/* ---- Hero ---- */
#ageri-episoder-root .ep-hero {
  background: var(--brun);
  color: var(--papir);
  padding: clamp(72px, 12vw, 120px) 24px clamp(56px, 9vw, 96px);
}

#ageri-episoder-root .ep-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}

#ageri-episoder-root .ep-hero__eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oliven-lys);
  -webkit-text-fill-color: var(--oliven-lys);
  margin: 0 0 18px;
}

#ageri-episoder-root .ep-hero__title {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--papir);
  -webkit-text-fill-color: var(--papir);
}

#ageri-episoder-root .ep-hero__lead {
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.5;
  color: rgba(245, 243, 236, 0.92);
  -webkit-text-fill-color: rgba(245, 243, 236, 0.92);
  margin: 0 0 28px;
  max-width: 620px;
}

#ageri-episoder-root .ep-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--oliven-lys);
  -webkit-text-fill-color: var(--oliven-lys);
  text-decoration: none;
  transition: color 0.15s ease;
}
#ageri-episoder-root .ep-back:hover,
#ageri-episoder-root .ep-back:focus-visible {
  color: var(--papir);
  -webkit-text-fill-color: var(--papir);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Innhold ---- */
#ageri-episoder-root .ep-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 80px) 24px clamp(64px, 10vw, 104px);
}

#ageri-episoder-root .ep-section {
  padding-block: clamp(32px, 5vw, 56px);
}
#ageri-episoder-root .ep-section + .ep-section {
  border-top: 1px solid var(--lysgraa);
}

#ageri-episoder-root .ep-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oliven-tekst);
  margin: 0 0 12px;
}

#ageri-episoder-root .ep-heading {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.16;
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--brun);
}

#ageri-episoder-root .ep-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--graa);
  margin: 0 0 26px;
  max-width: 60ch;
}

#ageri-episoder-root .ep-player {
  background: #fff;
  border: 1px solid var(--lysgraa);
  border-radius: 12px;
  padding: 12px clamp(12px, 3vw, 24px);
}

/* ---- Knapp (aldri blå; oliven fyll → invertert espresso på hover) ---- */
#ageri-episoder-root .ep-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
#ageri-episoder-root .ep-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

#ageri-episoder-root .ep-btn--primary {
  background: var(--oliven);
  color: var(--brun);
  -webkit-text-fill-color: var(--brun);
  border: 1.5px solid var(--oliven);
}
#ageri-episoder-root .ep-btn--primary:hover,
#ageri-episoder-root .ep-btn--primary:focus-visible {
  background: var(--brun);
  color: var(--oliven);
  -webkit-text-fill-color: var(--oliven);
  border-color: var(--brun);
  transform: translateY(-1px);
}
#ageri-episoder-root .ep-btn--primary:active {
  background: var(--brun-800);
  color: var(--oliven);
  -webkit-text-fill-color: var(--oliven);
  border-color: var(--brun-800);
  transform: none;
}
#ageri-episoder-root .ep-btn:focus-visible {
  outline: 2px solid var(--oliven-tekst);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #ageri-episoder-root .ep-btn { transition: none; }
  #ageri-episoder-root .ep-btn--primary:hover { transform: none; }
}