/* Four Winds — SERMONS: archive (list + grid views) and the watch page.
   Loaded only by templates/sermons.php + templates/sermon.php, after web.css.

   Theme hooks live on <html>:
     .sv-grid  — the archive is in GRID view. This is the DEFAULT, rendered
                 server-side; a <head> script removes it before first paint
                 for visitors whose localStorage fwSermonsView is "list".
     .fw-dark  — Night ground: grid view + every watch page
   LIST view is the unchanged light archive; nothing here restyles it beyond
   the header row and the link/play-button click model. */

/* ───────────────────────────────────────── shared: dark ground ── */
html.fw-dark .page-content.sv,
html.fw-dark .page-content.sw{background:var(--night);color:var(--day)}
/* site.js paints the non-home nav light via inline styles — outrank them */
html.fw-dark .wnav{background:rgba(17,17,17,.92)!important;color:var(--day)!important;
  border-bottom-color:rgba(247,243,240,.12)!important}
/* lightbox over a Night page: deeper scrim + blur so the player still lifts */
html.fw-dark .yt-lightbox{background:rgba(0,0,0,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ───────────────────────────────────────── archive header ── */
.sv__kicker{color:var(--fg-3)}
.sv__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.sv__head .page__title{margin-bottom:0}
.sv__tools{display:flex;align-items:center;gap:14px;padding-bottom:14px}
.sv__sub{white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}
.sv__toggle{display:inline-flex;border:1.5px solid var(--night);border-radius:var(--radius-pill);padding:3px;gap:2px}
.sv__tbtn{display:flex;align-items:center;justify-content:center;width:44px;height:38px;border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--night);cursor:pointer;transition:background .15s ease,color .15s ease}
.sv__tbtn:hover{background:rgba(17,17,17,.08)}
.sv__tbtn[aria-pressed="true"]{background:var(--night);color:var(--day)}
.sv__tbtn:focus-visible,.slist__play:focus-visible,.slist__link:focus-visible,
.scard a:focus-visible,.sw__poster:focus-visible,.sw__back:focus-visible{outline:2px solid var(--flare);outline-offset:3px}

html.fw-dark .sv__kicker{color:rgba(247,243,240,.6)}
html.fw-dark .sv__toggle{border-color:rgba(247,243,240,.5)}
html.fw-dark .sv__tbtn{color:var(--day)}
html.fw-dark .sv__tbtn:hover{background:rgba(247,243,240,.12)}
html.fw-dark .sv__tbtn[aria-pressed="true"]{background:var(--day);color:var(--night)}

/* which pane shows */
.sv__grid{display:none}
html.sv-grid .sv__grid{display:grid}
html.sv-grid .sv__list{display:none}
.sv__list{margin-top:34px}

/* ───────────────────────────────────────── list rows: click model ── */
/* The title link is stretched over the row; the play button sits above it. */
.slist__row--nav{position:relative}
.slist__link{text-decoration:none;color:inherit}
.slist__link::after{content:"";position:absolute;inset:0}
.slist__row--nav:hover .slist__link{color:var(--flare)}
button.slist__play{background:none;padding:0;cursor:pointer;z-index:1;font:inherit;
  transition:background .15s ease,color .15s ease}
button.slist__play::after{transition:border-color .15s ease}
button.slist__play:hover{background:var(--flare)}
button.slist__play:hover::after{border-left-color:var(--day)}

/* ───────────────────────────────────────── grid view ── */
.sv__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px;margin-top:40px}
.scard{position:relative;min-width:0}
.scard__thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;
  background:var(--shadow)}
.scard__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.scard:hover .scard__thumb img{transform:scale(1.03)}
.scard__len{position:absolute;right:8px;bottom:8px;background:rgba(17,17,17,.86);color:var(--day);
  font-size:12px;font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:5px}
