@charset "UTF-8";
/* =============================================================================
   site.css — charakter EURODENT Stomatologia (na wierzchu tokens.css + styles.css)
   Kierunek: klasyczny-zaufany, spokojny, ekspercki. Hero split-asym (60/40).
   Podłącz jako TRZECI plik:  tokens.css  styles.css  site.css
   ============================================================================= */

/* --- Header / brand -------------------------------------------------------- */
.site-header .brand { display: flex; flex-direction: column; line-height: 1.2; }
.site-header .brand .brand-name {
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg);
  color: var(--text-strong); letter-spacing: -0.01em;
}
.site-header .brand .brand-tagline { color: var(--color-primary); font-weight: 600; }
.site-header nav a:not(.btn) { font-weight: 600; color: var(--text-body); }
.site-header nav a:not(.btn):hover { color: var(--color-primary); }
.site-header .btn-primary { background: var(--color-accent); color: var(--color-accentText); }

/* --- Eyebrow ----------------------------------------------------------------- */
.eyebrow { color: var(--color-primary); font-weight: 700; }

/* --- HERO split-asym --------------------------------------------------------
   60/40: treść | zdjęcie. Mobile: zdjęcie NAD treścią (dowód od razu), potem H1.
   H1 i CTA widoczne od 0. klatki — ŻADNEGO fx-mask/reveal/opacity:0 na tej sekcji. */
.hero-split {
  display: grid; gap: var(--space-7);
  grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(32px, 6vw, var(--space-8));
}
@media (min-width: 900px) {
  .hero-split { grid-template-columns: 1.05fr 0.85fr; gap: var(--space-8); }
}
.hero-split__media { order: -1; }
@media (min-width: 900px) { .hero-split__media { order: 2; } }
.hero-split__media .media-frame { --media-ratio: 4 / 3.3; }
.hero-split__content { min-width: 0; }
.hero-split h1 {
  font-size: clamp(2rem, 6vw, var(--fs-4xl));
  color: var(--text-strong);
  max-width: 16ch;
}
.hero-split .lead {
  color: var(--text-body); font-size: var(--fs-lg); max-width: 42ch; margin-top: var(--space-4);
}
.hero-split .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-split .hero-trust { margin-top: var(--space-6); }

/* --- Pasek liczb (count-up) -------------------------------------------------- */
/* L-050: pasek to pełnoszerokościowa wstęga (tło/ramka); GRID żyje na .stat-bar__grid
   wewnątrz .container — inaczej .container-wrapper lądował w 1. kolumnie i liczby
   ściskały się w lewej ćwiartce (prawa 3/4 pusta). */
.stat-bar {
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-7);
}
.stat-bar__grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .stat-bar__grid { grid-template-columns: repeat(4, 1fr); } }
.stat-bar__item { text-align: center; }
.stat-bar__num { display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.9rem, 5vw, var(--fs-3xl)); color: var(--color-accent); line-height: 1; }
.stat-bar__label { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Kafle „Dlaczego EURODENT" ----------------------------------------------- */
.why-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card { text-align: left; }
.why-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--color-primary100); color: var(--color-primary); margin-bottom: var(--space-4);
}
.why-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
.why-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Zakres leczenia (karty usług) -------------------------------------------- */
.service-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { display: flex; flex-direction: column; height: 100%; }
.service-card h3 { font-size: var(--fs-lg); }
.service-card h3 a { color: inherit; }
.service-card h3 a:hover { color: var(--color-primary); }
.service-card p { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-2); flex: 1; }
.service-card .service-note {
  margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-primary600); font-weight: 600;
}
.service-card .btn { margin-top: var(--space-4); align-self: flex-start; }

/* --- Jak wygląda wizyta (kroki) ------------------------------------------------ */
.steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; }
.step.card { padding-top: calc(var(--space-6) + 44px); }
.step:not(.card) { padding-top: var(--space-7); }
.step:not(.card)::before, .step.card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: var(--space-5, 24px); left: var(--space-5, 24px);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-accentText);
  display: grid; place-items: center; font-weight: 800; font-family: var(--font-heading);
}
.step:not(.card)::before { top: 0; left: 0; }
.step h3 { font-size: var(--fs-base); margin-bottom: var(--space-2); }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- Sekcja zaufania (2. ekspozycja zdjęcia gabinetu) ------------------------- */
.trust-photo { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .trust-photo { grid-template-columns: 0.9fr 1.1fr; } }
.trust-photo .media-frame { --media-ratio: 4 / 3; }

