/* ============================================================
   sections/scripture.css  —  Scripture passage (light section)
   One markup, three swappable looks via a modifier class on the
   section: .scrip--arch | .scrip--swoosh | .scrip--editorial
   Decoration is CSS/SVG only, so the markup never changes.
   Passage text ~1.4rem.
   ============================================================ */

.scrip { position: relative; overflow: hidden; background: var(--bg); }
.scrip .container { position: relative; z-index: 1; }

.scrip__quote { position: relative; max-width: 50rem; margin-inline: auto; }
.scrip__text {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 0.95rem + 1vw, 1.4rem);
  line-height: 1.85;
  color: var(--ink);
}
.scrip__ref {
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
}
.scrip__ver { color: var(--ink-soft); letter-spacing: 0.1em; }

/* ============================================================
   OPTION A — Sanctuary arch
   Centered inscription beneath a faint double-arch window with
   an oculus; short rule above the reference.
   ============================================================ */
.scrip--arch::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  top: clamp(1.5rem, 4vw, 3rem);
  width: min(600px, 86%); height: min(72%, 400px);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 340' fill='none' stroke='%237a1f2b' stroke-opacity='0.15' stroke-width='2'><path d='M34 340 L34 150 A106 106 0 0 1 246 150 L246 340'/><path d='M58 340 L58 158 A82 82 0 0 1 222 158 L222 340' stroke-opacity='0.08'/><circle cx='140' cy='66' r='9' stroke-opacity='0.22'/></svg>") no-repeat center top / contain;
}
.scrip--arch .scrip__quote { text-align: center; padding-top: clamp(2rem, 5vw, 3.5rem); }
.scrip--arch .scrip__ref::before {
  content: ""; display: block; width: 48px; height: 1px;
  background: var(--orange-red); margin: 0 auto 1.2rem;
}

/* ============================================================
   OPTION B — Modern swoosh
   Asymmetric, left-aligned with a maroon accent bar, an oversized
   ghost quotation mark, and soft corner glows.
   ============================================================ */
.scrip--swoosh::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -160px; left: -120px; width: 460px; height: 460px; opacity: 0.10;
  background: radial-gradient(circle at 50% 50%, var(--orange-red) 0%, transparent 65%);
}
.scrip--swoosh::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  bottom: -200px; right: -160px; width: 540px; height: 540px; opacity: 0.10;
  background: radial-gradient(circle at 50% 50%, var(--maroon) 0%, transparent 65%);
}
.scrip--swoosh .scrip__quote {
  max-width: 46rem; text-align: left;
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
  border-left: 4px solid var(--maroon);
}
.scrip--swoosh .scrip__quote::before {
  content: "\201C"; position: absolute; z-index: -1;
  left: clamp(0.5rem, 2vw, 1.5rem); top: -0.45em;
  font-family: var(--font-display); font-size: clamp(5rem, 12vw, 8rem);
  line-height: 1; color: var(--orange-red); opacity: 0.16;
}
.scrip--swoosh .scrip__ref { text-align: left; }

/* ============================================================
   OPTION C — Editorial flourish
   Centered, italic display face, framed by an engraved diamond
   divider above and below.
   ============================================================ */
.scrip--editorial .scrip__quote { text-align: center; max-width: 44rem; }
.scrip--editorial .scrip__text {
  font-family: var(--font-display); font-style: italic;
  font-variation-settings: "opsz" 40, "SOFT" 60;
}
.scrip--editorial .scrip__quote::before {
  content: ""; display: block; height: 22px; width: min(220px, 60%);
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24'><line x1='12' y1='12' x2='88' y2='12' stroke='%23c4502a' stroke-width='1.5'/><line x1='132' y1='12' x2='208' y2='12' stroke='%23c4502a' stroke-width='1.5'/><rect x='100' y='2' width='20' height='20' transform='rotate(45 110 12)' fill='none' stroke='%237a1f2b' stroke-width='1.5'/><circle cx='110' cy='12' r='3' fill='%237a1f2b'/></svg>") no-repeat center / contain;
}
.scrip--editorial .scrip__ref { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.scrip--editorial .scrip__ref::after {
  content: ""; order: -1; height: 22px; width: min(220px, 60%);
  margin-top: 0.5rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24'><line x1='12' y1='12' x2='88' y2='12' stroke='%23c4502a' stroke-width='1.5'/><line x1='132' y1='12' x2='208' y2='12' stroke='%23c4502a' stroke-width='1.5'/><rect x='100' y='2' width='20' height='20' transform='rotate(45 110 12)' fill='none' stroke='%237a1f2b' stroke-width='1.5'/><circle cx='110' cy='12' r='3' fill='%237a1f2b'/></svg>") no-repeat center / contain;
}