/* Program-page components from the design system's this-sunday preview.
 * Reads the .h2h-program --program-* tokens (see h2h.css). */

/* ---------- Program page ---------- */
/* Access with an end date, said above the hero. Crimson because it's the one
 * thing on this page that changes if it's ignored — but worded as an
 * invitation, and carrying the date rather than a countdown, because nothing
 * has gone wrong: they're here, and this is how they stay. */
.ps-expiry { background: var(--crimson); color: #fff; }
.ps-expiry__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-3) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.ps-expiry__text { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.ps-expiry__text strong { color: var(--gold-soft); }
.ps-expiry__cta { flex: none; display: inline-flex; flex-direction: column; align-items: center;
  gap: .1rem; background: #fff; color: var(--crimson); border: 0; border-radius: var(--radius);
  padding: .55rem 1.2rem; font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.ps-expiry__cta:hover { background: var(--gold-soft); color: var(--crimson-deep); }
.ps-expiry__credit { font-weight: 500; font-size: .78rem; opacity: .8; }

.ps-head { border-bottom: 1px solid var(--gold-soft); background: linear-gradient(180deg, var(--program-structure-wash, var(--navy-wash)), var(--page)); }
.ps-head__inner { max-width: 78rem; margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-6); display: flex; gap: var(--sp-6); align-items: center; }
.ps-head__text { flex: 1; min-width: 0; }
.ps-head__eyebrow { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ps-head__eyebrow span { width: 1.6rem; height: 3px; background: var(--gold); border-radius: 2px; }
.ps-head__eyebrow p { margin: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.ps-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 0 0 var(--sp-3); }
.ps-head__lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 44rem; margin: 0 0 var(--sp-4); }
.ps-head__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--ink-soft); }
.ps-head__meta b { color: var(--program-accent, var(--crimson)); font-family: var(--font-serif); }
.ps-head__art { flex: none; width: 18rem; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: #1c1512; }
.ps-head__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ps-body { max-width: 78rem; margin: 0 auto; padding: var(--sp-6); }
.ps-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.ps-toolbar h2 { margin: 0; }
.ps-editions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ps-edition { font-size: var(--text-sm); font-weight: 600; text-decoration: none; color: var(--program-structure, var(--navy)); border: 1px solid var(--gold-soft); border-radius: 999px; padding: .3rem .8rem; }
.ps-edition.is-current { background: var(--program-structure, var(--navy)); color: #fff; border-color: transparent; }

.ps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 1100px) { .ps-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } .ps-head__inner { flex-direction: column; align-items: flex-start; } .ps-head__art { width: 100%; } }
@media (max-width: 520px) { .ps-grid { grid-template-columns: 1fr; } }

.ps-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 140ms, transform 140ms; }
a.ps-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ps-card--locked { opacity: .62; }
.ps-card--done { border-left: 3px solid var(--ok); }
.ps-card__thumb { position: relative; padding-top: 56.25%; background: #1c1512; display: grid; place-items: center; }
.ps-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-card__thumb-fallback { position: absolute; color: var(--gold-soft); font-family: var(--font-serif); font-size: var(--text-sm); letter-spacing: .1em; text-transform: uppercase; }
.ps-card__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 140ms; }
.ps-card__play svg { width: 2.6rem; height: 2.6rem; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
a.ps-card:hover .ps-card__play { opacity: 1; }
.ps-card__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.35); }
.ps-card__bar i { display: block; height: 100%; background: var(--program-accent, var(--crimson)); }
.ps-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex: 1; display: flex; flex-direction: column; }
.ps-card__num { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 var(--sp-1); }
.ps-card__title { font-size: var(--text-base); font-family: var(--font-serif); margin: 0 0 var(--sp-2); line-height: 1.3; }
.ps-card__meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: auto 0 0; }

.ps-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }

