/**
 * ARTICLE CONTENT STYLES
 * Wersja: 1.0
 * Data: 14.10.2025
 * Konwencja: BEM (Block, Element, Modifier)
 */

/* ========================================
   1. STRUKTURA GŁÓWNA
   ======================================== */

.article {
  /* Główny kontener artykułu */
}

.article--sponsored {
  /* Modyfikator dla artykułu sponsorowanego */
}

.article--featured {
  /* Modyfikator dla artykułu wyróżnionego */
}

/* ========================================
   2. NAGŁÓWKI I TYTUŁY
   ======================================== */

.article__title {
  /* Główny tytuł artykułu (h1) */
  	text-align: left;
  	font-weight: bold;
  	color: #575354;
  	margin: 0px;
  	margin: 2px 15px 12px 5px;
  	text-transform: uppercase;
  	font-size: 12px;
}

.article__subtitle {
  /* Podtytuł artykułu */
  margin: 15px 15px 15px 5px;
  text-align: left;
  font-weight: bold;
  color: #575354;
  text-transform: uppercase;
  font-size: 11px;
}

.article__heading-2 {
  /* Nagłówek sekcji (h2) */
	font-size: 11px;
	text-align: left;
	margin: 0px;
	line-height: normal;
	font-weight: bold;
	color: #575354;
    text-transform: uppercase;
    padding: 5px;
    margin: 20px 0px 0px 0px;
}

.article__heading-3 {
  /* Pod-nagłówek (h3) */
}

.article__heading-4 {
  /* Mniejszy nagłówek (h4) */
}

/* ========================================
   3. TEKST I AKAPITY
   ======================================== */
article__section {
    margin: 0px 0px 0px 15px;
    clear: both;
}

.article__lead {
  /* Streszczenie/pierwszy akapit artykułu */
  	width: 700px;
  	padding: 0px;
  	border: 1px solid #e9e9e9;
  	background-color: #f9f9f9;
  	/* background-color: #ffffff; albo białe jak wolimy */
  	vertical-align: top;
  	padding: 10px;
}

.article__lead p {
    margin: 0px 5px;
}

.article__paragraph {
  /* Zwykły akapit treści */
  	width: 700px;
  	padding: 5px;
  	background-color: #ffffff;
  	vertical-align: top;
  	line-height: 1.3;
}
.article__paragraph p {
    margin: 5px 0px;
}

.article__text--beside-image-left, .article__text--beside-image-right {
	width: 544px;
	float: left;
	padding: 10px;
	height: 164px;
	overflow: hidden;
	border: 1px solid #ffffff;
	background-color: #ffffff;
	vertical-align: top;
}

.article__text--beside-image-left {
  /* Tekst obok obrazu z lewej */
  margin: 0px 10px 0px 0px;
}

.article__text--beside-image-right {
  /* Tekst obok obrazu z prawej */
  margin: 0px 0px 0px 10px;
}

/* Metadata artykułu */
.article__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0px 15px 15px 5px;
    position: relative;
    font-size: 10px;
    color: #888;
    width: 700px;
    padding: 8px 8px 6px 8px;
    border: 1px solid #e9e9e9;
    background-color: #f9f9f9;
    font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}


.article__meta span {
    position: relative;
    color: #888;
    letter-spacing: 0.3px;
}

/* Kropka przed każdym spanem */
.article__meta span::before {
    content: "•";
    color: #bbb;
    margin-right: 8px;
    font-size: 10px;
    font-weight: bold;
}

/* Usunięcie kropki przed pierwszym elementem, usuniecie kropki po article__reading-time, przed article__sponsor-label */
.article__meta span:first-child::before, .article__reading-time::after, .article__sponsor-label::before {
    display: none;
}

.article__sponsor-label {
  margin-left: auto;           /* Wypycha ten span maksymalnie na prawo */
}

/* ========================================
   4. OBRAZY I GALERIE
   ======================================== */

.article__image--center {
  background-color: #f9f9f9;
  width: 100%; /* dopasowanie szerokości do kontenera */
  height: auto;
  border: 0;
  padding: 0;
  vertical-align: middle;
}

.article__image--center-cut {
  margin: 15px 0px 0px 5px;
  display: block;
  width: 100%;        /* lub stała szerokość, jeśli potrzebujesz */
  height: 250px;      /* wysokość widocznego fragmentu */
  object-fit: cover;  /* przycina obraz, zachowuje proporcje */
  object-position: center 37%; /* pokazuje górną część obrazu */
  overflow: hidden;
}