.scard__body{min-width:0}
.scard__t{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.scard__t a{text-decoration:none;color:inherit}
.scard:hover .scard__t a{color:var(--flare)}
.scard__m{margin:6px 0 0;font-size:14px;color:rgba(247,243,240,.62)}

.scard--grid .scard__body{display:flex;align-items:flex-start;gap:12px;padding:14px 2px 0}
.scard__txt{flex:1;min-width:0}
.scard--grid .scard__t{font-size:19px;line-height:1.22}
.scard--grid .scard__play{flex:0 0 40px;margin-top:2px}

/* ───────────────────────────────────────── watch page ── */
.sw__wrap{max-width:1320px;margin:0 auto;padding:28px 40px 88px;display:grid;
  grid-template-columns:minmax(0,1fr) 372px;gap:36px;align-items:start}
.sw__main{min-width:0}
.sw__player{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000}
.sw__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sw__poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.sw__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sw__poster::after{content:"";position:absolute;inset:0;background:rgba(17,17,17,.18);transition:background .2s ease}
.sw__poster:hover::after{background:rgba(17,17,17,.05)}
.sw__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:84px;height:84px;border-radius:50%;
  background:var(--night);color:var(--day);display:flex;align-items:center;justify-content:center;padding-left:5px;
  box-shadow:0 0 0 3px rgba(247,243,240,.9);transition:transform .2s ease,background .2s ease}
.sw__poster:hover .sw__play{transform:translate(-50%,-50%) scale(1.06);background:var(--flare)}

.sw__title{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.2vw,42px);line-height:1.08;
  letter-spacing:-.02em;margin:26px 0 0;overflow-wrap:anywhere}
.sw__meta{display:flex;flex-wrap:wrap;gap:6px 0;margin:14px 0 0;font-size:15px;color:rgba(247,243,240,.7)}
/* separator trails the item, so a wrapped line never STARTS with a dot */
.sw__meta span:not(:last-child)::after{content:"·";margin:0 10px;color:rgba(247,243,240,.4)}
.sw__desc{margin-top:22px;padding:18px 20px;border-radius:var(--radius-md);background:rgba(247,243,240,.07);
  font-size:16px;line-height:1.65;color:rgba(247,243,240,.86);max-width:860px}
.sw__desc p{margin:0}
.sw__desc p + p{margin-top:1em}
.sw__note{margin:0;padding:40px 24px;border-radius:var(--radius-lg);background:rgba(247,243,240,.07);font-size:17px}
.sw__back{display:inline-block;margin-top:34px;font-family:var(--font-display);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--day);
  border:1.5px solid rgba(247,243,240,.5);border-radius:var(--radius-pill);padding:12px 20px;transition:background .15s ease,color .15s ease}
.sw__back:hover{background:var(--day);color:var(--night)}

.sw__rail{min-width:0}
.sw__rail-h{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,243,240,.6);margin:4px 0 16px}
.scard--rail{display:grid;grid-template-columns:168px minmax(0,1fr);gap:12px;align-items:start}
.scard--rail + .scard--rail{margin-top:14px}
.scard--rail .scard__t{font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.scard--rail .scard__m{font-size:13px;margin-top:5px}
.scard--rail .scard__len{font-size:11px;right:5px;bottom:5px;padding:2px 5px}

/* ───────────────────────────────────────── responsive ── */
@media (max-width:1080px){
  .sv__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw__wrap{grid-template-columns:minmax(0,1fr);gap:44px}
  .sw__rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
  .sw__rail-h{grid-column:1 / -1;margin-bottom:0}
  .scard--rail + .scard--rail{margin-top:0}
}
@media (max-width:700px){
  .sv__head{align-items:flex-start;flex-direction:column;gap:14px}
  .sv__tools{padding-bottom:0;width:100%;justify-content:space-between}
  .sv__tools{gap:10px}
  .sv__sub{flex:0 1 auto;min-width:0;font-size:11.5px;letter-spacing:.04em;padding-left:14px;padding-right:14px}
  .sv__tbtn{width:40px}
  .sv__list{margin-top:26px}
  .sv__grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
  .sw__wrap{padding:0 0 64px;gap:36px}
  .sw__player{border-radius:0}
  .sw__main > :not(.sw__player){margin-left:18px;margin-right:18px}
  .sw__play{width:68px;height:68px}
  .sw__rail{grid-template-columns:minmax(0,1fr);padding:0 18px}
  .scard--rail{grid-template-columns:148px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .scard__thumb img,.sw__play{transition:none}
}