/* ============================================================
   Psychiatra Kaczmarek — styles.css
   Skompilowany z systemu projektowego Claude Design.
   Kolejność: tokeny (kolory/typografia/spacing/base) -> komponenty -> layout (kit)
   ============================================================ */


/* ===== tokens/colors.css ===== */
/* ==========================================================================
   COLORS — "Lugn klinisk värme" (calm clinical warmth)
   Palette logic (60-30-10):
     60%  warm linen neutrals (background, text)
     30%  deep petrol-teal — trust, calm, medical authority
     10%  warm clay accent — human warmth, used sparingly on emphasis only
   Harmony: analogous teal↔sage neutrals + one complementary warm clay.
   All text pairings target WCAG AA (≥4.5:1 body) for older patients.
   ========================================================================== */

:root {
  /* ---- Base ramps ------------------------------------------------------ */

  /* Warm neutral "paper" ramp */
  --linen-50:  #fbfaf6;   /* lightest surface */
  --linen-100: #f6f3ec;   /* page background */
  --linen-200: #efebe1;   /* soft panel */
  --linen-300: #e3ddcf;   /* hairline / border */
  --linen-400: #c9c2b1;

  /* Petrol-teal ramp (primary) */
  --teal-50:  #eef3f1;
  --teal-100: #d6e3df;
  --teal-200: #aec8c1;
  --teal-400: #4d7d74;
  --teal-600: #2c5d54;    /* primary */
  --teal-700: #234c45;    /* primary hover */
  --teal-800: #193831;    /* deep inversion bg */
  --teal-900: #112723;    /* deepest */

  /* Sage tint (calm surfaces) */
  --sage-50:  #eef2ed;
  --sage-100: #e0e8df;
  --sage-200: #cdd9cb;

  /* Warm clay accent */
  --clay-300: #e0a585;
  --clay-500: #c06a43;    /* accent */
  --clay-600: #a8552f;    /* accent hover */

  /* Ink (near-black, slightly teal so it sits in the family) */
  --ink-900: #1a2422;
  --ink-700: #38423f;
  --ink-500: #5c6864;     /* muted text */
  --ink-300: #8b938e;

  /* Status (kept muted, in-family) */
  --ok-600:   #3a7a5f;
  --warn-600: #b07d2e;
  --info-600: #2c5d54;

  /* ---- Semantic aliases (use THESE in components) ---------------------- */

  --color-bg:            var(--linen-100);
  --color-bg-raised:     var(--linen-50);
  --surface-card:        #ffffff;
  --surface-panel:       var(--linen-200);
  --surface-sage:        var(--sage-50);
  --surface-invert:      var(--teal-800);

  --text-heading:        var(--ink-900);
  --text-body:           var(--ink-700);
  --text-secondary:      var(--ink-500);
  --text-on-dark:        var(--linen-50);
  --text-on-dark-muted:  #a9bdb7;

  --border-subtle:       var(--linen-300);
  --border-strong:       var(--linen-400);
  --border-on-dark:      rgba(255, 255, 255, 0.16);

  --color-primary:          var(--teal-600);
  --color-primary-hover:    var(--teal-700);
  --color-primary-contrast: #ffffff;
  --color-primary-soft:     var(--teal-50);

  --color-accent:          var(--clay-500);
  --color-accent-hover:    var(--clay-600);
  --color-accent-contrast: #ffffff;

  --color-link:        var(--teal-700);
  --color-link-hover:  var(--teal-800);

  --focus-ring:        var(--clay-500);
  --focus-ring-offset: var(--linen-100);
}


/* ===== tokens/typography.css ===== */
/* ==========================================================================
   TYPOGRAPHY
   Display: Spectral (humanist serif) — authoritative, warm, calm, legible.
   Text/UI: Hanken Grotesk (humanist sans) — high legibility for older readers.
   Base body is 18px (1.125rem) for accessibility; root stays 16px so the rem
   scale is conventional.
   ========================================================================== */