/* --- Opinie -------------------------------------------------------------------- */
.reviews-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-5); }

/* --- CTA finalny ---------------------------------------------------------------- */
.cta-final {
  background: var(--color-accent); color: var(--color-accentText);
  border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center;
}
.cta-final h2 { color: var(--color-accentText); }
.cta-final p { color: rgba(255,255,255,.86); max-width: 52ch; margin-inline: auto; }
.cta-final .cluster { justify-content: center; margin-top: var(--space-6); }
.cta-final .btn-primary { background: #fff; color: var(--color-accent); }
.cta-final .btn-primary:hover { background: #EAF4F3; }
.cta-final .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.cta-final .btn-ghost:hover { background: rgba(255,255,255,.12); }

/* --- Placeholder galerii "zamierzony element designu" -------------------------
   Wzór ząb/krzyż medyczny subtelny + etykieta „do dosłania" — NIE pusta dziura.
   Uwaga (L-030-podobna): ramka bywa WĄSKA (kolumna offer-card ~140-220px) — tekst
   MUSI się zmieścić: mniejsza czcionka, pełny wrap, brak sztywnego max-width w ch. */
.media-frame--slot { --media-ratio: 1 / 1; padding: var(--space-3); gap: var(--space-1); }
.media-frame--slot .media-name {
  max-width: 100%; font-size: 11px; line-height: 1.25; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.media-frame--slot .media-tag {
  display: inline-block; margin-top: 2px; font-size: 9px; max-width: 100%;
  white-space: normal; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase;
  color: var(--color-primary600); background: var(--color-primary100);
  padding: 2px 7px; border-radius: var(--radius-pill);
}
.media-frame--slot::before { width: clamp(18px, 4vw, 28px); height: clamp(14px, 3vw, 22px); margin-bottom: 2px; }
/* w wąskiej kolumnie offer-card (desktop) ramka bywa < 220px — daj jej oddech pionowo */
@media (min-width: 768px) {
  .offer-card .media-frame--slot { --media-ratio: 3 / 4; }
}

/* --- O nas: lekarze ------------------------------------------------------------- */
.doctor-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-6); }
@media (min-width: 700px) { .doctor-grid { grid-template-columns: repeat(2, 1fr); } }
.doctor-card { text-align: left; }
.doctor-card .media-frame { --media-ratio: 3 / 4; margin-bottom: var(--space-4); }
.doctor-card .media-frame--slot .media-name { font-size: var(--fs-sm); -webkit-line-clamp: 3; }
.doctor-card .media-frame--slot .media-tag { font-size: var(--fs-xs); }
.doctor-card h3 { font-size: var(--fs-lg); }
.doctor-card .doctor-role { color: var(--color-primary600); font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--space-2); }

/* --- FAQ nota do potwierdzenia --------------------------------------------------- */
.faq-note {
  display: inline-block; margin-top: var(--space-3); font-size: var(--fs-xs); font-weight: 600;
  color: #7A4A08; background: color-mix(in srgb, var(--warning) 18%, var(--color-surface));
  padding: 2px 10px; border-radius: var(--radius-pill);
}

/* --- Formularz kontaktowy -------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } }
.contact-map .media-frame { --media-ratio: 4 / 3; }
.contact-form { display: grid; gap: var(--space-4); }

/* --- Siatka usług z ikonami („Wykonujemy między innymi") --------------------- */
.svc-icons { display: grid; gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(2, 1fr); margin-top: var(--space-7); }
@media (min-width: 620px) { .svc-icons { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .svc-icons { grid-template-columns: repeat(5, 1fr); } }
.svc-icon { display: grid; justify-items: center; text-align: center; gap: var(--space-2); }
.svc-icon__badge { width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-primary); transition: transform var(--motion-dur) var(--motion-ease),
  background var(--motion-dur) var(--motion-ease); }
.svc-icon__badge svg { width: 34px; height: 34px; display: block; }
.svc-icon:hover .svc-icon__badge { transform: translateY(-4px);
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg)); }
.svc-icon__name { font-family: var(--font-heading); font-weight: 700;
  font-size: var(--fs-base); color: var(--text-strong); line-height: 1.25; }
.svc-icon__sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- Zespół lekarzy (bez zdjęć — karty nazwisko + tytuł + zakres) ------------ */
.team-plain { display: grid; gap: var(--space-5);
  grid-template-columns: 1fr; margin-top: var(--space-7); }
