html{
  box-sizing: border-box;
}

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

:root{
  /* FONT FAMILIES */
  --ff-heading: "Kumbh Sans", sans-serif;
  --ff-ui: "Google Sans", "Inter", sans-serif;

  /* FONT WEIGHTS */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  /* COLORS */
  --color-page-title: #55769b;
  --color-page-title__tagline: #5a7ba0;
  --color-left__section: #ffdcb2;
  --color-site-footer: #ffdcb2;

  /* FLUID RANGE (controls when scaling happens) */
  --vw-min: 360px;   /* start scaling from small phones */
  --vw-max: 1280px;  /* stop scaling on desktop */

  /* FONT SIZES (tokens) */
  --fs-page-title-min: 100px;
  --fs-page-title-max: 200px;

  --fs-page-title__tagline-min: 23.7px;
  --fs-page-title__tagline-max: 49px;

  --fs-left__section: 22px;
  --fs-site-footer: 14px;
}

/* ---------- GLOBAL BASE ---------- */
body{
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: var(--fw-regular);
  font-style: normal;

  background-color: #000;
  color: #fff;

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  letter-spacing: 0.05em;

  /* te dwie właściwości są font-variable specyficzne;
     jeśli font ich nie wspiera, są po prostu ignorowane */
  font-optical-sizing: auto;
  font-variation-settings: "GRAD" 0;
}

/* 1. Tytuł strony */
.page-title{
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  color: var(--color-page-title);
}

/* 2. Motto / Tagline */
.page-title__tagline{
  font-family: var(--ff-heading);
  font-weight: var(--fw-medium);
  color: var(--color-page-title__tagline);

  /* FIX: poprawna zmienna */
  font-size: clamp(
    var(--fs-page-title__tagline-min),
    calc(
      var(--fs-page-title__tagline-min) +
      (var(--fs-page-title__tagline-max) - var(--fs-page-title__tagline-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    var(--fs-page-title__tagline-max)
  );
}

/* 3. Kontakt / lewa sekcja */
.left__section{
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-left__section);
  color: var(--color-left__section);
}

/* 4. Stopka */
.site-footer{
  font-family: var(--ff-ui);
  font-weight: var(--fw-light);
  font-size: var(--fs-site-footer);
  color: var(--color-site-footer);
}

/* ---------- HERO - background ---------- */
.top-banner{
  position: relative;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("../image/L_top.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: clamp(24px, 5vw, 80px);
}

.top-banner__content{
  max-width: 900px;
  margin-bottom: 269px;
}

.top-banner h1{
  /* Poprawny clamp, sterowany tokenami */
  font-size: clamp(
    var(--fs-page-title-min),
    calc(
      var(--fs-page-title-min) +
      (var(--fs-page-title-max) - var(--fs-page-title-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    var(--fs-page-title-max)
  );

  margin: 0 0 0px;
}

.top-banner h1 {
  text-shadow: 
    0 0 2px rgba(0, 0, 0, 0.997),
    0 0 16px rgba(0, 0, 0, 0.927),
    0 0 20px rgba(0, 0, 0, 0.875);
}

.top-banner__tagline{
  font-size: clamp(
    var(--fs-page-title__tagline-min),
    calc(
      var(--fs-page-title__tagline-min) +
      (var(--fs-page-title__tagline-max) - var(--fs-page-title__tagline-min)) *
      ((100vw - var(--vw-min)) / (var(--vw-max) - var(--vw-min)))
    ),
    var(--fs-page-title__tagline-max)
  );
  margin: 0;
}

/* sterowanie odległością pomiędzy h1 i tagline */
.page-title__tagline {
  margin-top: -28px;
}

/* obwiednia tagline */
.page-title__tagline{
  color: #5a7ba0;
  -webkit-text-stroke: 0.4px #000000;
  text-shadow: 
    0 0 10px rgba(0, 0, 0, 0.996),
    0 0 20px rgba(0, 0, 0, 0.975),
    0 0 40px rgba(0, 0, 0, 0.939);
}

/* 1/3 + 2/3 */
.content-wrapper { 
  display: grid;
  grid-template-columns: 1fr 2fr; /* dokładnie 1/3 i 2/3 */
  align-items: start;
}

.left__section {
  margin-left: 85px;
  margin-top: 32px;
}

.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__link {
  display: block;

  text-decoration: none;
  color: #ffdcb2;
  transition: opacity 0.99s ease;
}

.contact__link:hover{
  text-decoration: underline;
  opacity: 0.6;
}

.contact__link--primary {
  font-size: 40px;
}

.main-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.carousel-section {
  width: 100%;
}

@media (max-width: 900px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  .page-title__tagline {
  margin-top: -17px;
}
.left__section {
  margin-bottom: 19px;  
}
}

/* ---------- FOOTER LAYOUT (bez nadpisywania font-size) ---------- */
.site-footer{
  padding: 32px 24px;
  background: #111;
}

.site-footer a{
  color: #ffdcb2;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.site-footer a:hover{
  opacity: 0.7;
}

.site-footer__top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 24px auto;
}

.site-footer__bottom{
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid #ffdcb2;
  padding-top: 16px;
}

.polityka{
  margin-left: 36px;
  font-family: var(--ff-heading);
  font-weight: var(--fw-regular);
  font-style: normal;

  background-color: #000;
  color: rgb(216, 205, 205);

  display: flex;
  flex-direction: column;
  min-height: 100vh;

  letter-spacing: 0.05em;

  margin-right: 12px;
}

.powrot{
  color: #ffdcb2;
  margin-top: 36px;
  margin-bottom: 36px;
}

.browsers a{
  color: #ffdcb2;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.browsers a:hover{
  text-decoration: underline;
  opacity: 0.7;
}

/* 1) Zapobiega “wypychania” layoutu przez zawartość w gridzie */
.content-wrapper,
.left-section,
.main-content{
  min-width: 0;
}

/* Bezpiecznik: nic nie powinno przekraczać szerokości ekranu */
.carousel-section,
.carousel,
.carousel__frame{
  max-width: 100%;
}