/* team-single.css — doctor profile (Figma "/doctor-profile/Grid-L").
   Hero + treatments carousel + about (reel) + publications + certificates.
   Features / blog / testimonials / bottom CTA reuse blog-single.css block styles;
   treatment listing cards reuse treatments-archive.css. */

/* ---------- Hero ---------- */
.team-hero__container { display: flex; flex-direction: column; gap: var(--space-l); padding-top: var(--space-m); }
.team-hero__split { display: flex; gap: var(--space-5xl); align-items: flex-start; }
.team-hero__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-l); }
.team-hero__heading { display: flex; flex-direction: column; gap: var(--space-xs); }
.team-hero__name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-xl);
  line-height: var(--lh-h-xl);
  letter-spacing: var(--ls-h-xl);
  color: var(--color-grey-900);
}
.team-hero__meta { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }
.team-hero__bio { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-800, #272727); }
.team-hero__bio > * + * { margin-top: var(--space-s); }
.team-hero__bio ul, .team-hero__bio ol { margin: 0; padding-left: var(--space-l); }

.team-hero__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
.team-info { display: flex; flex-direction: column; gap: var(--space-xs); padding-bottom: var(--space-s); border-bottom: 1px solid var(--color-grey-200); }
.team-info__label { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); font-weight: 500; text-transform: uppercase; color: var(--color-grey-600); }
.team-info__value { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); }

.team-hero__cta { display: flex; gap: var(--space-l); }
.team-hero__btn { flex: 1 1 0; justify-content: center; }

.team-hero__media { flex: 0 0 417px; display: flex; flex-direction: column; gap: var(--space-2x); align-items: flex-start; }
.team-hero__photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.team-hero__img { width: 100%; height: 100%; object-fit: cover; }
.team-hero__socials { display: inline-flex; gap: var(--space-s); padding: var(--space-3xs) var(--space-xs); background: var(--color-grey-100); border-radius: var(--radius-xs); }
.team-social { display: inline-flex; width: 24px; height: 24px; color: var(--color-grey-900); transition: opacity .2s ease; }
.team-social:hover { color: var(--color-accent); opacity: .7; }
.team-social__img { width: 24px; height: 24px; object-fit: contain; }

/* ---------- Section blocks ---------- */
.team-block { padding-block: var(--space-4xl); }
/* Per-section paddings (chained selectors so they also beat the ≤768px
   `.team-block { padding-block: 2xl }` override). */
.section.team-block.team-articles { padding-block: var(--space-2xl); }
.section.team-block.team-features { padding-block: var(--space-xl); }
.team-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-l); margin-bottom: var(--space-l); }
.team-block__headtext { display: flex; flex-direction: column; gap: var(--space-2x); max-width: 686px; }
.team-block__title { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); color: var(--color-grey-900); }
.team-block__intro { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-900); }

/* Blocks borrowed from the article templates ("Moje artykuły", CTA "Masz pytania?")
   carry .article__h2 / .ctasection__heading, sized --fs-h-m. On this page they are
   section titles, so the client asked them to match .team-block__title
   ("Publikacje naukowe") instead. Scoped to .team-single so the blog keeps its own size. */
.team-single .article__h2,
.team-single .ctasection__heading { font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); }
.team-block__nav { display: flex; gap: var(--space-xs); flex: 0 0 auto; }

