/* Episode page layout. Every band shares one content edge (the same gutter the catalog pages use):
   breadcrumbs, the hero, the episode band (big question + notes), then the resources with a
   contents list that stays in view beside them. Loaded only by the episode template. */
.episode-page { --gutter: max(5%, calc((100% - 1296px) / 2)); }

/* Breadcrumbs: one aligned trail, separators drawn by CSS and hidden from screen readers. */
.episode-page .breadcrumbs { display: block; max-width: none; margin: 0; padding: 14px var(--gutter) 0; font-size: var(--type-small); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; align-items: center; color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; content: "/" / ""; margin: 0 10px; color: var(--color-border-sky); }
.episode-page .breadcrumbs a { color: var(--color-azure-deep); font-weight: var(--weight-semibold); text-decoration: none; }
.episode-page .breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs [aria-current="page"] { color: var(--color-ink); }

/* Hero */
.episode-page .episode-detail-hero { max-width: none; margin: 0; padding: 24px var(--gutter) clamp(48px, 6vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); }
.episode-page .episode-detail-hero h1 { margin-bottom: 20px; }
.episode-page .episode-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0 0 26px; padding: 0; list-style: none; font-size: var(--type-small); color: var(--color-text-muted); }
.episode-meta li + li::before { content: "·"; content: "·" / ""; margin: 0 10px; }
.episode-meta .episode-status { padding: 4px 12px; border-radius: 99px; background: var(--color-gold-soft); color: var(--color-ink-on-gold); font-weight: var(--weight-semibold); }
.episode-meta .episode-status.is-available { background: var(--color-teal); color: var(--color-ivory); }
.episode-meta .episode-status + li::before { content: none; }
.episode-meta .episode-status + li { margin-left: 14px; }
.episode-page .episode-detail-hero .intro { margin: 0 0 12px; }
.episode-page .episode-detail-hero .intro + p { max-width: 58ch; margin: 0; color: var(--color-text-muted); }
.episode-page .episode-detail-hero .hero-actions { gap: 14px 28px; margin-top: 28px; }
.episode-page .episode-detail-hero .button { margin-top: 0; }

/* The episode band: the big question beside the notes about what happens in it. */
.episode-about { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(40px, 5vw, 64px) var(--gutter); background: var(--color-pale-sky); }
.episode-page .episode-question { display: block; margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: var(--color-gold); color: var(--color-on-wonder); }
.episode-page .episode-question > span { display: block; font-weight: var(--weight-bold); }
.episode-page .episode-question p { margin: 14px 0 0; font-size: var(--type-subheading); line-height: 1.2; }
.episode-page .episode-notes { max-width: none; margin: 0; padding: 0; }
.episode-page .episode-notes h2 { margin: 0 0 6px; font-size: var(--type-card-title); color: var(--color-navy); }
.episode-page .episode-notes details:last-of-type { border-bottom: 1px solid var(--line); }

/* Resources */
.episode-page .resource-section { max-width: none; margin: 0; padding: clamp(56px, 7vw, 96px) var(--gutter) 16px; }
.episode-page .resource-section > .section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; margin: 0 0 clamp(32px, 4vw, 48px); padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.episode-page .resource-section > .section-heading h2 { color: var(--color-navy); text-wrap: balance; }
.resource-subtitle { margin: 14px 0 0; font-size: var(--type-body-large); color: var(--color-text-muted); }
.episode-page .resource-kit { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; margin: 0; text-align: right; }
.episode-page .resource-promise { margin: 0; font-size: var(--type-small); opacity: 1; color: var(--color-text-muted); }

