/* ============================================================
   sections/summer-classes-detail.css
   The de-iframed "Presuppositional Apologetics Bible Classes"
   content, scoped under .sbc so its generic class names and
   palette never collide with the shared site styles.

   • Palette is redeclared on .sbc to preserve the original look.
   • The iframe's <nav>/<footer>, .reveal rules, and global
     body/html resets are intentionally NOT ported — the site
     header/footer and base.css/site.js handle those.

   ── NAMESPACING (root cause fix) ───────────────────────────
   This content's class names are namespaced with an sbc- prefix
   (sbc-hero, sbc-container, sbc-btn, sbc-eyebrow, ...). Earlier the
   bare names (hero, container, btn, ...) collided with base.css's
   site-wide primitives — most damagingly a bare .hero rule whose
   negative margin-top yanked the hero up behind the banner. With
   the prefix, base.css can no longer match anything inside .sbc.
   Only .reveal stays shared on purpose (handled by site.js). The
   small reset block below is now just a harmless safety net.
   ============================================================ */

.sbc {
  /* Local palette (matches the original page exactly) */
  --bg: #fdfbf7;
  --bg-soft: #f7f1e6;
  --ink: #2a1c12;
  --ink-soft: #5a4736;
  --brown: #6b4423;
  --brown-deep: #4a2e15;
  --maroon: #7a1f2b;
  --maroon-deep: #5a1620;
  --orange-red: #c8421a;
  --orange-red-soft: #e16a3e;
  --rule: #e8dcc6;

  position: relative;
  color: var(--ink);
  font-family: "Lora", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 800px 600px at 10% 0%, rgba(200, 66, 26, 0.04), transparent),
    radial-gradient(ellipse 600px 800px at 90% 100%, rgba(122, 31, 43, 0.04), transparent);
}
.sbc *, .sbc *::before, .sbc *::after { box-sizing: border-box; }

/* ── Safety net (kept after namespacing) ───────────────────
   With the sbc- prefix these can no longer be reached by base.css;
   the explicit margin/min-height resets are harmless and guard
   against any future un-prefixed primitive.                 */
.sbc .sbc-hero { margin: 0; min-height: 0; height: auto; }
.sbc .sbc-btn  { margin: 0; }

/* Paper-grain overlay (kept within the section, not the page body) */
.sbc::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0 0.14 0 0 0 0.05 0'/></filter><rect width='100' height='100' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: multiply;
}
.sbc > * { position: relative; z-index: 1; }

/* In-page anchor targets clear the fixed header */
.sbc section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.sbc h1, .sbc h2, .sbc h3, .sbc h4 {
  /*font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;*/
  font-weight: 500; line-height: 1.1;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  color: var(--brown-deep);
}

.sbc .sbc-container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ─── HERO ─────────────────────────────────────────────── */
.sbc .sbc-hero { padding: 80px 0 100px; position: relative; overflow: hidden; }
.sbc .sbc-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }

/* FIX: let the single-column tracks shrink so the headline can't force
   the hero wider than a phone screen (which overflow:hidden then clips). */
.sbc .sbc-hero-content, .sbc .sbc-hero-aside { min-width: 0; }

.sbc .sbc-eyebrow {
  font-family: "Lora", serif; font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 24px;
  display: flex; align-items: center; gap: 16px;
  opacity: 0; animation: sbcFadeIn 0.8s ease 0.1s forwards;
}
.sbc .sbc-eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--ink); }

