/* Screen-reader-only utility */

/* Sermon Library - front-end styles.
   ------------------------------------------
   Design tokens come from the Seedcast core stylesheet, which is
   enqueued as a dependency of this file. Reference var(--sc-*) and
   never hardcode a colour, so a church that sets a theme once gets it
   everywhere. */


/* ── Layout ──────────────────────────────── */


/* ── Breadcrumb ──────────────────────────── */




/* ── Archive Header ──────────────────────── */
.scsl-archive-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--sc-color-border);
}
.scsl-archive-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--sc-color-primary);
}

/* ── Filter Bar ──────────────────────────── */

.sc-filter-btn {
  transition: background .15s, border-color .15s;
}



/* ── Series Grid ─────────────────────────── */
.scsl-series-grid {
  display: grid;
  gap: 1.5rem;
}
/*
 * Explicit column counts so the grid works inside Elementor widgets, which
 * often constrain the container in ways auto-fill cannot see. These rules had
 * gone missing, which is why every grid was rendering a single column.
 */
/*
 * Written against the column class rather than each grid, so anything asking
 * for columns gets them. Scoping these to the series grid left the speaker
 * grid saying display:grid with no columns, which is one column.
 */
.scsl-grid-cols-1 { grid-template-columns: 1fr; }
.scsl-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scsl-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scsl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .scsl-grid-cols-3,
  .scsl-grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .scsl-grid-cols-2,
  .scsl-grid-cols-3,
  .scsl-grid-cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {

}

/* ── Series Card ─────────────────────────── */
.scsl-series-card {
  position: relative;  /* needed for stretched link */
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.scsl-series-card:hover {
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sc-color-accent);
}
/* Stretched link: invisible overlay covers the whole card, making it fully clickable */
.scsl-series-card__stretched-link {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* Ensure the empty anchor is clickable across all browsers */
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.scsl-series-card__image img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}
.scsl-series-card__placeholder {
  width: 100%;
  height: 215px;
  background: var(--sc-color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scsl-series-card__placeholder span {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sc-color-accent);
  font-family: var(--sc-font-sans);
}
.scsl-series-card__body { padding: 1.1rem; }
.scsl-series-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  line-height: 1.3;
}
.scsl-series-card__meta {
  display: flex;
  gap: .75rem;
  font-size: .8rem;
  color: var(--sc-color-muted);
  margin-bottom: .5rem;
}
.scsl-series-card__excerpt {
  font-size: .875rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Series Hero ─────────────────────────── */
.scsl-series-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.scsl-series-hero__content { flex: 1 1 380px; min-width: 0; }
.scsl-series-hero__image {
  flex: 0 1 320px;
  overflow: hidden;
  border-radius: var(--sc-radius-lg);
}
/* No forced aspect ratio. The container was square while series artwork is
   usually landscape, and object-fit had no height to cover, so the difference
   showed up as dead space under the image. */
.scsl-series-hero__image img {
  width: 100%;
  height: auto;
  border-radius: var(--sc-radius-lg);
  display: block;
}
.scsl-series-title {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .75rem;
  line-height: 1.2;
}
.scsl-series-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .85rem;
  color: var(--sc-color-muted);
  margin-bottom: 1rem;
}
.scsl-series-description {
  line-height: 1.7;
}
/* The theme's paragraph bottom margin was carrying through and leaving a large
   gap under the hero. */
.scsl-series-description > *:last-child { margin-bottom: 0; }

/* ── Section Titles ──────────────────────── */
.sc-section-title {
  margin: 0 0 1.25rem;
}



/* ── Episode Cards ─────────────────────── */
.scsl-episodes,
.scsl-sermon-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* 3-column: [speaker photo] [content] [actions] */
.scsl-episode-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 0;
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  transition: box-shadow .2s;
  align-items: stretch;
  padding: 15px;
}
/* No speaker photo: collapse to 2-column */
.scsl-episode-card--no-photo {
  grid-template-columns: 1fr auto;
}
.scsl-episode-card:hover { box-shadow: var(--sc-shadow-sm); }
.scsl-episode-card--featured { grid-template-columns: 88px 1fr auto; }
.scsl-episode-card--featured.scsl-episode-card--no-photo { grid-template-columns: 1fr auto; }
@media (max-width: 600px) {
  .scsl-episode-card,
  .scsl-episode-card--featured { grid-template-columns: 64px 1fr; }
  .scsl-episode-card--no-photo,
  .scsl-episode-card--featured.scsl-episode-card--no-photo { grid-template-columns: 1fr; }
  .scsl-episode-card__actions {
    grid-column: 1 / -1;
    flex-direction: row !important;
    border-top: 1px solid var(--sc-color-border);
    border-left: none !important;
    padding: .5rem .75rem !important;
  }
}

/* Speaker photo column */
.scsl-episode-card__speaker-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.scsl-episode-card__speaker-img {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Content column */
.scsl-episode-card__body {
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  min-width: 0;
  align-items: flex-start; /* prevent children from stretching full width */
}

/* Actions column: far right */
.scsl-episode-card__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: .35rem;
  padding: .75rem 1rem;
  min-width: 90px;
  flex-shrink: 0;
}
.scsl-episode-card__actions .scsl-btn { text-align: center; white-space: nowrap; }
.scsl-episode-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  align-self: stretch; /* title should span full width */
}
.scsl-episode-card__title a { color: var(--sc-color-primary); text-decoration: none; }
.scsl-episode-card__title a:hover { color: var(--sc-color-accent); }
.scsl-episode-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .8rem;
  color: var(--sc-color-muted);
  align-items: center;
}
.scsl-meta-sep { color: var(--sc-color-border); }
.scsl-episode-card__desc {
  font-size: .85rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
  align-self: stretch;
}

/* ── Buttons ─────────────────────────────── */
.scsl-btn {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: var(--sc-radius);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  align-self: flex-start;
}

.scsl-btn--ghost {
  border: 1.5px solid var(--sc-color-accent);
  color: var(--sc-color-accent);
  background: var(--sc-color-bg);
  min-width: 125px;
  text-align: center;
  justify-content: center;
}
.scsl-btn--ghost:hover {
  background: var(--sc-color-accent);
  color: #fff;
}

/* ── Single Sermon ───────────────────────── */
.scsl-sermon-single {}

