/* ============================================================
   ORTOMED — sklep medyczny i ortopedyczny w Lublinie
   arkusz stylów
   ------------------------------------------------------------
   Zbudowany na bazie szablonu z folderu _szablon.

   ODBIORCA STRONY: osoby starsze, chore i ich opiekunowie.
   Dlatego w całym pliku obowiązują trzy zasady:
   1. duża czcionka bazowa (18 px) i luźne odstępy między wierszami,
   2. wysoki kontrast — żadnych jasnoszarych napisów na białym,
   3. prosty układ i duże pola klikalne (przyciski, numer telefonu).
   Jeśli będziesz coś zmieniać — nie schodź poniżej tych wartości.

   Układ pliku:
   1. Zmienne (:root)      <- TU zmieniasz kolory, fonty, odstępy
   2. Reset i podstawy
   3. Elementy wspólne (kontener, przyciski, nagłówki sekcji)
   4. Sekcje po kolei (pasek + logo, hero, wyróżniki, asortyment,
                       opinie, kontakt, stopka)
   5. Responsywność (telefon / tablet / komputer)
   ============================================================ */


/* ============================================================
   1. ZMIENNE — CAŁA SKÓRKA STRONY W JEDNYM MIEJSCU
   ------------------------------------------------------------
   Poniżej siedzą WSZYSTKIE kolory motywu. Nigdzie dalej w tym pliku
   nie ma już wpisanego "na sztywno" żadnego koloru — zmiana wartości
   tutaj przemalowuje całą stronę.

   Motyw: BIEL + GRANAT + CZERWIEŃ (kolory z logo Ortomed).
   Zasada, na której zbudowana jest paleta:
   - granat   = nagłówki, nawigacja, ramy — buduje powagę i zaufanie,
   - czerwień = TYLKO to, w co klient ma kliknąć lub co ma zauważyć
                (telefon, przyciski, NFZ). Używana oszczędnie, bo inaczej
                przestaje przyciągać wzrok,
   - biel i bardzo jasny błękit = tła, na przemian między sekcjami.

   UWAGA NA PARY "hex + rgb":
   niektóre kolory są potrzebne także w wersji półprzezroczystej
   (cienie, delikatne tła). Przeglądarka nie umie sama rozłożyć kodu
   #rrggbb na liczby, dlatego ten sam kolor jest zapisany DWA RAZY:
   raz jako #hex, raz jako "R, G, B". Zmieniasz jeden — zmień drugi.
   Konwerter: wpisz w Google "hex to rgb".
   ============================================================ */
