/* Treatments slider (Figma TreatmentsSection): heading + arrows + card carousel.
   Progressive enhancement: pre-JS the cards are a CSS row with the same widths. */

.section.tslider { padding-block: var(--space-3xl); }

.tslider__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.tslider__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.tslider__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 686px;
}
.tslider__heading em,
.tslider__heading i { font-style: italic; }
.tslider__desc {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-grey-900);
}

.tslider__nav { display: flex; gap: var(--space-s); flex: 0 0 auto; }
.tslider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-grey-400);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-grey-900);
  cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.tslider__arrow:hover { border-color: var(--color-grey-600); }
.tslider__arrow:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 2px; }
.tslider__arrow.swiper-button-disabled { opacity: .35; cursor: default; }
.tslider__arrow svg { width: 24px; height: 24px; }

/* Static (pre-JS) layout = same geometry Swiper takes over. */
.tslider__slider { overflow: hidden; width: 100%; }
/* Equal-height cards: slides stretch to the tallest (e.g. a 2-line title). */
.tslider__slider .swiper-wrapper { display: flex; align-items: stretch; }
.tslider__slide {
  width: 280px;
  flex: 0 0 auto;
  display: flex;
  height: auto;   /* Swiper's own height:100% would disable align-items:stretch */
  margin-right: var(--space-m);
}

/* Treatment listing card — the carousel variant has a PERMANENT grey border
   + inner padding (Figma 21-60521), unlike the archive's hover-only border. */
.tslider .listing-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* fill the stretched slide → equal-height cards */
  gap: var(--space-l);
  padding: var(--space-s);
  border-radius: var(--radius-s);
  border: 1px solid var(--color-grey-200);
  transition: border-color .15s ease;
}
.tslider .listing-card:hover { border-color: var(--color-grey-400); }
.tslider .listing-card:focus-visible { outline: 2px solid var(--color-grey-900); outline-offset: 2px; }
.tslider .listing-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-grey-200);
}
.tslider .listing-card__img { width: 100%; height: 100%; object-fit: cover; }
.tslider .listing-card__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.tslider .listing-card__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  font-weight: 500;
  color: var(--color-grey-900);
}
.tslider .listing-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-grey-900);
  transition: transform .15s ease;
}
.tslider .listing-card:hover .listing-card__icon { transform: translateX(4px); }

@media (max-width: 767px) {
  .tslider__header { flex-direction: column; align-items: flex-start; }
  .tslider__slide { width: 240px; }
}