/* === ABCs of Faith — Page CSS (dark/parchment themed, scoped) === */

/* --- Shared video container (single, de-duplicated) --- */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: inherit;
}

/* === ABCs Trio: layout, side cards, and video === */

/* Trio row: left card + center video + right card */
.abcs-trio {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 2fr) minmax(260px, 1fr);
  gap: var(--space-4, 1.5rem);
  align-items: stretch; /* side cards match video height nicely */
  margin-top: var(--space-6, 2.5rem);
}

/* Trio side cards: vertically centered, balanced copy */
.abcs-trio .side-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px; /* adjust to taste */
  text-wrap: balance;
}

/* Side card headings + text on the ABCs page */
.abcs-page .side-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e9c477; /* brass accent */
}

.abcs-page .side-card p {
  margin: 0.35rem 0;
}

/* Video card wrapper */
.abcs-trio .video-card {
  text-align: center;
  padding: 1.25rem 1rem;
}

/* Title above the video */
.abcs-trio .video-title {
  margin: 0 0 0.4rem 0;
  font-size: 1.25rem;
}

/* Subtitle under title */
.abcs-trio .video-sub {
  margin: 0 0 0.8rem 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text-muted, #555);
}

/* Video container shell inside the trio */
.abcs-trio .video-shell {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

/* Trio video element */
.abcs-trio video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: url('/assets/video/deceived.png') center/cover no-repeat;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  object-fit: cover;
}

/* Full-width Next Steps under the trio */
.abcs-next {
  margin-top: var(--space-5, 2rem);
}

/* Responsive collapse: stack trio on narrow screens */
@media (max-width: 1100px) {
  .abcs-trio {
    grid-template-columns: 1fr;
  }

  .abcs-trio .side-card {
    min-height: auto;
  }
}

/* A11y helper for hidden headings */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ================================================================== */
/* ===================== Dark / Parchment Skin ====================== */
/* ================================================================== */

