/* SPA Korona — baza: zmienne, reset, typografia, kontener, komponent .card, ścieżka okruszkowa, stopka.
   Zastępuje core.css, mobile.css i spa.css (patrz docs/redesign-css-plan.md);
   tu są też karuzela i komponenty podstron (hero, offer, table, contact, gallery, prose). */

:root {
  --bar: #023238;
  --teal: #1792a1;
  --teal-deep: #0f7c8a;   /* tło pod biały tekst: 5:1, a #1792a1 daje 3,7:1 */
  --lime: #bed63a;
  --cream: #d7dfab;
  --sky: #a9dae0;
  --ink: #0e555d;          /* było #116771 — 4,0:1 na limonce; teraz ≥4,7:1 na kremie, limonce i zebrze */
  --page-bg: #096772;
  --footer-text: #c2dee0; /* było #6aadb4 — 2,6:1 na tle strony */
  --menu-dots: #37b1bf;   /* separator pozycji menu nagłówka */

  /* kolor karty wybiera klasa na <body> (niżej) */
  --card: var(--cream);
  --card-text: var(--ink);
  --link: #0a5560;
  --path-link: #446556;
  --tint: rgba(17,103,113,.08);   /* lekkie tło kart i przycisków wewnątrz .card */

  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Archivo', Arial, sans-serif;
  --arch-h: 18px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg) 50% 0 no-repeat url('../images/bkg.jpg'); }