.scsl-media-wrap {
  margin-bottom: 2rem;
}

.sc-video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.scsl-sermon-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sc-color-border);
}
.scsl-sermon-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .75rem;
}
.scsl-sermon-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: .9rem;
  color: var(--sc-color-muted);
  margin-bottom: .75rem;
}
.scsl-meta-speaker { display: flex; align-items: center; gap: .5rem; }
.scsl-speaker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.scsl-meta-speaker a { color: var(--sc-color-text); text-decoration: none; font-weight: 600; }
.scsl-meta-series a  { color: var(--sc-color-accent); text-decoration: none; font-weight: 500; }
.scsl-sermon-description {
  line-height: 1.7;
  margin: 0;
}

/* ── Content Tabs ────────────────────────── */
.scsl-content-tabs { margin-bottom: 3rem; }
.scsl-tabs-nav {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.scsl-tab-btn {
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  padding: .5rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sc-color-muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.scsl-tab-btn:hover {
  background: var(--sc-color-accent);
  border-color: var(--sc-color-accent);
  color: #fff;
}
.scsl-tab-btn.is-active {
  background: var(--sc-color-accent);
  border-color: var(--sc-color-accent);
  color: #fff;
}
.sc-tab-panel {
  /* Visually hidden but present in DOM for search engine indexing */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sc-tab-panel.is-active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.scsl-article-content,
.scsl-study-content {
  line-height: 1.8;
}
.scsl-article-content h2,
.scsl-study-content h2 { margin-top: 2rem; }
.scsl-article-content h3,
.scsl-study-content h3 { margin-top: 1.5rem; }

.scsl-transcript {
  line-height: 1.8;
  background: var(--sc-color-bg-subtle);
  padding: 1.5rem;
  border-radius: var(--sc-radius);
  border: 1px solid var(--sc-color-border);
  /* No max-width: fills the full tab panel */
}

/* ── Scripture Refs ──────────────────────── */
.scsl-scripture-refs {
  margin-bottom: 2rem;
}
.scsl-scripture-refs h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.scsl-scripture-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.scsl-scripture-list a {
  display: inline-block;
  padding: .3rem .75rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--sc-color-text);
  text-decoration: none;
}
.scsl-scripture-list a:hover {
  background: var(--sc-color-accent-light);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* ── Related ─────────────────────────────── */
.scsl-related { margin-top: 3rem; border-top: 1px solid var(--sc-color-border); padding-top: 2rem; }
.scsl-related__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--sc-color-primary);
}
.scsl-related__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ── Utility ─────────────────────────────── */
.scsl-none { color: var(--sc-color-muted); }
.scsl-no-content {
  text-align: center;
  color: var(--sc-color-muted);
  padding: 3rem 1rem;
  font-size: 1rem;
}

/* ── Sermon Layout (main + sidebar) ─────── */
.scsl-sermon-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 768px) {
  .scsl-sermon-layout { grid-template-columns: 1fr; }
  .scsl-sermon-layout__sidebar { order: -1; }
}

/* ── Scripture Panel ─────────────────────── */
.scsl-scripture-panel {
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  padding: 1.1rem;
  margin-top: 1rem;
}
.scsl-scripture-panel__title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-color-muted);
  margin: 0 0 .85rem;
}
.scsl-scripture-panel__section { margin-bottom: 1rem; }
.scsl-scripture-panel__section:last-child { margin-bottom: 0; }
.scsl-scripture-panel__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--sc-color-muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.scsl-scripture-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.scsl-scripture-ref {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--sc-color-accent);
  text-decoration: none;
}
.scsl-scripture-ref:hover { text-decoration: underline; }
.scsl-scripture-ref--focus {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sc-color-primary);
}
.scsl-scripture-ref__icon { font-size: .75rem; opacity: .6; }

/* ── Sermon List (shortcode) ─────────────── */
.scsl-sermon-list-wrap { position: relative; }

.scsl-list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: .85rem 1rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
}
.scsl-list-filters--series {
  margin-top: 0;
}
.scsl-filter-select {
  flex: 1;
  min-width: 160px;
  padding: .45rem .75rem;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg);
  font-size: .875rem;
  color: var(--sc-color-text);
  cursor: pointer;
}
@media (max-width: 640px) {
  .scsl-filter-select { min-width: 100%; }
}
.scsl-filter-select:focus { outline: 2px solid var(--sc-color-accent); outline-offset: 1px; }

/* List results: standard row layout */
.scsl-list-results { display: flex; flex-direction: column; gap: 1px; }

/* Card results: used on series page */
.scsl-list-results--cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Sermon List Item ────────────────────── */
.sc-list-item {
  grid-template-columns: 120px 1fr auto;
  align-items: start;
}


@media (max-width: 640px) {
  .sc-list-item { grid-template-columns: 80px 1fr; }
  .sc-list-item__actions { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 400px) {

}
.sc-list-item__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--sc-radius);
  background: var(--sc-color-border);
  flex-shrink: 0;
}
.sc-list-item__thumb img {
  height: 100%;
  display: block;
  transition: transform .25s;
}

.sc-list-item:hover .sc-list-item__thumb img { transform: scale(1.03); }


.sc-list-item__series { color: var(--sc-color-accent); text-decoration: none; font-weight: 500; }



.sc-list-item__speaker { display: flex; align-items: center; gap: .4rem; font-size: .825rem; }
.sc-list-item__speaker a { color: var(--sc-color-text); text-decoration: none; font-weight: 500; }
.sc-list-item__avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

.sc-list-item__scripture { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.sc-list-item__passage {
  display: inline-block;
  padding: .15rem .5rem;
  background: var(--sc-color-accent-light);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--sc-color-accent);
  font-weight: 500;
}
.sc-list-item__passage--focus { background: var(--sc-color-accent); color: #fff; }
/* Actions pushed to far right column */
.sc-list-item__actions {
  gap: .35rem;
  padding-left: 1.25rem;
  align-items: stretch;
  flex-shrink: 0;
  min-width: 90px;
}



/* ── Pagination ──────────────────────────── */
.sc-pagination {
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0 .5rem;
}

.scsl-page-info { font-size: .85rem; color: var(--sc-color-muted); }

/* SEO pagination uses <a> links instead of buttons */
.sc-pagination--links .scsl-page-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

/* ── Loading ─────────────────────────────── */
.scsl-list-loading {
  text-align: center;
  padding: 2rem;
  color: var(--sc-color-muted);
  font-size: .9rem;
}
.scsl-loading-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--sc-color-border);
  border-top-color: var(--sc-color-accent);
  border-radius: 50%;
  animation: sf-spin .6s linear infinite;
  margin-right: .5rem;
  vertical-align: middle;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ── Small button modifier ───────────────── */
