:root{
  --brand:#1fa5b5;
  --ink:#4b5252;
  --ink-2:#343530;
  --bg:#ffffff;
  --elev: 0 6px 20px rgba(0,0,0,.06);
  --elev-2: 0 10px 28px rgba(0,0,0,.10);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ color:var(--ink-2); background:#fff; font-family: 'Catamaran', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Containers */
.container-xl{ max-width:1170px; }
@media (min-width:1400px){ .container-xl{ max-width:1320px; } }
@media (min-width:1600px){ .container-xl{ max-width:1440px; } }
@media (min-width:1920px){ .container-xl{ max-width:1520px; } }

/* Header */
.topbar{ background:#fff; }
.navbar-brand img{ height:48px; width:auto; display:block; }
@media (max-width:991.98px){ .navbar-brand img{ height:36px; } }
.contact-info a{ color:var(--brand); text-decoration:none; }
.navbar{ --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.navbar-nav{ position:relative; }
.navbar-nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#bababa; }
.navbar-nav .nav-link{ color:#4b5252; padding:10px 8px; border-bottom:2px solid transparent; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active{ color:var(--brand); border-bottom-color:var(--brand); }

/* Offcanvas */
.offcanvas.offcanvas-end{ box-shadow:-24px 0 48px rgba(0,0,0,.08); transition: transform .35s ease; }
.offcanvas .nav-link{ padding:.6rem 0; font-size:1.05rem; }
@media (prefers-reduced-motion: reduce){ .offcanvas{ transition:none; } }

/* HERO */
.hero{ position:relative; padding: clamp(56px, 8vh, 120px) 0; overflow:clip; }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.35) 60%, transparent 100%); pointer-events:none; }
.hero .hero-grid{ display:grid; gap: clamp(20px, 2vw, 40px); align-items:center; grid-template-columns: 1.05fr 0.95fr; }
.hero h1{ font-size: clamp(2.0rem, 2.8vw + 1rem, 3.2rem); letter-spacing:.02em; color:#2c3d3d; }
.hero p{ max-width: 48ch; font-size: clamp(1.0rem, .5vw + .8rem, 1.125rem); }
.btn-brand{ background:var(--brand); color:#fff; border:0; }
.btn-brand:hover{ filter:brightness(.95); color:#fff; }
.btn-outline-brand{ border-color:var(--brand); color:var(--brand); }
.btn-outline-brand:hover{ background:var(--brand); color:#fff; }
.hero .hero-media img{ width:100%; height:auto; display:block; transform:translateZ(0); border-radius:8px; }
/* Fallback tło, zanim dojadą obrazy */
.hero .hero-media{ min-height:420px; background: linear-gradient(180deg,#f7fbfb,#eef6f6); border-radius:8px; }
.card img{ background:#f5fafb; }

/* Cards – Grid + Bento */
.section-cards{ container-type: inline-size; }
.cards{ display:grid; gap:24px; grid-template-columns:repeat(3,1fr); }
.card{ border:none; border-radius:14px; box-shadow:var(--elev); overflow:hidden; transform:translateZ(0); background:#fff; }
.card .card-body{ padding:20px; }
.card h3{ font-size:1.125rem; letter-spacing:.04em; }
.card:hover{ transform:translateY(-3px) scale(1.01); box-shadow:var(--elev-2); transition:transform .25s ease, box-shadow .25s ease; }
.card img{ aspect-ratio:4/3; object-fit:cover; display:block; }

@media (min-width: 1200px){
  /* === UKŁAD BENTO (Z POPRAWNIE ZINTEGROWANYM HOTFIXEM) === */
  .cards.bento{ 
    grid-template-areas:
      "wide wide small1"
      "wide wide small2";
    grid-template-columns: 2fr 2fr 1.5fr;
  }
  
  /* --- POCZĄTEK POPRAWKI (wierna kopia z hotfixa) --- */
  .section-cards .cards.bento .card.card--wide{
    grid-area: wide;
    display: grid !important;
    grid-template-rows: 1fr auto;  
    grid-template-columns: 1fr; /* Resetujemy kolumny */
    align-items: stretch;
    gap: 0;
  }
  .section-cards .cards.bento .card.card--wide > picture,
  .section-cards .cards.bento .card.card--wide > img{
    grid-row: 1 / 2;
    grid-column: 1 / -1; /* Rozciąga na całą szerokość */
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
  }
  .section-cards .cards.bento .card.card--wide > .card-body{
    grid-row: 2 / 3;
    grid-column: 1 / -1; /* Rozciąga na całą szerokość */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
  }
  /* --- KONIEC POPRAWKI --- */

  .cards.bento article:nth-child(2){ grid-area: small1; }
  .cards.bento article:nth-child(3){ grid-area: small2; }

  /* === DRUGI UKŁAD BENTO === */
  .cards.bento.bento--alt{ 
  grid-template-areas:
    "small1 tall tall"
    "small2 tall tall";
  grid-template-columns: 1.5fr 2fr 2fr; /* Teraz proporcje są identyczne */
}
  
  .cards.bento.bento--alt article:nth-child(1){ grid-area: small1; }
  .cards.bento.bento--alt .card--tall{ grid-area: tall; }
  .cards.bento.bento--alt article:nth-child(3){ grid-area: small2; }
}

@container (max-width: 900px){ .cards{ grid-template-columns:1fr; } }

/* Waves */
.waves{ position:relative; background:#3c8b90; }
.waves h3{ position:relative; z-index:2; font-weight:600; }
.waves .waves-bg{ position:absolute; inset:auto 0 0 0; width:100%; height:160px; }

/* CTA band */
.cta-band{ background:linear-gradient(180deg,#f7fbfb, #eef6f6); }
.cta-badge{ width:52px; height:52px; border-radius:50%; background:#fff; box-shadow:var(--elev); display:grid; place-items:center; color:var(--brand); font-size:1.4rem; }

/* Testimonials */
.testimonials{ background:linear-gradient(180deg,#f7fbfb, #eef6f6); }
.testimonials .swiper{ padding: 8px 8px 32px; }
.testimonials blockquote{ margin:0; padding: clamp(16px, 3vw, 28px); background:#fff; border-radius:14px; box-shadow:var(--elev); }
.testimonials footer{ margin-top:12px; color:#6b7a7a; font-size:.95rem; }
.testimonials .swiper-pagination{ position: static; margin-top:14px; }

/* Reveal on scroll (IO) */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* Footer */
.site-footer .socials a:hover{ color:var(--brand) !important; }

/* Accessibility: skip link */
.skip-link{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ left:0; top:0; width:auto; height:auto; padding:.5rem 1rem; background:#000; color:#fff; z-index:10000; }

.logo-text {
  position: relative; /* <-- Kluczowe: tworzy kontekst dla kreski */
  text-decoration: none;
  line-height: 1.1;
  
  /* Używamy marginesów do pozycjonowania, a nie paddingu */
  margin-top: 25px;
  margin-bottom: 12px;

  /* Padding tylko po lewej, aby odsunąć tekst od kreski */
  padding-left: 20px; 
}

/* Ta nowa sekcja tworzy samą kreskę */
.logo-text::before {
  content: ''; /* Wymagane dla pseudo-elementu */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; /* <-- Kluczowe: rozciąga kreskę na idealną wysokość tekstu */
  width: 3px; /* Grubość kreski */
  background-color: var(--brand); /* Kolor kreski */
}

.logo-text:hover {
  opacity: 0.9;
}

.logo-text .logo-line-1 {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--brand);
  text-transform: uppercase;
}

.logo-text .logo-line-2 {
  display: block;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0.2px;
}

/* ============================================== */
/* === Kontakt w Nagłówku (Powiększenie i Kolory) === */
/* ============================================== */

.contact-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  
  /* Twój powiększony rozmiar bazowy dla całego bloku */
  font-size: 1.4rem; 
}

/* Kolor dla ikony i etykiety "szybki kontakt:" */
.contact-info .bi-telephone,
.contact-info span {
  color: var(--ink-2); /* Używa ciemniejszego, standardowego koloru tekstu */
}

/* Twoje powiększenie samej ikony */
.contact-info .bi-telephone {
  font-size: 1.6rem;
}

/* Specjalny, zielony kolor dla samego numeru telefonu */
.contact-info a {
  color: var(--brand); /* Używa koloru z motywu theme-lime.css */
  font-weight: 600; /* Dodajemy lekkie pogrubienie dla wyróżnienia */
}

/* Opcjonalnie: Delikatne przyciemnienie numeru po najechaniu myszką */
.contact-info a:hover {
  color: var(--brand-strong);
}
/* ============================================== */
/* === Ikona Nad Tekstem na Pasie z Falami === */
/* ============================================== */

.waves h3::before {
  content: "\F33E"; /* Kod ikony "rozwijającego się listka" */
  font-family: "bootstrap-icons";
  display: block;
  font-size: 2.5rem; /* Wielkość ikony */
  margin-bottom: 1rem; /* Odstęp od tekstu poniżej */
  color: var(--brand); /* Używa głównego koloru motywu */
}
/* ============================================== */
/* === Separator w Kafelkach === */
/* ============================================== */

.section-cards .card .card-body h3::after {
  content: '';
  display: block;
  width: 50px; /* Długość kreski */
  height: 2px; /* Grubość kreski */
  background-color: var(--brand); /* Używa koloru z motywu lime */
  margin-top: 0.75rem; /* Odstęp od nagłówka */
  margin-bottom: 1rem; /* Odstęp od tekstu poniżej */
}
/* ============================================== */
/* === Hierarchia Tekstu w Kafelkach Bento === */
/* ============================================== */

/* Powiększamy tekst w dużym, szerokim kafelku */
@media (min-width: 1200px) {
  /* Stosujemy te same style do obu dużych kafelków za pomocą przecinka */
  .card.card--wide .card-body h3,
  .card.card--tall .card-body h3 {
    font-size: 2rem;
  }

  .card.card--wide .card-body p,
  .card.card--tall .card-body p {
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

/* ================================================= */
/* === Hierarchia Tekstu w Odwróconym Bento === */
/* ================================================= */

/* Powiększamy tekst w dużym, wysokim kafelku */
@media (min-width: 1200px) {
  .card.card--tall .card-body h3 {
    font-size: 1.7rem; /* Identycznie jak w card--wide */
  }
  .card.card--tall .card-body p {
    font-size: 1.2rem; /* Identycznie jak w card--wide */
    line-height: 1.4;
  }
}
/* ======================================================== */
/* === Spójność Wysokiego Kafelka (Czytelnia) === */
/* ======================================================== */

@media (min-width: 1200px) {
  /* Sprawiamy, że treść w .card-body rozciąga się na 100% wysokości */
  .card.card--tall .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kluczowe: pozwala elementowi się rozciągnąć */
  }

  /* Wypychamy przycisk na sam dół jego kontenera */
  .card.card--tall .card-body .btn {
    margin-top: auto;
  }
}
/* ============================================== */
/* === Cytat w Kafelku "Czytelnia" === */
/* ============================================== */

@media (min-width: 1200px) {
  /* Układ flex dla .card-body (już to mamy, ale upewniamy się) */
  .card.card--tall .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  /* Przycisk na dół (już to mamy, ale upewniamy się) */
  .card.card--tall .card-body .btn {
    margin-top: auto;
  }
  
  /* Style dla samego bloku cytatu */
  .pull-quote {
    border-left: 3px solid var(--brand); /* Zielona kreska po lewej */
    padding-left: 1.5rem;
    margin: auto 0; /* KLUCZOWE: Wypełnia pustą przestrzeń i centruje się w niej */
    font-style: italic;
    color: var(--ink); /* Delikatnie jaśniejszy kolor tekstu */
  }

  /* Styl tekstu cytatu */
  .pull-quote p {
    font-size: 1.1em; /* Rozmiar względny do tekstu kafelka */
    margin-bottom: 0.5rem;
  }
  
  /* Styl podpisu pod cytatem */
  .pull-quote footer {
    font-size: 0.9em;
    color: var(--ink-2);
    font-style: normal;
    font-weight: 600;
  }
}
/* ================================================= */
/* === ULEPSZENIA KOŃCOWYCH SEKCJI STRONY === */
/* ================================================= */

/* --- 1. Sekcja "Call to Action" (Doświadczenie) --- */
.cta-band {
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23a3e635' fill-opacity='0.08'%3E%3Cpath d='M0 0h80v80H0z'/%3E%3Cpath d='M28 28.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm24 0a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-12 24a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm-12-12a2.5 2.5 0 100-5 2.5 2.5 0 000 5zm24 0a2.5 2.5 0 100-5 2.5 2.5 0 000 5z'/%3E%3C/g%3E%3C/svg%3E"), 
    linear-gradient(180deg, var(--lime-50), var(--lime-100));
  background-color: var(--lime-50);
  border-top: 1px solid var(--lime-200);
  border-bottom: 1px solid var(--lime-200);
}
.cta-badge {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 2px 4px rgba(255,255,255,0.5);
}
.cta-band .btn-brand:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* --- 2. Karuzela z Opiniami v1 (Klasyczna Elegancja) --- */
.testimonials blockquote {
  position: relative; /* Kontekst dla cudzysłowu */
  background: #fff; /* Białe tło dla "pudełka" */
  border-radius: 14px;
  padding: 2rem;
  /* Cień z głównego stylu .card, dla spójności */
  box-shadow: var(--elev); 
}
.testimonials blockquote::before {
  content: '“';
  position: absolute;
  right: 1.5rem;
  top: 1rem;
  font-size: 8rem;
  line-height: 1;
  color: var(--lime-100); /* Bardzo jasny, subtelny kolor tła */
  z-index: 0;
}
.testimonials .content-wrapper {
  position: relative; /* Aby treść była NAD cudzysłowem */
  z-index: 1;
}
.stars-rating {
  font-size: 1.2rem;
  color: #ffc107; /* Złoty kolor gwiazdek */
  margin-bottom: 1rem;
}
.testimonials footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.5rem;
}
.testimonial-author {
  font-weight: 600;
}
.testimonial-date {
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.8;
}
/* Paginacja w kolorze brandu */
.testimonials .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--brand);
  opacity: 0.5;
}
.testimonials .swiper-pagination-bullet-active {
  opacity: 1;
}
/* Paginacja w kolorze brandu */
.testimonials .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--brand);
  opacity: 0.5;
}
.testimonials .swiper-pagination-bullet-active {
  opacity: 1;
}

/* --- 3. Stopka (Footer) --- */
.site-footer {
  background-color: var(--lime-50);
  border-top: 1px solid var(--lime-200);
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: var(--ink);
}
.site-footer a {
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.site-footer a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.social-icon {
  font-size: 1.5rem; /* Powiększenie ikon */
}
/* ============================================== */
/* === Poprawki Stylu Sekcji z Opiniami === */
/* ============================================== */

.testimonials footer {
  /* Układamy autora i datę w jednej linii */
  display: flex;
  justify-content: space-between; /* Autor lewo, data prawo */
  align-items: baseline; /* Wyrównuje tekst do linii bazowej */
  margin-top: 1.5rem; /* Zwiększa odstęp od tekstu opinii */
}

.testimonial-author {
  font-weight: 600; /* Delikatne pogrubienie autora */
}

.testimonial-date {
  font-size: 0.9rem; /* Zmniejsza czcionkę daty */
  color: var(--ink); /* Używa trochę jaśniejszego koloru tekstu */
  opacity: 0.8; /* Lekka przezroczystość dla subtelności */
}
/* ============================================== */
/* === Link "Konto Pacjenta" w Nagłówku === */
/* ============================================== */

.patient-account-link {
  font-size: 1.4rem; /* Dopasowanie do wielkości "szybki kontakt" */
  color: var(--brand); /* Użycie koloru z motywu */
  transition: color 0.2s ease;
}

.patient-account-link:hover {
  color: var(--brand-strong); /* Delikatne przyciemnienie po najechaniu */
}
/* ============================================== */
/* === Ujednolicenie Ikon w Nagłówku === */
/* ============================================== */

.patient-account-link .bi-person-fill {
  /* Zmiana koloru ikony na taki sam jak słuchawki */
  color: var(--ink-2);
  
  /* Dopasowanie rozmiaru ikony do rozmiaru słuchawki */
  font-size: 1.6rem; 
}