/* Faithlife Church — sermon presentations page (sermons.html). Uses the tokens in faithlife.css. */

/* Slides are not for copying: no selection, no dragging, no long-press save on phones. */
.sermon-protected canvas,.sv canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.sermon-cover,.sv{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.sermon-library{padding:var(--section) var(--edge);display:grid;gap:clamp(3rem,6vw,5rem)}
.sermon-status{color:var(--muted);font-size:1.05rem}
.sermon-status:empty{display:none}
.sermon-status[data-state="error"]{color:#9b2c2c}

/* Latest sermon */
.sermon-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.sermon-cover{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);box-shadow:var(--shadow);cursor:pointer;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.sermon-cover canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:linear-gradient(110deg,var(--navy) 30%,var(--navy-2) 50%,var(--navy) 70%);background-size:300% 100%;animation:sermon-shimmer 1.6s linear infinite}
.sermon-cover canvas[data-ready]{animation:none;background:var(--navy)}
@keyframes sermon-shimmer{to{background-position:-300% 0}}
.sermon-cover:hover{transform:translateY(-4px);box-shadow:0 40px 70px -34px rgba(8,26,46,.5)}
.sermon-play{position:absolute;left:1.1rem;bottom:1.1rem;display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem;border-radius:999px;background:rgba(8,26,46,.78);color:var(--white);font-weight:700;font-size:.9rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sermon-feature-body h2{margin-bottom:.4rem}
.sermon-subtitle{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);color:var(--gold-ink);margin-bottom:1.25rem}
.sermon-subtitle:empty{display:none}
.sermon-meta{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.sermon-meta li{padding:.35rem .8rem;border-radius:999px;background:var(--tint);color:var(--ink);font-size:.85rem;font-weight:600}
.sermon-summary{color:var(--muted);margin-bottom:1.75rem}
.sermon-summary:empty{display:none}

/* More sermons */
.sermon-more h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.4rem);margin-bottom:1.5rem}
.sermon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.sermon-card{display:grid;gap:.9rem;text-align:left;padding:0;border:0;background:none;cursor:pointer}
.sermon-card .sermon-cover{border-radius:var(--radius)}
.sermon-card-text{display:grid;gap:.3rem}
.sermon-card strong{font-family:var(--serif);font-weight:430;font-size:1.3rem;line-height:1.2;color:var(--navy)}
.sermon-card small{color:var(--muted);font-size:.85rem}

.sermon-note{max-width:60ch;padding:1.5rem 1.75rem;border-radius:var(--radius);background:var(--mist);border:1px solid var(--line-cool)}
.sermon-note h3{font-size:1.15rem;margin-bottom:.4rem}
.sermon-note p{color:var(--muted);font-size:.95rem}

/* Viewer */
.sv{position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto auto;background:#050f1c;color:var(--white)}
.sv[hidden]{display:none}
.sv-bar{display:flex;align-items:center;gap:1rem;padding:.75rem clamp(1rem,3vw,2rem)}
.sv-heading{flex:1;min-width:0}
.sv-kicker{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
.sv-heading h2{font-size:clamp(1.05rem,.9rem + .6vw,1.35rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-count{font-variant-numeric:tabular-nums;color:var(--on-navy);font-size:.95rem;white-space:nowrap}
.sv-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--on-navy-line);background:rgba(255,255,255,.06);color:var(--white)}
.sv-icon:hover{background:rgba(255,255,255,.14)}
.sv-stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 clamp(.5rem,4vw,4.5rem)}
.sv-stage canvas{max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:16/9;border-radius:6px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);background:#0b1b2e}
/* A clear layer over the slide: a long-press or right-click lands on it, not on the picture. */
.sv-veil{position:absolute;inset:0}
.sv-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:.5rem 1rem;border-radius:999px;background:rgba(8,26,46,.8);font-size:.9rem}
.sv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(8,26,46,.65);color:var(--white);transition:background .2s,opacity .2s}
.sv-nav:hover{background:var(--gold);color:var(--navy)}
.sv-nav:disabled{opacity:0;pointer-events:none}
.sv-nav.prev{left:clamp(.5rem,1.5vw,1.25rem)}
.sv-nav.next{right:clamp(.5rem,1.5vw,1.25rem)}
.sv-progress{height:3px;margin:.75rem clamp(1rem,3vw,2rem) 0;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.sv-progress span{display:block;height:100%;width:0;background:var(--gold);transition:width .35s var(--ease)}
.sv-hint{padding:.6rem 1rem 1rem;text-align:center;font-size:.8rem;color:rgba(213,223,234,.6);max-width:none}
.sv:fullscreen .sv-hint{display:none}
body.sv-open{overflow:hidden}

@media (max-width:820px){
  .sermon-feature{grid-template-columns:1fr}
  .sv-nav{top:auto;bottom:.75rem;transform:none;width:48px;height:48px}
  .sv-stage{padding-bottom:4.5rem}
}

/* Printing the page prints a notice, never the slides. */
.print-block{display:none}
@media print{
  body>*{display:none!important}
  body>.print-block{display:block!important;padding:2rem;font:16px/1.5 Georgia,serif;color:#000}
}