/* ==========================================================================
   טיפול אחר — רכיבי ממשק
   Shared components used across the inner pages: page headers, breadcrumbs,
   accordions, group cards, the filter engine, forms, notes and detail blocks.
   Loaded after style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page header (inner pages)
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(2.25rem, 5vw, 3.5rem);
  background:
    radial-gradient(110% 85% at 92% 0%, rgba(232, 207, 194, .55) 0%, rgba(251, 248, 243, 0) 60%),
    radial-gradient(85% 75% at 2% 100%, rgba(237, 241, 218, .70) 0%, rgba(251, 248, 243, 0) 58%),
    var(--cream);
  border-block-end: 1px solid var(--line);
}
/* Constrain the measure on the children, not on the wrapper — otherwise the
   block would centre at 66ch instead of aligning with the rest of the page. */
.page-header__inner { max-width: none; }
.page-header h1 { margin-block-end: .5rem; max-width: 24ch; }
.page-header .lede { color: var(--ink-2); max-width: 62ch; }

/* Group pages: a slightly stronger separator in each group's own palette. */
html[data-group] {
  --group-line-dark: #6B5233;
  --group-line-mid: #D9A441;
  --group-line-light: #DABE93;
}

html[data-group] .page-header {
  border-block-end: 0;
}

html[data-group] .page-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(
    90deg,
    var(--group-line-dark) 0%,
    var(--group-line-mid) 28%,
    var(--group-line-light) 52%,
    var(--group-line-mid) 76%,
    var(--group-line-dark) 100%
  );
  opacity: .88;
}

