/* kontener.css */

.content-box {
    width: 80%;
    margin: 0 auto; /* Center the box */
    background-color: rgba(255, 255, 255, 0.8); /* White background with 80% opacity */
    padding: 60px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
    box-sizing: border-box;
    color: #000000 !important; /* Black text color */
}

/* Ensure the text fills 90% of the container */
/* teraz dotyczy WYŁĄCZNIE legacy, nie karty artykułu */
.content-box:not(.article-card) > * {
  width: 90%;
  margin: auto;
}

/* Specific styles for different text elements */
.content-box h1 {
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important; /* Center align h1 text */
}

.content-box h1.bullet::before {
    content: "•"; /* Treść punktora */
    margin-right: 0.5em; /* Odstęp między punktorem a tekstem */
    color: #000; /* Kolor punktora */
	font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important; /* Center align h1 text */
}

.content-box h2 {
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: left !important; /* Left align h2 text */
}

.content-box h3 {
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: left !important; /* Left align h3 text */
	padding-left: 40px;
}

.content-box h4 {
	text-transform: none; /* Anulowanie zmiany na wersaliki */
    font-size: 18px !important;
    font-weight: bold !important;
	font-style: italic !important;
    text-align: left !important; /* Left align h3 text */
}

.content-box h4.bullet::before {
	text-transform: none; /* Anulowanie zmiany na wersaliki */
	content: "•"; /* Treść punktora */
    margin-right: 0.5em; /* Odstęp między punktorem a tekstem */
    font-size: 18px !important;
    font-weight: bold !important;
	font-style: italic !important;
    text-align: left !important; 
	padding-left: 40px; /* Dodanie marginesu od lewej strony */
}

.content-box h4.indent {
	text-transform: none; /* Anulowanie zmiany na wersaliki */
    font-size: 18px !important;
    font-weight: bold !important;
	font-style: italic !important;
    text-align: left !important; /* Left align h4 text */
	padding-left: 40px; /* Dodanie wcięcia od lewej strony */
}

.content-box h5.indent {
	text-transform: none; /* Anulowanie zmiany na wersaliki */
    font-size: 16px !important;
    font-weight: bold !important;
	font-style: italic !important;
    text-align: right !important; /* Left align h4 text */
	padding-left: 40px; /* Dodanie wcięcia od lewej strony */
}

.content-box p {
	text-indent: 40px;
    font-size: 17px !important;
    font-weight: normal !important;
    text-align: left !important; /* Left align paragraph text */
    color: #000000 !important; /* Ensure black text color */
}
.content-box li {
	content: "•"; /* Treść punktora */
    margin-right: 0.5em; /* Odstęp między punktorem a tekstem */
    font-size: 18px !important;
    font-weight: normal !important;
    text-align: left !important; /* Left align paragraph text */
    color: #000000 !important; /* Ensure black text color */
	padding-left: 60px;
}

/* Ensure the container scales with the viewport */
@media (max-width: 1200px) {
    .content-box {
        width: 90%;
		padding: 10%;
    }
}

@media (max-width: 768px) {
    .content-box {
        width: 97%;
		padding: 5%;
    }
}

@media (max-width: 480px) {
    .content-box {
        width: 100%;
		padding: 5%;
    }
}