:root {
  /* ---- Families -------------------------------------------------------- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);

  /* ---- Weights --------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (rem against 16px root) ------------------------------ */
  --text-xs:   0.8125rem;  /* 13 — micro labels */
  --text-sm:   0.9375rem;  /* 15 — captions, tags */
  --text-base: 1.125rem;   /* 18 — body (accessible default) */
  --text-md:   1.25rem;    /* 20 — lead paragraph */
  --text-lg:   1.5rem;     /* 24 */
  --text-xl:   1.875rem;   /* 30 */
  --text-2xl:  2.25rem;    /* 36 */
  --text-3xl:  3rem;       /* 48 */

  /* Fluid display sizes for hero / section titles */
  --display-sm: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);   /* @kind other */
  --display-md: clamp(2.25rem, 1.4rem + 3.6vw, 3.25rem);  /* @kind other */
  --display-lg: clamp(2.75rem, 1.5rem + 5.2vw, 4.25rem);  /* @kind other */

  /* ---- Line heights ---------------------------------------------------- */
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.6;
  --leading-relaxed: 1.78;

  /* ---- Letter spacing -------------------------------------------------- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrows */
}


/* ===== tokens/spacing.css ===== */
/* ==========================================================================
   SPACING, RADII, SHADOWS, LAYOUT
   8-point grid (multiples of 8, with 4 as the half-step).
   ========================================================================== */

:root {
  /* ---- Spacing scale --------------------------------------------------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* Vertical rhythm for full-bleed sections */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);  /* @kind spacing */

  /* ---- Radii ----------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---- Borders --------------------------------------------------------- */
  --border-width: 1px;
  --border-hair:  1px solid var(--border-subtle);

  /* ---- Shadows (soft, low, diffused — never harsh) --------------------- */
  --shadow-xs: 0 1px 2px rgba(26, 36, 34, 0.05);
  --shadow-sm: 0 2px 8px rgba(26, 36, 34, 0.06);
  --shadow-md: 0 10px 28px rgba(26, 36, 34, 0.08);
  --shadow-lg: 0 24px 56px rgba(26, 36, 34, 0.10);
  --shadow-bar: 0 -6px 24px rgba(26, 36, 34, 0.12); /* sticky mobile bar */

  /* ---- Layout ---------------------------------------------------------- */
  --container:      1180px;
  --container-text: 760px;   /* readable measure */
  --gutter:         clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* @kind spacing */

  /* ---- Controls -------------------------------------------------------- */
  --control-h:    52px;   /* default touch target ≥ 44px */
  --control-h-lg: 60px;
  --tap-min:      48px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --transition-fast: 140ms var(--ease);
  --transition:      240ms var(--ease);
  --transition-slow: 420ms var(--ease);

  /* ---- Z-index --------------------------------------------------------- */
  --z-bar:    200; /* @kind other */
  --z-modal:  500; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ==========================================================================
   BASE — light global element defaults built on the tokens.
   Shipped to consumers via styles.css. Kept minimal & non-intrusive.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; }

/* Visible, on-brand focus ring for keyboard users */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--teal-100);
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared layout helpers (handy in cards & kits) */
.ds-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ds-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}



/* ========== KOMPONENTY ========== */

/* ----- ContactAction.jsx ----- */
.dsk-ca{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); min-height:var(--control-h-lg);
  border-radius:var(--radius-lg); border:1.5px solid var(--border-strong);
  background:var(--surface-card); color:var(--text-heading); text-decoration:none;
  transition:border-color var(--transition-fast), background var(--transition-fast),
  box-shadow var(--transition-fast), transform var(--transition-fast);
}
.dsk-ca:hover{ border-color:var(--color-primary); box-shadow:var(--shadow-sm); color:var(--text-heading); }
.dsk-ca:active{ transform:translateY(1px); }
.dsk-ca__icon{
  display:grid; place-items:center; width:48px; height:48px; flex-shrink:0;
  border-radius:var(--radius-md); background:var(--surface-sage); color:var(--color-primary);
}
.dsk-ca__body{ display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1; }
.dsk-ca__label{ font-family:var(--font-ui); font-size:var(--text-sm); font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-secondary); }
.dsk-ca__number{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-medium);
  letter-spacing:.01em; line-height:1.1; color:var(--text-heading); }