html[data-group="01"] { --group-line-dark:#6B3E36; --group-line-mid:#C69080; --group-line-light:#E6C0B1; }
html[data-group="02"] { --group-line-dark:#5F351C; --group-line-mid:#D9A27C; --group-line-light:#F5D9C4; }
html[data-group="03"] { --group-line-dark:#6B5233; --group-line-mid:#D9A441; --group-line-light:#DABE93; }
html[data-group="04"] { --group-line-dark:#4F4A2C; --group-line-mid:#CBBC70; --group-line-light:#E8E3CA; }
html[data-group="05"] { --group-line-dark:#425C3B; --group-line-mid:#9FB78E; --group-line-light:#DCC169; }
html[data-group="06"] { --group-line-dark:#3F5B60; --group-line-mid:#7F9CA0; --group-line-light:#A8C2C4; }
html[data-group="07"] { --group-line-dark:#5A3129; --group-line-mid:#C69080; --group-line-light:#EFCFC4; }
html[data-group="08"] { --group-line-dark:#425C3B; --group-line-mid:#9FB78E; --group-line-light:#DCC169; }
html[data-group="09"] { --group-line-dark:#5E3B21; --group-line-mid:#B27E52; --group-line-light:#E3A052; }
html[data-group="10"] { --group-line-dark:#5F351C; --group-line-mid:#C97A45; --group-line-light:#F5D9C4; }
html[data-group="11"] { --group-line-dark:#4F4A2C; --group-line-mid:#9F9762; --group-line-light:#CBBC70; }
html[data-group="12"] { --group-line-dark:#3D4852; --group-line-mid:#1E5B3C; --group-line-light:#B9CF6B; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  font-size: .9rem;
  color: var(--ink-faint);
}
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: .55rem; }
.breadcrumbs li + li::before {
  content: "";
  inline-size: .42rem; block-size: .42rem;
  border-block-start: 2px solid var(--line-strong);
  border-inline-start: 2px solid var(--line-strong);
  transform: rotate(-45deg);
  flex: none;
}
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--clay-deep); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   2. Content prose blocks
   -------------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-block-start: 1.15rem; }
.prose h2 { margin-block-start: 2.4rem; }
.prose h3 { margin-block-start: 1.9rem; }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
.prose ul, .prose ol { color: var(--ink-2); }

/* Anchored article section */
.article-section { scroll-margin-block-start: 6rem; }

/* Card that holds a block of body copy */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-xs);
}
.panel--sand { background: var(--cream-2); border-color: var(--line); }
.panel--tint { background: var(--clay-tint); border-color: var(--clay-soft); }
.panel--forest { background: var(--forest-soft); border-color: #C6D4BC; }

/* Research / professional-basis callout */
.note {
  border-inline-start: 4px solid var(--gold);
  background: var(--gold-soft);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  color: var(--ink-2);
  font-size: .975rem;
  line-height: calc(1.75 + var(--a11y-line-extra));
}
.note__title {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-block-end: .4rem;
}
.note--forest { border-inline-start-color: var(--forest); background: var(--forest-soft); }
.note--clay { border-inline-start-color: var(--clay); background: var(--clay-tint); }

/* --------------------------------------------------------------------------
   3. Accordion / FAQ
   -------------------------------------------------------------------------- */
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq-item[open] { border-color: var(--clay-soft); box-shadow: var(--shadow-sm); }
.faq-item:hover { border-color: var(--line-strong); }

.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: calc(1.5 + var(--a11y-line-extra));
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:focus-visible { outline: 3px solid var(--clay); outline-offset: -3px; }

.faq-item > summary::after {
  content: "";
  flex: none;
  inline-size: .72rem;
  block-size: .72rem;
  margin-block-start: .42rem;
  /* Physical sides on purpose: a logical inline-end would flip the chevron to
     point sideways in RTL instead of down. */
  border-right: 2.4px solid var(--clay);
  border-bottom: 2.4px solid var(--clay);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }

.faq-item__body {
  padding: 0 1.35rem 1.35rem;
  color: var(--ink-2);
}
.faq-item__body > *:first-child { margin-block-start: 0; }
.faq-item__body p { max-width: 72ch; }

/* --------------------------------------------------------------------------
   4. Group cards + result list
   -------------------------------------------------------------------------- */
.group-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  block-size: 100%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.group-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--clay-soft);
}
.group-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.group-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.group-card:hover .group-card__media img { transform: scale(1.05); }

.group-card__body {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.group-card__title { margin: 0; font-size: 1.22rem; line-height: 1.35; }
.group-card__title a { color: var(--ink); text-decoration: none; }
.group-card__title a:hover { color: var(--clay-deep); text-decoration: underline; }
/* Whole card clickable while keeping the link as the accessible target. */
.group-card__title a::after { content: ""; position: absolute; inset: 0; }
.group-card { position: relative; }

.group-card__text { margin: 0; color: var(--ink-soft); font-size: .99rem; flex: 1; }
.group-card__more {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  color: var(--clay-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.group-card__more:hover,
.group-card__more:focus-visible { color: var(--forest); }

.group-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .2rem; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .25rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tag--clay   { background: var(--clay-tint);   border-color: var(--clay-soft); color: var(--clay-deep); }
.tag--forest { background: var(--forest-soft); border-color: #C6D4BC;          color: var(--forest-deep); }

/* --------------------------------------------------------------------------
   5. Two-step filter engine
   -------------------------------------------------------------------------- */
.filter {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.15rem, 2.6vw, 1.75rem);
  box-shadow: var(--shadow-xs);
}
.filter__step + .filter__step { margin-block-start: 1.35rem; padding-block-start: 1.35rem; border-block-start: 1px solid var(--line); }
.filter__label {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: calc(.05em + var(--a11y-letter-extra));
  color: var(--ink-soft);
  margin-block-end: .75rem;
}
.filter__options { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--cream-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .55rem 1.05rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  min-block-size: 2.6rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.chip:hover { background: var(--sand); border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--clay);
  border-color: var(--clay);
  color: #FFFFFF;
}
.chip:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 2px; }

.filter__count {
  margin-block-start: 1.25rem;
  font-size: .95rem;
  color: var(--ink-soft);
  font-weight: 600;
}

#results .filter {
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   6. Details list ("פרטים חשובים")
   -------------------------------------------------------------------------- */
.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.detail-list > div {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .5rem 1.25rem;
  padding-block: .85rem;
  border-block-end: 1px solid var(--line);
  align-items: baseline;
}
.detail-list > div:last-child { border-block-end: 0; }
.detail-list dt { font-weight: 700; color: var(--ink); margin: 0; }
.detail-list dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) {
  .detail-list > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .form__row { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: .4rem; }
.field__label { font-weight: 700; font-size: .975rem; color: var(--ink); }
.field__label .req { color: var(--clay-deep); margin-inline-start: .15rem; }
.field__hint { font-size: .875rem; color: var(--ink-faint); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  min-block-size: 3rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-block-size: 8.5rem; resize: vertical; }
.field select { appearance: none; padding-inline-end: 2.6rem; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23665A50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 1rem center; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--clay-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-tint);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 2px;
}
.field [aria-invalid="true"] { border-color: #B3261E; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px #FBE4E2; }

.field__error {
  color: #8E1B14;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.field__error::before { content: "!"; display: grid; place-items: center; inline-size: 1.05rem;
  block-size: 1.05rem; border-radius: 50%; background: #8E1B14; color: #FFFFFF; font-size: .75rem; flex: none; }
/* `display: flex` above out-ranks the browser default for [hidden],
   so an untriggered error slot has to be hidden explicitly. */
.field__error[hidden] { display: none; }

.form-status {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  font-weight: 600;
  line-height: calc(1.6 + var(--a11y-line-extra));
}
.form-status--success { background: var(--forest-soft); border: 1px solid #B4C8A8; color: var(--forest-deep); }
.form-status--error   { background: #FBE4E2; border: 1px solid #E3A9A3; color: #8E1B14; }

/* --------------------------------------------------------------------------
   8. Therapist cards
   -------------------------------------------------------------------------- */
.person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  block-size: 100%;
}
.person-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.person-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.person-card__media { display: block; }
.person-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.person-card--compact {
  inline-size: 70%;
  justify-self: start;
}
.person-card__body { padding: 1.25rem; display: grid; gap: .35rem; }
.person-card__name { margin: 0; font-size: 1.3rem; }
.person-card__name a { color: var(--ink); text-decoration: none; }
@media (max-width: 620px) {
  .person-card--compact { inline-size: min(70%, 18rem); }
}
.person-card__name a::after { content: ""; position: absolute; inset: 0; }
.person-card__name a:hover { color: var(--clay-deep); }
.person-card__role { margin: 0; color: var(--clay-deep); font-weight: 600; font-size: .975rem; }
.person-card__more {
  position: relative;
  z-index: 1;
  justify-self: end;
  margin-block-start: .25rem;
  color: var(--clay-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.person-card__more:hover,
.person-card__more:focus-visible { color: var(--forest); }

.method-visual {
  inline-size: 60%;
  justify-self: center;
}

.methods-intro { padding-block-end: 0; }
.methods-intro .lede { margin-block: 0; }
.methods-content { padding-block-start: clamp(1rem, 2vw, 1.5rem); }

/* --------------------------------------------------------------------------
   9. Steps (registration flow)
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 3.25rem;
  padding-block: .35rem;
  margin: 0;
  color: var(--ink-2);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--clay-tint);
  border: 2px solid var(--clay-soft);
  color: var(--clay-deep);
  font-weight: 700;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   10. Anchor / on-this-page navigation
   -------------------------------------------------------------------------- */
.toc {
  position: sticky;
  inset-block-start: 6rem;
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.toc__title {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: calc(.06em + var(--a11y-letter-extra));
  color: var(--ink-soft);
  margin: 0 0 .85rem;
}
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.toc__list li { margin: 0; }
.toc__list a {
  display: block;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.toc__list a:hover { background: var(--cream-2); color: var(--clay-deep); }

.with-toc {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
@media (max-width: 900px) {
  .with-toc { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}

/* --------------------------------------------------------------------------
   11. CTA strip inside a page
   -------------------------------------------------------------------------- */
.cta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  background: var(--clay-tint);
  border: 1px solid var(--clay-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.cta-strip p { margin: 0; color: var(--ink-2); max-width: 52ch; font-weight: 600; }

/* --------------------------------------------------------------------------
   12. הסתרה — פריטים שהוסתרו על ידי מנוע הסינון
   Components such as .group-card and .filter__step declare their own display
   value, which would otherwise beat the browser default for [hidden].
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }



/* --------------------------------------------------------------------------
   13. קיצורי מקלדת — <kbd> inside body copy
   -------------------------------------------------------------------------- */
.prose kbd,
.note kbd {
  font-family: var(--font-body);
  font-size: .88em;
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-block-end-width: 2px;
  border-radius: 5px;
  padding: .08em .45em;
  color: var(--ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. מקטעי מאמר עוקבים (עמודי תוכן ארוכים, למשל ״מידע על שיטות הטיפול״)
   Rhythm between sibling anchored sections, and between a section's body
   copy and its research callout.
   -------------------------------------------------------------------------- */
.article-section + .article-section,
.article-section + .note { margin-block-start: clamp(2.75rem, 6vw, 4.75rem); }

.article-section .prose + .note { margin-block-start: 1.9rem; }

/* Group detail pages: compact, text-first reading flow. */
html[data-base="../"] .article-section {
  padding-block: clamp(1.1rem, 2.5vw, 1.75rem);
  background: transparent;
}

html[data-base="../"] .article-section + .article-section {
  margin-block-start: 0;
}

html[data-base="../"] .article-section > .wrap {
  max-width: var(--maxw-narrow);
}

html[data-base="../"] #who {
  padding-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
}

html[data-base="../"] #who > .wrap {
  max-width: var(--maxw-narrow);
}

html[data-base="../"] #who .split {
  display: block;
  inline-size: 100%;
  max-inline-size: 68ch;
}

html[data-base="../"] #who .prose {
  display: block;
  inline-size: 100%;
  max-width: 68ch;
  direction: rtl;
}

html[data-base="../"] #who .prose h2 {
  margin-block-start: 0;
  direction: rtl;
  text-align: right;
}

html[data-base="../"] #who .prose > p {
  direction: rtl;
  text-align: right;
}

/* מידת השורה של ציטוט מודגש בתוך פס ציטוט.
   ‎.pull-quote‎ מגביל ל־30ch, אך ה־ch נמדד לפי גופן הגוף של ההורה ולא לפי
   גודל התצוגה של הציטוט — מה שמצר אותו לכ־250px ומפרק אותו למילה בשורה.
   כאן המידה נמדדת ביחידות em של הציטוט עצמו, כך שהיא נשמרת בכל גודל מסך. */
.quote-band .pull-quote { max-width: min(100%, 46rem); }
.quote-band .pull-quote p { max-width: 17em; margin-inline: auto; }

/* כותרת ״note״ שהיא גם כותרת סמנטית (h2/h3/h4): שומרת על מדרג הכותרות
   התקין של העמוד, ומקבלת את מראה התווית הקומפקטי שהרכיב תוכנן עבורו. */
h2.note__title,
h3.note__title,
h4.note__title {
  font-family: var(--font-body);
  font-size: 1.08rem;
  line-height: calc(1.4 + var(--a11y-line-extra));
}

/* --------------------------------------------------------------------------
   15. פרופיל המטפל ותעודות להשכלה
   -------------------------------------------------------------------------- */
.therapist-profile-head {
  display: grid;
  grid-template-columns: clamp(7.5rem, 15vw, 11rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
  margin-block-end: clamp(1.75rem, 4vw, 3rem);
}
.therapist-profile-head .section-head { margin: 0; }
.therapist-profile-head__portrait {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 32%;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.certificates-panel { padding: clamp(.8rem, 2vw, 1.35rem); }
.certificate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
}
.certificate-thumb {
  display: block;
  aspect-ratio: 636 / 900;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .72);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.certificate-thumb:hover,
.certificate-thumb:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-sm);
}
.certificate-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
@media (max-width: 780px) {
  .therapist-profile-head {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
  }
  .certificate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .therapist-profile-head { grid-template-columns: 5.75rem minmax(0, 1fr); }
  .therapist-profile-head .lede { font-size: 1rem; }
  .certificate-grid { gap: .65rem; }
}

/* --------------------------------------------------------------------------
   16. ריווח בין פסקאות ורשימות בתוך תשובה בעמוד השאלות הנפוצות
   -------------------------------------------------------------------------- */
.faq-item__body > * { margin-block-end: 0; }
.faq-item__body > * + * { margin-block-start: 1.1rem; }

/* --------------------------------------------------------------------------
   17. טופס התעניינות — הכפתור הפותח את הטופס בעמוד אפשרות טיפול
   The document (source lines 491-493) describes a button that opens the form,
   not a form that is open from the start. The wrapper is deliberately NOT
   marked hidden in the HTML — main.js collapses it on init, so if scripting
   fails the form stays visible and usable.
   -------------------------------------------------------------------------- */
.interest-toggle {
  inline-size: 100%;
  text-align: center;
  line-height: 1.4;
}
.interest-toggle[aria-expanded="true"] {
  --btn-bg: transparent;
  --btn-fg: var(--clay-deep);
  --btn-bd: var(--clay-soft);
  box-shadow: none;
}
.interest-form { margin-block-start: 1.5rem; }
.interest-form[hidden] { display: none; }

/* Group-specific action colour: the same three-colour palette as the header
   separator, with consistently light text for contrast. */
html[data-group] .interest-toggle,
html[data-group] .interest-toggle[aria-expanded="true"] {
  --btn-bg: linear-gradient(
    105deg,
    var(--group-line-dark) 0%,
    var(--group-line-mid) 100%
  );
  --btn-fg: #FFFDF8;
  --btn-bd: var(--group-line-dark);
  color: #FFFDF8;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--group-line-dark) 24%, transparent);
}

html[data-group] .interest-toggle:hover,
html[data-group] .interest-toggle[aria-expanded="true"]:hover {
  color: #FFFFFF;
}

/* Compact secondary contact card on group pages. */
.contact-band {
  inline-size: fit-content;
  max-inline-size: min(100%, 44rem);
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(
    135deg,
    var(--slate) 0%,
    var(--forest) 52%,
    var(--gold-deep) 100%
  );
  border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent);
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgba(40, 55, 42, .16);
}

.contact-band::before {
  display: none;
}

.contact-band h2 {
  margin-block-end: .45rem;
  font-size: clamp(1.35rem, 1.15rem + .7vw, 1.75rem);
  color: #FFFFFF;
}

.contact-band .lede {
  font-size: .98rem;
  line-height: calc(1.65 + var(--a11y-line-extra));
  color: rgba(255, 255, 255, .9);
}

.contact-band__actions {
  gap: .65rem;
  margin-block-start: .85rem;
}

.contact-band .btn--lg {
  min-block-size: 2.65rem;
  padding: .65rem 1.05rem;
  font-size: .95rem;
}

.contact-band .btn {
  --btn-bg: #FFFDF8;
  --btn-fg: var(--forest-deep);
  --btn-bd: #FFFDF8;
}

.contact-band .btn--ghost {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-fg: #FFFFFF;
  --btn-bd: rgba(255, 255, 255, .7);
}

@media (min-width: 861px) {
  .contact-illustration {
    position: relative;
    inset-block-start: 1.25rem;
  }
}