/* Section: Specializations slider.
   Slide widths/gaps live here (not in JS) so the static markup renders
   identically to the initialised Swiper — JS only adds interactivity. */

.spec { padding-block: var(--space-3xl) var(--space-xl); }
.spec__container { display: flex; flex-direction: column; gap: var(--space-xl); }

.spec__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.spec__title { width: 569px; max-width: 100%; color: var(--color-grey-900); }

.spec__nav { display: flex; gap: var(--space-s); flex-shrink: 0; }
.spec__arrow {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  color: var(--color-grey-900);
  transition: background-color .2s ease, color .2s ease;
}
.spec__arrow:hover { background: var(--color-grey-400); }
.spec__arrow.swiper-button-disabled { background: var(--color-grey-100); color: var(--color-grey-600); cursor: default; }
/* Hide navigation entirely when all slides fit (watchOverflow → locked) */
.spec__arrow.swiper-button-lock { display: none; }

/* ---- Slider (CSS-first) ---- */
.spec__slider { width: 100%; overflow: hidden; }
.spec__slider .swiper-wrapper { display: flex; }
.spec__slider .swiper-slide {
  width: 180px;
  margin-right: var(--space-s);   /* 16px gap; Swiper keeps this (spaceBetween from CSS) */
  flex-shrink: 0;
}
/* No trailing gap after the last card — avoids extra over-scroll at the end. */
.spec__slider .swiper-slide:last-child { margin-right: 0; }

/* ---- Card ---- */
.spec-card {
  position: relative;   /* contains the stretched nofollow overlay link */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-l);
  height: 240px;
  padding: var(--space-m);
  background: var(--color-grey-100);
  border-radius: var(--radius-s);
  text-align: center;
}
/* Whole-card click target (nofollow); sits above the icon/badge but below the
   title link, so the title stays the only dofollow, clickable link. */
.spec-card__overlay { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
/* Affordance per design system: icon scales up slightly, title underlines. */
.spec-card__icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.spec-card__icon img { width: 72px; height: 72px; object-fit: contain; transition: transform .2s ease; }
.spec-card:hover .spec-card__icon img { transform: scale(1.1); }
.spec-card__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); width: 100%; }
.spec-card__badge {
  background: var(--color-grey-900);
  color: var(--color-grey-100);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-s);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: var(--ls-caption);
}
.spec-card__name {
  position: relative;   /* lift above the overlay so it's the dofollow link */
  z-index: 2;
  display: block;
  /* Widen beyond the card's 20px side padding (140px → 156px) so names as long
     as "Medycyna estetyczna" (150px) fit whole, while longer, truncated names
     still keep a 12px inset from the card edges. */
  width: calc(100% + 2 * var(--space-2x));
  max-width: none;
  margin-inline: calc(-1 * var(--space-2x));
  font-size: var(--fs-body-s);
  line-height: var(--lh-body-s);
  font-weight: 600;
  color: var(--color-grey-900);
  white-space: nowrap;   /* match Figma: names stay on one line */
  overflow: hidden;      /* long names truncate with an ellipsis instead of overflowing the card */
  text-overflow: ellipsis;
}
.spec-card:hover .spec-card__name { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile: not a slider — a vertical list of full-width rows (icon · name · badge).
   Swiper is not initialised below 600px (see specializations.js), so this static
   layout is the final layout. */
@media (max-width: 600px) {
  .spec__title { font-size: var(--fs-h-m); line-height: var(--lh-h-m); letter-spacing: var(--ls-h-m); }
  .spec__nav { display: none; }

  .spec__slider { overflow: visible; }
  .spec__slider .swiper-wrapper { flex-direction: column; gap: var(--space-2x); }
  .spec__slider .swiper-slide { width: 100%; margin-right: 0; }

  .spec-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-s);
    height: auto;
    padding: var(--space-s) var(--space-xs);
    text-align: left;
  }
  .spec-card:hover .spec-card__icon img { transform: none; }   /* no sticky scale after tap */
  .spec-card__icon { width: 36px; height: 36px; }
  .spec-card__icon img { width: 36px; height: 36px; }
  .spec-card__content { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); }
  .spec-card__name { order: -1; flex: 1 1 auto; min-width: 0; width: auto; margin-inline: 0; overflow: hidden; text-overflow: ellipsis; }
  .spec-card__badge { flex-shrink: 0; padding: var(--space-3xs) var(--space-xs); }
}