.dsk-ca__note{ font-size:var(--text-sm); color:var(--text-secondary); }
.dsk-ca__chev{ color:var(--text-secondary); flex-shrink:0; }

.dsk-ca--emph{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
.dsk-ca--emph:hover{ background:var(--color-primary-hover); border-color:var(--color-primary-hover); color:#fff; }
.dsk-ca--emph .dsk-ca__icon{ background:rgba(255,255,255,.16); color:#fff; }
.dsk-ca--emph .dsk-ca__label{ color:var(--text-on-dark-muted); }
.dsk-ca--emph .dsk-ca__number{ color:#fff; }
.dsk-ca--emph .dsk-ca__note{ color:var(--text-on-dark-muted); }
.dsk-ca--emph .dsk-ca__chev{ color:rgba(255,255,255,.7); }

/* ----- ContactBar.jsx ----- */
.dsk-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.5rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background:rgba(251,250,246,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--border-subtle); box-shadow:var(--shadow-bar);
}
@media (min-width:720px){ .dsk-bar:not(.dsk-bar--always){ display:none; } }
.dsk-bar__btn{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:var(--tap-min); padding:.5rem .75rem; border-radius:var(--radius-md);
  font-family:var(--font-ui); font-weight:var(--weight-semibold); text-decoration:none;
  transition:background var(--transition-fast), transform var(--transition-fast);
}
.dsk-bar__btn:active{ transform:translateY(1px); }
.dsk-bar__btn--call{ background:var(--color-primary); color:#fff; }
.dsk-bar__btn--call:hover{ background:var(--color-primary-hover); color:#fff; }
.dsk-bar__btn--sms{ background:var(--surface-card); color:var(--color-primary); border:1.5px solid var(--border-strong); }
.dsk-bar__btn--sms:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.dsk-bar__txt{ display:flex; flex-direction:column; line-height:1.15; }
.dsk-bar__label{ font-size:var(--text-xs); font-weight:var(--weight-semibold);
  letter-spacing:.02em; opacity:.85; }
.dsk-bar__num{ font-size:var(--text-base); font-weight:var(--weight-bold); letter-spacing:.01em; }

/* ----- FAQItem.jsx ----- */
.dsk-faq{ border-bottom:1px solid var(--border-subtle); }
.dsk-faq__h{ margin:0; }
.dsk-faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-5) 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:var(--weight-medium);
  color:var(--text-heading); letter-spacing:var(--tracking-tight); line-height:var(--leading-snug);
}
.dsk-faq__q:hover{ color:var(--color-primary); }
.dsk-faq__ico{
  display:grid; place-items:center; width:34px; height:34px; flex-shrink:0;
  border-radius:50%; background:var(--surface-sage); color:var(--color-primary);
  transition:background var(--transition-fast);
}
.dsk-faq.is-open .dsk-faq__ico{ background:var(--color-primary); color:#fff; }
.dsk-faq__a-inner{
  padding:0 0 var(--space-5); max-width:64ch;
  font-size:var(--text-base); color:var(--text-body); line-height:var(--leading-relaxed);
}

/* ----- HelpCard.jsx ----- */
.dsk-help{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:var(--space-6); border-radius:var(--radius-lg);
  border:1px solid var(--border-subtle); background:var(--surface-card);
  transition:border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.dsk-help:hover{ border-color:var(--teal-200); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.dsk-help__icon{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:var(--space-2);
  border-radius:var(--radius-md); background:var(--surface-sage); color:var(--color-primary);
}
.dsk-help__title{ font-size:var(--text-lg); font-weight:var(--weight-medium); }
.dsk-help__desc{ font-size:var(--text-base); color:var(--text-secondary); line-height:var(--leading-normal); }

/* ----- InfoRow.jsx ----- */
.dsk-info{ display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4) 0; }
.dsk-info__icon{
  display:grid; place-items:center; width:42px; height:42px; flex-shrink:0;
  border-radius:var(--radius-md); background:var(--surface-sage); color:var(--color-primary);
}
.dsk-info__body{ display:flex; flex-direction:column; gap:.15rem; padding-top:.1rem; }
.dsk-info__title{ font-family:var(--font-ui); font-size:var(--text-md); font-weight:var(--weight-semibold);
  color:var(--text-heading); line-height:var(--leading-snug); }
.dsk-info__text{ font-size:var(--text-base); color:var(--text-secondary); line-height:var(--leading-normal); }

/* ----- SectionHeader.jsx ----- */
.dsk-sh{ display:flex; flex-direction:column; gap:var(--space-3); max-width:var(--container-text); }
.dsk-sh--center{ align-items:center; text-align:center; margin-inline:auto; }
.dsk-sh__eyebrow{ margin:0; }
.dsk-sh__title{ font-size:var(--display-sm); font-weight:var(--weight-medium); }
.dsk-sh__lead{ font-size:var(--text-md); color:var(--text-secondary); line-height:var(--leading-normal); max-width:62ch; }
.dsk-sh--center .dsk-sh__lead{ margin-inline:auto; }

/* ----- Stat.jsx ----- */
.dsk-stat{ display:flex; flex-direction:column; gap:.35rem; }
.dsk-stat__value{
  font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--weight-medium);
  line-height:1; color:var(--color-primary); letter-spacing:var(--tracking-tight);
}
.dsk-stat__suffix{ font-size:var(--text-xl); margin-left:.1em; color:var(--color-accent); }
.dsk-stat__label{ font-family:var(--font-ui); font-size:var(--text-sm); font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-secondary); }

/* ----- Badge.jsx ----- */
.dsk-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-ui); font-size:var(--text-sm); font-weight:var(--weight-semibold);
  line-height:1; padding:.45em .85em; border-radius:var(--radius-pill);
  border:1px solid transparent; white-space:nowrap;
}
.dsk-badge--soft{ background:var(--surface-sage); color:var(--teal-700); border-color:var(--sage-100); }
.dsk-badge--outline{ background:transparent; color:var(--text-secondary); border-color:var(--border-strong);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-xs); }
.dsk-badge--accent{ background:color-mix(in srgb, var(--clay-500) 14%, #fff); color:var(--clay-600); border-color:color-mix(in srgb, var(--clay-500) 22%, #fff); }
.dsk-badge--solid{ background:var(--color-primary); color:#fff; }
.dsk-badge--verified{ background:transparent; color:var(--ok-600); padding-inline:0;
  text-transform:uppercase; letter-spacing:var(--tracking-wide); font-size:var(--text-xs); }
.dsk-badge__dot{ width:.5em; height:.5em; border-radius:50%; background:currentColor; }

/* ----- Button.jsx ----- */
.dsk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-ui); font-weight:var(--weight-semibold);
  line-height:1; letter-spacing:.01em; text-align:center; white-space:nowrap;
  border:1.5px solid transparent; border-radius:var(--radius-pill); cursor:pointer;
  text-decoration:none; transition:background var(--transition-fast),
  border-color var(--transition-fast), color var(--transition-fast),
  transform var(--transition-fast), box-shadow var(--transition-fast);
}
.dsk-btn--md{ min-height:var(--control-h); padding:0 1.5rem; font-size:var(--text-base); }
.dsk-btn--lg{ min-height:var(--control-h-lg); padding:0 2rem; font-size:var(--text-md); }
.dsk-btn--block{ display:flex; width:100%; }
.dsk-btn:active{ transform:translateY(1px); }

.dsk-btn--primary{ background:var(--color-primary); color:var(--color-primary-contrast); }
.dsk-btn--primary:hover{ background:var(--color-primary-hover); color:#fff; box-shadow:var(--shadow-sm); }

.dsk-btn--accent{ background:var(--color-accent); color:var(--color-accent-contrast); }
.dsk-btn--accent:hover{ background:var(--color-accent-hover); color:#fff; box-shadow:var(--shadow-sm); }

.dsk-btn--secondary{ background:transparent; border-color:var(--border-strong); color:var(--text-heading); }
.dsk-btn--secondary:hover{ border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-soft); }

.dsk-btn--ghost{ background:transparent; color:var(--color-primary); padding-inline:.75rem; }
.dsk-btn--ghost:hover{ background:var(--color-primary-soft); }

.dsk-btn--onDark{ background:#fff; color:var(--teal-800); }
.dsk-btn--onDark:hover{ background:var(--linen-100); box-shadow:var(--shadow-md); }

.dsk-btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ----- Card.jsx ----- */
.dsk-card{
  position:relative; border-radius:var(--radius-lg);
  border:1px solid var(--border-subtle); background:var(--surface-card);
  box-shadow:var(--shadow-xs); transition:transform var(--transition),
  box-shadow var(--transition), border-color var(--transition);
}
.dsk-card--surface{ background:var(--surface-card); }
.dsk-card--sage{ background:var(--surface-sage); border-color:var(--sage-100); box-shadow:none; }
.dsk-card--panel{ background:var(--surface-panel); border-color:var(--border-subtle); box-shadow:none; }
.dsk-card--invert{ background:var(--surface-invert); border-color:var(--border-on-dark); color:var(--text-on-dark); }
.dsk-card--ghost{ background:transparent; border-color:var(--border-subtle); box-shadow:none; }

.dsk-card--pad-none{ padding:0; }
.dsk-card--pad-sm{ padding:var(--space-5); }
.dsk-card--pad-md{ padding:var(--space-6); }
.dsk-card--pad-lg{ padding:var(--space-7); }

.dsk-card--interactive{ cursor:pointer; }
.dsk-card--interactive:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--teal-200);
}


/* ========== LAYOUT (kit) ========== */
/* ==========================================================================
   Website UI kit — layout styles (composes the design-system components).
   Component-internal styling lives in the components; this file is page
   layout only. Class prefix: kit-
   ========================================================================== */

.kit-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.kit-measure { max-width: var(--container-text); }
section[id] { scroll-margin-top: 24px; }
@media (min-width: 1081px) { section[id] { scroll-margin-top: 96px; } }

/* ---- Header ------------------------------------------------------------- */
.kit-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--border-subtle);
}