/* ================================
       Article Card – final mobile pack
       Design by Czatuś :-)
       ================================ */

    /* Dostosuj raz (wysokość headera/paddingów nad kartą) */
    :root { --article-header-offset: 160px; }

    /* Wyśrodkuj kartę w sekcji treści (bez wpływu na home) */
    .page-article .section[data-section="slide02"] .section-inner {
      display: flex;
      justify-content: center;
    }

    /* KARTA artykułu: stałe zaokrąglenie (overflow hidden),
       wysokość = wysokość okna - offset headera */
    .page-article .content-box.article-card {
      position: relative;
      width: min(1080px, 92vw);
      height: calc(100vh - var(--article-header-offset));
      border-radius: 16px;
      overflow: hidden; /* klip rogów przez cały scroll */
      background: rgba(0,0,0,.45);      /* półprzezroczyste tło */
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      color: #fff;                       /* biała typografia w karcie */
      box-shadow: 0 8px 28px rgba(0,0,0,.25);
    }

    /* Wewnętrzny obszar przewijany – wypełnia kartę */
    .page-article .article-card .article-scroll {
      height: 100%;
      touch-action: pan-y;
      overflow: auto;
      overscroll-behavior: contain;         /* nie „ciągnij” strony pod spodem */
      -webkit-overflow-scrolling: touch;    /* płynnie na iOS */
      padding: 20px 20px;
      scrollbar-width: none;                /* Firefox – ukryj pasek */
      -ms-overflow-style: none;             /* IE/Edge Legacy */
    }
    .page-article .article-card .article-scroll::-webkit-scrollbar { display: none; } /* WebKit */

    /* Obrazki artykułowe – mobile-first */
    .page-article .content-box img.art-png {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 15px 0;
      border-radius: 8px;
    }

    /* Podpisy/meta/linki – jasna paleta w karcie */
    .page-article .img-caption { color: rgba(255,255,255,.75); text-align: center; margin-top: 6px; }
    .page-article .meta       { color: rgba(255,255,255,.65); display:block; margin: 12px 0 6px; }
    .page-article .article-card a { color: #9bdcff; }
    .page-article .article-card h1,
    .page-article .article-card h2,
    .page-article .article-card h3,
    .page-article .article-card h4,
    .page-article .article-card p { color: #fff; }

    /* Desktopowe ograniczenie szerokości grafiki (z Twoich breakpointów) */
    @media (min-width: 768px) and (max-width: 1199px) {
      .page-article .content-box img.art-png { max-width: 90%; margin: 20px auto; }
    }
    @media (min-width: 1200px) {
      .page-article .content-box img.art-png { max-width: 800px; margin: 20px auto; }
    }

    /* Mikro-opóźnienia animacji (jeśli Twój skrypt .animate je odpala) */
    .animate.seq-1 { animation-delay: .10s !important; }
    .animate.seq-2 { animation-delay: .20s !important; }
    .animate.seq-3 { animation-delay: .30s !important; }

    /* Drobne UX specyficzne dla artykułu (Twoje wcześniejsze) */
    .welcome-title { font-size: 22px !important; line-height: 1.25; }
    .article-hero { width: 100%; border-radius: 12px; margin: 20px 0 30px; display: block; }
    .article-aside { width: 100%; border-radius: 10px; margin: 25px 0; display: block; }
    .indent { margin-left: 1rem; }
    .content-box h1, .content-box h2, .content-box h3, .content-box h4 { margin-top: 18px; }
    .rec-box {
      background: rgba(255,255,255,0.06);
      border-left: 4px solid #00b894;
      padding: 14px 16px;
      border-radius: 10px;
      margin-top: 24px;
    }

    /* Tablety (768–1199) – nagłówki */
    @media (min-width: 768px) and (max-width: 1199px) {
      .welcome-title { font-size: 26px !important; line-height: 1.3; }
    }
    /* Duże ekrany (≥1200) – nagłówki */
    @media (min-width: 1200px) {
      .welcome-title { font-size: 32px !important; line-height: 1.4; }
    }
 
/* === Wymuszenie bieli w obrębie karty artykułu (w tym <p>) === */
.page-article .content-box.article-card,
.page-article .content-box.article-card * {
  color: #fff !important;
}

/* Gdyby coś dalej się wyrywało, dobijamy dokładnym selektorem: */
.page-article .content-box.article-card .article-scroll p,
.page-article .content-box.article-card .article-scroll p * {
  color: #fff !important;
}

/* Dla kompletności (listy, cytaty, tabele – często mają własne reguły w templatemo) */
.page-article .content-box.article-card .article-scroll :is(ul,ol,li,blockquote,small,code,table,th,td) {
  color: #fff !important;
}

/* ================================
   Szerokość karty i składu tekstu
   (Design by Czatuś)
   ================================ */

/* Zmienne sterujące */
:root{
  --article-card-inline: min(1080px, 98vw);  /* szerokość karty */
  --article-pad-x: clamp(14px, 4vw, 28px);   /* poziome paddingi w środku karty */
  --article-text-max: 72ch;                  /* docelowa szerokość wiersza (desktop) */
}

/* karta = szerokość z zmiennej; wyłącz ewentualne globalne max-width */
.page-article .content-box.article-card{
  width: var(--article-card-inline);
  max-width: none !important;
}

/* wewnątrz karty – padding w poziomie */
.page-article .article-card .article-scroll{
  padding-inline: var(--article-pad-x);
}

/* ogranicz szerokość samego składu (czytelność) */
.page-article .article-card .article-scroll > :where(p,h1,h2,h3,h4,ul,ol,blockquote,.rec-box){
  max-width: var(--article-text-max);
  margin-inline: auto; /* centrowanie bloku składu */
}

/* MOBILE: pełna szerokość składu (koniec z 3–4 słowami) */
@media (max-width: 767px){
  :root{ --article-text-max: 100%; }
  /* na wszelki wypadek, gdy motyw coś zaciska */
  .page-article .content-box{ max-width: none !important; }
}
/* Wypełnij kartę artykułu na 100% szerokości treścią */
.page-article .content-box.article-card > * {
  width: 100% !important;   /* = .article-scroll */
  margin: 0 !important;
}

/* (opcjonalny bezpiecznik, gdyby motyw coś zawężał wewnątrz) */
.page-article .article-card .article-scroll > :where(p,h1,h2,h3,h4,ul,ol,blockquote,.rec-box){
  max-width: 100% !important;
}
@media (max-width: 480px){
  .page-article .content-box.article-card{ width: 99vw; }
}
/* Subtelna data publikacji tylko w hero artykułu */
.page-article .welcome-box .welcome-first.meta{
  font-size: 0.85rem !important;   /* mniejsze */
  line-height: 1.2;
  font-weight: 400;
  opacity: .8;                      /* mniej „krzyczy” */
  color: rgba(255,255,255,.75) !important; /* delikatna biel */
  margin-bottom: 6px;
}

@media (max-width: 480px){
  .page-article .welcome-box .welcome-first.meta{
    font-size: 0.8rem !important;
  }
}

/* Większy odstęp między datą publikacji a tytułem artykułu */
.page-article .welcome-box .welcome-first.meta {
  margin-bottom: 18px; /* było ~6px, teraz 18px – dostrój np. 16–24px */
}
@media (max-width: 767px){
  .page-article .welcome-box .welcome-first.meta {
    margin-bottom: 22px;
  }
}
/* Zapobiegaj przewijaniu rodzica, gdy scrollujesz wnętrze karty */
.article-scroll {
  overscroll-behavior: contain;   /* już masz – zostaw */
  -webkit-overflow-scrolling: touch;
}
html, body {
  overscroll-behavior-y: none;    /* bonus: wygasza bounce na całej stronie */
}