/* ==========================================================================
   Topic pages (/shiurei-pituach-kol-raanana/, /sadnat-shira-kvutzatit/,
   /somatic-voicework/) — loaded after styles.css, reuses its tokens and
   components (buttons, form, FAQ, pricing, footer). Only the pieces a long
   article page needs and the landing page doesn't have live here.
   ========================================================================== */

/* Compact page hero — shares .hero's background so the brand feels continuous */
.page-hero { padding: 40px 0 56px; }
.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.15;
  color: var(--ink);
  margin: 14px 0 18px;
}
.page-hero__lead {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto 28px;
  font-weight: 500;
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.breadcrumb li + li::before {
  content: "‹";
  margin-inline-end: 6px;
  color: var(--line);
}
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Long-form article text */
.prose {
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  color: var(--ink);
  margin: 48px 0 16px;
  line-height: 1.25;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 28px 0 10px;
}
.prose ul {
  padding-inline-start: 1.2em;
  margin: 0 0 1.2em;
}
.prose li { margin-bottom: 8px; }
.prose a:not(.btn) { color: var(--primary); font-weight: 500; }
.prose strong { color: var(--ink); }
.prose figure { margin: 32px 0; }
.prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
}
.prose figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
  text-align: center;
}
@media (max-width: 720px) {
  .prose { font-size: 16.5px; }
}

/* Highlighted key-facts box */
.facts {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin: 28px 0;
  box-shadow: var(--shadow-sm);
}
.facts__title {
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 10px;
  font-size: 16px;
}
.facts ul { margin: 0; padding-inline-start: 1.2em; }
.facts li { margin-bottom: 6px; }

/* Inline call-to-action inside an article */
.inline-cta {
  background: var(--primary-50);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  margin: 40px 0;
  text-align: center;
}
.inline-cta p {
  margin: 0 0 16px;
  font-weight: 500;
  color: var(--ink);
}
.inline-cta .btn + .btn { margin-inline-start: 10px; }
@media (max-width: 480px) {
  .inline-cta .btn + .btn { margin-inline-start: 0; margin-top: 10px; }
}

/* Related pages — internal linking block, also used on the home page */
.section--related { background: var(--bg-warm); }
.section--related .container { text-align: center; }
.related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.related__card {
  display: block;
  height: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  text-decoration: none;
  text-align: start;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related__card:hover,
.related__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.related__title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 6px;
}
.related__desc { display: block; font-size: 15px; line-height: 1.55; }

/* Footer page links */
.footer__pages {
  margin-top: 18px;
  font-size: 14px;
}
.footer__pages a { margin-inline-end: 4px; }