/* Sticky tylko na dużych ekranach (tam jest pełne menu).
   Na telefonie/tablecie nagłówek przewija się normalnie, a nawigację
   przejmuje pływający przycisk hamburger. */
@media (min-width: 1081px) {
  .kit-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251, 250, 246, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
.kit-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 76px; }
.kit-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.kit-logo__mono { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.kit-logo__wm { display: flex; flex-direction: column; gap: 1px; }
.kit-logo__eyebrow { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-accent); white-space: nowrap; }
.kit-logo__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--text-heading);
  letter-spacing: var(--tracking-tight); line-height: 1; }
.kit-nav { display: flex; align-items: center; gap: var(--space-5); }
.kit-nav__links { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
/* Etykiety nigdy nie łamią się w środku słowa; font lekko skaluje się w ciasnym
   zakresie szerokości, a na szerokim desktopie wraca do --text-base (18px). */
.kit-nav__links a { font-family: var(--font-ui); font-size: clamp(1rem, 0.3rem + 1.1vw, var(--text-base));
  white-space: nowrap; color: var(--text-body); position: relative; }
.kit-nav__links a:hover { color: var(--color-primary); }
.kit-nav__links a::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px;
  background: var(--color-primary); transition: width var(--transition); }
.kit-nav__links a:hover::after { width: 100%; }
@media (max-width: 1080px) { .kit-nav__links { display: none; } }