.article__image--center-cut-1 {
  margin: 15px 0px 0px 5px;
  display: block;
  width: 100%;        /* lub stała szerokość, jeśli potrzebujesz */
  height: 250px;      /* wysokość widocznego fragmentu */
  object-fit: cover;  /* przycina obraz, zachowuje proporcje */
  object-position: center 77%; /* pokazuje dolną część obrazu */
  overflow: hidden;
}

.article__image--center-cut, .article__image--center-cut-1 {
    border: 1px solid #e9e9e9;
}

.article__image--align-right {
  /* Obraz wyrównany do prawej */
  width:160px;
  height:160px;
}

.article__image--align-left {
  /* Obraz wyrównany do lewej */
  border: 1px solid #e9e9e9;
  text-align: center;
  margin: 0px;
  height: 164px;
  width: 164px;
  overflow: hidden;
  vertical-align: middle;
  float: left;
}

.article__image-caption {
  /* Podpis pod obrazem */
    color: #888;
    font-size: 11px; /* opcjonalnie rozmiar czcionki */
    margin: 0px 0px 15px 5px;
    width: 100%;
    border: 1px solid #e9e9e9;
    background-color: #f9f9f9;
    padding: 8px;
}

.article__image-wrapper {
  text-align: center;
  margin: 15px auto;
  max-width: 250px; /* dostosowane do podpisu i obrazu */
}

.article__image-caption-center250 {
  color: #888;
  font-size: 11px;
  margin: 0px 0 15px 0; /* dopasowanie marginesu do wyśrodkowania */
  width: 100%;
  border: 1px solid #e9e9e9;
  background-color: #f9f9f9;
  padding: 8px;
  box-sizing: border-box;
  text-align: center; /* ważne, aby podpis był wyśrodkowany */
}


.article__gallery {
  /* Kontener galerii */
}

.article__gallery--left {
  /* Galeria 4 zdjęć wyrównana do lewej */
  border: 1px solid #e9e9e9;
  text-align: center;
  margin: 0px;
  padding: 10px;
  height: 166px;
  width: 166px;
  overflow: hidden;
  vertical-align: middle;
  float: left;
}

.article__gallery--right {
  /* Galeria 4 zdjęć wyrównana do prawej */
  border: 1px solid #e9e9e9;
  text-align: center;
  margin: 0px;
  padding: 10px;
  height: 162px;
  width: 162px;
  overflow: hidden;
  vertical-align: middle;
  float: right;
}

.article__gallery--left img,
.article__gallery--right img {
  /* Obrazki w galerii */
  width: 82px;
  height: 82px;
  text-align: center;
  vertical-align: middle;
  float: left;
  border: 0px;
  margin: 1px;
  padding: 0px;
  background-color: #e9e9e9;
  background-image: url("/s/img/blank80.png");
  display: block;
}

.image-container--first {
  margin: 0px 0px 0px 5px;
  position: relative;
  display: inline-block; /* lub inny display dostosowany do układu */
}

.image-container {
  position: relative;
  display: inline-block; /* lub inny display dostosowany do układu */
}

.image-container img {
  border: 1px solid #e9e9e9;
}

.image-number {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: #575354;
  /* background-color: rgba(0, 0, 0, 0.7);  ciemne półprzezroczyste tło */
  color: #e9e9e9;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  line-height: 25px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  user-select: none;
  pointer-events: none; /* aby nie przeszkadzał w interakcjach */
}


/* ========================================
   5. MULTIMEDIA
   ======================================== */

.article__video {
  /* Osadzony film */
}

.article__video--responsive {
  /* Responsywne video (16:9) */
}

.article__iframe {
  /* Osadzone iframe (mapy, embed) */
}

/* ========================================
   6. LINKI
   ======================================== */

.article__link-external--visible {
  /* Widoczny link zewnętrzny (standalone) */
}

.article__link-external--inline {
  /* Link zewnętrzny w tekście */
}

/* ========================================
   7. CYTATY
   ======================================== */

.article__blockquote--centered {
  /* Cytat blokowy wyśrodkowany */
}

.article__quote {
  /* Cytat inline w tekście */
}

.article__pullquote {
  /* Pull quote (wyróżniony cytat) */
}

/* ========================================
   8. LISTY
   ======================================== */

.article__list {
  /* Podstawowa lista */
}

  /* Lista numerowana */
.article__list--ordered {
  list-style-position: inside; /* liczby na początku linii */
  padding-left: 20px; /* trochę odsunięcia od lewej krawędzi */
  margin-top: 1.3;
  margin-bottom: 1.3em; /* odstęp pod listą */
}

.article__list--ordered li {
  margin-bottom: 12px; /* rozsunięcie elementów listy w pionie */
  line-height: 1.5; /* lepsza czytelność */
}

  /* Lista punktowana */