:root {
  /* --- KOLOR GŁÓWNY: granat (nagłówki, nawigacja, ikony) --- */
  --kolor-glowny:        #1b4b9c;      /* granat z logo */
  --kolor-glowny-ciemny: #163d80;      /* ciemniejszy — najazd myszą */
  --kolor-glowny-tekst:  #1b4b9c;      /* do napisów na białym (kontrast 8,6:1) */
  --kolor-glowny-rgb:    27, 75, 156;  /* to samo co --kolor-glowny, liczbami */

  /* --- KOLOR AKCENTU: czerwień (telefon, przyciski, NFZ) ---
         Stosuj oszczędnie. Czerwień ma na tej stronie jedno zadanie:
         prowadzić wzrok do kontaktu. */
  --kolor-akcent:        #d62828;      /* tło przycisków "Zadzwoń" */
  --kolor-akcent-ciemny: #b91d1d;      /* najazd myszą */
  --kolor-akcent-tekst:  #b91d1d;      /* czerwone NAPISY na białym (kontrast 6,4:1;
                                          jaśniejszy #d62828 byłby za słaby dla drobnego tekstu) */
  --kolor-akcent-rgb:    214, 40, 40;  /* to samo co --kolor-akcent, liczbami */

  /* --- KOLOR DETALU (cienkie linie, obwódki, ikony pomocnicze) --- */
  --kolor-detal:         #c2d4ee;      /* jasny błękit */

  /* --- KOLOR DODATKOWY (opcjonalny) ---
         Ledwo widoczna poświata u góry sekcji hero. Ten sam granat,
         żeby strona trzymała się dwóch kolorów marki. */
  --kolor-dodatkowy:     #1b4b9c;
  --kolor-dodatkowy-rgb: 27, 75, 156;

  /* --- KOLORY NAPISÓW NA PLAMACH KOLORU --- */
  --kolor-na-akcencie:   #ffffff;      /* napis na granatowym i czerwonym przycisku */
  --kolor-na-ciemnym:    #ffffff;      /* napis na ciemnym tle (stopka) */

  /* --- TŁA ---
     Rytm sekcji: delikatny błękit / biel, oba bardzo jasne. Karty z treścią
     zostają CZYSTO BIAŁE — dzięki temu odskakują od błękitu, a tekst w nich
     jest maksymalnie ostry. Błękit jest celowo ledwo odbiegający od bieli:
     ociepla stronę, ale nie zabiera kontrastu (grafit na #eef4fb to 14:1,
     tekst pomocniczy 6,8:1 — oba znacznie powyżej normy WCAG AA). */
  --tlo:            #eef4fb;           /* bardzo jasny błękit — tło strony i co druga sekcja */
  --tlo-rgb:        238, 244, 251;     /* to samo, liczbami (do półprzezroczystych warstw) */
  --tlo-przyciemn:  #ffffff;           /* biel — sekcje przeplatające błękit */
  --tlo-karty:      #ffffff;           /* kafelki, dane kontaktowe — zawsze biel */
  --tlo-karty-rgb:  255, 255, 255;     /* to samo, liczbami */
  --tlo-paska:      rgba(var(--tlo-karty-rgb), .97);  /* pasek górny — biały, prawie kryjący */
  --tlo-stopki:     #172f57;           /* ciemny granat — domknięcie strony */

  /* --- NAPISY ---
     Uwaga: --tekst-jasny jest CELOWO ciemniejszy niż w typowych szablonach.
     Przy naszych odbiorcach jasnoszary tekst na bieli odpada. */
  --tekst:          #20242b;           /* ciemny grafit — tekst i nagłówki */
  --tekst-rgb:      32, 36, 43;        /* to samo, liczbami (cienie) */
  --tekst-jasny:    #4d5563;           /* tekst pomocniczy (kontrast 7,9:1 na bieli) */
  --tekst-stopki:       rgba(255, 255, 255, .88);  /* tekst w granatowej stopce */
  --tekst-stopki-slaby: rgba(255, 255, 255, .68);  /* drobna notka na samym dole */

  /* --- LINIE --- */
  --linia:          #dde5f0;           /* kolor cienkich obramowań */

  /* --- TYPOGRAFIA ---
     Inter: bardzo czytelny bezszeryfowy krój o dużej wysokości x
     (litery są "wysokie", co pomaga przy słabszym wzroku).
     Nagłówki to ten sam krój w grubości 700 — bez ozdób.
     Fonty ładuje <link> w <head> pliku index.html. */
  --font-naglowki: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-tresc:    "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- KSZTAŁT I GŁĘBIA --- */
  --promien:       12px;  /* zaokrąglenie rogów kart */
  --promien-maly:  8px;   /* przyciski — prostokątne z lekko ściętym rogiem */
  --cien:          0 6px 18px rgba(var(--tekst-rgb), .07);
  --cien-mocny:    0 12px 30px rgba(var(--tekst-rgb), .11);

  /* --- ODSTĘPY --- */
  --szerokosc-strony: 1140px; /* maksymalna szerokość treści */
  --odstep-sekcji:    clamp(60px, 8vw, 104px); /* "powietrze" nad i pod sekcją */
}


/* ============================================================
   2. RESET I PODSTAWY
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;   /* płynne przewijanie po kliknięciu w menu */
  scroll-padding-top: 90px;  /* żeby przyklejony pasek nie zasłaniał nagłówka sekcji */
}

/* Tło strony siedzi na <html>, a nie na <body> — dzięki temu kolor tła
   wypełnia okno także wtedy, gdy treści jest mniej niż wysokość ekranu. */
html {
  background-color: var(--tlo);
}

