/* ============================================================
   Garden Sessions — series hub (garden-sessions/index.html) and every
   individual session page (garden-sessions/<slug>/index.html). Reuses
   the site's design tokens and global components from style.css
   (colors, type, .kicker, .lede, .btn, .cta-band, .notes-list,
   .modal-video-wrap, .dropcap) — this file only adds the pieces unique
   to this series, and nothing else on the site loads it.
   ============================================================ */

/* ---------- Hub hero ----------
   Same rotating-background technique as the Mais do que Amor, é Fado
   hub: a slow crossfade through one frame per session, pure CSS, no
   JS. 12 slides × 4s each = a 48s loop. */
.series-hero {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 24px 110px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.series-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(27,23,18,.5), rgba(27,23,18,.88));
}
.series-hero > * { position: relative; z-index: 2; }
.series-hero .kicker { justify-content: center; color: var(--paper); opacity: .85; }
.series-hero h1 { color: var(--paper); max-width: 760px; margin: 18px auto 0; }
.series-hero p.lede { color: var(--paper); opacity: .95; max-width: 640px; margin: 26px auto 0; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: saturate(.92);
  animation: gsHeroFade 48s infinite;
}

@keyframes gsHeroFade {
  0%      { opacity: 0; }
  2.0833% { opacity: 1; }
  6.25%   { opacity: 1; }
  8.3333% { opacity: 0; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-slide { animation: none; opacity: 0; }
  .hero-bg-slide:first-child { opacity: 1; }
}

.series-hero-credit {
  margin-top: 34px;
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--paper);
  opacity: .6;
}

/* ---------- Session list (hub) ---------- */
.episode-list { border-top: 1px solid var(--line); }
.episode-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.episode-thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--paper-deep); }
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.episode-body .kicker { margin-bottom: 8px; }
.episode-body h3 { font-size: 1.5rem; margin: 0 0 6px; }
.episode-meta {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.episode-body p { margin: 0 0 18px; color: var(--ink-soft); }
.episode-link {
  font-family: var(--sans);
  font-size: .84rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.episode-link:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .episode-row { grid-template-columns: 1fr; }
  .episode-thumb { aspect-ratio: 16/9; }
}

/* ---------- Session page intro ----------
   A quieter cousin of the Fado chapters' .fado-intro — same idea (a
   photo behind a dark gradient, kicker/title/meta/lede centred over
   it), but shorter: no scroll-piece, so no "scroll to begin" control. */
.gs-intro {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 24px 80px;
  background: var(--ink) center/cover no-repeat;
  color: var(--paper);
  position: relative;
}
.gs-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,23,18,.55), rgba(27,23,18,.9));
}
.gs-intro > * { position: relative; z-index: 1; }
.gs-intro .kicker { justify-content: center; color: var(--paper); opacity: .85; }
.gs-intro h1 { color: var(--paper); max-width: 760px; margin: 18px auto 0; }
.gs-intro p.lede { color: var(--paper); opacity: .95; max-width: 620px; margin: 22px auto 0; }
.gs-meta {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .7;
}

/* ---------- Songs ---------- */
.song-list { display: flex; flex-direction: column; gap: 56px; margin-top: 8px; }
.song-block { max-width: 720px; }
.song-block-head { margin-bottom: 16px; }
.song-block-head h3 { font-size: 1.3rem; margin: 0 0 6px; display: inline; }
.song-artist { font-family: var(--sans); font-size: .95rem; font-weight: 400; color: var(--text-muted); }
.song-performer { font-family: var(--sans); font-size: .84rem; color: var(--text-muted); margin: 6px 0 0; }
.song-note { font-family: var(--sans); font-size: .8rem; color: var(--text-faint); font-style: italic; margin: 4px 0 0; }
.song-embed { margin-bottom: 12px; border: 1px solid var(--line); }
.song-watch-link { font-size: .82rem; }

/* ---------- Credits ---------- */
.notes-list h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.notes-list h3 a:hover { color: var(--accent); border-color: var(--accent); }