/* =========================== Scripture-list pages (all pages of this type) ===========================
   Used by: Lists of Sins in the Bible, and every later page built from scripturepage.py
   Intro box reuses .box. The slider is a blue panel with a yellow border, one passage per slide.
   All slides share one height (the tallest passage), so no passage overflows the panel. */
.page-scripture main { padding: 0; }
.scripture-page { padding-top: 58px; padding-bottom: 90px; }
.scripture-page .article-header { margin-bottom: 92px; }
.scripture-page .box { padding: 50px 58px 48px; }

.sslider {
  position: relative; background: #0e72c4; border: 4px solid #f2e600; border-radius: 14px;
  box-shadow: 0 8px 16px rgba(0,0,0,.3); padding: 60px 74px 54px; margin: 30px 0 0;
}
.sslider .sslides { display: grid; }
.sslider .sslide {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity .45s ease;
}
.sslider .sslide.is-active { visibility: visible; opacity: 1; }
.sslide h2 {
  color: #fff; font: 400 40px/1.2 Arial, sans-serif; text-align: center; margin: 0 0 18px;
  text-shadow: 0 2px 4px rgba(0,0,0,.45);
}
.sslide p { color: #fff; font: 16px/1.35 Arial, sans-serif; margin: 0 0 14px; }
.sslide p:last-child { margin-bottom: 0; }

.sslider .sarrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px;
  background: none; border: 0; color: #fff; font: 400 44px/1 Arial, sans-serif; cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.sslider:hover .sarrow, .sslider .sarrow:focus-visible { opacity: 1; }
.sslider .sprev { left: 18px; }
.sslider .snext { right: 18px; }

.sslider .sdots { display: flex; justify-content: center; gap: 7px; margin-top: 30px; }
.sslider .sdot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.4);
}
.sslider .sdot.is-active { background: #fff; }

/* =========================== Greek study pieces (articles with Greek text) =========================== */
.box .key { font-style: italic; margin: 0 0 16px 36px; }
.ref-heading {
  font: italic 700 21px/1.4 Arial, sans-serif; font-variant: small-caps; color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,.35); margin: 26px 0 12px;
}
.ref-subheading { font: 400 17px/1.4 Arial, sans-serif; color: #333; margin: 22px 0 10px; }
.greek { font: 13px/1.7 Arial, "Noto Sans", "DejaVu Sans", sans-serif; color: #000; }
.greek mark { background: none; color: #1f1fd6; font-weight: 700; }
.renderings { margin: 22px 0 26px; padding: 2px 0 2px 18px; border-left: 4px solid #2ea3f2; }
.renderings p { margin: 0; font: 13px/1.65 Arial, sans-serif; color: #000; }

.struct { width: 100%; border-collapse: collapse; margin: 26px 0 22px; font: 700 13px/1.4 Arial, sans-serif; color: #000; }
.struct th, .struct td { border: 1px solid #000; text-align: center; vertical-align: middle; padding: 10px 6px; }
.struct thead th { background: #0a3cc8; color: #fff; border: 1px solid #000; }
.struct thead tr { outline: 3px solid #000; outline-offset: -1px; }
.struct td.hl { background: #f7f200; color: #a31515; }

@media (max-width: 980px) {
  .scripture-page .article-header { margin-bottom: 40px; }
  .scripture-page .box { padding: 32px 22px; }
  .sslider { padding: 40px 30px 34px; }
  .sslide h2 { font-size: 30px; }
  .sslider .sarrow { opacity: 1; width: 28px; font-size: 32px; }
  .sslider .sprev { left: 2px; }
  .sslider .snext { right: 2px; }
  .struct { font-size: 12px; }
  .struct th, .struct td { padding: 7px 3px; }
}
@media (max-width: 600px) {
  .sslide p { font-size: 15px; }
  .box .key { margin-left: 12px; }
  .struct-wrap { overflow-x: auto; }
}