body {
  margin: 0;
  background-color: transparent;
  color: var(--tekst);
  font-family: var(--font-tresc);
  font-size: 18px;      /* baza celowo większa niż typowe 16 px — patrz nagłówek pliku */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: var(--font-naglowki);
  font-weight: 700;     /* Inter w grubości 700 — solidnie, bez ozdób */
  line-height: 1.25;
  margin: 0;
  color: var(--tekst);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

/* Wyraźna obwódka przy poruszaniu się po stronie klawiszem Tab.
   Ciemniejsza odmiana koloru głównego — jasna byłaby na jasnym tle niewidoczna. */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--kolor-glowny-tekst);
  outline-offset: 3px;
}

/* Link "Przejdź do treści" — niewidoczny, dopóki nie zostanie zaznaczony klawiaturą */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: var(--tekst);
  color: var(--kolor-na-ciemnym);
  padding: 10px 18px;
  border-radius: var(--promien-maly);
}


/* ============================================================
   3. ELEMENTY WSPÓLNE
   ============================================================ */

/* Kontener trzyma treść na środku i nie pozwala jej rozjechać się na szerokim ekranie */
.container {
  width: 100%;
  max-width: var(--szerokosc-strony);
  margin-inline: auto;
  padding-inline: 22px;
}

/* --- Przyciski ---
   .btn to baza, a modyfikatory (--gold, --ghost, --outline) zmieniają kolory. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;   /* duże pole klikalne — łatwiej trafić palcem */
  border-radius: var(--promien-maly);
  border: 1px solid transparent;
  font-family: var(--font-tresc);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover {
  transform: translateY(-2px); /* delikatne uniesienie przy najeździe myszą */
}

/* CZERWONY — jedyne, najważniejsze wezwanie do działania: "Zadzwoń".
   Na całej stronie nie ma innego czerwonego przycisku, żeby ten nie miał
   konkurencji. Biała cyfra na czerwieni: kontrast 4,8:1. */
.btn--akcent {
  background-color: var(--kolor-akcent);
  color: var(--kolor-na-akcencie);
  box-shadow: 0 6px 16px rgba(var(--kolor-akcent-rgb), .30);
}
.btn--akcent:hover {
  background-color: var(--kolor-akcent-ciemny);
  box-shadow: 0 10px 22px rgba(var(--kolor-akcent-rgb), .40);
}

/* GRANATOWA OBWÓDKA — przycisk drugoplanowy ("Dojazd / Mapa").
   Obwódka ma 2 px, żeby była wyraźna także przy słabszym wzroku. */
.btn--ghost {
  background-color: var(--tlo-karty);
  border-width: 2px;
  border-color: var(--kolor-glowny);
  color: var(--kolor-glowny-tekst);
}
.btn--ghost:hover {
  background-color: var(--kolor-glowny);
  color: var(--kolor-na-ciemnym);
}

/* obwódka w kolorze głównym — na jasnym tle, np. media społecznościowe */
.btn--outline {
  background-color: transparent;
  border-color: var(--kolor-glowny-tekst);
  color: var(--kolor-glowny-tekst);
}
.btn--outline:hover {
  background-color: var(--kolor-glowny-tekst);
  color: var(--kolor-na-ciemnym);
}

.btn--sm    { padding: 12px 22px; font-size: 15px; }
.btn--block { display: flex; width: 100%; margin-top: 26px; }

/* Zwykły link w treści */
.link {
  color: var(--kolor-glowny-tekst);
  font-weight: 600;
  text-decoration-color: var(--kolor-detal);
  text-underline-offset: 4px;
}

/* --- Nagłówki sekcji --- */
.section {
  padding-block: var(--odstep-sekcji);
}
.section--tinted {
  background-color: var(--tlo-przyciemn);
}

/* mały napis nad tytułem sekcji (przyciemniony kolor główny — czytelny na jasnym tle) */
.section__eyebrow,
.hero__eyebrow {
  margin-bottom: 10px;
  color: var(--kolor-glowny-tekst);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.section__title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
}

/* kreseczka w kolorze głównym pod tytułem sekcji */
.section__title::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin-top: 18px;
  background-color: var(--kolor-glowny);
}

.section__lead {
  max-width: 54ch;
  margin-top: 16px;
  color: var(--tekst-jasny);
}


/* ============================================================
   4a. PASEK GÓRNY (sticky) + LOGO
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--tlo-paska);
  backdrop-filter: blur(10px);          /* delikatne rozmycie tła pod paskiem */
  border-bottom: 1px solid var(--linia);
  transition: box-shadow .2s ease;
}