.sbc .sbc-hero h1 {
  font-size: clamp(18px, 5.0vw, 62px); letter-spacing: -0.02em; margin-bottom: 28px;
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  opacity: 0; animation: sbcFadeIn 1s ease 0.25s forwards;
  overflow-wrap: break-word;   /* FIX: a too-long word wraps instead of clipping */
}
.sbc .sbc-hero h1 .sbc-accent {
  color: var(--maroon); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.sbc .sbc-hero-sub {
  font-family: "Fraunces", serif; font-style: italic; font-size: clamp(20px, 2.2vw, 26px);
  color: var(--ink-soft); line-height: 1.35; margin-bottom: 40px; max-width: 580px;
  opacity: 0; animation: sbcFadeIn 1s ease 0.45s forwards;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
.sbc .sbc-hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 40px;
  opacity: 0; animation: sbcFadeIn 1s ease 0.6s forwards;
}
.sbc .sbc-hero-meta-item { display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.sbc .sbc-hero-meta-item strong { color: var(--brown-deep); font-weight: 600; }
.sbc .sbc-hero-meta-item .sbc-dot { width: 5px; height: 5px; background: var(--orange-red); border-radius: 50%; transform: translateY(-2px); }

.sbc .sbc-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: sbcFadeIn 1s ease 0.75s forwards; }

.sbc .sbc-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
  font-family: "Lora", serif; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); position: relative; overflow: hidden;
}
.sbc .sbc-btn-primary { background: var(--maroon); color: var(--bg); }
.sbc .sbc-btn-primary:hover { background: var(--maroon-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(122, 31, 43, 0.4); }
.sbc .sbc-btn-secondary { background: transparent; color: var(--brown-deep); border: 1px solid var(--brown); }
.sbc .sbc-btn-secondary:hover { background: var(--brown-deep); color: var(--bg); }
.sbc .sbc-btn .sbc-arrow { transition: transform 0.3s ease; display: inline-block; }
.sbc .sbc-btn:hover .sbc-arrow { transform: translateX(4px); }

.sbc .sbc-hero-aside { opacity: 0; animation: sbcFadeIn 1.2s ease 0.5s forwards; }
.sbc .sbc-scripture-card { background: var(--bg-soft); padding: 40px 36px; border-left: 3px solid var(--orange-red); position: relative; margin-bottom: 32px; }
.sbc .sbc-scripture-card::before {
  content: ""; position: absolute; top: 14px; left: 14px; font-family: "Fraunces", serif;
  font-size: 80px; color: var(--orange-red); opacity: 0.15; line-height: 0.8; font-style: italic;
}
.sbc .sbc-scripture-text {
  font-family: "Fraunces", serif; font-style: italic; font-size: 19px; line-height: 1.5;
  color: var(--brown-deep); margin-bottom: 16px; font-variation-settings: "opsz" 24, "SOFT" 100;
}
.sbc .sbc-scripture-ref { font-family: "Lora", serif; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--maroon); }

.sbc .sbc-countdown { background: var(--brown-deep); color: var(--bg); padding: 28px 32px; position: relative; overflow: hidden; }
.sbc .sbc-countdown::before {
  content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 120px;
  background: radial-gradient(circle, var(--orange-red) 0%, transparent 70%); opacity: 0.4; transform: translate(40px, -40px);
}
.sbc .sbc-countdown-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange-red-soft); margin-bottom: 14px; position: relative; }
.sbc .sbc-countdown-numbers { display: flex; gap: 18px; position: relative; }
.sbc .sbc-cd-unit { text-align: left; }
.sbc .sbc-cd-num { font-family: "Fraunces", serif; font-size: 36px; font-weight: 400; color: var(--bg); line-height: 1; font-variation-settings: "opsz" 48, "WONK" 1; }
.sbc .sbc-cd-word { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(253, 251, 247, 0.6); margin-top: 6px; }

/* ─── SECTION SCAFFOLDING ──────────────────────────────── */
.sbc section { padding: 100px 0; }
.sbc .sbc-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px; gap: 40px; }
.sbc .sbc-section-head h2 { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.015em; font-weight: 400; font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0; max-width: 720px; }
.sbc .sbc-section-head h2 em { color: var(--maroon); font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.sbc .sbc-section-eyebrow { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--orange-red); margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.sbc .sbc-section-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--orange-red); }
.sbc .sbc-ornament { display: block; margin: 0 auto; color: var(--maroon); opacity: 0.5; }