@media (min-width: 700px) { .team-plain { grid-template-columns: repeat(2, 1fr); } }
.doc-card { position: relative; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  border-top: 4px solid var(--color-primary); display: grid; gap: var(--space-3);
  transition: transform var(--motion-dur) var(--motion-ease), box-shadow var(--motion-dur) var(--motion-ease); }
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.doc-card__mono { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: var(--color-accent); color: #fff; font-family: var(--font-heading);
  font-weight: 800; font-size: var(--fs-lg); letter-spacing: .02em; }
.doc-card__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl);
  color: var(--text-strong); line-height: 1.15; }
.doc-card__title { color: var(--color-primary); font-weight: 600; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .05em; }
.doc-card__scope { color: var(--text-body); }
.doc-card__zl { font-size: var(--fs-sm); }

/* --- Umów wizytę (split: tekst + rezerwacja ZnanyLekarz) --------------------- */
.book-band { background: var(--color-accent); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8)); }
.book-band__grid { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 820px) { .book-band__grid { grid-template-columns: 1.4fr 1fr; } }
.book-band h2 { color: #fff; }
.book-band p { color: color-mix(in srgb, #fff 82%, transparent); margin-top: var(--space-3); }
.book-band .book-actions { display: grid; gap: var(--space-3); }
.book-band .btn-primary { background: #fff; color: var(--color-accent); border-color: #fff; }
.book-band .btn-primary:hover { background: color-mix(in srgb, #fff 88%, var(--color-primary)); }
.book-band .btn-ghost { color: #fff; border-color: color-mix(in srgb, #fff 55%, transparent); }
.book-band .btn-ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.book-band__note { font-size: var(--fs-sm); color: color-mix(in srgb, #fff 65%, transparent); margin-top: var(--space-2); }

/* 6 usług — równa siatka 2x3 (nadpisuje domyślne 5 kolumn) */
@media (min-width: 720px) { .svc-icons--3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-inline: auto; } }

/* filler-ilustracja w kaflu usługi (zapełniacz atmosfery, nie „nasza realizacja") */
.media-frame--illus { --media-ratio: 3 / 2; border-style: solid; border-color: var(--color-border); }

/* pas „Umów wizytę": zdjęcie-atmosfera (zadowolona pacjentka) + granatowy overlay = tekst czytelny */
.book-band {
  background-image: linear-gradient(100deg, rgba(18,60,90,.94) 0%, rgba(18,60,90,.90) 42%, rgba(18,60,90,.62) 100%),
                    url("images/fillers/patient-mirror-smile.jpg");
  background-size: cover; background-position: right 20%;
}

/* kafle usług w hubie: ikona usługi (każda inna) zamiast powtarzanych zdjęć */
.media-frame--icon { aspect-ratio: 3 / 2; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
  border: 1px solid var(--color-border); overflow: hidden; }
.media-frame--icon .offer-ic { display: grid; place-items: center; }
.media-frame--icon .offer-ic svg { width: clamp(46px, 9vw, 64px); height: auto; color: var(--color-primary); }
.media-frame--icon::before { content: none; display: none; }  /* bez bazowej ramki-placeholdera pod ikoną */
.book-band { background-image: none; }  /* uśmiech-lusterko przeniesiony na kafel higienizacji — pas czysty granat, bez powtórki */


/* --- klon: placeholder zdjecia gabinetu --- */
.media-frame--photoslot{aspect-ratio:auto;width:100%;max-width:100%;box-sizing:border-box;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1.5rem}
.hero-split__media .media-frame--photoslot{min-height:320px}
.book-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.media-frame--photo{aspect-ratio:3/4;position:relative;overflow:hidden;border-radius:var(--radius-md,10px)}
.media-frame--photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-frame--photo::before{content:none;display:none}
/* dlugie nazwy marek nie moga rozpychac naglowka (L-030) */
.brand{min-width:0}
.brand-name{overflow-wrap:anywhere;word-break:break-word;white-space:normal}

/* --- cennik --- */
.price-list{list-style:none;margin:var(--space-4,16px) 0 0;padding:0}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.7rem 0;border-bottom:1px solid var(--color-border,#e6e8eb)}
.price-name{color:var(--color-text)}
.price-val{font-weight:700;color:var(--color-accent);white-space:nowrap}
.price-groups{display:grid;gap:var(--space-5,24px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:var(--space-5,24px)}
.price-group{margin-top:0}
.price-group h3{margin-bottom:.2rem}
.price-group .price-list li:last-child{border-bottom:0}
.price-note{margin-top:var(--space-6,32px);font-size:var(--fs-sm,.9rem);color:var(--color-text-muted,#667085);max-width:72ch}
.price-teaser{max-width:640px;margin-inline:auto}