/* klasę dokłada script.js po przewinięciu strony w dół */
.topbar.is-scrolled {
  box-shadow: var(--cien);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--tekst);
  text-decoration: none;
}

/* LOGO w pasku.
   Plik images/logo.png jest poziomy (napis ORTOMED + symbol) i ma prawdziwe
   przezroczyste tło, więc nie trzeba żadnych sztuczek — sterujemy wysokością,
   szerokość dobiera się sama, a contain pilnuje, żeby nic nie zostało przycięte.
   Nazwy firmy NIE powtarzamy obok logo — jest już w samym znaku. */
.topbar__logo {
  height: 50px;
  width: auto;
  flex-shrink: 0;         /* nie kurczy się przy ciasnym pasku */
  object-fit: contain;
}

.topbar__nav {
  display: none; /* na telefonie ukryte — pokazuje się dopiero na szerszym ekranie */
  gap: 26px;
}
.topbar__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--tekst);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.topbar__nav a:hover {
  color: var(--kolor-glowny-tekst);
  border-bottom-color: var(--kolor-glowny);
}


/* ============================================================
   4b. HERO
   ============================================================ */
.hero {
  /* Spokojne, jasne tło: ledwo widoczny błękitny odcień u dołu,
     żeby hero łagodnie przechodziło w pasek z wyróżnikami. */
  background:
    linear-gradient(180deg, var(--tlo) 0%, var(--tlo-przyciemn) 100%);
  color: var(--tekst);
  text-align: center;
  border-bottom: 1px solid var(--kolor-detal); /* cienka linia w kolorze detalu pod hero */
}

.hero__inner {
  padding-block: clamp(76px, 13vw, 148px);
}

/* Nazwa firmy w hero. Bez ozdobników — sama nazwa, mocno i czytelnie. */
.hero__title {
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: -.01em;
  color: var(--kolor-glowny-tekst);
}

/* Podtytuł tuż pod nazwą — mówi wprost, czym jest firma. */
.hero__podtytul {
  margin-top: 10px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 600;
  color: var(--tekst);
}

.hero__tagline {
  max-width: 56ch;
  margin: 22px auto 0;
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--tekst-jasny);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;          /* na wąskim ekranie przyciski przechodzą do drugiej linii */
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
}

.hero__note {
  margin-top: 28px;
  color: var(--tekst-jasny);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Gdy w tle hero jest zdjęcie, dopisz klasę "hero--foto" do <section class="hero">
   w index.html — napisy dostaną delikatny biały poblask, który odcina je od zdjęcia. */
.hero--foto .hero__title,
.hero--foto .hero__tagline,
.hero--foto .hero__eyebrow,
.hero--foto .hero__note {
  text-shadow: 0 1px 2px rgba(var(--tlo-karty-rgb), .9);
}


/* ============================================================
   4c. ASORTYMENT — kafelki kategorii
   ============================================================ */
.cards {
  display: grid;
  /* auto-fit + minmax = kafelki same układają się w tyle kolumn, ile się zmieści */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 44px;
}

.card {
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 32px 28px;
  box-shadow: var(--cien);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--cien-mocny);
  border-color: var(--kolor-detal);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: rgba(var(--kolor-glowny-rgb), .14);
  color: var(--kolor-glowny-tekst);
}
.card__icon svg {
  width: 30px;
  height: 30px;
}

.card__title {
  font-size: 25px;
}

.card__text {
  margin-top: 10px;
  color: var(--tekst-jasny);
  font-size: 15.5px;
}


/* ============================================================
   4d. OPINIE
   ============================================================ */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 44px;
}

.rating {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 28px 24px;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  text-align: center;
}