.resource-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.episode-page .resource-jump { position: sticky; top: 24px; display: block; padding: 0; border: 0; }
.resource-jump-title { margin: 0 0 12px; font-size: var(--type-label); font-weight: var(--weight-bold); letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); }
.resource-jump ol { margin: 0; padding: 0; list-style: none; counter-reset: resource; border-left: 2px solid var(--line); }
.resource-jump li { counter-increment: resource; }
.episode-page .resource-jump a { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-left: -2px; padding: 0 0 0 16px; border-left: 2px solid transparent; border-radius: 0; background: none; color: var(--color-ink); font-size: var(--type-body); font-weight: var(--weight-semibold); text-decoration: none; }
.episode-page .resource-jump a::before { content: counter(resource, decimal-leading-zero); font-size: var(--type-label); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.episode-page .resource-jump a:hover { background: none; color: var(--color-azure-deep); }
.episode-page .resource-jump a[aria-current="true"] { border-left-color: var(--color-orange-action); color: var(--color-azure-deep); }

.episode-page .inline-resource { scroll-margin-top: 24px; }
.resource-list > .inline-resource:first-child { padding-top: 0; }
.resource-list > .inline-resource:last-child { border-bottom: 0; }
.episode-page .inline-resource .resource-body { max-width: none; }
.episode-page .inline-resource .resource-body > p { max-width: 68ch; }

/* Coloring pages: a tidy row of sheets, each with its download at the foot. */
.episode-page .coloring-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none; margin: 28px 0 8px; }
.episode-page .coloring-sheet { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 16px; }
.episode-page .coloring-sheet img { width: 100%; height: auto; object-fit: contain; }
.episode-page .coloring-sheet .text-link { margin-top: auto; padding-top: 10px; }

/* Recipe: what you need beside how to make it; the conversation underneath. */
.episode-page #recipe .resource-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 clamp(28px, 4vw, 56px); }
.episode-page #recipe .resource-body > :not(section) { grid-column: 1 / -1; }
.episode-page #recipe .resource-body > section:last-child { grid-column: 1 / -1; margin-top: 16px; padding: 4px 24px 12px; border-radius: 16px; background: var(--color-pale-sky); }

/* Parent guide: before beside after, the words as a list, perspective beside the next step. */
.episode-page #parent-guide .resource-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.episode-page #parent-guide .resource-body > :not(section),
.episode-page #parent-guide .resource-body > section:nth-of-type(3) { grid-column: 1 / -1; }
.episode-page #parent-guide dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 28px; margin: 0; }
.episode-page #parent-guide dt, .episode-page #parent-guide dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }

.episode-more { margin: 0; padding: 8px var(--gutter) clamp(48px, 6vw, 80px); }
.episode-page .episode-more .text-link { margin-top: 0; font-weight: var(--weight-semibold); }

@media (max-width: 1000px) {
  .episode-page .coloring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .episode-page { --gutter: clamp(20px, 6vw, 40px); }
  .episode-page .episode-detail-hero { grid-template-columns: 1fr; padding-top: 16px; }
  .episode-about { grid-template-columns: 1fr; }
  .episode-page .resource-section > .section-heading { flex-direction: column; align-items: flex-start; }
  .episode-page .resource-kit { align-items: flex-start; text-align: left; }
  .resource-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }

  /* On a phone the contents become a row of chips pinned to the top of the screen. */
  /* The row scrolls edge to edge; its padding lines the first and last chips up with the page text. */
  .episode-page .resource-jump { top: 0; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 10px 0; background: color-mix(in srgb, var(--color-paper) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .resource-jump-title { display: none; }
  .resource-jump ol { display: flex; gap: 8px; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); border: 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter)), transparent); }
  .resource-jump li { flex-shrink: 0; }
  .resource-jump ol::-webkit-scrollbar { display: none; }
  .episode-page .resource-jump a { min-height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 99px; background: var(--color-white); font-size: var(--type-small); white-space: nowrap; }
  .episode-page .resource-jump a::before { content: none; }
  .episode-page .resource-jump a[aria-current="true"] { border-color: var(--color-cobalt); background: var(--color-cobalt); color: var(--color-ivory); }
  .episode-page .inline-resource { scroll-margin-top: 72px; }
  .resource-list > .inline-resource:first-child { padding-top: 28px; }

  .episode-page #recipe .resource-body, .episode-page #parent-guide .resource-body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .episode-page .coloring-grid { gap: 12px; }
  .episode-page .coloring-sheet { padding: 10px; }
  .episode-page .coloring-sheet h3 { font-size: var(--type-body); }
  .episode-page #parent-guide dl { grid-template-columns: 1fr; }
  .episode-page #parent-guide dd { padding-top: 0; border-top: 0; }
}

/* Printing one resource (resources.js) shows only that resource, in a single plain column. */
.printing-resource .episode-about, .printing-resource .episode-more { display: none !important; }
@media print {
  .resource-layout, .episode-page #recipe .resource-body, .episode-page #parent-guide .resource-body { display: block; }
}