/* ============================================================
   cc-detail.css — components for the rebuilt therapy detail
   pages and the Meet Our Team page.  Scoped to .cc-wysiwyg so
   nothing here can leak into the rest of the site.
   Added 2026-09-03 (Smart Marketing).
   ============================================================ */

/* ---- in-content photos ---- */
.cc-wysiwyg figure.photo { margin: 36px 0; }
.cc-wysiwyg figure.photo img { width: 100%; height: auto; display: block; border: 1px solid #e6ded1; }
.cc-wysiwyg figure.photo figcaption {
  font-size: 13px; color: #8a7a63; font-style: italic; padding-top: 8px;
}

/* ---- "what people use it for" card grid ---- */
.cc-wysiwyg .pairs { display: grid; gap: 26px; grid-template-columns: 1fr; margin: 26px 0 30px; }
.cc-wysiwyg .pairs .cardlet { background: #faf8f4; border: 1px solid #ece4d8; padding: 22px 24px; }
.cc-wysiwyg .pairs .cardlet h3 { margin: 0 0 8px; font-size: 20px; }
.cc-wysiwyg .pairs .cardlet p  { margin: 0; font-size: 15px; }
@media (min-width: 768px) { .cc-wysiwyg .pairs { grid-template-columns: 1fr 1fr; } }

/* ---- FAQ block ---- */
.cc-wysiwyg .faqblock h3 { border-bottom: 1px solid #ece8e0; padding-bottom: 6px; }

/* ---- closing call-out ---- */
.cc-wysiwyg .closing {
  background: #faf8f4; border-left: 3px solid #8B6F4E;
  padding: 24px 28px; margin-top: 44px;
}
.cc-wysiwyg .closing p { margin: 0; font-size: 17px; color: #121f38; }

/* ---- therapist / staff block ---- */
.cc-wysiwyg .therapist { display: grid; gap: 30px; grid-template-columns: 1fr; margin: 26px 0 10px; }
.cc-wysiwyg .therapist img { width: 100%; height: auto; display: block; border: 1px solid #e6ded1; }
.cc-wysiwyg .therapist .role { color: #8B6F4E; font-style: italic; margin: -4px 0 14px; }
.cc-wysiwyg .therapist .spec { font-size: 14px; color: #5c5346; }
@media (min-width: 768px) { .cc-wysiwyg .therapist { grid-template-columns: 340px 1fr; gap: 36px; } }

/* ---- Meet Our Team ----
   Two boxes per member: portrait + intro side by side, then the rest of the
   bio full width underneath. Keeping the portrait column a fixed width in
   BOTH orientations is what makes every member's photo the same size — an
   earlier version reordered the portrait into the flexible column, so the
   flipped member's photo rendered nearly twice as wide as the other's.     */
.cc-team .member { display: grid; gap: 26px; grid-template-columns: 1fr; margin-bottom: 72px; }
.cc-team .member:last-child { margin-bottom: 24px; }
.cc-team .member img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover;   /* uniform even if a portrait is cropped differently */
  border: 1px solid #e6ded1;
}
.cc-team .member .role { color: #8B6F4E; font-style: italic; margin: -4px 0 16px; }
.cc-team .member-intro > h2:first-child { margin-top: 0; }
.cc-team .member-more { margin-top: 2px; }
.cc-team .credbox {
  background: #faf8f4; border-left: 3px solid #8B6F4E;
  padding: 18px 22px; margin-top: 22px; font-size: 15px;
}
.cc-team .credbox p { margin: 0; }

@media (min-width: 992px) {
  /* portrait column is a fixed 400px whichever side it sits on */
  .cc-team .member { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; align-items: start; }
  .cc-team .member.flip { grid-template-columns: minmax(0, 1fr) 400px; }
  .cc-team .member.flip .portrait-col { order: 2; }
  .cc-team .member.flip .member-intro { order: 1; }
  /* second box spans the full width under both columns */
  .cc-team .member-more { grid-column: 1 / -1; order: 3; }
}