/* =========================================
   SACRAL CHAKRA WORKSHOP PAGE
   Layered over style.css + sessions-ritika.css.
   Only holds what the shared sr-* system does not
   already provide: dark-section list colours,
   pricing cards, the open FAQ, and the booking card.
   ========================================= */


/* ── LISTS ON THE DARK MAROON SECTIONS ── */
/* The base .sr-check-list is tuned for cream backgrounds,
   so it needs lifting wherever it sits inside --dark. */
.sr-offering--dark .sr-check-list li { color: rgba(250,248,239,0.75); }
.sr-offering--dark .sr-check-list li::before { background: rgba(195,162,145,0.8); }
.sr-offering--dark .sr-check-list li strong { color: rgba(250,248,239,0.95); font-weight: 500; }


/* ── PRICING ── */
.sr-pricing { margin: 2rem 0 2.5rem; }

.sr-price-card {
  padding: 1.8rem 1.5rem;
  border-radius: 8px;
  background: var(--cream-dark);
  text-align: center;
  position: relative;
}

.sr-price-card--featured {
  background: var(--forest);
  color: var(--cream);
}

.sr-price-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(250,248,239,0.18);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 0.8rem;
}

.sr-price-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.sr-price-card--featured .sr-price-label { color: rgba(250,248,239,0.65); }

.sr-price-amount {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}

.sr-price-card--featured .sr-price-amount { color: var(--cream); }

.sr-price-detail {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.sr-price-card--featured .sr-price-detail { color: rgba(250,248,239,0.6); }

.sr-pricing--single { display: flex; flex-direction: column; }

.sr-price-card--solo {
  max-width: 280px;
  margin-top: 1rem;
}

/* The single price card sits on the dark section, so it needs a
   visible edge against the identical maroon behind it. */
.sr-offering--dark .sr-price-card--featured {
  border: 1px solid rgba(195,162,145,0.28);
}


/* ── RESERVE YOUR SPOT LAYOUT ── */
/* The GoHighLevel form needs roughly 620px to read well. The shared
   860px inner split 1fr/1fr only gave it ~414px, which left the block
   looking left-shifted against the 320px price card.
   All of this is scoped to #investment so the identical .sr-two-col in
   The Practice, and every other page using the shared sr-* system, is
   untouched. */

/* Price card centred above the two columns. The shared .sr-pricing--single
   is a flex column, so the capped-width card would otherwise sit hard left. */
#investment .sr-pricing--single { align-items: center; }

/* Widen this one section from the shared 860px to 1040px, still margin
   auto. The heading, price card and columns then share a single left edge
   and centre line, so the section reads as one unit. max-width (rather
   than a negative-margin breakout) means it simply clamps to the available
   width on narrower screens and can never overflow. */
#investment .sr-offering-inner { max-width: 1040px; }

/* Between the shared 900px stack and the full-width layout the inner is
   narrower than 1040px, so the form takes the larger share rather than a
   fixed width that would squeeze "What's included". */
@media (min-width: 901px) and (max-width: 1119px) {
  #investment .sr-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: start;
  }
}

/* The 1120px floor is geometry, not taste: .sr-offering carries 2.5rem of
   side padding, so the inner only reaches its full 1040px once the viewport
   reaches 1040 + 80. Claiming the fixed 620px form column below that would
   starve the left column. */
@media (min-width: 1120px) {
  #investment .sr-two-col {
    grid-template-columns: minmax(0, 1fr) 620px;
    gap: 2.5rem;
    align-items: start;
  }
}


/* ── BOOKING CARD (GoHighLevel embed) ── */
.sc-booking { scroll-margin-top: calc(var(--nav-h) + 1rem); }

.sc-booking-note {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(250,248,239,0.65);
  line-height: 1.7;
  margin: 0.5rem 0 1rem;
}

.sc-booking-card {
  background: var(--cream);
  border-radius: 10px;
  padding: 0.9rem;
  min-height: 620px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.16);
}

/* The GoHighLevel script measures the form and sets the iframe height
   inline once it loads, so the frame and card must be free to grow with
   it. Only min-height is used: a fixed height plus overflow:hidden would
   clip the taller mobile layout. */
.sc-booking-frame {
  min-height: 600px;
  border-radius: 8px;
}

.sc-booking-frame iframe {
  display: block;
  min-height: 600px;
}


/* ── OPEN FAQ ── */
.sc-faq-open { margin-top: 2.5rem; }

.sc-faq-qa {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(61,30,29,0.12);
}

.sc-faq-qa:first-child { padding-top: 0; }

.sc-faq-question {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  color: var(--ink);
  font-weight: 400;
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.sc-faq-body {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.85;
  letter-spacing: 0.01em;
  max-width: 680px;
}


/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sr-price-card--solo { max-width: 320px; }
  .sc-booking-card { min-height: 600px; }
}

@media (max-width: 580px) {
  .sc-booking-card { padding: 0.6rem; }
}