body {
  font: 1rem/1.6 var(--font-body);
  color: #fff; }

/* --- kolory karty per strona --- */
body.page    { --card: var(--cream);    --card-text: var(--ink); --link: #0a5560; --path-link: #446556; }
body.oferta  { --card: var(--teal-deep); --card-text: #fff;       --link: #fff;    --path-link: #f2f9fa; --tint: rgba(0,0,0,.12); }
body.kontakt { --card: var(--lime);     --card-text: var(--ink); --link: #0a5560; --path-link: #2f5d42; }
body.galerie { --card: #0b434a;         --card-text: #fff;       --link: #fff;    --path-link: #8fc2c7; --tint: rgba(255,255,255,.12); }

/* --- typografia --- */
h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 5px;
  padding: 0;
  line-height: 1.15; }
h1, h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: .875rem; }

p { margin: 0; padding: 0 0 10px; }

a { color: inherit; font-weight: bold; text-decoration: underline; }
a:hover { text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; margin: 0; padding: 0; border: 0; }
a span { cursor: pointer; }

table { border: 0; margin: 0; padding: 0; border-collapse: collapse; }
th { font-weight: bold; text-align: center; }
td { padding: 0; }

ul, ol { margin: 0; padding: 10px 10px 10px 30px; }
ul { list-style: disc; }
dt { padding-top: 5px; }
dd { margin-bottom: 5px; }

form { margin: 0; padding: 0; }
select, input, button, textarea { background: #fff; font: inherit; color: #000; }
button { cursor: pointer; }

/* --- kontener --- */
.external { width: 100%; max-width: 960px; margin: 0 auto; }

.header_hook { position: relative; z-index: 1; height: 37px; }
.header { position: absolute; top: 0; left: 0; width: 100%; height: 130px; }
.header ul { display: block; margin: 0; padding: 0; outline: 0; border: 0; }

/* zdjęcie u góry podstrony; łuk karty zachodzi na jego dolny brzeg */
.decorator { position: relative; z-index: 0; display: flow-root; }
.decorator > img { width: 100%; }
.decorator > * { position: relative; z-index: 0; }

/* --- karuzela strony głównej: scroll-snap, bez JS przewijana ręcznie (js/carousel.js dokłada kropki i autoplay) --- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; }
.carousel.is-ready .carousel-track { scrollbar-width: none; }
.carousel.is-ready .carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

.slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 960 / 530;
  scroll-snap-align: start;
  scroll-snap-stop: always; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
/* podpis zawsze biały na gradiencie — zdjęcia są jasne i ciemne na przemian */
.slide figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 80px 30px 70px;
  background: linear-gradient(to top, rgba(2,50,56,.8), rgba(2,50,56,0));
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.slide h3 {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
.slide p { max-width: 32em; padding: 0; font-size: .9375rem; line-height: 1.45; }

.carousel-dots {
  position: absolute;
  left: 30px;
  bottom: 34px;
  display: flex;
  gap: 4px; }
.carousel-dots button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent; }
.carousel-dots button::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: transform .2s, background-color .2s; }
.carousel-dots button:hover::before { background: #fff; }
.carousel-dots button[aria-current="true"]::before { background: var(--lime); transform: scale(1.4); }

/* --- karta: tło w kolorze strony + łuk w lewym górnym rogu (maska SVG zamiast PNG-ów) --- */
.card {
  position: relative;
  z-index: 0;
  background: var(--card);
  color: var(--card-text); }
.card::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--arch-h) * -1);
  width: min(220px, 100%);
  height: var(--arch-h);
  background: var(--card);
  -webkit-mask: url('../images/arch.svg') 0 0 / 100% 100% no-repeat;
          mask: url('../images/arch.svg') 0 0 / 100% 100% no-repeat; }
.card a { color: var(--link); }

.card > .module { padding: 10px 30px 30px; }

/* galeria nie ma zdjęcia u góry — karta zaczyna się pod nagłówkiem (130 px, który wystaje poza .header_hook) */
body.galerie .card { padding: 120px 0 50px; }
body.galerie .card::before { display: none; }

/* --- ścieżka okruszkowa --- */
.path {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  font-size: .8125rem; }
.path li { margin: 0; padding: 0; color: var(--path-link); }
.path li + li::before { content: '\203A'; padding: 0 .6em; }
.path li a { color: var(--path-link); font-weight: normal; text-decoration: none; }
.path li a:hover { text-decoration: underline; }

/* --- strona główna: cztery kolorowe boksy, każdy z własnym łukiem --- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr); }
.cards > .card { font-size: .875rem; padding: 10px 30px 20px; min-height: 180px; }
.cards > .card p { padding: 10px 0 0; margin: 0; }
.cards > .card strong { font-size: .9375rem; }
.cards > .card a { text-decoration: none; }
.cards > .card a:hover { text-decoration: underline; }
.cards > .card:nth-child(1) { --card: #11646e; --card-text: #fff; --link: #cbde60; }
.cards > .card:nth-child(2) { --card: var(--teal-deep); --card-text: #fff; --link: #f6fae5; }
.cards > .card:nth-child(3) { --card: var(--lime); --card-text: var(--ink); --link: var(--ink); }
.cards > .card:nth-child(4) { --card: var(--cream); --card-text: var(--ink); --link: var(--ink); }
.cards > .card strong a { color: inherit; }

/* --- stopka --- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  border-top: 16px solid var(--bar);
  padding: 20px 0 50px;
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--footer-text); }
.footer a { color: var(--footer-text); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer p, .footer ul { margin: 0; padding: 0; }
.footer p a { font-weight: normal; }
.footer ul { display: flex; flex-wrap: wrap; list-style: none; }
.footer ul li { margin: 0; padding: 0 0 0 10px; }
.footer ul li a { display: block; padding: 0 5px; }

/* --- podstrony: zdjęcie u góry (makro hero) --- */
.hero { width: 100%; aspect-ratio: 960 / 351; object-fit: cover; }

/* --- boksy oferty (makro offer): na telefonie karta ze zdjęciem u góry,
   od 601 px obrazek z lewej i płasko, od 1001 px dwie kolumny --- */
.offer-grid { display: grid; gap: 16px; margin: 10px 0 0; }
.offer {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 12px;
  background: var(--tint);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font-size: .875rem;
  line-height: 1.5; }
.offer-img img { width: 100%; aspect-ratio: 172 / 114; object-fit: cover; border-radius: 8px; }
.offer h3 { margin: 12px 0 6px; font-size: 1.375rem; }
.offer h3 a { color: inherit; }
.offer a { text-decoration: none; }
.offer a:hover { text-decoration: underline; }
.offer p { padding: 0 0 6px; }
.offer .more { margin-top: auto; padding: 4px 0 0; }
.offer .more a {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--tint);
  font-size: .8125rem; }