.scsl-btn--sm { padding: .3rem .65rem; font-size: .78rem; }

/* ── PDF buttons ─────────────────────────── */
.scsl-pdf-btn {
  display: inline-block;
  padding: .4rem .85rem;
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  font-size: .825rem;
  color: var(--sc-color-muted);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.scsl-pdf-btn:hover { border-color: var(--sc-color-accent); color: var(--sc-color-accent); }
.scsl-pdf-row { margin-top: 1rem; }

/* ── Audio player ────────────────────────── */



/* ── Short link ──────────────────────────── */
.scsl-short-link { margin-top: .75rem; }

/* ── Resources ───────────────────────────── */
.scsl-resources-content {
  font-size: 1rem;
  line-height: 1.7;
}
.scsl-resources-content a { color: var(--sc-color-accent); }

/* ══════════════════════════════════════════
   THEME: Dark
   Token values come from core. What is here is only the component
   level adjustment Sermon Library needs on top of them.
   ══════════════════════════════════════════ */
.sc-theme-dark .sc-wrap {
  background: var(--sc-color-bg);
  color: var(--sc-color-text);
}
.sc-theme-dark .scsl-series-card,
.sc-theme-dark .scsl-episode-card {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-border);
}
.sc-theme-dark .sc-filter-btn    { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-filter-select { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-scripture-panel { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }
.sc-theme-dark .scsl-transcript    { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }
.sc-theme-dark .scsl-tab-btn       { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); color: var(--sc-color-text); }
.sc-theme-dark .scsl-tab-btn:hover,
.sc-theme-dark .scsl-tab-btn.is-active { background: var(--sc-color-accent); border-color: var(--sc-color-accent); color: #fff; }
.sc-theme-dark .scsl-series-card__placeholder { background: var(--sc-color-accent-light); }
.sc-theme-dark .sc-audio-player  { background: var(--sc-color-bg-subtle); border-color: var(--sc-color-border); }

/* ══════════════════════════════════════════
   THEME: Warm
   #d3b673 gold: buttons, tabs, active states (dark text)
   #0c0c0e near-black: hover state (white text), passages
   #ffffff white: bg, card borders (resting)
   ══════════════════════════════════════════ */

/* Cards: white border resting, gold on hover */
.sc-theme-warm .scsl-series-card,
.sc-theme-warm .scsl-episode-card,
.sc-theme-warm .sc-list-item {
  border-color: #ffffff;
}
.sc-theme-warm .scsl-series-card:hover,
.sc-theme-warm .scsl-episode-card:hover {
  border-color: #d2b674;
}
/* Ghost buttons default to white in warm theme, gold on card hover */
.sc-theme-warm .scsl-btn--ghost {
  background: #ffffff;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--ghost:hover,
.sc-theme-warm .scsl-series-card:hover .scsl-btn--ghost,
.sc-theme-warm .scsl-episode-card:hover .scsl-btn--ghost {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-series-card:hover .scsl-btn--ghost:hover,
.sc-theme-warm .scsl-episode-card:hover .scsl-btn--ghost:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Speaker photo column: white background */
.sc-theme-warm .scsl-episode-card__speaker-photo { background: #ffffff; }

/* Filter bar */
.sc-theme-warm .scsl-list-filters { background: #f0e9d7; }

/* Card results area */
.sc-theme-warm .scsl-list-results--cards {
  padding: 2rem;
  background: #faf7f0;
  border-radius: var(--sc-radius);
}

/* Related section spacing */
.sc-theme-warm .scsl-related { margin-top: 0; padding-top: 0; border-top: none; }

/* Transcript text color */
.sc-theme-warm .scsl-transcript { color: #2e2515; }

/* Tabs & filter buttons: gold bg with dark text */
.sc-theme-warm .scsl-tab-btn {
  background: var(--sc-color-bg-subtle);
  border-color: var(--sc-color-accent);
  color: #0c0c0e;
}
.sc-theme-warm .scsl-tab-btn:hover,
.sc-theme-warm .scsl-tab-btn.is-active {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-filter-btn {
  background: #d3b673;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-filter-btn:hover,
.sc-theme-warm .sc-filter-btn.is-active {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Passages: near-black on gold bg */
.sc-theme-warm .sc-list-item__passage {
  background: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .sc-list-item__passage--focus {
  background: #0c0c0e;
  color: #ffffff;
}

/* Ghost buttons */
.sc-theme-warm .scsl-btn--ghost {
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--ghost:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Platform / action buttons */
.sc-theme-warm .scsl-btn--platform {
  background: #faf8f4;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-btn--platform:hover {
  background: #0c0c0e;
  border-color: #0c0c0e;
  color: #ffffff;
}

/* Filter selects */
.sc-theme-warm .scsl-filter-select {
  background: #ffffff;
  border-color: #d3b673;
  color: #0c0c0e;
}
.sc-theme-warm .scsl-filter-select:focus {
  outline-color: #d3b673;
}

/* Scripture panel */
.sc-theme-warm .scsl-scripture-panel {
  background: #faf8f4;
  border-color: #d3b673;
}
.sc-theme-warm .scsl-scripture-ref {
  color: #0c0c0e;
  font-weight: 600;
}

/* Copy icon button */
.sc-theme-warm .scsl-title-copy-btn {
  background: #d3b673;
  color: #0c0c0e;
}

/* ══════════════════════════════════════════
   THEME: Minimal
   ══════════════════════════════════════════ */
.sc-theme-minimal .scsl-series-card  { border: none; border-bottom: 1px solid var(--sc-color-border); box-shadow: none; }
.sc-theme-minimal .scsl-episode-card { border: none; border-bottom: 1px solid var(--sc-color-border); box-shadow: none; }
.sc-theme-minimal .scsl-scripture-panel { background: none; border: none; border-left: 3px solid var(--sc-color-border); border-radius: 0; padding-left: 1rem; }
.sc-theme-minimal .sc-filter-btn.is-active { background: var(--sc-color-text); border-color: var(--sc-color-text); }
.sc-theme-minimal .scsl-tab-btn.is-active { background: var(--sc-color-accent); border-color: var(--sc-color-accent); color: #fff; }
.sc-theme-minimal .scsl-btn--ghost   { border-color: var(--sc-color-text); color: var(--sc-color-text); }
.sc-theme-minimal .scsl-btn--ghost:hover { background: var(--sc-color-text); color: #fff; }
.sc-theme-minimal .scsl-series-card__placeholder { border-radius: 0; }

/* ══════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════ */

/* Screen reader only utility */
.scsl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.scsl-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 999;
  background: var(--sc-color-accent);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: var(--sc-radius);
  font-weight: 600;
}
.scsl-skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Global focus styles: visible ring on all interactive elements */
/* Tab buttons: remove default outline since we add custom */
.scsl-tab-btn:focus { outline: none; }
.scsl-tab-btn:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
}

/* Cards: keyboard focus ring */
.scsl-series-card a:focus-visible,
.scsl-episode-card a:focus-visible,
.sc-list-item a:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Buttons */
.scsl-btn:focus-visible {
  outline: 3px solid var(--sc-color-accent);
  outline-offset: 2px;
}


/* Breadcrumb as ordered list */
.sc-breadcrumb__list {
  gap: .35rem;
  font-size: .85rem;
  color: var(--sc-color-muted);
}

.sc-breadcrumb__list li { display: flex; align-items: center; }
.sc-breadcrumb__list a { color: var(--sc-color-accent); text-decoration: none; }
.sc-breadcrumb__list a:hover { text-decoration: underline; }
.sc-breadcrumb__sep { color: var(--sc-color-muted); margin: 0 .1rem; }
.sc-breadcrumb__list [aria-current="page"] { color: var(--sc-color-text); }

/* Audio player label */


/* Dark theme focus override */
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scsl-series-card,
  .scsl-episode-card,
  .scsl-btn,
  .sc-filter-btn,
  .scsl-loading-spinner,
  .scsl-tab-btn {
    transition: none;
    animation: none;
  }
}

/* ── Series Hero enhancements ────────────── */
.scsl-series-type-badge {
  display: inline-block;
  padding: .2rem .65rem;
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .6rem;
}

.scsl-series-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.scsl-series-speaker {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--sc-color-text);
}
.scsl-series-speaker:hover { color: var(--sc-color-accent); }
.scsl-series-speaker__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sc-color-border);
}
.scsl-series-speaker__name {
  font-size: .875rem;
  font-weight: 600;
}

.scsl-series-topics {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .75rem;
}
.scsl-topic-tag {
  display: inline-block;
  padding: .2rem .6rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--sc-color-muted);
}

/* ── Episode card enhancements ───────────── */
.scsl-episode-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}
.scsl-speaker-avatar--sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}
.scsl-meta-speaker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.scsl-meta-speaker__link {
  color: var(--sc-color-text);
  text-decoration: none;
  font-weight: 500;
}
.scsl-meta-speaker__link:hover { color: var(--sc-color-accent); }

/* ══════════════════════════════════════════
   SPEAKER PROFILE PAGE
   ══════════════════════════════════════════ */

.scsl-speaker-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
@media (max-width: 768px) {
  .scsl-speaker-profile { grid-template-columns: 1fr; }
}

.scsl-speaker-profile__photo {
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sc-color-border);
  box-shadow: var(--sc-shadow-sm);
}
.scsl-speaker-profile__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.scsl-speaker-profile__name {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--sc-color-primary);
  margin: 0 0 .25rem;
}
.scsl-speaker-profile__title {
  font-size: .95rem;
  color: var(--sc-color-muted);
  margin: 0 0 .75rem;
  font-weight: 500;
}

.scsl-speaker-profile__stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.scsl-speaker-stat {
  font-size: .875rem;
  color: var(--sc-color-muted);
}
.scsl-speaker-stat strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sc-color-accent);
  display: block;
  line-height: 1;
  margin-bottom: .1rem;
}

.scsl-speaker-profile__bio {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--sc-color-text);
  margin-bottom: 1rem;
}

