/*
 * Section patterns shared by the internal pages: reading content, the
 * contact call to action, the FAQ list, and the review grid.
 */

/* ------------------------------------------------------------ Reading body */

.content-section__inner {
  width: min(100%, var(--content-width-reading));
  margin-inline: auto;
}

.content-section__inner > .eyebrow,
.content-section__inner > h2 { text-align: center; }
.content-section__inner > h2 { margin-bottom: var(--space-l); }

.content-section--wide .content-section__inner { width: min(100%, var(--content-width-l)); }
.content-section--flush { padding-block: clamp(var(--space-2xl), 5vw, var(--space-3xl)); }

.single-content__featured {
  margin: 0 0 var(--space-xl);
  overflow: hidden;
  border: 0.4rem solid var(--color-white);
  border-radius: var(--radius-l);
  background: var(--color-blush);
  box-shadow: var(--shadow-large);
}

.single-content__featured img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------- CTA band */

.cta-section__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  padding: clamp(var(--space-xl), 5vw, var(--space-2xl));
  border: var(--border-width-thin) solid var(--color-line-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-panel);
  box-shadow: var(--shadow-soft);
}

.cta-section__content { min-width: 0; }
.cta-section__portrait {
  --section-heading-avatar: clamp(3.75rem, 5vw, 4.25rem);
  justify-items: start;
  width: var(--section-heading-avatar);
  margin-left: 0.7rem;
}
.cta-section__portrait .section-heading__ring { left: -0.7rem; }
.cta-section__card h2 { max-width: 24ch; }
.cta-section__card :is(p, .rich-text) { max-width: 46rem; margin-top: var(--space-xs); }
.cta-section__card .button { align-self: end; white-space: nowrap; }

/* --------------------------------------------------------------- Pricing */

.pricing-section__panel {
  position: relative;
  width: min(100%, 46rem);
  margin-inline: auto;
  padding: clamp(var(--space-l), 4vw, var(--space-xl));
  border: var(--border-width-thin) solid var(--color-line-soft);
  border-top: 3px solid var(--color-gold-soft);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--shadow-small);
  text-align: center;
}

.pricing-section__panel > p:first-child { color: var(--color-ink-soft); text-align: center; }

.rich-text.pricing-section__panel ul {
  display: grid;
  margin: var(--space-m) 0;
  padding: 0;
  border-block: var(--border-width-thin) solid var(--color-line-soft);
  list-style: none;
}

.rich-text.pricing-section__panel li {
  display: grid;
  place-items: center;
  padding: var(--space-m);
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
}

.rich-text.pricing-section__panel ul > li::before { display: none; content: none; }

.rich-text.pricing-section__panel li + li {
  margin-top: 0;
  border-top: var(--border-width-thin) solid var(--color-line-soft);
}
.pricing-section__panel > p:last-child:not(:first-child) { margin-top: var(--space-m); color: var(--color-ink-soft); font-size: var(--text-s); }

/* ----------------------------------------------------------------- FAQ list */

.faq-section__inner { width: min(100%, 52rem); margin-inline: auto; }

.faq-list { border-top: var(--border-width-thin) solid var(--color-line-soft); }
.faq-item { border-bottom: var(--border-width-thin) solid var(--color-line-soft); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4rem;
  padding: var(--space-m) 0;
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-size: var(--text-l);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition-standard);
}

.faq-item summary:hover { color: var(--color-gold-deep); }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary span {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.faq-item summary span::before,
.faq-item summary span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1.5px;
  background: var(--color-gold-deep);
  transform: translate(-50%, -50%);
}

.faq-item summary span::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform var(--transition-standard);
}

.faq-item[open] summary span::after { transform: translate(-50%, -50%) rotate(0); }
.faq-item__answer { padding: 0 var(--space-2xl) var(--space-l) 0; }

/*
 * Animate the disclosure itself. `interpolate-size` lets the intrinsic height
 * take part in the transition, and `content-visibility` is discrete so the
 * panel stays in the accessibility tree for the whole of it.
 */
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size var(--duration-card) var(--easing-emphasized),
    content-visibility var(--duration-card) allow-discrete,
    opacity var(--duration-card) var(--easing-standard);
}

.faq-item[open]::details-content {
  block-size: auto;
  opacity: 1;
}

/* ------------------------------------------------------------- Review cards */

.review-grid {
  columns: 3 18rem;
  column-gap: var(--space-l);
}

.review-grid--single {
  width: min(100%, 52rem);
  margin-inline: auto;
  columns: auto;
}

.reviews-section__intro {
  max-width: 48rem;
  margin: var(--space-m) auto 0;
  color: var(--color-ink-soft);
}

.review-card {
  break-inside: avoid;
  margin: 0 0 var(--space-l);
  padding: var(--space-l);
  border: var(--border-width-thin) solid var(--color-line-hairline);
  border-radius: var(--radius-l);
  background: var(--color-card);
  box-shadow: var(--shadow-small);
}

.review-card__stars { color: var(--color-gold); letter-spacing: 0.08em; }

.review-card__title {
  display: block;
  margin: var(--space-xs) 0;
  color: var(--color-ink);
  font-family: var(--font-family-heading);
  font-size: var(--text-l);
}

.review-card footer {
  margin-top: var(--space-m);
  color: var(--color-gold-deep);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 55rem) {
  .cta-section__card { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  #therapie-wieso .editorial-split__content { order: 1; }
  #therapie-wieso .editorial-split__media { order: 2; }
  #therapie-wieso .editorial-split__media .framed-media__image { aspect-ratio: 1; }

  .faq-item summary {
    min-height: 3.5rem;
    gap: var(--space-s);
    font-size: var(--text-s);
  }

  .faq-item summary span {
    width: 0.85rem;
    height: 0.85rem;
  }

  .faq-item summary span::before,
  .faq-item summary span::after {
    width: 0.65rem;
    height: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary span::after,
  .faq-item::details-content { transition: none; }
}