/* ===================================================================
   Usługi — strona /uslugi/
   Hero (mapa oferty) · 5 obszarów · router · modele współpracy
   Wszystkie wartości przez var(). BEM. Zero hardkodów.
   =================================================================== */

/* ============================================================
   HERO — mapa oferty (napkin map)
   ============================================================ */
.uslugi-hero {
  text-align: center;
  padding-block: calc(var(--space-8) + 4rem) var(--space-7);
}
.uslugi-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.uslugi-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.uslugi-hero__lead {
  margin: 0;
}
.uslugi-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.uslugi-hero__scroll {
  font: var(--fw-medium) var(--font-label) / 1 var(--font-sans);
  color: var(--ink-62);
  text-decoration: none;
  transition: color var(--duration-base);
}
.uslugi-hero__scroll:hover {
  color: var(--color-accent);
}

/* ── Mapa oferty (ilustracja PNG, transparentne tło) ── */
.uslugi-hero__visual {
  width: 100%;
  max-width: 46rem;
  margin-top: var(--space-2);
}
.uslugi-map__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   PIĘĆ OBSZARÓW — zwarte karty
   ============================================================ */
.usluga-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.usluga-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  scroll-margin-top: var(--space-8);
  transition: transform var(--duration-slow) var(--ease-out),
              background var(--duration-slow) var(--ease-out);
}
.usluga-card:hover {
  transform: translateY(-4px);
  background: var(--surface-hover);
}

/* Aside: duży numer + sketch-ikona */
.usluga-card__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 10rem;
}
.usluga-card__num {
  font: var(--fw-regular) clamp(3.6rem, 5vw, 5.6rem) / 1 var(--font-decorative);
  color: var(--color-accent);
  transform: rotate(-4deg);
}
.usluga-card__icon {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
}

/* Body */
.usluga-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.usluga-card__name {
  font: var(--fw-bold) var(--font-h3) / var(--lh-tight) var(--font-sans);
  color: var(--color-ink);
  letter-spacing: -.02em;
  margin: 0;
}
.usluga-card__problem {
  font: var(--fw-semibold) var(--font-body) / var(--lh-snug) var(--font-sans);
  color: var(--color-accent);
  margin: 0;
}
.usluga-card__desc {
  font: var(--fw-regular) var(--font-body) / var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
  margin: 0;
  max-width: 62ch;
}
.usluga-card__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.usluga-card__benefit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-regular) var(--font-body) / var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.usluga-card__check {
  color: var(--color-accent);
  flex-shrink: 0;
  display: flex;
}
.usluga-card__actions {
  margin-top: var(--space-2);
}
.usluga-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: var(--fw-medium) var(--font-label) / 1 var(--font-sans);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--duration-base);
}
.usluga-card__cta:hover {
  text-decoration-color: var(--color-accent);
}

/* ============================================================
   ROUTER — „Od czego zacząć" (triaż)
   Jedna kolumna, objaw + odpowiedź pod spodem. Separacja tłem i odstępem.
   ============================================================ */
.router-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.router-card {
  display: flex;
}
.router-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out);
}
.router-card__link:hover {
  background: var(--surface-hover);
}
.router-card__symptom {
  font: var(--fw-bold) var(--font-h5) / var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
}
.router-card__answer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--fw-medium) var(--font-label) / 1.3 var(--font-sans);
}
.router-card__prefix {
  color: var(--ink-50);
}
.router-card__area {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}
.router-card__arrow {
  width: 3.2rem;
  height: 2rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
/* Wiersz 5 — diagnostyczny: wyróżnienie skalą i oddechem, nie kolorem/ramką */
.router-card--diag .router-card__link {
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}
.router-card--diag .router-card__symptom {
  font-size: var(--font-h4);
}
.router-card--diag .router-card__answer {
  color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   MODELE WSPÓŁPRACY — „Jak z nami pracujesz" (drabina zaangażowania)
   Pion. Audyt pierwszy/największy. Separacja tłem i odstępem.
   ============================================================ */
.models-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.model-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  scroll-margin-top: var(--space-8);
}
.model-card--featured {
  padding: var(--space-6) var(--space-5);
}
.model-card__kicker {
  font: var(--fw-semibold) var(--font-caption) / 1 var(--font-sans);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.model-card--featured .model-card__kicker {
  color: var(--color-accent);
}
.model-card__name {
  font: var(--fw-black) var(--font-h4) / var(--lh-tight) var(--font-sans);
  color: var(--color-ink);
  margin: 0;
}
.model-card--featured .model-card__name {
  font-size: var(--font-h3);
}
.model-card__esencja {
  font: var(--fw-regular) var(--font-body) / var(--lh-normal) var(--font-sans);
  color: var(--ink-62);
  margin: 0;
}
.model-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
}
.model-card__row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.model-card__dt {
  font: var(--fw-semibold) var(--font-caption) / 1.4 var(--font-sans);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.model-card__dd {
  font: var(--fw-regular) var(--font-body) / var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
  margin: 0;
}
.model-card__reversal {
  font: var(--fw-semibold) var(--font-body) / var(--lh-snug) var(--font-sans);
  color: var(--color-ink);
  margin: var(--space-2) 0 0;
}
.uslugi-models__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  margin-top: var(--space-6);
}
.uslugi-models__foot-text {
  font: var(--fw-regular) var(--font-body) / 1.6 var(--font-sans);
  color: var(--ink-62);
  max-width: 48ch;
  margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .usluga-card {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .usluga-card__aside {
    flex-direction: row;
    width: auto;
    align-items: center;
    gap: var(--space-3);
  }
  .usluga-card__num {
    font-size: 3.6rem;
  }
  .usluga-card__icon {
    width: 5.6rem;
    height: 4.8rem;
  }
  .model-card__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}