/* Grow Your Soul: the podcast and Shorts pages (October 2026).
   Loaded only on the pages that show episodes or Shorts: the podcast hub,
   each episode's page, the Shorts page and the home page. It uses the site's
   own colours and type (site.css), and adds only what these pages need. */

.pod-wrap { max-width: 60rem; }

/* ---- pictures with a play button ---- */
.pod-thumb { position: relative; display: block; overflow: hidden; border-radius: 12px;
  background: var(--paper-3); aspect-ratio: 16 / 9; }
.pod-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pod-play { position: absolute; right: 12px; bottom: 12px; width: 52px; height: 52px; margin: 0;
  border-radius: 50%; background: rgba(4, 20, 12, .62); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25); transition: transform .15s ease, background .15s ease; }
.pod-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
a:hover .pod-play, button:hover .pod-play { transform: scale(1.06); background: rgba(4, 20, 12, .78); }

.pod-series { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pod-meta { display: block; font-size: .88rem; color: var(--ink-faint); }
.pod-summary { color: var(--ink); line-height: 1.7; }
.pod-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.pod-honesty, .pod-note { margin-top: 1.2rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; max-width: 46rem; }
.pod-soon { color: var(--ink-soft); font-style: italic; }
.pod-more { margin-top: 1.2rem; }
.pod-sub { margin: 2rem 0 1rem; font-family: var(--font-display); font-size: 1.35rem; }

/* ---- the newest episode, large ---- */
.pod-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.pod-feature-title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.2; margin: .35rem 0 .4rem; }
.pod-feature-title a { color: var(--ink); text-decoration: none; }
.pod-feature .pod-summary { margin-top: .8rem; }
@media (max-width: 760px) { .pod-feature { grid-template-columns: 1fr; gap: 1rem; } }

/* ---- a row of episode cards ---- */
.pod-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.pod-card { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; color: inherit; }
.pod-card-body { display: flex; flex-direction: column; gap: .25rem; }
.pod-card-title { font-weight: 700; color: var(--ink); line-height: 1.35; font-size: 1.02rem; }
.pod-card:hover .pod-card-title { color: var(--accent); }

/* ---- Shorts: tall cards ---- */
.pod-shorts { display: grid; gap: 1rem; }
.pod-shorts-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.pod-shorts-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pod-shorts-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pod-short { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: inherit; }
.pod-short-thumb { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 9 / 16; background: var(--paper-3); }
.pod-short-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pod-short .pod-play { width: 42px; height: 42px; right: 10px; bottom: 10px; }
.pod-short .pod-play svg { width: 20px; height: 20px; }
.pod-short-title { font-weight: 700; color: var(--ink); line-height: 1.3; font-size: .95rem; }
.pod-short-verse { font-size: .82rem; font-weight: 600; color: var(--accent); }
.pod-short-open { font-size: .8rem; color: var(--ink-faint); }
.pod-short:hover .pod-short-title { color: var(--accent); }
/* on a phone the Shorts rows scroll sideways instead of making a long column */
@media (max-width: 640px) {
  .pod-shorts-row, .pod-shorts-three { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem;
    padding-bottom: .4rem; margin-right: -1rem; padding-right: 1rem; }
  .pod-shorts-row .pod-short, .pod-shorts-three .pod-short { flex: 0 0 42%; scroll-snap-align: start; }
  .pod-shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
}

