/* =========================================================
   MAIN / BASE STYLES
   Plik bazowy całego projektu.
   Tu są TYLKO rzeczy globalne.
   ========================================================= */


/* =========================================================
   1. ZMIENNE GLOBALNE
   - szerokość strony
   - gutter (boczne odstępy)
   - wysokość menu (źródło prawdy dla layoutu)
   ========================================================= */

:root {
  --page-max: 1180px;
  --gutter: 18px;
  --menu-h: 42px;
  --offer-max: 1200px;
  --site-max: var(--offer-max, 1200px);
  --site-pad: 24px;

  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text: 16px;         /* baza */
  --lh: 1.15;           /* baza */
  --text-color: rgba(0,0,0,0.72);

  /* warianty głębi */
  --bg-0: #ffffff;      /* czyste, karta / kontrast */
  --bg-1: #f6f8fb;      /* bardzo lekko */
  --bg-2: #e9eef3;      /* OFFER   - punkt odniesieni*/
  --bg-3: #d6dee6;      /* -1: / CENNIK/ rules*/
  --bg-4: #c9d3dc;      /* -2: wyraźnie głębiej, nadal czysto */
  --bg-5: #bcc7d1;      /* -3: sekcja „cięższa”, pod kontakt / stopkę */
  --bg-6: #aebac5;
}


/* =========================================================
   2. RESET / NORMALIZACJA
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: var(--text); 
}


/* =========================================================
   3. BODY – TYPOGRAFIA + TŁO GLOBALNE
   - font dla całej strony
   - globalne tło (delikatne gradienty)
   - padding-top kompensuje fixed menu
   ========================================================= */

body {
  font-family: var(--font-base);
  line-height: var(--lh);
  color: var(--text-color);

  background:
    radial-gradient(
      1400px 600px at 30% -10%,
      rgba(120,160,190,0.18),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #dbe3ea 0%,
      #d2dde5 100%
    );

  /* menu jest fixed – cała strona zaczyna się poniżej */
  padding-top: var(--menu-h);
}


/* =========================================================
   4. MEDIA (obrazy, svg, video)
   - zapobiega wyjeżdżaniu poza kontener
   ========================================================= */

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   5. TYPOGRAFIA BAZOWA
   - zerujemy domyślne marginesy
   - kolory linków dziedziczone
   ========================================================= */

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}


/* =========================================================
   6. KONTAINER UNIWERSALNY
   - wspólny wrapper dla sekcji
   ========================================================= */

.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}


/* =========================================================
   7. MAIN – WARSTWA POD TREŚCIĄ
   - pseudo-element daje delikatny gradient u góry strony
   - NIE wpływa na hero / news (one mają własne tła)
   ========================================================= */

main {
  position: relative;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;

  background: linear-gradient(
    180deg,
    rgba(20,30,45,0.55),
    rgba(20,30,45,0.25),
    transparent
  );

  pointer-events: none;
  z-index: 0;
}

/* wszystko w main jest nad gradientem */
main > * {
  position: relative;
  z-index: 1;
}

.section {
  background: var(--bg-2); /* domyślnie jak Offer */
}

.section--bg-0 { background: var(--bg-0); }
.section--bg-1 { background: var(--bg-1); }
.section--bg-2 { background: var(--bg-2); }
.section--bg-3 { background: var(--bg-3); }
.section--bg-4 { background: var(--bg-4); }
.section--bg-5 { background: var(--bg-5); }
.section--bg-6 { background: var(--bg-6); }

/* opcjonalnie: delikatny “szum”/głębia bez kombinowania w sekcjach */
.section--bg-0,
.section--bg-1,
.section--bg-2,
.section--bg-,
.section--bg-4,
.section--bg-5,
.section--bg-6 {
  background-image:
    radial-gradient(1200px 500px at 30% -10%, rgba(255,255,255,0.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));
  background-blend-mode: normal;
}

.section__wrap {
  width: min(var(--site-max), calc(100% - 48px));
  margin: 0 auto;
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(200, 208, 214, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-banner__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.cookie-banner__text a {
  color: inherit;
  text-decoration: underline;
}

.cookie-banner__button {
  border: 0;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
}

.cookie-banner__button:hover {
  background: rgba(0, 0, 0, 0.25);
}

@media (max-width: 820px) {
  .section__wrap {
    width: min(var(--site-max), calc(100% - 36px));
  }
}