.article__list--unordered {
  list-style-position: inside; /* markery blisko tekstu */
  padding-left: 20px;           /* odsunięcie od lewej krawędzi */
  margin-top: 1em;
  margin-bottom: 1.5em;         /* odstęp pod listą */
}

.article__list--unordered li {
  margin: 0px 0px 12px 0px;          /* odstęp między elementami */
  line-height: 1.5;             /* lepsza czytelność */
}


.article__list-item {
  /* Element listy */
}

/* ========================================
   9. TABELE
   ======================================== */

.article__table {
  /* Tabela */
  width: 100%;
  border-collapse: collapse;
  background-color: #f9f9f9; /* jasnoszare tło całej tabeli */
  font-family: Arial, sans-serif;
  color: #333; /* ciemnoszary tekst */
  margin: 0px 0px 15px 5px;
}

.article__table th, td {
  border: 1px solid #e9e9e9;
  padding: 10px 15px;
  text-align: left;
}

.article__table th {
  background-color: #e2e2e2; /* trochę ciemniejsze tło nagłówków */
  font-weight: bold;
}

.article__table tr:nth-child(even) {
  background-color: #f5f5f5; /* jaśniejsze tło dla parzystych wierszy */
}

.article__table tr:hover {
  background-color: #e9e9e9; /* podświetlenie wiersza przy najechaniu */
}

/* ========================================
   10. WYRÓŻNIENIA I NOTATKI
   ======================================== */

.article__highlight {
  /* Wyróżniony tekst/box */
}

.highlighted-text {
  color: #575354;
  font-weight: bold;
}

.article__callout {
  /* Call-out box */
}

.article__note {
  /* Notatka/uwaga */
}

.article__warning {
  /* Ostrzeżenie */
}

.article__tip {
  /* Wskazówka/tip */
}

/* ========================================
   11. KOD
   ======================================== */

.article__code-block {
  /* Blok kodu (wieloliniowy) */
}

.article__code-inline {
  /* Kod inline w tekście */
}

/* ========================================
   12. METADANE
   ======================================== */

.article__meta {
  /* Kontener dla metadanych */
}

.article__author {
  /* Autor artykułu */
}

.article__date {
  /* Data publikacji */
}

.article__category {
  /* Kategoria/tag */
}

.article__reading-time {
  /* Szacowany czas czytania */
}

/* ========================================
   13. CALL TO ACTION
   ======================================== */

.article__cta {
  /* Kontener Call to Action */
}

.article__button {
  /* Przycisk w artykule */
}

.article__button--primary {
  /* Główny przycisk (akcent) */
}

.article__button--secondary {
  /* Drugorzędny przycisk */
}

/* ========================================
   14. UKŁAD I STRUKTURA
   ======================================== */

.article__section {
  /* Sekcja artykułu */
}

.article__sidebar {
  /* Boczna kolumna */
}

.article__divider {
  /* Separator/linia */
}

.article__footer {
  /* Stopka artykułu */
}

/* ========================================
   15. SOCIAL MEDIA
   ======================================== */

.article__share {
  /* Kontener przycisków udostępniania */
}

.article__share-button {
  /* Pojedynczy przycisk social media */
}

/* ========================================
   16. ARTYKUŁY SPONSOROWANE
   ======================================== */

.article__sponsor-label {
  /* Etykieta "Artykuł sponsorowany" */
}

.article__sponsor-logo {
  /* Logo sponsora */
}

.article__sponsor-disclaimer {
  /* Disclaimer prawny */
}

/* ========================================
17. Strona główna style
   ======================================== */


.module1Pictures {
	border: 0px solid #B3B9B7;
	text-align: center;
	margin: 0px;
	padding: 0px;
	height: 166px;
	width: 166px;
	overflow: hidden;
	vertical-align: middle;
	float: left;
}

.module1Pictures a {
	width: 164px;
	height: 164px;
	text-align: center;
	vertical-align: middle;
	float: left;
	border: 0px;
	margin: 0px;
	padding: 0px;
	text-decoration: none;
	background-color: #e9e9e9;
}

.module1Pictures a img {
	text-align: center;
	vertical-align: middle;
	margin: 1px;
	width: 162px;
    height: 162px;
}

.module1Pictures a:hover {
	border: 0px;
	text-decoration: none;
	background-color: #B3B9B7;
}

.modules__divider {
	width: 100%;
	height: 1px;
	border-top: 1px solid #ffffff;
	margin: 25px 0px 25px 5px;
	clear: both;
	overflow: hidden;
}


/* ========================================
   KONIEC ARKUSZA STYLÓW
   ======================================== */