/* ---- Przełącznik języka PL / EN ---------------------------------------- */
.kit-lang { display: inline-flex; align-items: center; gap: 2px; padding: 2px; white-space: nowrap;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.kit-lang a { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; line-height: 1; white-space: nowrap; color: var(--text-secondary); text-decoration: none;
  padding: 0.3rem 0.55rem; border-radius: calc(var(--radius-md) - 3px); transition: color var(--transition), background var(--transition); }
.kit-lang a:hover { color: var(--color-primary); }
.kit-lang a.is-active { background: var(--color-primary); color: var(--color-primary-contrast); }
/* Na telefonie/tablecie przełącznik w nagłówku jest schowany — jest w menu mobilnym */
@media (max-width: 1080px) { .kit-header .kit-lang { display: none; } }
.kit-lang--mobile { align-self: flex-start; margin-top: var(--space-2); }

/* ---- Section rhythm ----------------------------------------------------- */
.kit-section { padding-block: var(--section-y); }
.kit-section--sage { background: var(--surface-sage); }
.kit-section--panel { background: var(--color-bg-raised); border-block: 1px solid var(--border-subtle); }
.kit-section--invert { background: var(--surface-invert); color: var(--text-on-dark); }
.kit-section__head { margin-bottom: var(--space-7); }

/* ---- Hero --------------------------------------------------------------- */
.kit-hero { padding-top: var(--space-8); padding-bottom: var(--section-y); }
.kit-hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items: center; }
.kit-hero__content { max-width: 620px; }
.kit-hero__h1 { font-size: var(--display-lg); font-weight: 500; margin-bottom: var(--space-4); }
.kit-hero__h1 em { font-style: italic; color: var(--color-primary); }
.kit-hero__sub { font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-normal); margin-bottom: var(--space-6); max-width: 34em; }
.kit-hero__contacts { display: grid; gap: var(--space-3); max-width: 460px; }
.kit-hero__meta { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }
.kit-hero__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.kit-portrait { aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-panel);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); display: grid; place-items: center; text-align: center; padding: var(--space-6); }
.kit-portrait__ph { font-family: var(--font-display); font-style: italic; color: var(--ink-300); font-size: var(--text-base); line-height: 1.5; }
@media (max-width: 860px) {
  .kit-hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .kit-portrait { max-width: 320px; order: -1; }
}