/* ---------- Horizontal carousels (treatments, certificates) ---------- */
.team-carousel__track {
  display: flex;
  gap: var(--space-l);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.team-carousel__track::-webkit-scrollbar { display: none; }
.team-carousel__track { align-items: flex-start; }
.team-carousel__item { flex: 0 0 280px; scroll-snap-align: start; }
/* Reused listing-card stretches via height:100% in the archive grid — let it size
   naturally here. In a flex carousel the in-flow <img> drives the media height and
   breaks aspect-ratio, so pin the image and let the 1:1 box set the height. */
/* Equal-height cards: the track stretches items to the tallest one (a 2-line
   treatment name), the title stays right under the image (no margin-top:auto). */
.team-treatments .team-carousel__track { align-items: stretch; }
.team-treatments .team-carousel__item { display: flex; }
.team-treatments .listing-card { height: auto; flex: 1 1 auto; }
.team-treatments .listing-card__content { margin-top: 0; }
/* Client: no background change on hover (border + arrow animation only). */
.team-treatments .listing-card:hover { background: var(--color-white); }
.team-treatments .listing-card__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: auto;
  height: 0;
  padding-bottom: 100%; /* square, bulletproof inside the flex carousel */
}
.team-treatments .listing-card__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.team-cert { flex: 0 0 312px; scroll-snap-align: start; border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.team-cert__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Blog ("Moje artykuły"): narrower cards so ~5 are visible (Figma). */
.team-single .relcard { flex: 0 0 240px; max-width: none; }

/* ---------- About (reel + text) ---------- */
.team-about__split { display: flex; gap: var(--space-2xl); align-items: flex-start; }
.team-about__media { flex: 0 0 400px; max-width: 400px; }
/* Reused .reel carries a flex-basis + max-width:70% from the reels carousel —
   reset them so the about video is a full 400×600 (2:3). */
.team-about__media .reel { width: 100%; max-width: none; flex: none; aspect-ratio: 2 / 3; border-radius: var(--radius-s); overflow: hidden; }
.team-about__img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-s); }
.team-about__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-l); }
.team-about__text { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); color: var(--color-grey-800, #272727); }
.team-about__text > * + * { margin-top: var(--space-s); }
.team-about__text ul, .team-about__text ol { margin: 0; padding-left: var(--space-l); }

/* ---------- Features (full-width rows) ---------- */
.team-features__list { list-style: none; margin: 0; padding: 0; }
.team-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2x);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--color-grey-200);
}
.team-feature:first-child { border-top: 1px solid var(--color-grey-200); }
.team-feature__icon { display: inline-flex; width: 24px; height: 24px; color: var(--color-grey-900); }
.team-feature__icon svg { width: 24px; height: 24px; }
.team-feature__icon-img { width: 24px; height: 24px; object-fit: contain; }
.team-feature__body { display: flex; flex-direction: column; gap: var(--space-3xs); }
.team-feature__title { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); font-weight: 500; color: var(--color-grey-900); }
.team-feature__text { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-600); }

/* ---------- Reviews (centered mosaic) ---------- */
/* One big outer border around the whole reviews section (Figma). */
.team-reviews__box {
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-s);
  padding: var(--space-2xl) var(--space-l);
  background: var(--color-white);
}
.team-reviews__title {
  margin: 0 0 var(--space-2xl);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h-l);
  line-height: var(--lh-h-l);
  letter-spacing: var(--ls-h-l);
  color: var(--color-grey-900);
}
.team-reviews__mosaic { max-width: 900px; margin-inline: auto; columns: 3; column-gap: var(--space-l); }
.team-review {
  break-inside: avoid;
  margin-bottom: var(--space-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
  padding: var(--space-l);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-s);
  background: var(--color-white);
}
.team-review__stars { display: inline-flex; gap: 2px; color: var(--color-grey-900); }
/* Client: stars in doctor reviews are black (the hero rating stays red). */
.team-review__stars .rating__star--on { color: var(--color-grey-900); }
.team-review__stars svg { width: 16px; height: 16px; }
.team-review__text { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-900); }
.team-review__author { margin: 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: 500; color: var(--color-grey-900); }

/* Reviews height cap + collapse (mirrors the treatment testimonials block, but
   scoped: .reviews-mosaic carries its own border/padding that would fight
   .team-reviews__box). The cap is on the box, not on __mosaic — a multi-column
   element with max-height spills into extra columns sideways instead of clipping.
   Two modes, set globally in the options: inner scroll, or clip behind a fade
   with a "show more" button (the [data-reviews-more] handler in treatment.js,
   already enqueued on this page, just toggles .is-expanded). */