.scsl-speaker-profile__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.scsl-speaker-contact-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .85rem;
  color: var(--sc-color-accent);
  text-decoration: none;
  padding: .2rem .6rem;
  border: 1px solid var(--sc-color-border);
  border-radius: 999px;
  background: var(--sc-color-bg-subtle);
}
.scsl-speaker-contact-link:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
}

.scsl-speaker-profile__section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--sc-color-muted);
  margin: 0 0 .5rem;
}
.scsl-speaker-series-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.scsl-speaker-series-tag {
  display: inline-block;
  padding: .25rem .65rem;
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  font-size: .8rem;
  color: var(--sc-color-text);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.scsl-speaker-series-tag:hover {
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* Blog articles section */
.scsl-speaker-articles { margin-top: 2.5rem; }

/* Article card grid */
.scsl-speaker-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.scsl-speaker-article-card {
  background: var(--sc-color-bg-subtle);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.scsl-speaker-article-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.scsl-speaker-article-card__img-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--sc-color-border);
}
.scsl-speaker-article-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.scsl-speaker-article-card:hover .scsl-speaker-article-card__img-wrap img {
  transform: scale(1.03);
}
.scsl-speaker-article-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--sc-color-border) 0%, var(--sc-color-bg-subtle) 100%);
}
.scsl-speaker-article-card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.scsl-speaker-article-card__date {
  font-size: .75rem;
  color: var(--sc-color-muted);
  display: block;
}
.scsl-speaker-article-card__title {
  font-size: .975rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.scsl-speaker-article-card__title a {
  color: var(--sc-color-primary);
  text-decoration: none;
}
.scsl-speaker-article-card__title a:hover { color: var(--sc-color-accent); }
.scsl-speaker-article-card__excerpt {
  font-size: .825rem;
  color: var(--sc-color-muted);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .scsl-speaker-article-grid { grid-template-columns: 1fr; }
}

/* ── Topic Archive ───────────────────────── */
.scsl-archive-desc {
  font-size: 1rem;
  color: var(--sc-color-muted);
  margin: .35rem 0 0;
  line-height: 1.6;
}
.scsl-archive-count {
  font-size: .875rem;
  color: var(--sc-color-muted);
  margin: .5rem 0 0;
}

/* ══════════════════════════════════════════
   EXTERNAL PLATFORM LINKS + SOCIAL SHARE
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   PLATFORM BUTTONS + SOCIAL SHARE (sidebar)
   ══════════════════════════════════════════ */

/* Base platform button: used in sidebar actions */
.scsl-btn--platform {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  border-radius: var(--sc-radius);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--sc-color-border);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  transition: background .15s, border-color .15s, color .15s;
}
.scsl-btn--platform:hover {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}
.scsl-platform-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.scsl-platform-icon svg { display: block; }
.scsl-platform-label { flex: 1; }

