/* ──────────────────────────────────────────────────────────────
   kinemedica.pl — style nowej strony głównej
   2026-10-15

   Plik dokłada się do /styl.css i jest wczytywany WYŁĄCZNIE przez
   stronę główną oraz /dla-pacjentow/. Nie zmienia niczego na
   /incydent/, /dokumentacja/, /kontakt/, /polityka-prywatnosci/
   ani /deklaracja-dostepnosci/.

   Korzysta ze zmiennych i klas z /styl.css (.wrap, .btn, .karta,
   .oczko, .ikona, .siatka, panel dostępności). Tryb wysokiego
   kontrastu działa dalej — reguła `html[data-k-kontrast="1"] body *`
   w /styl.css obejmuje też sekcje opisane niżej; tutaj dokładamy
   tylko ukrycie dekoracji, która w tym trybie nie niesie treści.
   ────────────────────────────────────────────────────────────── */

:root{
  /* Złoto akcentów. Dwa warianty, bo ten sam odcień nie przechodzi
     progu kontrastu i na kremie, i na granacie. */
  --zloto:#8A6630;        /* na jasnym tle — 5.4:1 względem --tlo */
  --zloto-jasne:#D9B779;  /* na granacie   — 6.5:1 względem --navy */
  --krem:#F3EFE8;
}

/* ───── wspólne bloki ───── */

.blok{padding-block:clamp(2.75rem,6vw,4.5rem)}
.blok--krem{background:var(--krem);border-block:1px solid var(--linia)}
.blok--jasny{background:var(--tlo-2);border-bottom:1px solid var(--linia)}
.blok--biel{background:var(--powierzchnia)}
.blok--navy{background:var(--navy);color:#fff;border-block:1px solid var(--navy)}
.blok--navy h2,.blok--navy h3{color:#fff}
.blok--navy p{color:#E7EEF5}
.blok--navy .oczko{color:var(--zloto-jasne)}

.blok__lead{max-width:60ch}

/* Nadtytuł w złocie — wariant .oczko z /styl.css */
.oczko--zloto{color:var(--zloto)}

/* Nagłówki serif, jak w makiecie */
.tyt-duzy{font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.16;margin:0 0 1rem}
.tyt-sekcji{font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.22;margin:0 0 .35rem}

/* ───── blok dla pacjentów (pierwszy na stronie) ─────
   W makiecie nie ma tu kadru ze zdjęciem — jest sam turkusowy spad
   i delikatny cień liści po prawej. Robimy go z gałązki oliwnej
   (jedyna dostępna grafika o tym charakterze), odbitej w poziomie,
   wygaszonej i wtopionej w tło. Warstwa jest czysto ozdobna. */

.hero--pac{position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--turkus-tlo) 0%,var(--turkus-tlo-2) 52%,var(--tlo-2) 100%)}
.hero--pac::after{content:"";position:absolute;inset:0 0 0 auto;width:52%;
  background:url("/grafiki/historia-1400.webp") left center/cover no-repeat;
  transform:scaleX(-1);opacity:.42;mix-blend-mode:multiply;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%)}
.hero--pac .hero__in{position:relative;z-index:1;grid-template-columns:1fr}
.hero--pac h1{font-family:var(--serif)}
.hero--pac .hero__lead{font-weight:700;max-width:46ch}
.hero--pac p{max-width:62ch}

/* ───── układ dwukolumnowy: tekst + dekoracja ───── */

.dwu{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,3.25rem);align-items:center}
.dwu__tekst{min-width:0}

.art{border-radius:var(--r);overflow:hidden;background:var(--turkus-tlo-2);
     border:1px solid var(--linia-2);aspect-ratio:3/2}
.art img{display:block;width:100%;height:100%;object-fit:cover}

/* ───── zdjęcie na spad do krawędzi okna ─────
   W makiecie zdjęcia w blokach „O nas” i „Nasza historia” wychodzą poza
   kolumnę tekstu aż do brzegu ekranu, bez ramki i zaokrągleń. Tekst zostaje
   w kontenerze, zdjęcie kładziemy bezwzględnie nad tłem sekcji. */

