/* Higienizacja 4w1 – style globalne.
   Większość wyglądu siedzi w atrybutach style="" w index.html (tak jak w projekcie z Claude Design).
   Tutaj: podstawy, nagłówek i menu, stany :hover/:focus oraz wersja tablet/mobile. */

[hidden] { display: none !important; }

:root { --hg-header-h: 66px; } /* wysokość przyklejonego nagłówka – do przewijania do sekcji */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #FFFFFF; }
html, body { overflow-x: clip; }
button, input, select { font-family: inherit; }

/* Kotwice z menu nie chowają nagłówka pod przyklejonym headerem */
section[id], #rezerwacja { scroll-margin-top: calc(var(--hg-header-h) + 16px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: #00539F; }
a:hover { color: #291B00; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }


/* ===== NAGŁÓWEK ===== */

.hg-header { position: sticky; top: 0; z-index: 50; transition: box-shadow 0.2s; }
.hg-header.is-scrolled { box-shadow: 0 4px 16px rgba(11, 42, 91, 0.10); }

/* Logo: szare na przezroczystym tle; w granatowej stopce przemalowane na białe */
.hg-logo { width: 180px; height: auto; }
.hg-logo-foot { width: 180px; height: auto; filter: brightness(0) invert(1); }

/* Menu desktop: złote podkreślenie po najechaniu i dla sekcji, którą użytkownik właśnie ogląda */
.hg-nav a { position: relative; transition: color 0.15s; }
.hg-nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
  background: #CC9933; transform: scaleX(0); transition: transform 0.2s;
}
.hg-nav a:hover { color: #00539F !important; }
.hg-nav a:hover::after, .hg-nav a.is-active::after { transform: scaleX(1); }
.hg-nav a.is-active { color: #291B00 !important; }

/* Hamburger i menu mobilne – widoczne tylko poniżej 960 px */
.hg-burger { display: none; }
.hg-burger:hover { background: #F2F2F2 !important; }

.hg-mnav { border-top: 1px solid #E6E6E6; background: #FFFFFF; box-shadow: 0 12px 24px rgba(11, 42, 91, 0.12); }
.hg-mnav a:not(.hg-mnav-cta) {
  display: flex; align-items: center; min-height: 52px; padding: 0 12px;
  border-bottom: 1px solid #EFEFEF; border-left: 3px solid transparent;
  color: #291B00; font-size: 17px; font-weight: 600; text-decoration: none;
}
.hg-mnav a:not(.hg-mnav-cta):hover { background: #F7F7F7; }
.hg-mnav a.is-active { border-left-color: #CC9933; background: #F7F7F7; }
.hg-mnav-cta {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 16px;
  border-radius: 999px; background: #CC9933; color: #291B00; font-size: 17px; font-weight: 700; text-decoration: none;
}


/* ===== HERO: zdjęcie w karcie po lewej, nagłówek + widget po prawej ===== */
/* Karta ma ostre krawędzie i te same zaokrąglenia co reszta LP. Kadr jest przycięty do litej części zdjęcia,
   więc nie ma żadnego wygaszania ani "mgły". */

/* Wysokość karty ze zdjęciem jest STAŁA (zależy tylko od wysokości ekranu), więc zdjęcie nie skaluje się,
   gdy widget rośnie po wyborze miasta. Przy dłuższym widgecie karta jedzie obok (sticky). */
.hg-hero { overflow: clip; --hg-card-h: clamp(480px, calc(100vh - var(--hg-header-h) - 32px), 676px); /* 676 px = dół karty równo z dołem widgetu */ }
.hg-hero-in { min-height: calc(var(--hg-card-h) + 96px); } /* 96 px = padding góra + dół */

/* Kolumna na kartę: rozciąga się na wysokość wiersza, ale sama jej nie zwiększa (contain: size). */
.hg-hero-photo-wrap {
  grid-column: 1; grid-row: 1; align-self: stretch; contain: size; position: relative;
}
/* Sticky: przy wysokim (rozwiniętym) widgecie karta jedzie razem z przewijaniem – bez pustej plamy. */
.hg-hero-photo {
  position: sticky; top: calc(var(--hg-header-h) + 16px);
  height: var(--hg-card-h); margin: 0; overflow: hidden;
  border-radius: 28px; background: #F2F2F2; box-shadow: 0 18px 40px rgba(11, 42, 91, 0.14);
}
.hg-hero-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; }



/* ===== PAS "JAK WYGLĄDA REZERWACJA" (3 kroki pod hero) ===== */
.hg-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }
.hg-flow-step { position: relative; display: flex; align-items: center; gap: 14px; }
.hg-flow-num {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #CC9933; color: #291B00; font-weight: 900; font-size: 16px;
}
/* strzałka między krokami (desktop) */
.hg-flow-step:not(:last-child)::after {
  content: ''; position: absolute; right: -26px; top: 50%; width: 10px; height: 10px;
  border-top: 2.5px solid #CC9933; border-right: 2.5px solid #CC9933; transform: translateY(-50%) rotate(45deg);
}


/* ===== ELEMENTY STRONY ===== */

/* Wszystkie nagłówki sekcji w jednym rozmiarze (wcześniej 34–38 px) */
section h2:not(.hg-sr) { font-size: clamp(28px, 3vw, 36px) !important; }

/* Siatki kart bez "osieroconych" elementów: 4 zabiegi = 4 / 2 / 1 kolumna, 3 fakty = 3 / 1 kolumna */
#zabiegi > div:nth-child(2) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.hg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { #zabiegi > div:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) {
  #zabiegi > div:nth-child(2), .hg-facts { grid-template-columns: 1fr !important; }
}

/* Cele dotyku: link do mapy co najmniej 40 px (telefon: 44 px w bloku telefonu) */
#hg-loc-list a { min-height: 40px !important; }

/* Tekst tylko dla czytników ekranu */
.hg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Godziny w widgecie */
.hg-time:not(:disabled):not([aria-pressed="true"]):hover { border-color: #0B2A5B !important; background: #F2F2F2 !important; }

/* Przycisk "Przejdź do rezerwacji": przyklejony do dołu ekranu, dopóki widget jest widoczny.
   Działa, bo #rezerwacja ma overflow: clip (przy overflow: hidden sticky by nie zadziałał). */
.hg-cta {
  position: sticky; bottom: 0; z-index: 5;
  margin: -8px -24px -20px; padding: 12px 24px 16px;
  background: #FFFFFF; box-shadow: 0 -8px 16px -10px rgba(11, 42, 91, 0.25);
}
#hg-continue:disabled { background: #AAAAAA !important; color: #FFFFFF !important; cursor: progress !important; }

/* Lista rozwijana miast (telefon): własna strzałka zamiast systemowej */
.hg-city-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23CC9933' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

/* Nawigacja po datach */
.hg-datenav:not(:disabled):hover { background: #F2F2F2 !important; }
.hg-datenav:disabled { color: #AAAAAA !important; cursor: default !important; }

/* Stopka: linki prawne */
.hg-foot-links a { display: inline-flex; align-items: center; min-height: 36px; color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; }
.hg-foot-links a:hover { color: #F0D9A8; text-decoration: underline; text-underline-offset: 3px; }

/* Przyciski i elementy interaktywne */
.hg-btn:hover { background: #B8862A !important; color: #291B00 !important; }
.hg-ghost:hover { background: #F2F2F2 !important; }
.hg-outline:hover { background: #0B2A5B !important; color: #FFFFFF !important; }
.hg-faq-q:hover { background: #F7F7F7 !important; }
.hg-in:focus { outline: 2px solid #00539F; outline-offset: 1px; border-color: #00539F !important; }
button:focus-visible, a:focus-visible { outline: 2px solid #00539F; outline-offset: 2px; }


/* ===== MAŁY DESKTOP: mniej miejsca na menu, mniejsze zdjęcie i węższy widget ===== */
@media (max-width: 1199px) {
  .hg-hero-in { grid-template-columns: minmax(0, 1fr) 480px !important; }
}
@media (max-width: 1140px) {
  .hg-nav a { padding: 0 9px !important; font-size: 14px !important; }
  .hg-nav a::after { left: 9px; right: 9px; }
  .hg-tel-txt { display: none; }
}


/* ===== TABLET (≤ 960 px): hamburger zamiast menu, widget na całą szerokość ===== */
@media (max-width: 960px) {
  .hg-nav { display: none !important; }
  .hg-burger { display: inline-flex !important; }

  /* Hero: karta ze zdjęciem nad treścią, wszystko w jednej kolumnie */
  .hg-hero-in { grid-template-columns: 1fr !important; padding: 20px 20px 44px !important; gap: 24px !important; min-height: 0; }
  .hg-hero-photo-wrap { grid-row: auto; align-self: auto; contain: none; }
  .hg-hero-photo { position: relative; top: auto; height: 320px; border-radius: 24px; }
  .hg-hero-img { object-position: 62% 16%; }
  .hg-hero-main { grid-column: 1 !important; }


  /* "6 powodów": zdjęcie nad listą zamiast obok */
  .hg-benefits { grid-template-columns: 1fr !important; }
  .hg-benefits-img { order: -1; max-width: 360px; justify-self: center; }

  /* "Dlaczego Medicover": zdjęcie nad atutami */
  .hg-why-in { grid-template-columns: 1fr !important; }
  .hg-why-img { min-height: 0 !important; height: 300px !important; }

}


/* ===== TELEFON (≤ 600 px) ===== */
@media (max-width: 600px) {
  :root { --hg-header-h: 60px; }

  /* Nagłówek: logo + mały telefon + "Umów" + hamburger w jednej linii */
  .hg-head { padding: 8px 16px !important; gap: 8px !important; }
  .hg-logo { width: 128px; }
  .hg-head > a:first-child { min-height: 44px; }
  #hg-loc-list a { min-height: 44px !important; }
  .hg-head-actions { gap: 6px !important; }
  .hg-head-actions .hg-ghost { padding: 0 !important; width: 44px; justify-content: center; }
  .hg-head-cta { padding: 0 14px !important; font-size: 15px; }

  /* Hero */
  .hg-hero-in { padding: 16px 16px 32px !important; gap: 20px !important; }
  .hg-hero-photo { height: 230px; border-radius: 20px; }
  .hg-hero-img { object-position: 64% 14%; }
  .hg-hero-main { gap: 14px !important; }
  .hg-hero-in h1 { font-size: 32px !important; }
  .hg-hero-in h1 + p { font-size: 17px !important; }
  .hg-usp-in { padding: 20px 16px !important; }
  .hg-flow { grid-template-columns: 1fr; gap: 14px; }
  .hg-flow-step { align-items: flex-start; }
  .hg-flow-step:not(:last-child)::after { right: auto; left: 17px; top: 40px; bottom: -14px; width: 2px; height: auto; border: 0; background: #E0C38A; transform: none; }


  /* Widget */
  #rezerwacja { border-radius: 18px !important; }
  #rezerwacja > div:first-child { padding: 16px !important; }
  .hg-widget { padding: 18px 16px 20px !important; gap: 18px !important; }
  .hg-cta { margin: -8px -16px -20px; padding: 10px 16px 14px; }
  .hg-grid5 { gap: 6px !important; } /* 5 dni na stronę mieści się także na telefonie */
  #hg-range { font-size: 13px !important; }
  .hg-long { display: none; }

  /* Sekcje: węższe marginesy boczne i mniejsze odstępy pionowe */
  #zabiegi, #korzysci, #faq, .hg-facts, .hg-final, .hg-why, #placowki > div { padding-left: 16px !important; padding-right: 16px !important; }
  .hg-facts { gap: 12px !important; }
  #placowki > div { gap: 18px !important; }
  #faq { gap: 16px !important; }
  #zabiegi > div:first-child { margin-bottom: 20px !important; }
  #korzysci > div { border-radius: 20px !important; padding: 28px 20px !important; gap: 22px !important; }
  #korzysci a { width: 100%; justify-content: center; }
  .hg-benefits-img { max-width: 260px; margin: -4px 0 -8px; }
  .hg-facts > div { padding: 20px !important; }
  .hg-why-img { height: 210px !important; border-radius: 18px !important; }
  .hg-why-list { grid-template-columns: 1fr !important; gap: 18px !important; }
  #placowki a.hg-outline { width: 100%; justify-content: center; }
  /* Placówki: adresy w jednej kolumnie, przycisk na całą szerokość */
  #hg-loc-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  #hg-loc-cta { width: 100%; }
  .hg-faq-q { font-size: 16px !important; padding: 12px 16px !important; }
  #hg-faq > div > div { padding: 0 16px 16px !important; }
  .hg-final > div { border-radius: 20px !important; padding: 28px 20px !important; }
  .hg-final > div > div:last-child { width: 100%; flex-direction: column; }
  .hg-final > div > div:last-child a { justify-content: center; }
  section h2 { font-size: 27px !important; }

  /* Karty zabiegów: numer obok tytułu zamiast nad nim – krótsza lista */
  .hg-step { display: grid !important; grid-template-columns: 36px 1fr; column-gap: 12px !important; row-gap: 6px !important; padding: 18px !important; align-items: center; }
  .hg-step > span { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .hg-step > p { grid-column: 1 / -1; }

  /* Stopka */
  footer > div { padding: 28px 16px !important; }
  .hg-logo-foot { width: 150px; }
  .hg-foot-top { flex-direction: column; align-items: flex-start !important; gap: 12px !important; }
  .hg-foot-links { flex-direction: column; gap: 0 !important; }
  .hg-foot-links a { min-height: 44px; }
}


/* ===== BARDZO WĄSKIE TELEFONY (≤ 360 px) ===== */
@media (max-width: 360px) {
  .hg-head { padding: 8px 12px !important; gap: 6px !important; }
  .hg-logo { width: 108px; }
  .hg-head-cta { padding: 0 12px !important; font-size: 14px; }
  .hg-head-actions .hg-ghost { display: none !important; } /* ikona telefonu – numer jest też w końcowej sekcji */
}


/* ===== RYTM PIONOWY: jednakowe odstępy między sekcjami =====
   desktop 80 px · tablet 64 px · telefon 48 px (sekcje powiązane – "6 powodów" i fakty pod nim – bliżej) */
#zabiegi     { padding-top: 80px !important; padding-bottom: 40px !important; }
#korzysci    { padding-top: 40px !important; padding-bottom: 24px !important; }
.hg-facts    { padding-top: 0 !important;    padding-bottom: 40px !important; }
.hg-why      { padding-top: 40px !important; padding-bottom: 80px !important; }
#placowki > div { padding-top: 72px !important; padding-bottom: 72px !important; }
#faq         { padding-top: 80px !important; padding-bottom: 80px !important; }
.hg-final    { padding-top: 0 !important;    padding-bottom: 80px !important; }

@media (max-width: 960px) {
  #zabiegi     { padding-top: 64px !important; padding-bottom: 32px !important; }
  #korzysci    { padding-top: 32px !important; padding-bottom: 20px !important; }
  .hg-facts    { padding-bottom: 32px !important; }
  .hg-why      { padding-top: 32px !important; padding-bottom: 64px !important; }
  #placowki > div { padding-top: 56px !important; padding-bottom: 56px !important; }
  #faq         { padding-top: 64px !important; padding-bottom: 64px !important; }
  .hg-final    { padding-bottom: 64px !important; }
}
@media (max-width: 600px) {
  #zabiegi     { padding-top: 48px !important; padding-bottom: 24px !important; }
  #korzysci    { padding-top: 24px !important; padding-bottom: 16px !important; }
  .hg-facts    { padding-bottom: 24px !important; }
  .hg-why      { padding-top: 24px !important; padding-bottom: 48px !important; }
  #placowki > div { padding-top: 48px !important; padding-bottom: 48px !important; }
  #faq         { padding-top: 48px !important; padding-bottom: 48px !important; }
  .hg-final    { padding-bottom: 48px !important; }
}