/* ---- About -------------------------------------------------------------- */
.kit-about__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
.kit-about__media { display: flex; flex-direction: column; gap: var(--space-5); }
.kit-about__stats { display: flex; gap: var(--space-7); border-top: 1px solid var(--border-subtle); padding-top: var(--space-5); }
.kit-bio { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); }
.kit-bio + .kit-bio { margin-top: var(--space-4); }
.kit-bio--lead { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-heading); line-height: var(--leading-snug); }
@media (max-width: 860px) { .kit-about__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- Grids -------------------------------------------------------------- */
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.kit-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-7); }
@media (max-width: 860px) { .kit-grid-3 { grid-template-columns: 1fr 1fr; } .kit-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kit-grid-3 { grid-template-columns: 1fr; } }

.kit-callout { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-primary-soft); border: 1px solid var(--teal-100); display: flex; gap: var(--space-4); align-items: flex-start; }
.kit-callout__txt { font-size: var(--text-base); color: var(--text-body); }
.kit-callout__txt strong { color: var(--text-heading); }

/* ---- FAQ ---------------------------------------------------------------- */
.kit-faq { max-width: var(--container-text); }

/* ---- Contact ------------------------------------------------------------ */
.kit-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
.kit-contact__panel { display: grid; gap: var(--space-4); }
.kit-nap { display: grid; gap: var(--space-5); }
.kit-nap__row { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-snug); }
.kit-nap__row svg { color: var(--color-primary); margin-top: 2px; flex-shrink: 0; }
.kit-nap__contact { display: flex; flex-direction: column; gap: 3px; }
.kit-nap__lbl { font-size: var(--text-sm); color: var(--text-secondary); }
.kit-nap__num { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: .01em; line-height: 1.1; white-space: nowrap; }
.kit-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kit-map { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.kit-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .kit-contact__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- CTA invert --------------------------------------------------------- */
.kit-cta__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items: center; }
.kit-cta h2 { color: #fff; font-size: var(--display-sm); }
.kit-cta p { color: var(--text-on-dark-muted); font-size: var(--text-md); margin-top: var(--space-3); max-width: 40ch; }
.kit-cta__actions { display: grid; gap: var(--space-3); }
@media (max-width: 860px) { .kit-cta__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---- Footer ------------------------------------------------------------- */
.kit-footer { background: var(--color-bg-raised); border-top: 1px solid var(--border-subtle); padding-block: var(--space-8) var(--space-7); }
.kit-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-7); }
.kit-footer__brand p { font-size: var(--text-base); color: var(--text-secondary); max-width: 36ch; margin-top: var(--space-4); }
.kit-footer__h { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); }
.kit-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kit-footer__list a, .kit-footer__list span { font-size: var(--text-base); color: var(--text-body); }
.kit-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 760px) { .kit-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* keep content clear of the sticky mobile bar */
@media (max-width: 719px) { body { padding-bottom: 84px; } }

/* ========== ZDJĘCIA W RAMKACH PORTRETOWYCH ========== */
.kit-portrait { padding: 0; }
.kit-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ========================================================================
   POPRAWKI MOBILNE — dopięcie widoku na telefonach
   ======================================================================== */

/* 1. Globalne zabezpieczenie przed poziomym przewijaniem (strona „za szeroka") */
/* Zapobiega poziomemu przewijaniu, ale NIE psuje position:sticky.
   (overflow-x:hidden na html/body blokuje sticky — dlatego używamy
   overflow-x:clip, które tnie nadmiar bez tworzenia kontekstu przewijania) */
html, body { max-width: 100%; overflow-x: clip; }
* { min-width: 0; }

/* 2. Kółko PK — nigdy się nie spłaszcza (było „jajowate") */
.kit-logo__mono { flex-shrink: 0; }

/* 3. Kafelki kontaktu — numery telefonów mieszczą się na wąskim ekranie */
@media (max-width: 560px) {
  .kit-container { padding-inline: 1.1rem; }

  /* mniejszy padding i odstęp w kafelku, żeby numer się zmieścił */
  .dsk-ca { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .dsk-ca__icon { width: 42px; height: 42px; }
  .dsk-ca__number { font-size: var(--text-md); }      /* numer nie wystaje poza ekran */
  .dsk-ca__body { overflow-wrap: anywhere; }

  /* logo w nagłówku odrobinę mniejsze, żeby CTA telefon się mieścił obok */
  .kit-header__in { gap: var(--space-3); }
  .kit-logo__name { font-size: 1.05rem; }
  .kit-logo__eyebrow { font-size: 0.62rem; }
}

/* 4. Bardzo wąskie ekrany (np. iPhone SE) — nagłówek bez ściskania */
@media (max-width: 380px) {
  .kit-logo__wm { max-width: 160px; }
  .kit-logo__name { font-size: 0.95rem; line-height: 1.05; }
}

/* ========================================================================
   POPRAWKI v2
   ======================================================================== */

/* Guzik telefonu w nagłówku — numer nie wychodzi poza krawędź */
.kit-header .dsk-btn--md { padding-inline: 1.25rem; }
.kit-header .dsk-btn svg { flex-shrink: 0; }
.kit-header .dsk-btn__label { white-space: nowrap; }
@media (max-width: 420px) {
  /* na bardzo wąskich ekranach guzik trochę ciaśniej, ale numer w całości */
  .kit-header .dsk-btn--md { padding-inline: 0.9rem; font-size: var(--text-sm); }
}

/* Stopka — pasek dolny: data aktualizacji + sygnatura + social */
.kit-foot-meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.kit-foot-social { display: inline-flex; gap: var(--space-2); }
.kit-foot-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); transition: all var(--transition-fast);
}
.kit-foot-social a:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.kit-foot-updated { font-size: var(--text-sm); color: var(--text-secondary); }
.kit-foot-credit { font-size: var(--text-sm); color: var(--text-secondary); }
.kit-foot-credit a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.kit-foot-credit a:hover { color: var(--color-primary); }