/* In-program search — with hundreds of homilies, paging can't find anything. */
.ps-toolbar__tools { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.ps-search { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ps-search .h2h-input { max-width: 18rem; }
.ps-result-count { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; color: var(--ink-soft); margin-left: var(--sp-2); }

/* Session page: keep the player at a consistent position so moving between
 * sessions doesn't shove the layout around. The header holds a fixed height
 * (titles wrap to 1 or 2 lines), and the description moved below the player
 * and is clamped. */
.h2h-session-head { min-height: 8.5rem; display: flex; flex-direction: column; }
.h2h-session-head > p { margin-bottom: var(--sp-2); }
.h2h-session-head__title {
  margin: 0;
  /* Two lines max, always occupying two lines' worth of space. */
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 640px) {
  .h2h-session-head { min-height: 0; }
  .h2h-session-head__title { min-height: 0; -webkit-line-clamp: 3; }
}

.h2h-session-blurb { margin-bottom: var(--sp-5); }
.h2h-session-blurb p {
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h2h-session-blurb.is-expanded p { -webkit-line-clamp: unset; overflow: visible; }
.h2h-session-blurb button { padding-left: 0; }

/* Compact This Sunday card — atop a program page */
.tsc {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--program-accent, var(--crimson));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.tsc__thumb {
  flex: none;
  width: 7rem;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: #1c1512;
}
.tsc__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tsc__thumb .play { position: absolute; inset: 0; display: grid; place-items: center; }
.tsc__thumb .play span {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--program-accent, var(--crimson));
  display: grid;
  place-items: center;
}
.tsc__thumb .play svg { width: 0.85rem; height: 0.85rem; fill: #fff; margin-left: 2px; }
.tsc__body { flex: 1; min-width: 0; }
.tsc__kick {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tsc__feast {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 2px 0 3px;
  line-height: 1.25;
}
.tsc__cite { font-size: var(--text-sm); color: var(--program-structure, var(--navy)); font-weight: 600; }
.tsc__cta { flex: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.tsc__cta .h2h-btn { padding: 0.55rem 1.1rem; font-size: var(--text-sm); text-align: center; }

@media (max-width: 760px) {
  .tsc { flex-wrap: wrap; }
  .tsc__cta { flex-direction: row; width: 100%; }
}

/* ---------- The way in ----------
 * One obvious next action, then the whole arc in its parts. Someone who has
 * just signed up shouldn't have to work out where to begin. */
.ps-next {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--program-accent-wash, var(--crimson-wash));
  border: 1px solid var(--gold-soft); border-radius: var(--radius-lg);
}
.ps-next__label {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-deep);
}
.ps-next__title { margin: .15rem 0 0; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; }
.ps-next__note { margin: .3rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

.mg { margin-bottom: var(--sp-7); }
.mg__group { margin-bottom: var(--sp-6); }
.mg__group-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
}
.mg__group-name { margin: 0; font-size: var(--text-lg); }
.mg__group-count { font-size: var(--text-sm); color: var(--ink-soft); }
/* Four across, which is how the modules are actually shaped. */
.mg__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 62rem) { .mg__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .mg__row { grid-template-columns: 1fr; } }

.mg__card { display: flex; flex-direction: column; }
.mg__thumb {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--navy-deep); border-radius: var(--radius); overflow: hidden;
}
.mg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg__card:hover .mg__thumb { box-shadow: var(--shadow-lift); }
.mg__card.is-done .mg__thumb img { opacity: .68; }
.mg__num {
  position: absolute; left: .4rem; top: .4rem; min-width: 1.5rem; text-align: center;
  font-size: .78rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.62);
  border-radius: 5px; padding: .05rem .35rem;
}
.mg__done {
  position: absolute; right: .4rem; top: .4rem; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: .8rem;
}
.mg__resume {
  position: absolute; right: .4rem; top: .4rem; font-size: .7rem; font-weight: 600;
  background: var(--gold); color: #fff; border-radius: 999px; padding: .1rem .5rem;
}
.mg__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.28); }
.mg__bar i { display: block; height: 100%; background: var(--gold); }
.mg__body { padding-top: var(--sp-2); }
.mg__title { margin: 0; font-size: var(--text-sm); line-height: 1.35; }
.mg__title a { color: var(--ink); text-decoration: none; }
.mg__title a:hover { color: var(--program-accent, var(--crimson)); }
.mg__guide {
  display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 600;
  color: var(--gold-deep); text-decoration: none;
}
.mg__guide:hover { text-decoration: underline; }

/* ── The episode page: one player, two layouts ────────────────────────────
 * Watch is a single column with the video dominant. Study puts the video in
 * a sticky rail with the guide beside it and the journal alongside. The
 * player element is identical in both — only the grid moves, because a Vimeo
 * iframe restarts if it is re-rendered or reparented. */
.ep { display: grid; gap: var(--sp-5); }
.ep__stage { min-width: 0; }

.ep--watch .ep__guide,
.ep--watch .ep__journal { display: none; }

@media (min-width: 64rem) {
  .ep--study { grid-template-columns: minmax(22rem, 34fr) minmax(0, 42fr) minmax(15rem, 24fr); align-items: start; }
  .ep--study .h2h-session-head,
  .ep--study .h2h-episode-nav { grid-column: 1 / -1; }
  /* The video stays put while the guide scrolls past it — the cue links are
   * useless if you have to scroll back up to see what they did. */
  .ep--study .ep__stage { position: sticky; top: var(--sp-4); }
  .ep--study .h2h-session-blurb { display: none; }
}