.rating__stars {
  color: var(--kolor-glowny-ciemny);
  font-size: 20px;
  letter-spacing: .16em;
}
.rating__score {
  font-family: var(--font-naglowki);
  font-size: 48px;
  font-weight: 700;
  color: var(--kolor-glowny-tekst);
  line-height: 1.1;
}
.rating__source {
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
}
.rating__count {
  color: var(--tekst-jasny);
  font-size: 14px;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.quote {
  position: relative;
  margin: 0;
  padding: 30px 28px 26px;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-left: 3px solid var(--kolor-glowny);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}
.quote p {
  font-family: var(--font-naglowki);
  font-size: 22px;
  font-style: italic;
  line-height: 1.55;
}
.quote cite {
  display: block;
  margin-top: 16px;
  color: var(--tekst-jasny);
  font-size: 14px;
  font-style: normal;
  letter-spacing: .04em;
}


/* ============================================================
   4e. KONTAKT
   ============================================================ */
.contact__info {
  margin-top: 26px;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  padding: 34px 30px;
  box-shadow: var(--cien);
}

.info-row + .info-row {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--linia);
}

.info-row__label {
  font-family: var(--font-tresc);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kolor-glowny-tekst);
  margin-bottom: 6px;
}

.info-row__value {
  font-size: 18.5px;
}

/* Przyciski mediów społecznościowych. DO UZUPEŁNIENIA: klient nie podał
   jeszcze adresów profili, więc w index.html są zakomentowane — ta reguła
   czeka gotowa na moment, gdy linki się pojawią. */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--linia);
}


/* ============================================================
   4f. STOPKA
   ============================================================ */
.footer {
  background-color: var(--tlo-stopki);
  color: var(--tekst-stopki);
  padding-block: 46px;
  text-align: center;
  border-top: 3px solid var(--kolor-glowny); /* pasek w kolorze głównym oddzielający stopkę */
}

.footer__brand {
  font-family: var(--font-naglowki);
  font-size: 34px;
  color: var(--kolor-na-ciemnym);
}
.footer__meta {
  margin-top: 8px;
  font-size: 14px;
}
.footer__note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--tekst-stopki-slaby);
}


/* ============================================================
   4g. ELEMENTY WŁASNE ORTOMEDU
   ------------------------------------------------------------
   Cztery klocki, których nie ma w szablonie, bo wynikają wprost
   z tego, czego potrzebuje sklep medyczny:
     .atuty      — pasek "dlaczego my" tuż pod hero (NFZ, dowóz, dostęp)
     .cta-pas    — granatowy pas z zachętą do telefonu (stoi tam,
                   gdzie w szablonie był cennik)
     .telefon-box— wielki, klikalny numer telefonu w sekcji kontaktu
     .punkty     — dwa równorzędne punkty sklepu, każdy z mapą
     .odznaka    — wyróżnienie "Orły Medycyny" w rzędzie z ocenami
   ============================================================ */

/* --- PASEK WYRÓŻNIKÓW (tuż pod hero) --- */
.atuty {
  background-color: var(--tlo-przyciemn);
  border-bottom: 1px solid var(--linia);
  padding-block: clamp(28px, 4vw, 44px);
}

.atuty__lista {
  display: grid;
  grid-template-columns: 1fr;   /* na telefonie jeden pod drugim, szerzej — trzy obok siebie */
  gap: 18px;
}

.atut {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-left: 5px solid var(--kolor-glowny);  /* gruby pasek z lewej = łatwo zauważyć */
  border-radius: var(--promien);
  padding: 22px;
  box-shadow: var(--cien);
}

/* Kafelek o NFZ jest czerwony, bo to najczęstsze pytanie klientów. */
.atut--nfz {
  border-left-color: var(--kolor-akcent);
}

.atut__ikona {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(var(--kolor-glowny-rgb), .10);
  color: var(--kolor-glowny-tekst);
}
.atut--nfz .atut__ikona {
  background-color: rgba(var(--kolor-akcent-rgb), .10);
  color: var(--kolor-akcent-tekst);
}
.atut__ikona svg {
  width: 28px;
  height: 28px;
}

.atut__tytul {
  font-size: 19.5px;
  font-weight: 700;
  color: var(--kolor-glowny-tekst);
}
.atut--nfz .atut__tytul {
  color: var(--kolor-akcent-tekst);
}

.atut__tekst {
  margin-top: 5px;
  font-size: 17px;
  color: var(--tekst-jasny);
}

/* --- GRANATOWY PAS Z ZACHĘTĄ DO TELEFONU --- */
.cta-pas {
  background-color: var(--kolor-glowny);
  color: var(--kolor-na-ciemnym);
  text-align: center;
  padding-block: clamp(46px, 6vw, 76px);
}

