/* content-page.css — shared Apple-pro content-page styling (WEB_DESIGN.md §2c).
   A .org teaching page gets the stock-iOS look by loading THIS instead of
   teaching.css, with its chrome swapped to the shared .site-nav / .site-footer.
   It restyles the existing legacy teaching classes (.teaching-hero, .teaching,
   .scripture, .verse-pull, .walk-daily-block, .turning …) so page BODIES need
   no rewrite. Used by the moedim sub-pages; the four hand-built teaching pages
   carry equivalent page-scoped styles and can migrate here later.

   Left-aligned reading column · system-sans · weight ladder 400/600/700 · one
   royal-blue accent · full-width alternating bands (scripture = band, section =
   base) achieved by padding-centring the content of full-bleed blocks. */

:root { --cp-band: #E9E2CE; } /* warm band below the parchment page */
[data-theme="dark"] { --cp-band: #1A1411; }

/* ── Header (text only: privacy / about) ─────────────────────────────────── */
.teaching-hero {
  max-width: none;
  margin: 0;
  padding: 56px max(24px, calc((100% - 720px) / 2)) 8px;
  text-align: left;
  border: none;
}

/* ── Image header (moedim feasts) — Apple full-bleed hero ──────────────────
   Edge-to-edge painting with the eyebrow/title/lede laid OVER it, centred low,
   behind a legibility veil. Only pages carrying .teaching-hero__image (the
   feast pages) are affected; the text header above is untouched. */
.teaching-hero--image {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(48px, 7vh, 92px);
  min-height: clamp(560px, 88vh, 860px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.teaching-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.teaching-hero__image picture { position: absolute; inset: 0; display: block; }
.teaching-hero__image img {
  /* Oversized ±12% so the scroll parallax (js/hero-parallax.js) never reveals
     an edge as it drifts the image. */
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  width: 100%; object-fit: cover; object-position: center 44%;
  display: block; will-change: transform;
}
.teaching-hero--image::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.32) 38%, rgba(0, 0, 0, 0) 66%);
}

/* Eyebrow / title / lede — base (dark, left) for the text header. */
.teaching-hero .eyebrow {
  display: block;
  font-family: var(--kw-font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kw-accent-deep); margin: 0 0 14px; /* deep gold, like the app's section labels */
}
.teaching-hero h1 {
  font-family: var(--kw-font-serif); font-weight: 600; /* display serif — parchment law */
  font-size: clamp(32px, 5.5vw, 52px); letter-spacing: -0.02em;
  line-height: 1.05; color: var(--kw-label); margin: 0 0 18px;
}
.teaching-hero .lede {
  /* Georgia italic — the app's serif-subtitle voice. */
  font-family: var(--kw-font-verse); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 2.3vw, 22px); line-height: 1.5;
  color: var(--kw-label-2); max-width: 680px; margin: 0;
}
/* …re-styled white + centred over the painting for the image header. */
.teaching-hero--image .eyebrow,
.teaching-hero--image h1,
.teaching-hero--image .lede {
  position: relative; z-index: 2; max-width: 720px; padding: 0 24px;
  margin-left: auto; margin-right: auto;
}
.teaching-hero--image .eyebrow {
  color: #D9B24C; /* lifted gold over the art — the app's sheet eyebrow */
  font-size: clamp(13px, 1.4vw, 17px); letter-spacing: 0.22em;
  margin-bottom: 18px;
}
.teaching-hero--image h1 {
  color: #fff; text-shadow: 0 1px 28px rgba(0, 0, 0, 0.38); margin-bottom: 14px;
}
.teaching-hero--image .lede {
  color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 22px rgba(0, 0, 0, 0.38);
  max-width: 640px;
}

/* ── Article → full-bleed banded sections, content centred to the column ──── */
.teaching { max-width: none; margin: 0; padding: 0; }
.teaching--editorial { display: block; }     /* cancel the editorial 2-col grid */
.teaching-nav { display: none; }              /* numbered index (its JS isn't loaded) */

.teaching > section {
  margin: 0; border: none; border-radius: 0; box-shadow: none; background: none;
  padding: 56px max(24px, calc((100% - 720px) / 2));
}
.teaching > section::before { display: none; }            /* kill the warm rim */
.teaching > section:hover { transform: none; box-shadow: none; }  /* kill card hover */

/* Feast pages (.teaching--editorial): wide LEFT-aligned frame to match the
   teaching pages — content begins at the gutter of a 1120 column, prose capped
   for legibility. The closing "Walk this daily" link is dropped here too. */