.ep__guide { min-width: 0; }
.ep__guide-head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.ep__guide-label {
  margin: 0 0 var(--sp-1); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep, var(--ink-soft));
}
.ep__guide-title { font-family: var(--font-serif); margin: 0 0 var(--sp-1); font-size: var(--text-2xl); }
.ep__guide-where { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.ep__sep { margin: 0 .4rem; opacity: .5; }

.ep__guide-step {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.ep__guide-link { font-weight: 600; }
.ep__guide-link--next { text-align: right; }

.ep__journal {
  position: sticky; top: var(--sp-4); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-4);
}
.ep__journal-head { display: flex; justify-content: space-between; align-items: baseline; }
.ep__journal-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ep__journal-status { font-size: var(--text-sm); color: var(--ink-soft); }
.ep__journal-for { margin: var(--sp-1) 0 var(--sp-2); font-weight: 600; font-size: var(--text-sm); }
.ep__journal-body {
  width: 100%; min-height: 14rem; resize: vertical; font: inherit; line-height: 1.6;
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3);
  background: var(--page);
}
.ep__journal-note, .ep__journal-all { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* Shown only once the episode has actually finished. */
.ep__ended {
  margin: var(--sp-4) 0; padding: var(--sp-4);
  background: var(--gold-wash, var(--navy-wash)); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.ep__ended-said { margin: 0 0 var(--sp-3); font-weight: 600; }
.ep__ended-next { display: flex; gap: var(--sp-3); flex-wrap: wrap; }


/* Reference sheets: designed pages kept as PDFs, offered to print. */
.ws { margin: var(--sp-7) 0; }
.ws__title { font-family: var(--font-serif); margin: 0 0 var(--sp-1); }
.ws__lead { margin: 0 0 var(--sp-4); color: var(--ink-soft); max-width: 42rem; }
.ws__items { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.ws__item {
  display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.ws__item:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.ws__item-title { font-weight: 600; }
.ws__item-meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* Groups you lead. */
.gl { display: grid; gap: var(--sp-3); max-width: 40rem; }
.gl__item {
  display: flex; flex-direction: column; gap: .2rem; padding: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.gl__item:hover { border-color: var(--gold); }
.gl__name { font-weight: 600; font-family: var(--font-serif); font-size: var(--text-lg); }
.gl__meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* The leader's bar: what someone running a group came here to do. */
.lb {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--navy-wash); border: 1px solid var(--line);
  border-left: 3px solid var(--navy-deep); border-radius: var(--radius);
}
.lb__label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lb__name { margin: .1rem 0 .1rem; font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 700; }
.lb__meta { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.lb__sep { margin: 0 .3rem; opacity: .6; }
.lb__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* The member's version: information, not controls. */
.lb--member { border-left-color: var(--gold); }

/* Facilitator resources: one row per thing, its actions on the right, so a
 * game and the deck it came from stop looking like two different games. */
.fr__items { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr__item {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap; padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
}
.fr__item:first-child { border-top: 0; }
.fr__title { margin: 0; font-weight: 600; }
.fr__detail { margin: .1rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }
.fr__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* The group page: cards that say what they're for, rather than a column of
 * buttons with sentences trailing off them. */
.gh-run { display: flex; flex-direction: column; gap: var(--sp-3); }
.gh-run__head h3 { margin: 0 0 var(--sp-1); }
.gh-run__head p { margin: 0; }
.gh-run__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.gh-run__next { margin: 0; }

/* Two ways to run a gathering, side by side so the difference between them is
 * readable rather than remembered. Both look like cards you can press; the
 * chosen one is filled in and checked. */
.gh-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-3); }
.gh-modes__form { display: block; }
.gh-mode { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; height: 100%;
  text-align: left; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); cursor: pointer; font: inherit; }
.gh-mode:hover { border-color: var(--crimson); }
.gh-mode.is-on { border-color: var(--crimson); background: var(--crimson-wash); box-shadow: inset 0 0 0 1px var(--crimson); }
.gh-mode__name { font-weight: 700; color: var(--ink); }
.gh-mode.is-on .gh-mode__name::after { content: " \2713"; color: var(--crimson); }
.gh-mode__detail { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.4; }
.gh-modes__label { margin: 0; font-weight: 600; color: var(--ink); }

.gh-progress__stats {
  display: flex; gap: var(--sp-6); flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-3);
}
.gh-progress__stats div { display: flex; flex-direction: column; }
.gh-progress__stats b { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.1; }
.gh-progress__stats span { font-size: var(--text-sm); color: var(--ink-soft); }

.gh-upgrade {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-5); padding: var(--sp-4);
  background: var(--navy-wash); border: 1px solid var(--line); border-radius: var(--radius);
}
.gh-upgrade p { margin: 0; max-width: 32rem; }

/* A participant's own things, above the group's. */
.ps-yours { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 0; }

/* Admin dashboard, grouped by the job you came to do. */
.ad-group { margin: var(--sp-5) 0; }
.ad-group__name {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--sp-2);
}
.ad-group__links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.ad-group--lead .ad-group__name { color: var(--crimson); }
.ad-group--lead { padding: var(--sp-4); background: var(--navy-wash); border-radius: var(--radius); }