.cta-pas__tytul {
  font-size: clamp(27px, 3.6vw, 40px);
  color: var(--kolor-na-ciemnym);
}

.cta-pas__tekst {
  max-width: 54ch;
  margin: 14px auto 0;
  font-size: 18.5px;
  color: var(--tekst-stopki);
}

.cta-pas .btn {
  margin-top: 28px;
}

/* --- WIELKI TELEFON W SEKCJI KONTAKTU ---
   Cały kafelek jest jednym wielkim odnośnikiem tel:, więc na telefonie
   wystarczy dotknąć gdziekolwiek, żeby zadzwonić. */
.telefon-box {
  display: block;
  text-align: center;
  text-decoration: none;
  background-color: var(--tlo-karty);
  border: 3px solid var(--kolor-akcent);
  border-radius: var(--promien);
  padding: 26px 22px;
  margin-top: 30px;
  box-shadow: var(--cien);
  transition: background-color .18s ease, box-shadow .18s ease;
}
.telefon-box:hover {
  background-color: rgba(var(--kolor-akcent-rgb), .06);
  box-shadow: var(--cien-mocny);
}

.telefon-box__etykieta {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
}

.telefon-box__numer {
  display: block;
  margin-top: 8px;
  font-size: clamp(34px, 5.6vw, 50px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kolor-akcent-tekst);
}

.telefon-box__opis {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  color: var(--tekst-jasny);
}

/* --- DWA PUNKTY SKLEPU --- */
.punkty {
  display: grid;
  grid-template-columns: 1fr;   /* szerzej — dwie kolumny (patrz sekcja 5) */
  gap: 22px;
  margin-top: 26px;
}

.punkt {
  display: flex;
  flex-direction: column;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  overflow: hidden;             /* przycina mapę do zaokrąglonych rogów */
}

.punkt__naglowek {
  padding: 24px 24px 20px;
}

.punkt__etykieta {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kolor-glowny-tekst);
}

.punkt__adres {
  margin-top: 8px;
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.5;
}

.punkt__mapa {
  margin-top: auto;             /* mapa zawsze przy dolnej krawędzi kafelka */
  border-top: 1px solid var(--linia);
}
.punkt__mapa iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

/* --- ODZNAKA WYRÓŻNIENIA (trzeci kafelek w rzędzie z ocenami) ---
   Dwa wieńce z plebiscytu plus podpis. Kafelek ma taką samą oprawę
   i taką samą elastyczność jak kafelki z ocenami (flex: 1 1 240px),
   więc na komputerze staje w jednym rzędzie z nimi, a na telefonie
   schodzi pod nie — bez żadnych dodatkowych reguł.
   Wysokość wieńców równa się wielkości plików (60 px): przy powiększaniu
   napisy w środku zaczynają się rozmywać, a to strona dla osób,
   którym wzrok już nie dopisuje. */
.odznaka {
  flex: 1 1 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  background-color: var(--tlo-karty);
  border: 1px solid var(--linia);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  text-align: center;
}

.odznaka__znaki {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.odznaka__znaki img {
  height: 60px;
  width: auto;
}

.odznaka__podpis {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--kolor-glowny-tekst);
}


/* ============================================================
   5. RESPONSYWNOŚĆ
   Strona jest napisana "od telefonu w górę" — poniżej tylko dokładki
   dla szerszych ekranów.
   ============================================================ */

/* Wąskie telefony: logo nieco niższe, a przycisk ciaśniejszy,
   żeby oba zmieściły się w jednej linii i pasek się nie tłoczył. */
@media (max-width: 479px) {
  .topbar__logo {
    height: 42px;
  }
  .btn--sm {
    padding: 11px 16px;
    font-size: 14px;
  }
}


/* Tablet i większe: wyróżniki i punkty sklepu w dwóch-trzech kolumnach */
@media (min-width: 760px) {
  .punkty {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .atuty__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet i większe: pokazujemy menu w pasku */
@media (min-width: 900px) {
  .topbar__nav {
    display: flex;
  }
}

/* Bardzo małe telefony: przyciski hero na całą szerokość */
@media (max-width: 420px) {
  .hero__actions .btn {
    width: 100%;
  }
}

/* Szanujemy ustawienie systemowe "ogranicz animacje" */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}