.blok--spad{position:relative;overflow:hidden}
.blok--spad > .wrap{position:relative;z-index:1}
.spad{position:absolute;top:0;bottom:0;width:44%;z-index:0}
.spad img{display:block;width:100%;height:100%;object-fit:cover}
.spad--prawo{right:0}
.spad--lewo{left:0}
/* Miękkie przejście w tło sekcji od strony tekstu. */
.spad--prawo{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);
             mask-image:linear-gradient(90deg,transparent 0%,#000 16%)}
.spad--lewo{-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 16%);
            mask-image:linear-gradient(270deg,transparent 0%,#000 16%)}
.blok--spad .dwu__tekst{max-width:min(54%,620px)}
.blok--spad.blok--spad-lewo .dwu__tekst{margin-left:auto}

/* ───── trzy wyróżniki ───── */

.wyr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
     gap:clamp(1rem,2.5vw,2rem);align-items:center}
.wyr__poz{display:flex;gap:.9rem;align-items:center;
          border-left:1px solid var(--linia);padding-left:clamp(1rem,2.5vw,2rem)}
.wyr__poz:first-child{border-left:0;padding-left:0}
.wyr__poz p{margin:0;font-size:.99rem;line-height:1.4;color:var(--atrament)}
/* W makiecie ikony są samą kreską w złocie, bez turkusowego kafelka.
   Reguła CSS wygrywa z atrybutem stroke wpisanym w znacznik SVG. */
.wyr .ikona{flex:0 0 auto;width:32px;height:32px;background:none;border-radius:0;
            margin:0;display:block}
.wyr .ikona svg{width:32px;height:32px;stroke:var(--zloto)}

/* ───── karty marek ───── */

.marki{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.25rem}
/* Karta bez wewnętrznego odstępu — zdjęcie dochodzi do krawędzi, jak w makiecie.
   Odstęp dostaje sama kolumna z tekstem. */
.marka{background:var(--powierzchnia);border:1px solid var(--linia);border-radius:var(--r);
       overflow:hidden;display:grid;grid-template-columns:1fr .72fr;align-items:stretch}
.marka__tresc{padding:1.75rem;display:flex;flex-direction:column;min-width:0}
.marka__foto{min-height:100%}
.marka__foto img{display:block;width:100%;height:100%;object-fit:cover}
.marka__znak{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;
             font-size:clamp(1.9rem,4vw,2.5rem);line-height:1;color:var(--navy);margin:0}
.marka__znak i{font-style:normal;color:var(--turkus)}
.marka__pod{margin:.5rem 0 0;font-size:.9rem;color:var(--mute);font-weight:600}
.marka__kreska{width:46px;height:2px;background:var(--zloto);border:0;margin:1.1rem 0 1rem}
.marka p{margin:0 0 1.25rem}
.marka__akcja{margin-top:auto}

/* Nota zamiast przycisku tam, gdzie nie ma zweryfikowanego adresu.
   Świadomie nie dajemy martwego odnośnika ani „#”. */
.marka__nota{margin:auto 0 0;font-size:.92rem;color:var(--mute)}

/* ───── partnerstwo sportowe ─────
   Zdjęcie jako tło sekcji, przykryte granatowym gradientem od lewej, żeby
   tekst miał pełny kontrast niezależnie od kadru. Tło jest ozdobne, więc
   w trybie wysokiego kontrastu znika razem z regułą background-image:none
   z /styl.css — i nic nie trzeba dopisywać. */

.blok--lks{position:relative;background-color:var(--navy);
  background-image:linear-gradient(95deg,var(--navy) 0%,rgba(30,68,104,.97) 34%,rgba(30,68,104,.72) 58%,rgba(30,68,104,.30) 82%,rgba(30,68,104,.18) 100%),url("/grafiki/lks-1000.webp");
  background-size:cover;background-position:center right}

@media (min-width:821px){
  .blok--lks{background-image:linear-gradient(95deg,var(--navy) 0%,rgba(30,68,104,.97) 30%,rgba(30,68,104,.70) 54%,rgba(30,68,104,.26) 80%,rgba(30,68,104,.12) 100%),url("/grafiki/lks-1600.webp")}
}

.znacznik{display:inline-flex;align-items:center;gap:.6rem;margin:1.25rem 0 0;
          font-size:.92rem;letter-spacing:.04em;color:var(--zloto-jasne)}
.znacznik::before{content:"";width:26px;height:2px;background:var(--zloto-jasne);flex:0 0 auto}

/* ───── projekty ───── */

.lata{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.1rem}
.lata .karta{padding:1.4rem 1.5rem}
.rok{font-size:.95rem;font-weight:700;color:var(--zloto);margin:0 0 .4rem;letter-spacing:.04em}
.lata h3{font-size:1.08rem;margin:0 0 .5rem}
.lata p{margin:0;font-size:.97rem;color:var(--mute);line-height:1.5}

/* ───── blok dla dawnych pacjentów ───── */

.pac__naglowek{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:end;margin-bottom:1.6rem}
.pac__naglowek p{margin:0;color:var(--mute)}
/* W makiecie to zwykłe odnośniki z ikoną, rozdzielone pionową kreską —
   nie kafelki w ramkach. */
.pac-linki{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
           gap:clamp(1rem,2.5vw,2rem);align-items:center}
.pac-linki a{display:flex;gap:.8rem;align-items:center;color:var(--atrament);
             text-decoration:underline;text-underline-offset:4px;font-size:1rem;
             border-left:1px solid var(--linia);padding:.4rem 0 .4rem clamp(1rem,2.5vw,2rem)}
.pac-linki a:first-child{border-left:0;padding-left:0}
.pac-linki a:hover{color:var(--turkus)}
.pac-linki .ikona{flex:0 0 auto;width:30px;height:30px;background:none;border-radius:0;margin:0;display:block}
.pac-linki .ikona svg{width:30px;height:30px;stroke:var(--zloto)}
.pac-linki a span.strzalka{margin-left:auto;color:var(--turkus);text-decoration:none}

/* Stopka jest granatowa na całej witrynie — reguły siedzą w /styl.css,
   żeby podstrony dostały ten sam wygląd bez zmiany ich znaczników. */

/* ───── nawigacja: „Dla pacjentów” zawsze widoczne ─────
   Na telefonie reszta menu chowa się pod przycisk, ale wejście
   dla pacjentów zostaje na wierzchu. */

.nav-pac{display:none}

/* Układ z grafiką po lewej (sekcja „Nasza historia trwa dalej”). */
.dwu--odwrocony{grid-template-columns:.8fr 1.2fr}
.dwu--odwrocony .art{aspect-ratio:4/3}

@media (max-width:820px){
  .dwu,.dwu--odwrocony{grid-template-columns:1fr;gap:1.4rem}
  .pac__naglowek{grid-template-columns:1fr;gap:.5rem;align-items:start}
  .art,.dwu--odwrocony .art{aspect-ratio:16/10}
  /* Na telefonie zdjęcie marki jako pasek nad tekstem — kolumny się nie mieszczą. */
  .marka{grid-template-columns:1fr}
  .marka__foto{order:-1;height:160px;min-height:0}
  .blok--lks{background-position:72% center}
  /* Zdjęcia na spad wracają do normalnego biegu, pod tekstem. */
  .blok--spad{display:flex;flex-direction:column}
  .blok--spad > .wrap{order:0}
  .spad{position:static;width:100%;height:190px;margin-top:1.4rem;order:1;
        -webkit-mask-image:none;mask-image:none}
  .blok--spad .dwu__tekst{max-width:none;margin-left:0}
  /* Wyróżniki i odnośniki pacjenckie: kreski pionowe nie mają sensu w słupku. */
  .wyr__poz,.pac-linki a{border-left:0;padding-left:0}
  .wyr__poz{border-top:1px solid var(--linia);padding-top:.9rem}
  .wyr__poz:first-child{border-top:0;padding-top:0}
  .hero--pac::after{width:68%;opacity:.3}
  .nav-pac{display:inline-flex;align-items:center;margin-inline-start:auto;
           background:var(--turkus-tlo);border-radius:999px;padding:.5rem 1rem;
           color:var(--atrament);text-decoration:none;font-size:.92rem;white-space:nowrap}
  .hd__in .burger{margin-inline-start:.6rem}
}

@media (max-width:420px){
  .blok{padding-block:clamp(2rem,8vw,2.75rem)}
  .marka{padding:1.4rem}
  .nav-pac{font-size:.86rem;padding:.45rem .8rem}
}

/* ───── tryb wysokiego kontrastu ─────
   Kolory przejmuje reguła z /styl.css. Tutaj tylko dekoracja,
   która bez kolorów nic nie wnosi. */

html[data-k-kontrast="1"] .art{display:none}
html[data-k-kontrast="1"] .spad{display:none}
html[data-k-kontrast="1"] .marka__foto{display:none}
html[data-k-kontrast="1"] .marka{grid-template-columns:1fr}
html[data-k-kontrast="1"] .marka__kreska{display:none}
html[data-k-kontrast="1"] .znacznik::before{background:#FFEB00!important}
/* Reguła `body *` z /styl.css nie obejmuje pseudoelementów — cień liści
   w bloku pacjenckim trzeba wyłączyć osobno. */
html[data-k-kontrast="1"] .hero--pac::after{display:none}
html[data-k-kontrast="1"] .blok--spad .dwu__tekst{max-width:none}

@media print{
  .art{display:none}
}