/* ========================================================================
   OPINIE PACJENTÓW (z ZnanyLekarz)
   ======================================================================== */
.kit-reviews__rating {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-7); padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap;
}
.kit-reviews__score {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-medium);
  line-height: 1; color: var(--color-primary); letter-spacing: var(--tracking-tight);
}
.kit-reviews__stars { color: var(--color-accent); font-size: var(--text-lg); letter-spacing: 2px; }
.kit-reviews__meta { font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-snug); }
.kit-reviews__meta a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }

.kit-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 860px) { .kit-reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kit-reviews__grid { grid-template-columns: 1fr; } }

.kit-review {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.kit-review__stars { color: var(--color-accent); font-size: var(--text-base); letter-spacing: 2px; }
.kit-review__text {
  font-family: var(--font-display); font-size: var(--text-md); font-style: italic;
  line-height: var(--leading-snug); color: var(--text-heading); font-weight: var(--weight-regular);
}
.kit-review__author {
  display: flex; align-items: center; gap: var(--space-2); margin-top: auto;
  font-size: var(--text-sm); color: var(--text-secondary);
}
.kit-review__name { font-weight: var(--weight-semibold); color: var(--text-heading); }
.kit-review__badge {
  font-size: var(--text-xs); color: var(--color-primary);
  display: inline-flex; align-items: center; gap: .25rem;
}
.kit-reviews__cta { margin-top: var(--space-7); text-align: center; }

/* ===== Ikony społecznościowe w stopce ===== */
.kit-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.kit-footer__social a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--radius-md); border: 1px solid var(--border-subtle);
  color: var(--color-primary); transition: all var(--transition-fast);
}
.kit-footer__social a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.kit-footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ========================================================================
   STRONY PRAWNE (polityka prywatności itp.)
   ======================================================================== */
