/* =============================================================================
   Sure Video Library — front-end styles
   Scoped to .svl-* so no theme rule reaches in and nothing of ours leaks out.
   Palette matches the Sure Financial house system.
   ============================================================================= */

.svl-eps,
.svl-latest {
  --svl-navy: #14203a;
  --svl-gold: #c19a4d;
  --svl-maroon: #4a1212;
  --svl-cream: #f9f1e7;
  --svl-ink: #232a38;
  --svl-muted: #6b7079;
  --svl-line: #e7ddcc;
  --svl-good: #1d7a4c;
  --svl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --svl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  font-family: var(--svl-sans);
  color: var(--svl-ink);
  text-align: left;
}

.svl-eps *,
.svl-latest * { box-sizing: border-box; }

/* ── episode rows ───────────────────────────────────────────────────────── */

.svl-eps {
  display: block;
  border-top: 1px solid var(--svl-line);
  margin: 0 0 4px;
}

.svl-ep {
  display: grid;
  grid-template-columns: 112px 1fr 132px;
  gap: 18px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--svl-line);
}

.svl-ep.is-scheduled { opacity: .78; }

.svl-date {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--svl-muted);
}

.svl-title {
  font-family: var(--svl-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--svl-navy);
}

.svl-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .15s;
}

.svl-title a:hover,
.svl-title a:focus-visible { border-bottom-color: var(--svl-gold); }

.svl-status {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--svl-muted);
  text-align: right;
}

.svl-status.live { color: var(--svl-good); }

.svl-more {
  margin: 20px 0 0;
  font-size: 15.5px;
  font-style: italic;
  color: var(--svl-muted);
}

.svl-empty {
  margin: 0;
  padding: 22px 0;
  font-size: 16.5px;
  font-style: italic;
  color: var(--svl-muted);
}

/* ── latest episode card ────────────────────────────────────────────────── */

.svl-latest {
  display: block;
  background: var(--svl-navy);
  border-left: 3px solid var(--svl-gold);
  border-radius: 6px;
  padding: 28px 30px;
  text-decoration: none;
  transition: border-left-color .15s;
}

.svl-latest:hover,
.svl-latest:focus-visible { border-left-color: #fff; }

.svl-latest .svl-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--svl-gold);
}

.svl-latest .svl-h {
  display: block;
  margin-top: 10px;
  font-family: var(--svl-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.24;
  color: #fff;
}

.svl-latest .svl-a {
  display: block;
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #d9d4cc;
  max-width: 62ch;
}

.svl-latest .svl-go {
  display: block;
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--svl-gold);
}

/* ── narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 782px) {
  .svl-ep {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 15px 0;
  }
  .svl-status { text-align: left; }
  .svl-latest { padding: 24px 22px; }
  .svl-latest .svl-h { font-size: 21px; }
}