/* ─── OVERVIEW ─────────────────────────────────────────── */
.sbc .sbc-overview { background: var(--bg-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sbc .sbc-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.sbc .sbc-overview-item { position: relative; }
.sbc .sbc-overview-num { font-family: "Fraunces", serif; font-size: 56px; color: var(--orange-red); line-height: 1; margin-bottom: 20px; font-style: italic; font-variation-settings: "opsz" 96, "WONK" 1; opacity: 0.85; }
.sbc .sbc-overview-item h3 { font-size: 22px; margin-bottom: 12px; font-variation-settings: "opsz" 36, "SOFT" 50; }
.sbc .sbc-overview-item p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }

/* ─── CLASSES ──────────────────────────────────────────── */
.sbc .sbc-classes-intro { max-width: 720px; font-size: 18px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 70px; }
.sbc .sbc-class-list { border-top: 1px solid var(--rule); }
.sbc .sbc-class-item { border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 0.4s ease; position: relative; }
.sbc .sbc-class-item:hover { background: rgba(247, 241, 230, 0.5); }
.sbc .sbc-class-row { display: grid; grid-template-columns: 80px 1fr 220px 50px; align-items: center; padding: 36px 16px; gap: 40px; transition: padding 0.3s ease; }
.sbc .sbc-class-item.sbc-open .sbc-class-row { padding-bottom: 24px; }
.sbc .sbc-class-num { font-family: "Fraunces", serif; font-style: italic; font-size: 38px; color: var(--orange-red); font-variation-settings: "opsz" 60, "WONK" 1; line-height: 1; }
.sbc .sbc-class-title-block h3 { font-size: 26px; margin-bottom: 4px; font-variation-settings: "opsz" 36, "SOFT" 50; transition: color 0.3s ease; }
.sbc .sbc-class-item:hover .sbc-class-title-block h3 { color: var(--maroon); }
.sbc .sbc-class-hook { /*font-family: "Fraunces", serif;*/ font-style: italic; color: var(--ink-soft); font-size: 16px; font-variation-settings: "opsz" 24, "SOFT" 100; }
.sbc .sbc-class-date { text-align: right; }
.sbc .sbc-class-date-main { font-family: "Fraunces", serif; font-size: 18px; color: var(--brown-deep); font-variation-settings: "opsz" 24; }
.sbc .sbc-class-date-sub { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.sbc .sbc-class-toggle { width: 36px; height: 36px; border: 1px solid var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; justify-self: end; }
.sbc .sbc-class-toggle svg { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); color: var(--brown); }
.sbc .sbc-class-item.sbc-open .sbc-class-toggle { background: var(--maroon); border-color: var(--maroon); }
.sbc .sbc-class-item.sbc-open .sbc-class-toggle svg { transform: rotate(45deg); color: var(--bg); }
.sbc .sbc-class-detail { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sbc .sbc-class-item.sbc-open .sbc-class-detail { max-height: 2500px; }
.sbc .sbc-class-detail-inner { padding: 0 16px 40px 96px; max-width: 880px; }
.sbc .sbc-class-detail-inner p { color: var(--ink-soft); font-size: 16px; line-height: 1.75; margin-bottom: 20px; }
.sbc .sbc-class-detail-inner .sbc-keypoints { list-style: none; margin-top: 24px; }
.sbc .sbc-class-detail-inner .sbc-keypoints li { position: relative; padding-left: 28px; margin-bottom: 14px; color: var(--ink-soft); font-size: 15.5px; }
.sbc .sbc-class-detail-inner .sbc-keypoints li::before { content: "\2726"; position: absolute; left: 0; top: 0; color: var(--orange-red); font-size: 12px; transform: translateY(4px); }

/* ─── INSTRUCTOR ───────────────────────────────────────── */
.sbc .sbc-instructor { background: var(--brown-deep); color: var(--bg); position: relative; overflow: hidden; }
.sbc .sbc-instructor::before { content: ""; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, var(--orange-red) 0%, transparent 65%); opacity: 0.2; }
.sbc .sbc-instructor-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: center; position: relative; }
.sbc .sbc-instructor-portrait { aspect-ratio: 3 / 4; background: linear-gradient(180deg, transparent 0%, rgba(74, 46, 21, 0.4) 100%), linear-gradient(135deg, var(--orange-red) 0%, var(--maroon) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sbc .sbc-instructor-portrait svg { width: 60%; height: 60%; color: rgba(253, 251, 247, 0.85); }
.sbc .sbc-instructor-portrait img { width: 309px; height: 305px; object-fit: cover; border:1px solid; padding:5px; max-width: 100%; }   /* FIX: max-width keeps the fixed portrait inside narrow columns */
.sbc .sbc-instructor h2 { color: var(--bg); font-size: clamp(36px, 4.5vw, 56px); margin-bottom: 24px; font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0; }
.sbc .sbc-instructor h2 em { color: var(--orange-red-soft); font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.sbc .sbc-instructor .sbc-section-eyebrow { color: var(--orange-red-soft); }
.sbc .sbc-instructor .sbc-section-eyebrow::before { background: var(--orange-red-soft); }
.sbc .sbc-instructor p { color: rgba(253, 251, 247, 0.85); font-size: 17px; line-height: 1.75; margin-bottom: 20px; }

/* ─── DETAILS / FAQ ────────────────────────────────────── */
.sbc .sbc-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.sbc .sbc-info-block { border-top: 2px solid var(--brown-deep); padding-top: 32px; }
.sbc .sbc-info-block h3 { font-size: 28px; margin-bottom: 24px; font-variation-settings: "opsz" 48, "SOFT" 50; }
.sbc .sbc-info-row { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--rule); gap: 24px; }
.sbc .sbc-info-row:last-child { border-bottom: none; }
.sbc .sbc-info-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); flex-shrink: 0; padding-top: 4px; }
.sbc .sbc-info-value { font-family: "Fraunces", serif; font-size: 18px; color: var(--brown-deep); text-align: right; font-variation-settings: "opsz" 24; }
.sbc .sbc-info-value-sub { font-family: "Lora", serif; font-size: 13px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }

.sbc .sbc-faq-item { border-bottom: 1px solid var(--rule); padding: 20px 0; cursor: pointer; }
.sbc .sbc-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: "Fraunces", serif; font-size: 18px; color: var(--brown-deep); font-variation-settings: "opsz" 24, "SOFT" 50; }
.sbc .sbc-faq-icon { width: 24px; height: 24px; border: 1px solid var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; font-size: 14px; color: var(--brown); }
.sbc .sbc-faq-item.sbc-open .sbc-faq-icon { background: var(--orange-red); border-color: var(--orange-red); color: var(--bg); transform: rotate(135deg); }
.sbc .sbc-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin-top 0.4s ease; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.sbc .sbc-faq-item.sbc-open .sbc-faq-a { max-height: 300px; margin-top: 14px; }

/* ─── FINAL CTA ────────────────────────────────────────── */
.sbc .sbc-final-cta { background: var(--bg-soft); text-align: center; padding: 120px 0; border-top: 1px solid var(--rule); }
.sbc .sbc-final-cta h2 { font-size: clamp(40px, 5vw, 68px); max-width: 880px; margin: 0 auto 32px; line-height: 1.1; font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1; }
.sbc .sbc-final-cta h2 em { color: var(--maroon); font-style: italic; }
.sbc .sbc-final-cta p { font-size: 19px; color: var(--ink-soft); max-width: 600px; margin: 0 auto 40px; font-family: "Fraunces", serif; font-style: italic; font-variation-settings: "opsz" 24, "SOFT" 100; }

/* ─── ANIMATION ────────────────────────────────────────── */
@keyframes sbcFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 920px) {
  .sbc .sbc-hero { padding: 60px 0 80px; }
  .sbc .sbc-hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .sbc .sbc-hero h1 { font-size: clamp(38px, 7.2vw, 60px); }   /* FIX: fits the long headline once stacked */
  .sbc section { padding: 70px 0; }
  .sbc .sbc-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sbc .sbc-overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .sbc .sbc-class-row { grid-template-columns: 60px 1fr 40px; gap: 16px; padding: 24px 8px; }
  .sbc .sbc-class-date { display: none; }
  .sbc .sbc-class-num { font-size: 30px; }
  .sbc .sbc-class-title-block h3 { font-size: 20px; }
  .sbc .sbc-class-hook { font-size: 14px; }
  .sbc .sbc-class-detail-inner { padding: 0 8px 32px 76px; }
  .sbc .sbc-instructor-grid { grid-template-columns: 1fr; gap: 40px; }
  .sbc .sbc-instructor-portrait { max-width: 280px; margin: 0 auto; }
  .sbc .sbc-details-grid { grid-template-columns: 1fr; gap: 50px; }
  .sbc .sbc-container { padding: 0 24px; }
}
@media (max-width: 520px) {
  .sbc { font-size: 16px; }
  .sbc .sbc-hero h1 { font-size: clamp(30px, 8.6vw, 44px); }   /* FIX: "Presuppositional" no longer clips */
  .sbc .sbc-hero-ctas { flex-direction: column; align-items: stretch; }
  .sbc .sbc-btn { justify-content: center; }
  .sbc .sbc-countdown-numbers { gap: 14px; }
  .sbc .sbc-cd-num { font-size: 28px; }
}
@media (max-width: 320px) {
  .sbc .sbc-hero-ctas { flex-direction: column; align-items: stretch; }
  .sbc .sbc-hero h1 { font-size: 28px; }
  .sbc .sbc-btn { justify-content: center; }
  .sbc .sbc-countdown-numbers { gap: 8px; }
  .sbc .sbc-cd-num { font-size: 22px; }
}
@media (min-width:601px) and (max-width: 2560px) {
    .sbc-banner {
        aspect-ratio: 2560/615;
        height: auto;
        width: 100%;
        display: block;
    }
}
@media (max-width: 600px) {
    .sbc-banner {
        aspect-ratio: 1086/1218;
        height: auto;
    }
}