@media (min-width: 601px) {
  .offer-grid { gap: 24px; }
  .offer {
    display: grid;
    grid-template-columns: 172px 1fr;
    gap: 0 20px;
    align-items: start;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none; }
  .offer-img img { border-radius: 0; }
  .offer h3 { margin: 0 0 4px; }
  .offer .more a { padding: 0; border-radius: 0; background: none; }
}
@media (min-width: 1001px) {
  .offer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
}

/* --- tabele (cennik, godziny na Kontakcie, porównanie saun): zebra, nagłówek w kolorze tekstu,
   za szeroka tabela przewija się we własnym pojemniku zamiast całej strony --- */
.table-wrap { overflow-x: auto; margin: 10px 0 15px; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; }
.table th, .table td { padding: 8px 12px; text-align: left; vertical-align: top; }
.table thead th { background: var(--ink); color: #fff; }
.table tbody tr:nth-child(odd) { background: var(--tint); }
.table tbody tr { border-bottom: 1px solid var(--tint); }
.table .r { text-align: right; white-space: nowrap; }
.table sup { line-height: 0; }
/* dwie równe kolumny długiego tekstu (porównanie saun): na telefonie ciaśniej, żeby kolumny nie były „słupkami" */
.table.halves th, .table.halves td { width: 50%; padding: 8px; font-size: .875rem; }
@media (min-width: 601px) {
  .table.halves th, .table.halves td { padding: 8px 12px; font-size: .9375rem; }
}
.note { font-size: .875rem; }

/* --- dwie kolumny treści (cennik), na telefonie jedna pod drugą --- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 40px; }
.split h3 { margin-top: 0; }
@media (min-width: 601px) {
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* --- kontakt: dane + mapa, od 1001 px obok siebie (mapa szersza) --- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 40px; }
.contact h3 { margin-top: 0; }
.contact .map { display: block; width: 100%; aspect-ratio: 10 / 7; border: 1px solid #458861; }
@media (min-width: 1001px) {
  .contact { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .contact .table td { white-space: nowrap; }
}

/* --- galeria: miniatury 172×114 w siatce, ile się zmieści (telefon 2, desktop 5); powiększenie robi fancybox --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; }
.gallery a { display: block; border-radius: 6px; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 172 / 114; object-fit: cover; transition: opacity .2s; }
.gallery a:hover img { opacity: .85; }

/* --- teksty ciągłe (porady, regulamin, wynajem): wiersz do ~70 znaków, oddech między sekcjami --- */
.prose { max-width: 70ch; }
.prose h3 { margin: 28px 0 8px; font-size: 1.25rem; }
.prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding: 0 0 12px 1.4em; }
.prose li { padding: 0 0 4px; }
.prose li::marker { color: var(--teal); }
.prose sup { line-height: 0; }
.prose + .offer-grid { margin-top: 20px; }

/* --- logotypy kart sportowych (Fit Profit, Benefit) --- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 30px; padding: 10px 0; }

/* --- narzędzia --- */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

@media (max-width: 1000px) {
  .card > .module { padding: 15px; }
  .slide figcaption { padding-inline: 15px; }
  .carousel-dots { left: 11px; }
  body.galerie .card { padding-top: 0; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards > .card { min-height: 0; }
  .footer { padding: 20px 15px 40px; }
}
@media (max-width: 600px) {
  .slide { aspect-ratio: 4 / 3; }
  .slide figcaption { padding: 60px 15px 48px; }
  .slide p { font-size: .875rem; }
  .carousel-dots { left: 11px; bottom: 22px; }
  .cards { grid-template-columns: 1fr; }
  .cards > .card { padding: 14px 20px 18px; }
}