.teaching--editorial > section {
  padding: 56px max(40px, calc((100% - 1120px) / 2));
}
.teaching--editorial h2,
.teaching--editorial h3,
.teaching--editorial p { max-width: 760px; }
.teaching--editorial .walk-daily-block { display: none; }
@media (max-width: 640px) {
  .teaching--editorial > section { padding-left: 24px; padding-right: 24px; }
}

.teaching h2 {
  font-family: var(--kw-font-ui); font-weight: 600;
  text-transform: none; text-align: left;
  font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.015em;
  line-height: 1.1; color: var(--kw-label); margin: 0 0 12px;
}
.teaching h3 {
  font-family: var(--kw-font-ui); font-weight: 400; font-style: normal; text-align: left;
  font-size: clamp(18px, 2.3vw, 22px); line-height: 1.4;
  color: var(--kw-label-2); margin: 0 0 24px;
}
.teaching p {
  font-family: var(--kw-font-ui); font-weight: 400;
  font-size: 17px; line-height: 1.62; letter-spacing: 0;
  color: var(--kw-label-2); margin: 0 0 18px;
}
.teaching p:last-child { margin-bottom: 0; }
.teaching p em { font-style: italic; color: var(--kw-label); }
.teaching p strong { font-weight: 600; color: var(--kw-label); }
.teaching p em.yeshua-words,
.yeshua-words { font-style: normal; font-weight: 700; color: var(--kw-label); }
.teaching a { color: var(--kw-accent); text-decoration: none; }
.teaching a:hover { color: var(--kw-accent-hover); text-decoration: underline; }

/* Inline scripture pull — left rule, verse, eyebrow citation beneath. */
.teaching .verse-pull,
.verse-pull {
  display: block; margin: 22px 0; padding: 4px 0 6px 18px;
  border-left: 2px solid var(--kw-accent);
}
.verse-pull em {
  display: block; font-style: italic; font-size: 19px; line-height: 1.5; color: var(--kw-label);
}
.verse-ref {
  font-style: normal; font-family: var(--kw-font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--kw-accent); margin-left: 0.5em; white-space: nowrap;
}
.verse-ref::before { content: ''; margin: 0; }   /* drop teaching.css's "· " prefix */
.verse-pull .verse-ref { display: block; margin: 8px 0 0; }

/* Scripture → centred verse-band divider (full-bleed band, content to 640). */
.teaching > .scripture,
.teaching .scripture {
  max-width: none; margin: 0;
  padding: 56px max(24px, calc((100% - 640px) / 2));
  background: var(--cp-band); text-align: center;
  font-family: var(--kw-font-ui); font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.5; color: var(--kw-label);
}
.teaching .scripture::before,
.teaching .scripture::after { display: none; content: none; }   /* kill ❖ + hairline */
.teaching .scripture cite,
.scripture cite {
  display: block; margin-top: 16px; font-style: normal; font-family: var(--kw-font-ui);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kw-accent);
}

/* Historical-record callout (e.g. a council canon) — left rule, like a pull. */
.teaching .turning {
  border-left: 2px solid var(--kw-accent); padding: 6px 0 8px 20px; margin: 24px 0;
  font-family: var(--kw-font-ui); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--kw-label);
}
.teaching .turning strong { font-weight: 600; font-style: normal; color: var(--kw-label); }

/* Walk daily — a QUIET closing text link (never a prominent button, §0). */
.walk-daily-block {
  max-width: 720px; margin: 0 auto; padding: 56px 24px 8px;
  border-top: 1px solid var(--kw-separator); text-align: left;
}
.walk-daily-block a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kw-font-ui); font-size: 16px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--kw-accent); text-decoration: none;
}
.walk-daily-block a::after { content: '\203A'; transition: transform 0.2s var(--kw-ease, ease); }
.walk-daily-block a:hover { color: var(--kw-accent-hover); }
.walk-daily-block a:hover::after { transform: translateX(4px); }

/* Footer verse — match the home footer exactly (Yochanan 13:20). */
.footer-verse {
  font-family: var(--kw-font-serif); font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.5;
  color: var(--kw-label-2); max-width: 34rem; margin: 4px auto 44px; padding: 0 24px;
}
.footer-verse cite {
  display: block; font-style: normal; font-family: var(--kw-font-ui);
  font-size: var(--kw-fs-pill); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--kw-label-3); margin-top: 14px;
}