.abcs-page { color: #f4ecd8; }            /* parchment text on black */
.abcs-page a { color: #e9c477; }
.abcs-page a:hover { color: #ffd88a; }

/* Cards on near-black with warm brass accents */
.abcs-page .card,
.abcs-page .video-card,
.abcs-page .side-card {
  background: #121212;
  color: #f4ecd8;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border: 1px solid rgba(233,196,119,0.10);
}

/* Title section stays aligned (no extra backgrounds here) */
.abcs-page .page-title { background: transparent; }

/* Dark Aura for videos */
.abcs-page .video-container {
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
}

/* Scripture callout on dark */
.abcs-page .faith-verse {
  background: #111;
  color: #f4ecd8;
  border-left: 4px solid #b9854e;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}

/* Trio band subtle dark gradient to separate from black page bg */
.abcs-page .abcs-trio {
  background: linear-gradient(180deg, #0f0f0f 0%, #151515 100%);
  border: 1px solid rgba(233,196,119,0.08);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}

/* “Chips” (if you add them later) look good on dark */
.abcs-page .verse-chips a {
  background: rgba(233,196,119,0.14);
  color: #f6edd6;
  border: 1px solid rgba(233,196,119,0.28);
}
.abcs-page .verse-chips a:hover { background: rgba(233,196,119,0.24); }

/* CTAs on dark */
.abcs-page .btn {
  display: inline-block;
  text-align: center;
  padding: .7rem 1rem;
  border-radius: .6rem;
  text-decoration: none;
  background: #161616;
  border: 1px solid rgba(233,196,119,0.25);
  color: #f4ecd8;
  font-weight: 600;
}
.abcs-page .btn:hover { background: #1b1b1b; }
.abcs-page .btn.primary {
  background: #c7a76b; border-color: #c7a76b; color: #101010;
}
.abcs-page .btn.primary:hover { background: #b99657; }

/* Mobile tightening */
@media (max-width: 640px){
  .abcs-page .card.prose { padding: .9rem !important; }
  .abcs-page .page .prose p { margin: .6rem 0; }
  .abcs-page .page .prose ul { margin: .5rem 0; padding-left: 1.1rem; }
}
/* ============================================================
   ABCs Kapow Pack (black canvas + parchment text, lightweight)
   Scoped to .abcs-page to avoid bleed
   ============================================================ */

/* 1) Title gold-foil shimmer (moved to global header.css) */

/* 2) Illuminated drop cap for the opener */
.abcs-page .dropcap::first-letter{
  float: left;

  /* Your chosen size + centered positioning */
  font-size: 3.4em;
  line-height: 0.94;

  padding: .03em .16em .05em .15em; 
  margin: .12em .25em .02em 0;

  font-weight: 800;
  color: #f5e7c5; /* softer, vellum-like gold */

  /* Old parchment backdrop (warm, uneven, not digital) */
  background: 
    radial-gradient(circle at 30% 25%, rgba(250,225,175,.25), rgba(60,50,30,.35)),
    linear-gradient(145deg, rgba(76,63,38,.35), rgba(26,20,12,.6));
  border: 1px solid rgba(199,167,107,.45);
  border-radius: .25rem;

  /* Subtle hand-painted edge highlights */
  box-shadow:
    inset 0 1px 2px rgba(255,240,200,.15),
    inset 0 -2px 3px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.4),
    0 0 4px rgba(199,167,107,.25);

  /* Ancient gold-leaf glow (NOT modern neon) */
  text-shadow:
    0 0 2px rgba(248,233,180,.35),
    0 0 6px rgba(255,219,160,.15),
    1px 1px 0 rgba(0,0,0,.35),
    -1px -1px 0 rgba(255,255,255,.05);
}



/* 3) Ornament divider (thin brass glow line with center gem) */
.abcs-page .fx-divider{
  position: relative; height: 1px; margin: 1.25rem 0 1.75rem;
  background: linear-gradient(90deg, transparent, rgba(233,196,119,.6), transparent);
  box-shadow: 0 0 18px rgba(233,196,119,.25);
}
.abcs-page .fx-divider::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b0 0%, #c7a76b 60%, #876a3e 100%);
  box-shadow: 0 0 14px rgba(233,196,119,.55);
}

/* 4) ABC icons: soft pulse in sequence (attention without chaos) */
.abcs-page .abc-step .abc-icon{ display:inline-block; transform-origin:center; }
.abcs-page .abc-row .abc-step:nth-child(1) .abc-icon{ animation: fx-pulse 2400ms ease-in-out .0s infinite; }
.abcs-page .abc-row .abc-step:nth-child(2) .abc-icon{ animation: fx-pulse 2400ms ease-in-out .4s infinite; }
.abcs-page .abc-row .abc-step:nth-child(3) .abc-icon{ animation: fx-pulse 2400ms ease-in-out .8s infinite; }

@keyframes fx-pulse{
  0%,100% { transform: scale(1); text-shadow: 0 0 0 rgba(233,196,119,0); }
  50%    { transform: scale(1.06); text-shadow: 0 0 14px rgba(233,196,119,.35); }
}

/* 5) Card hover: gentle lift + brass edge glow */
.abcs-page .card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.abcs-page .card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  border-color: rgba(233,196,119,.22);
}

/* 6) Buttons: diagonal shine sweep on hover */
.abcs-page .btn{ position: relative; overflow: hidden; }
.abcs-page .btn::after{
  content:""; position:absolute; top:-120%; left:-40%;
  width: 60%; height: 340%; transform: rotate(25deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 90%);
  opacity: 0; transition: opacity .25s ease, transform .7s ease;
}
.abcs-page .btn:hover::after{
  opacity: .55; transform: translateX(220%) rotate(25deg);
}

/* 7) Trio band: subtle vignette to focus the center video */
.abcs-page .abcs-trio{
  position: relative;
}
.abcs-page .abcs-trio::before{
  content:""; position:absolute; inset:-2%; pointer-events:none; border-radius: inherit;
  background: radial-gradient(120% 60% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
  mix-blend-mode: normal;
}

/* 8) Verse chips (if used): glow on focus/hover for accessibility */
.abcs-page .verse-chips a{
  transition: box-shadow .2s ease, transform .2s ease;
}
.abcs-page .verse-chips a:hover, .abcs-page .verse-chips a:focus{
  box-shadow: 0 0 12px rgba(233,196,119,.4);
  transform: translateY(-1px);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .abcs-page .fx-title,
  .abcs-page .abc-row .abc-step .abc-icon,
  .abcs-page .btn::after { animation: none !important; transition: none !important; }
}

/* Gospel Trio — perfect subdued parchment subtitle (final tuned) */
.abcs-trio .video-sub {
  color: #d6c7a8 !important; /* slightly darker + warmer */
  text-shadow:
    0 0 4px rgba(0,0,0,0.6),
    0 1px 1px rgba(0,0,0,0.75);
}
.abcs-trio .video-sub {
  opacity: 0.92; /* softens the brightness to match side-card text */
}