/* Brand hover colors */
.scsl-platform--spotify:hover    { border-color: #1DB954; color: #1DB954; background: #f0fdf4; }
.scsl-platform--apple:hover      { border-color: #872EC4; color: #872EC4; background: #faf5ff; }
.scsl-platform--youtube:hover    { border-color: #FF0000; color: #FF0000; background: #fff5f5; }
.scsl-platform--soundcloud:hover { border-color: #FF5500; color: #FF5500; background: #fff7f3; }

/* ══════════════════════════════════════════
   SERMON SIDEBAR ACTIONS
   ══════════════════════════════════════════ */

.scsl-sermon-actions {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sc-color-border);
}

/* All action buttons share .scsl-btn--platform style: already defined */
/* Override to fill full width in sidebar */
.scsl-sermon-actions .scsl-btn--platform,
.scsl-sermon-actions button.scsl-btn--platform {
  width: 100%;
  justify-content: flex-start;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
}

/* Copy link is a <button> so needs explicit reset */
button.scsl-btn--platform {
  -webkit-appearance: none;
  appearance: none;
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  color: var(--sc-color-text);
}
button.scsl-btn--platform:hover {
  background: var(--sc-color-bg);
  border-color: var(--sc-color-accent);
  color: var(--sc-color-accent);
}

/* Divider between platform links and share */
.scsl-sermon-actions__divider {
  border: none;
  border-top: 1px solid var(--sc-color-border);
  margin: .25rem 0;
}

/* "Share" label above social buttons */
.scsl-sermon-actions__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sc-color-muted);
  margin: 0;
}

/* Social share brand hover colors */
.scsl-platform--share-facebook:hover { border-color: #1877F2; color: #1877F2; background: #f0f5ff; }
.scsl-platform--share-twitter:hover  { border-color: #000;    color: #000;    background: #f6f6f6; }
.scsl-platform--share-linkedin:hover { border-color: #0A66C2; color: #0A66C2; background: #f0f7ff; }

/* ── Featured image in article tab ───────── */
.scsl-article-featured-image {
  margin-bottom: 1.5rem;
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
}
.scsl-article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sc-radius-lg);
}

/* ── Title copy link icon ────────────────── */
.scsl-sermon-title {
  /* No flex: inline flow so the icon sits naturally after the title text */
}
.scsl-title-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  line-height: 1;
  padding: .4rem;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: var(--sc-color-accent);
  color: #fff !important;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity .15s;
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin: 0 0 0 .4rem;
  -webkit-appearance: none;
  appearance: none;
}
.scsl-title-copy-btn:hover,
.scsl-title-copy-btn:focus,
.scsl-title-copy-btn:active { opacity: .8; outline: none !important; border: none !important; }
.scsl-title-copy-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--sc-color-accent), 0 0 0 4px #fff;
}
.scsl-copy-feedback {
  display: inline;
  font-size: .75rem;
  font-weight: 700;
  color: #16a34a;
  margin-left: .35rem;
  vertical-align: middle;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.scsl-copy-feedback.is-visible { opacity: 1; }

/* Resources content: ensure editor formatting shows */
.scsl-resources-content p { margin-bottom: .85rem; }
.scsl-resources-content a {
  color: var(--sc-color-accent);
  text-decoration: underline;
}
.scsl-resources-content ul,
.scsl-resources-content ol {
  padding-left: 1.5rem;
  margin-bottom: .85rem;
}
.scsl-resources-content li { margin-bottom: .35rem; }

/* ── Sermon Notes tab ────────────────────── */
.scsl-notes-content { padding: .25rem 0; }
.scsl-notes-intro {
  font-size: .95rem;
  color: var(--sc-color-muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.scsl-notes-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.scsl-notes-file { display: block; }
.scsl-notes-download {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: border-color .15s, background .15s;
  min-width: 200px;
}
.scsl-notes-download:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
}
.scsl-notes-download__icon { font-size: 1rem; flex-shrink: 0; }
.scsl-notes-download__label { flex: 1; }
.scsl-notes-download__ext {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--sc-color-border);
  padding: .1rem .35rem;
  border-radius: 3px;
  color: var(--sc-color-muted);
  flex-shrink: 0;
}

/* ── Episode card: non-circular fallback image ── */
.scsl-episode-card__speaker-img--thumb {
  border-radius: var(--sc-radius);
  object-fit: cover;
}

/* ── Topic List Shortcode ────────────────── */
.scsl-topic-list {
  display: grid;
  gap: .6rem;
  margin: 1rem 0;
}
.scsl-topic-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.scsl-topic-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.scsl-topic-list--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .scsl-topic-list--cols-2,
  .scsl-topic-list--cols-3,
  .scsl-topic-list--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .scsl-topic-list--cols-2,
  .scsl-topic-list--cols-3,
  .scsl-topic-list--cols-4 { grid-template-columns: 1fr; }
}
.scsl-topic-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .65rem 1rem;
  background: var(--sc-color-bg-subtle);
  border: 1.5px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  color: var(--sc-color-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.scsl-topic-pill:hover {
  border-color: var(--sc-color-accent);
  background: var(--sc-color-accent-light);
  color: var(--sc-color-accent);
  text-decoration: none;
}
.scsl-topic-pill__count {
  font-size: .75rem;
  font-weight: 700;
  background: var(--sc-color-border);
  color: var(--sc-color-muted);
  padding: .1rem .45rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.scsl-topic-pill:hover .scsl-topic-pill__count {
  background: var(--sc-color-accent);
  color: #fff;
}



/* ══════════════════════════════════════════
   FILTER BAR: TWO-ROW LAYOUT
   ══════════════════════════════════════════ */

/* Outer wrapper: no background: rows control their own styling */
.scsl-list-filters { margin-bottom: 1.5rem; }

/* Top row: search + date: above filter box, right-aligned */
.scsl-filters-row--top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Bottom row: dropdowns */
.scsl-filters-row--dropdowns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
/* Selects have a natural minimum but don't stretch to fill */
.scsl-filters-row--dropdowns .scsl-filter-select {
  flex: 0 1 auto;
  min-width: 130px;
  max-width: 200px;
}
/* Search wrap also shouldn't stretch */
.scsl-filters-row--dropdowns .scsl-filter-search-wrap {
  flex: 0 0 auto;
}

/* Search: field + button as single inline unit */
.scsl-filter-search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius);
  background: var(--sc-color-bg);
  overflow: hidden;
  padding-right: 5px;
}
.scsl-filter-search {
  border: none !important;
  outline: none;
  padding: .45rem .75rem;
  font-size: .875rem;
  color: var(--sc-color-text);
  background: transparent;
  font-family: var(--sc-font-body);
  width: 250px;
  box-shadow: none !important;
}
@media (max-width: 480px) { .scsl-filter-search { width: 150px; } }
.scsl-filter-search::placeholder { color: var(--sc-color-muted); }
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .65rem;
  border: none;
  border-left: 1px solid var(--sc-color-border);
  background: var(--sc-color-bg-subtle);
  color: var(--sc-color-text);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.scsl-search-btn:hover { background: var(--sc-color-accent); color: #fff; }
.scsl-search-btn svg { display: block; }


/* ══════════════════════════════════════════
   SF_LATEST SHORTCODE
   ══════════════════════════════════════════ */

.scsl-latest {
  width: 100%;
  overflow-x: hidden;
}
.scsl-latest__meta {
  font-size: .875rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.scsl-latest__speaker a {
  color: var(--sc-color-muted);
  text-decoration: none;
  font-weight: 500;
}
.scsl-latest__speaker a:hover { color: var(--sc-color-accent); }
.scsl-latest__sep { margin: 0 .3rem; }

.scsl-latest__title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
.scsl-latest__title a { text-decoration: none; }
.scsl-latest__title a:hover { color: var(--sc-color-accent); }
.scsl-latest__video { margin-bottom: 1rem; border-radius: var(--sc-radius-lg); overflow: hidden; }
.scsl-latest__thumbnail { margin-bottom: 1rem; border-radius: var(--sc-radius-lg); overflow: hidden; }
.scsl-latest__thumb-img { width: 100%; height: auto; display: block; }
.scsl-latest__desc {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.scsl-latest__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.scsl-latest__actions .scsl-btn--ghost { min-width: auto; }

/* Ghost button colors: near-black text, white bg, hover inverts */
.scsl-btn--ghost,
.scsl-btn--ghost:link,
.scsl-btn--ghost:visited {
  color: var(--sc-color-text);
  background: var(--sc-color-bg);
}
.scsl-btn--ghost svg { color: inherit; fill: currentColor; stroke: currentColor; }
.scsl-btn--ghost:hover,
.scsl-btn--ghost:focus {
  color: #fff;
  background: var(--sc-color-text);
  border-color: var(--sc-color-text);
}

/* Warm theme ghost */
.sc-theme-warm .scsl-btn--ghost {
  color: #0c0c0e;
  background: #fff;
  border-color: #d3b673;
}
.sc-theme-warm .scsl-btn--ghost:hover {
  color: #fff;
  background: #0c0c0e;
  border-color: #0c0c0e;
}

/* ── Single tab shown as heading ────────── */
.sc-content-section-heading {
  font-family: var(--sc-font-display);
  color: var(--sc-color-text);
}

/*
 * Sitting inside a tab panel, directly under the tab strip. The tab above
 * already names the section, so a heading the same size would read as the
 * label printed twice. Smaller and quieter: it is there to give the page a
 * real outline for anything reading structure rather than to be looked at.
 */
.sc-tab-panel > .sc-content-section-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sc-color-muted, #50575e);
}

/*
 * The only section on the page, so there is no tab strip above it and the
 * heading is the thing that names it.
 */
.scsl-content-tabs:not(:has(.scsl-tabs-nav)) .sc-tab-panel > .sc-content-section-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sc-color-text);
}