/* ---- home page block ---- */
.pod-home { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.pod-home-ep { display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; }
.pod-line { color: var(--ink-soft); line-height: 1.55; }
.pod-watch { align-self: flex-start; margin-top: .4rem; }
@media (max-width: 860px) { .pod-home { grid-template-columns: 1fr; } }

/* ---- an episode's own page: the video comes first ---- */
.pod-watch-top { padding-top: 1.6rem; }
.pod-h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.15; margin: .35rem 0 .6rem; }
.pod-watch-top .pod-series { font-size: .8rem; }
.pod-player { position: relative; margin-top: 1rem; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #0b0f0c; box-shadow: var(--shadow-2); }
.pod-player-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pod-player-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pod-player-btn .pod-play { width: 72px; height: 72px; right: 18px; bottom: 18px; }
.pod-player-btn .pod-play svg { width: 36px; height: 36px; }
@media (max-width: 640px) { .pod-player-btn .pod-play { width: 58px; height: 58px; right: 12px; bottom: 12px; } }
.pod-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pod-yt { margin-top: .6rem; font-size: .9rem; }
.pod-summary-lead { margin-top: 1.1rem; font-size: 1.08rem; max-width: 46rem; }

.pod-chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-width: 46rem; }
.pod-ch { display: flex; gap: .9rem; align-items: baseline; padding: .55rem .7rem; border-radius: 8px; text-decoration: none; color: var(--ink); min-height: 44px; }
.pod-ch:hover, .pod-ch.is-on { background: var(--accent-soft); }
.pod-ch-t { flex: 0 0 4.2rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .88rem; color: var(--accent); }
.pod-ch-l { line-height: 1.45; }

.pod-bible blockquote { font-style: normal; }
.pod-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.pod-pn { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; background: var(--paper); }
.pod-pn:hover { border-color: var(--accent); }
.pod-next { text-align: right; grid-column: 2; }
.pod-pn-dir { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pod-pn-t { font-weight: 700; color: var(--ink); }
@media (max-width: 640px) { .pod-prevnext { grid-template-columns: 1fr; } .pod-next { grid-column: auto; } }

/* ---- a Short playing over the page (podcast.js) ---- */
html.pod-modal-open { overflow: hidden; }
.pod-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 12px; }
.pod-modal[hidden] { display: none; }
.pod-modal-back { position: absolute; inset: 0; background: rgba(3, 10, 6, .88); }
.pod-modal-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: .65rem; max-width: 100%; }
.pod-modal-video { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  width: min(calc((100vh - 200px) * 9 / 16), calc(100vw - 24px), 430px);
  width: min(calc((100dvh - 200px) * 9 / 16), calc(100vw - 24px), 430px); }
.pod-modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pod-modal-info { color: #fff; text-align: center; max-width: 30rem; display: flex; flex-direction: column; gap: .3rem; }
.pod-modal-info p { margin: 0; }
.pod-modal-title { font-weight: 700; line-height: 1.3; font-size: 1rem; }
.pod-modal-verse { font-size: .85rem; font-weight: 600; color: #f1d58a; }
.pod-modal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; font-size: .9rem; }
.pod-modal-links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; padding: .35rem 0; }
.pod-modal-links a[hidden] { display: none; }
.pod-modal-nav { display: flex; justify-content: center; gap: .7rem; }
.pod-modal-step { min-height: 40px; padding: .4rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.pod-modal-step:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.pod-modal-step:disabled { opacity: .35; cursor: default; }
.pod-modal-step[hidden] { display: none; }
.pod-modal-x { position: fixed; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .14); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pod-modal-x:hover { background: rgba(255, 255, 255, .26); }
.pod-modal-x svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.pod-modal-x:focus-visible, .pod-modal-step:focus-visible, .pod-modal-links a:focus-visible { outline: 2px solid #f1d58a; outline-offset: 3px; }
@media (max-width: 640px) {
  .pod-modal { padding: 8px; }
  .pod-modal-video { width: min(calc((100vh - 170px) * 9 / 16), calc(100vw - 16px));
    width: min(calc((100dvh - 170px) * 9 / 16), calc(100vw - 16px)); }
  .pod-modal-links { font-size: .85rem; }
}

/* ---- blog posts (Oct 2026): the episode at the top of a post, and the post list ---- */
.blog-ep { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; max-width: 60rem; }
.blog-ep-title { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.25; margin: .3rem 0 .5rem; color: var(--ink); }
.blog-ep .pod-line { margin: 0; }
.blog-ep .pod-actions { margin-top: 1rem; }
@media (max-width: 760px) { .blog-ep { grid-template-columns: 1fr; gap: 1rem; } }
.blog-row { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-card .pod-line { font-size: .95rem; }
.blog-read { margin-top: .35rem; font-size: .9rem; font-weight: 700; color: var(--accent); }
.blog-card:hover .blog-read { text-decoration: underline; }
.pod-yt-sep { color: var(--ink-faint); margin: 0 .35rem; }