.team-reviews__box--expand { position: relative; }
.team-reviews__box--expand::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 72px;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--color-white) 80%);
  pointer-events: none;
  opacity: 0;
}
.team-reviews__more { display: flex; justify-content: center; margin-top: var(--space-l); }
@media (max-width: 600px) {
  .team-reviews__box--capped { max-height: var(--tr-max-h); overflow-y: auto; }
  .team-reviews__box--expand.team-reviews__box--capped:not(.is-expanded) { overflow: hidden; }
  .team-reviews__box--expand.team-reviews__box--capped:not(.is-expanded)::after { opacity: 1; }
}
@media (min-width: 601px) {
  .team-reviews__box--capped-d { max-height: var(--tr-max-h-d); overflow-y: auto; }
  .team-reviews__box--expand.team-reviews__box--capped-d:not(.is-expanded) { overflow: hidden; }
  .team-reviews__box--expand.team-reviews__box--capped-d:not(.is-expanded)::after { opacity: 1; }
}
/* .is-expanded (2 classes) outranks the single-class cap rules above. */
.team-reviews__box.is-expanded { max-height: none; overflow: visible; }

/* ---------- Publications (list + image right) ---------- */
.team-pub__split { display: flex; gap: var(--space-3xl); align-items: flex-start; }
.team-pub__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-l); }
.team-pub__media { flex: 0 0 45%; max-width: 45%; border-radius: var(--radius-s); overflow: hidden; background: var(--color-grey-200); }
.team-pub__img { display: block; width: 100%; aspect-ratio: var(--pub-ratio, 4 / 3); object-fit: cover; }
.team-pub__list { margin: 0; padding-left: var(--space-l); list-style: disc; }
.team-pub__item { font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--color-grey-800, #272727); }
.team-pub__item + .team-pub__item { margin-top: var(--space-s); }
.team-pub__item::marker { color: var(--color-grey-600); }
.team-pub__link { color: inherit; text-decoration: underline; }
.team-pub__link:hover { color: var(--color-grey-900); }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .team-hero__split { gap: var(--space-2xl); }
  .team-hero__media { flex-basis: 340px; }
  .team-reviews__mosaic { columns: 2; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .team-hero__split { flex-direction: column; }
  .team-hero__media { flex: 1 1 auto; width: 100%; align-self: stretch; }
  .team-hero__photo { aspect-ratio: 4 / 5; }
  .team-about__split, .team-pub__split { flex-direction: column; align-items: stretch; }
  /* "O mnie": text first, media below at full width, scaling proportionally. */
  .team-about__content { order: -1; }
  .team-about__media { flex-basis: auto; max-width: none; width: 100%; }
  .team-about__media .reel { flex-basis: auto; max-width: none; width: 100%; }
  .team-about__img { width: 100%; height: auto; aspect-ratio: auto; }
  .team-pub__media { flex-basis: auto; max-width: none; }
  .team-block { padding-block: var(--space-2xl); }
}
@media (max-width: 600px) {
  .team-hero__name { font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); }
  /* Info blocks (Specjalizacja / Wykształcenie…) keep two columns on mobile. */
  .team-hero__cta { flex-direction: column; gap: var(--space-xs); }
  .team-block__title, .team-reviews__title { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
  .team-single .article__h2, .team-single .ctasection__heading { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
  .team-carousel__item, .team-cert { flex-basis: 78%; }
  .team-reviews__mosaic { columns: 1; }

  /* "Wykonywane zabiegi": keep the vertical card on mobile too — undo the
     horizontal row layout the treatments-archive mobile rules would impose. */
  .team-treatments .listing-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-l);
  }
  .team-treatments .listing-card__media { width: 100%; }

  /* "Masz pytania?": buttons stacked vertically with the "lub" between them. */
  .team-single .ctasection__actions { flex-direction: column; }
  .team-single .ctasection__actions .btn { width: 100%; justify-content: center; }
}