/* ── Series hero eyebrow & no-image variant ── */
.scsl-series-hero__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sc-color-accent);
  margin: 0 0 .4rem;
}
.scsl-series-hero--no-image {
  padding-bottom: 0;
}
.scsl-series-hero--no-image .scsl-series-hero__content {
  padding-top: 0;
}

/* ── Series Slider ──────────────────────────────────────────────────────── */
.scsl-series-slider-wrap {
  position: relative;
  /* overflow:hidden clips the scrollbar but not the scroll content */
  overflow: hidden;
}
/* Scroll container: horizontal scroll only */
.scsl-series-slider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}
.scsl-series-slider::-webkit-scrollbar { display: none; }

.scsl-series-slider__item {
  flex: 0 0 calc(33.333% - .85rem);
  scroll-snap-align: start;
  min-width: 240px;
}
@media (max-width: 768px) {
  .scsl-series-slider__item { flex: 0 0 calc(80% - .85rem); }
}
@media (max-width: 480px) {
  .scsl-series-slider__item { flex: 0 0 calc(90% - .85rem); }
}

/* Prev / Next buttons: overlay on the inside edges of the slider */
.scsl-slider-btn {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--sc-color-border, #ddd);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .15s, box-shadow .15s, color .15s;
  z-index: 3;
  /* Stay inside the wrapper so overflow:hidden on parent doesn't clip them */
  line-height: 1;
}
.scsl-slider-btn:hover {
  background: var(--sc-color-accent, #d3b673);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
/* Position INSIDE the slider edges, not hanging outside */
.scsl-slider-btn--prev { left: 8px; }
.scsl-slider-btn--next { right: 8px; }

/* Series pagination */
.scsl-series-pagination {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sc-color-border, #e5e5e5);
  font-size: .875rem;
}
/* Shared style: numbered links + prev/next arrows */
.scsl-series-pagination a,
.scsl-series-pagination span.scsl-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 .5rem;
  border: 1px solid var(--sc-color-border, #ddd);
  border-radius: var(--sc-radius, 6px);
  text-decoration: none;
  color: var(--sc-color-text, #222);
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
}
.scsl-series-pagination a:hover {
  background: var(--sc-color-bg-subtle, #f5f0e8);
  border-color: var(--sc-color-accent, #d3b673);
  color: var(--sc-color-accent, #d3b673);
}
/* Current page */
.scsl-series-pagination span.scsl-page-current {
  background: var(--sc-color-accent, #d3b673);
  border-color: var(--sc-color-accent, #d3b673);
  color: #fff;
  cursor: default;
  font-weight: 700;
}
/* Prev/next arrow buttons: slightly wider */
.scsl-series-pagination .scsl-page-prev,
.scsl-series-pagination .scsl-page-next {
  font-size: 1rem;
  padding: 0 .75rem;
  color: var(--sc-color-text-muted, #666);
  border-color: var(--sc-color-border, #ddd);
}
.scsl-series-pagination .scsl-page-prev:hover,
.scsl-series-pagination .scsl-page-next:hover {
  background: var(--sc-color-accent, #d3b673);
  border-color: var(--sc-color-accent, #d3b673);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   Targets phones (≤480px) and small tablets (≤640px)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reduce outer padding on the shortcode wrapper ─────────────────── */
@media (max-width: 640px) {
  .sc-wrap {
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .scsl-list-results--cards {
    padding: 1rem;
  }
}

/* ── Filter bar: stack vertically, full-width selects ──────────────── */
@media (max-width: 640px) {
  .scsl-list-filters {
    padding: .6rem .75rem;
    gap: .4rem;
  }
  /* Two dropdowns per row on mobile */
  .scsl-filter-select {
    flex: 1 1 calc(50% - .2rem);
    min-width: 0;
    font-size: .825rem;
  }
  /* Search takes full row */
  .scsl-filter-search-wrap {
    flex: 1 1 100%;
    min-width: 0;
  }
  .scsl-filter-search-wrap input {
    width: 100%;
  }
  .scsl-filter-clear {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ── Episode cards: simpler layout on mobile ────────────────────────── */
@media (max-width: 480px) {
  .scsl-episode-card {
    grid-template-columns: 62px 1fr;
    padding: 10px 10px;
    gap: 0 10px;
    align-items: center;
  }
  .scsl-episode-card--no-photo {
    grid-template-columns: 1fr;
  }
  .scsl-episode-card__speaker-photo {
    padding: 0;
  }
  .scsl-episode-card__speaker-img {
    width: 56px;
    height: 56px;
  }
  .scsl-episode-card__body {
    padding: 0;
    gap: .15rem;
  }
  .scsl-episode-card__actions {
    grid-column: 1 / -1;
    border-top: 1px solid var(--sc-color-border);
    padding: .5rem 0 0;
    margin-top: .4rem;
    flex-direction: row;
    gap: .5rem;
  }
}

/* ── Latest sermon: tighter spacing, smaller title ──────────────────── */
@media (max-width: 640px) {
  .scsl-latest__title {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
    margin-bottom: .75rem;
  }
  .scsl-latest__desc {
    font-size: .9rem;
    margin-bottom: 1rem;
  }
  .scsl-latest__actions {
    flex-direction: column;
  }
  .scsl-latest__actions .scsl-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Video embed: full width */
}

/* ── Series grid: 1 column on mobile ────────────────────────────────── */
@media (max-width: 560px) {

  .scsl-series-card__image img,
  .scsl-series-card__placeholder {
    height: auto;
    min-height: 160px;
    object-fit: contain;
    background: var(--sc-color-bg-subtle);
  }
}

/* ── Series card body: tighter on mobile ───────────────────────────── */
@media (max-width: 640px) {
  .scsl-series-card__body {
    padding: .8rem;
  }
  .scsl-series-card__title {
    font-size: 1rem;
  }
}

/* ── Pagination: smaller buttons on mobile ──────────────────────────── */
@media (max-width: 480px) {
  .scsl-list-pagination a,
  .scsl-list-pagination span,
  .scsl-series-pagination a,
  .scsl-series-pagination span {
    min-width: 30px;
    height: 30px;
    font-size: .8rem;
  }
}

/* ── Slider: better mobile experience ──────────────────────────────── */
@media (max-width: 640px) {
  .scsl-series-slider {
    /* Peek: 85% card width shows the next card peeking in */
  }
  .scsl-series-slider__item {
    flex: 0 0 85%;
    min-width: 0;
    scroll-snap-align: start;
  }
  /* Hide arrow buttons on touch devices: swipe handles it */
  .scsl-slider-btn {
    display: none;
  }
}
@media (max-width: 380px) {
  .scsl-series-slider__item { flex: 0 0 92%; }
}

/* ── Single sermon page: mobile tweaks ─────────────────────────────── */
@media (max-width: 640px) {
  .scsl-sermon-hero__title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .scsl-tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scsl-tab-btn { white-space: nowrap; flex-shrink: 0; }
  .scsl-series-hero { grid-template-columns: 1fr; }
  .scsl-series-hero__image { max-height: 220px; overflow: hidden; }
  .scsl-series-hero__image img { width: 100%; height: 100%; object-fit: cover; }
}

/* ── Scripture panel: full width on mobile ──────────────────────────── */
@media (max-width: 640px) {
  .scsl-scripture-panel { padding: 1rem; }
  .scsl-scripture-panel__text { font-size: 1rem; }
}

/* ── Mobile base font size ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .sc-wrap {
    font-size: 1rem; /* ensure base is 16px not smaller */
  }
  .scsl-episode-card__title { font-size: 1rem; }
  .scsl-episode-card__meta  { font-size: .825rem; }

  .sc-list-item__meta     { font-size: .825rem; }
}

/* ── Frontend tabs: wrap gracefully on mobile ───────────────────────── */
@media (max-width: 480px) {
  .scsl-tabs-nav {
    gap: .25rem;
  }
  .scsl-tab-btn {
    padding: .4rem .75rem;
    font-size: .8rem;
  }
}

/* ── Speaker Card ────────────────────────── */
.scsl-speaker-grid {
  display: grid;
  gap: 1.5rem;
}
.scsl-speaker-card {
  position: relative;
  background: var(--sc-color-bg);
  border: 1px solid var(--sc-color-border);
  border-radius: var(--sc-radius-lg);
  overflow: hidden;
  box-shadow: var(--sc-shadow-sm);
  transition: box-shadow .2s, transform .2s;
  text-align: center;
}
.scsl-speaker-card:hover {
  box-shadow: var(--sc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--sc-color-accent);
}
.scsl-speaker-card__image {
  width: 100%;
  overflow: hidden;
}
.scsl-speaker-card__image img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
}
.scsl-speaker-card__placeholder {
  width: 100%;
  height: 215px;
  background: var(--sc-color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--sc-color-accent);
}
.scsl-speaker-card__body {
  padding: 1rem;
}
.scsl-speaker-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--sc-color-text);
}
.scsl-speaker-card__title {
  font-size: .8rem;
  color: var(--sc-color-muted);
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------------------------------------------------- content list block */

/*
 * Almost nothing, on purpose. The cards and the slider are the ones the rest
 * of the plugin already uses, so they carry whatever theme a church has
 * chosen and look the same here as anywhere else.
 */

.scsl-content-list {
  margin: 2rem 0;
}

.scsl-content-list__heading {
  margin: 0 0 1rem;
}

/* Sermon cards in a grid or slider: the series card, plus somewhere to play. */

.scsl-sermon-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .65rem;
  position: relative;
  z-index: 2;
}

.scsl-series-card__excerpt {
  margin: .5rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--sc-color-muted, #666);
}

/*
 * Somewhere to land. Arriving from a listing scrolls the tabs to the top of
 * the window, and a theme with a fixed header would otherwise cover them.
 */
.scsl-content-tabs {
  scroll-margin-top: 6rem;
}


/* ── Living Bulletin bridge: sermon cards on a service page ─────────────
   Renders inside the .sunday-section wrapper Living Bulletin provides,
   so section title/border styles come from Living Bulletin. These rules
   only cover the cards themselves and their internal layout. */
/* Sermon section on Living Bulletin service pages. Renders inside the
   .sunday-section wrapper Living Bulletin provides, so section title and
   border styles come from Living Bulletin. These rules only cover the cards
   themselves and their internal layout.

   Visual weight matches the shared .sc-card conventions: background,
   border, rounded corners, hover lift. The View Sermon call to action
   uses the .sc-btn class from core so it inherits the site's button
   styling automatically. Colors and radius come from CSS tokens so the
   card follows whatever theme the site is running. */
.scsl-service-sermons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 1rem;
}
.scsl-service-sermon-card {
	background: var(--sc-color-bg-subtle, #f9fafb);
	border: 1px solid var(--sc-color-border, #e5e7eb);
	border-radius: var(--sc-radius-lg, 12px);
	transition: box-shadow .18s, transform .18s;
	display: grid;
	grid-template-columns: 290px 1fr 1fr;
	gap: 1.5rem;
	padding: 1.25rem;
}
/* When the metadata aside has nothing to show, collapse to two columns
   so the image and body still fill the card cleanly. */
.scsl-service-sermon-card:not(.has-meta) {
	grid-template-columns: 290px 1fr;
}
.scsl-service-sermon-card:hover {
	box-shadow: var(--sc-shadow-md, 0 4px 12px rgba(0,0,0,.08));
	transform: translateY(-2px);
}

/* Image column. The frame clips the image with rounded corners via
   overflow: hidden, so the image visually has the border radius rather
   than a matte sitting behind it. object-fit: cover fills the frame,
   accepting that portrait posters may crop slightly to keep the image's
   own edges rounded. */
.scsl-service-sermon-card__image {
	border-radius: var(--sc-radius, 8px);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: block;
	text-decoration: none;
}
.scsl-service-sermon-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Body column: title, excerpt, View Sermon button. */
.scsl-service-sermon-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.scsl-service-sermon-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}
.scsl-service-sermon-card__title a {
	text-decoration: none;
	color: inherit;
}
.scsl-service-sermon-card__title a:hover {
	text-decoration: underline;
}
.scsl-service-sermon-card__excerpt {
	margin: 0;
	line-height: 1.55;
	/* Cap prose line length even when the card is wide, so the excerpt
	   stays readable rather than sprawling across the whole middle. */
	max-width: 60ch;
}
.scsl-service-sermon-card__cta-wrap {
	margin: .25rem 0 0;
}

/* Metadata aside. Vertical rule on the left visually separates it from
   the body. Uses accent color so it reads with the theme rather than
   disappearing into the low-contrast border color. Rows stack tightly
   and each is small enough to fit alongside the wider body content. */
.scsl-service-sermon-card__meta {
	border-left: 1px solid var(--sc-color-accent, #d3b673);
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}
.scsl-service-sermon-card__meta-row {
	margin: 0;
	font-size: .9rem;
	line-height: 1.4;
}
.scsl-service-sermon-card__meta-label {
	display: inline;
	font-weight: 600;
	margin-right: .25rem;
}
.scsl-service-sermon-card__meta-value {
	display: inline;
}
.scsl-service-sermon-card__meta a {
	color: var(--sc-color-link, #1e40af);
	text-decoration: none;
}
.scsl-service-sermon-card__meta a:hover {
	color: var(--sc-color-link-hover, #1e3a8a);
	text-decoration: underline;
}
/* Action rows (Bible Study, Transcript) have no label, so the link
   itself carries the weight. Slightly bolder to read as an action rather
   than a passing data point. */
.scsl-service-sermon-card__meta-row--action a {
	font-weight: 600;
}

/* Stack everything on narrow viewports. The separator becomes a top
   border since the aside is now above the fold of the card. */
@media (max-width: 640px) {
	.scsl-service-sermon-card,
	.scsl-service-sermon-card.has-meta {
		grid-template-columns: 1fr;
	}
	.scsl-service-sermon-card__image {
		aspect-ratio: 16 / 9;
	}
	.scsl-service-sermon-card__meta {
		border-left: 0;
		border-top: 1px solid var(--sc-color-accent, #d3b673);
		padding-left: 0;
		padding-top: 1rem;
	}
}