.kit-legal { padding-block: var(--space-8) var(--space-9); max-width: 820px; }
.kit-legal__body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-body); }
.kit-legal__body h2 {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium);
  color: var(--text-heading); margin-top: var(--space-7); margin-bottom: var(--space-3);
}
.kit-legal__body p { margin-bottom: var(--space-4); }
.kit-legal__body ul { margin: 0 0 var(--space-4) var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.kit-legal__body li { line-height: var(--leading-normal); }
.kit-legal__body a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.kit-legal__body a:hover { color: var(--color-link-hover); }

/* ========================================================================
   PRZYCISK „WRÓĆ NA GÓRĘ"
   ======================================================================== */
.kit-totop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 150;                 /* nad treścią, pod modalami */
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background var(--transition-fast);
}
.kit-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.kit-totop:hover { background: var(--color-primary-hover); }
.kit-totop:active { transform: translateY(1px); }

/* Na telefonie — nad mobilnym paskiem kontaktu (pasek ~84px), żeby się nie nakładały */
@media (max-width: 719px) {
  .kit-totop { bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 12px); right: 16px; }
}

/* Podtytuł „specjalista psychiatra" pod nazwiskiem w hero */
.kit-hero__role {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--color-primary);
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-4);
  letter-spacing: var(--tracking-tight);
}

/* ========================================================================
   PŁYWAJĄCY PRZYCISK MENU (mobilny) + WYSUWANE MENU
   ======================================================================== */
.kit-navbtn {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 180;
  width: 46px; height: 46px;
  display: none;                 /* widoczny tylko na mobile, po scrollu */
  place-items: center;
  border: none; cursor: pointer;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.kit-navbtn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Pokaż przycisk tylko gdy menu w nagłówku jest schowane (telefon/tablet) */
@media (max-width: 1080px) {
  .kit-navbtn { display: grid; }
}

/* Wysuwane menu */
.kit-mobilenav {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26, 36, 34, 0.5);
  backdrop-filter: blur(2px);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity var(--transition);
}
.kit-mobilenav.is-open { opacity: 1; }
.kit-mobilenav[hidden] { display: none; }

.kit-mobilenav__panel {
  width: min(82vw, 340px); height: 100%;
  background: var(--color-bg);
  padding: var(--space-7) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-5);
  box-shadow: -8px 0 32px rgba(26,36,34,0.18);
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
}
.kit-mobilenav.is-open .kit-mobilenav__panel { transform: translateX(0); }

.kit-mobilenav__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-heading); border-radius: var(--radius-md);
}
.kit-mobilenav__close:hover { background: var(--surface-panel); }

.kit-mobilenav__links { display: flex; flex-direction: column; gap: var(--space-2); }
.kit-mobilenav__links a {
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--text-heading); text-decoration: none;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle);
}
.kit-mobilenav__links a:hover { color: var(--color-primary); }
.kit-mobilenav__cta { margin-top: var(--space-3); justify-content: center; }