/* ==========================================================================
   szkolenia.css  (wersja 5)
   Arkusz stylow wspolny dla stron szkolen i webinariow OSKKO.

   Plik jest zapisany w czystym ASCII (bez polskich znakow) - dziala
   poprawnie niezaleznie od kodowania stron HTML, ktore go uzywaja.

   ZMIANY W WERSJI 5:
     - style strony poszkoleniowej (.pobierz, .wideo) przeniesione PRZED
       zapytania medialne. Reguly @media musza byc na koncu pliku,
       inaczej to, co po nich dopisane, nadpisuje ustawienia dla telefonow
     - .wideo iframe wypelnia szerokosc kolumny (ok. 880 px zamiast
       dawnych sztywnych 900 px) i sam liczy wysokosc z proporcji 16:9
     - .tresc h2:first-child bez gornego marginesu - znika podwojna
       przerwa nad naglowkiem sekcji
     - nagranie ukryte przy druku

   ZMIANY W WERSJI 4:
     - wspolna szerokosc kolumny dla wszystkich blokow (sekcja 2a)

   ZMIANY W WERSJI 3:
     - .strona 1200 px pod baner 2400 px wyswietlany w 1200 px

   NAJCZESTSZE ZMIANY:
     szerokosc strony ....... .strona { width: 1200px; }
     szerokosc kolumny ...... sekcja 2a, jedna regula
     kolor wiodacy (bordo) .. #800000  (ciemniejszy hover: #4d0000)

   UWAGA: nigdy nie dodawaj atrybutu style="..." do znacznika <img>.
   Nadpisuje height:auto z klasy .banner i deformuje proporcje.
   Rozmiar podawaj w atrybutach width i height. Nie ustawiaj rozmiaru
   obrazka w oknie Picture Properties - Expression Web wpisuje go
   wlasnie jako inline style.
   ========================================================================== */


/* --- 1. PODSTAWY ------------------------------------------------------- */

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

body {
	margin: 0;
	padding: 24px 16px 48px;
	background-color: #ebe8e4;
	font-family: "Lato", Verdana, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #1f1c1a;
	-webkit-text-size-adjust: 100%;
}

img {
	border: 0;
}

a {
	color: #800000;
}

a:hover {
	color: #4d0000;
}

a:focus-visible {
	outline: 2px solid #800000;
	outline-offset: 2px;
}

.tytul-ukryty {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* --- 2. RAMA STRONY ---------------------------------------------------- */

.strona {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 36px;
	background-color: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}


/* --- 2a. WSPOLNA KOLUMNA TRESCI --------------------------------------- */
/* Jedna regula ustala szerokosc wszystkich blokow pod banerem. Dzieki
   temu ich krawedzie zewnetrzne leza w jednej linii: lewa listwa pudelka
   .fakty zaczyna sie dokladnie tam, gdzie pierwsza litera akapitu.
   Chcesz szersza lub wezsza kolumne - zmien TU jedna liczbe.           */

.powrot,
.naglowek,
.fakty,
.tresc,
.zapis,
.info,
.udostepnij,
.polecane,
.stopka,
.pobierz,
.wideo {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}


/* --- 3. POWROT --------------------------------------------------------- */

.powrot {
	margin-top: 0;
	margin-bottom: 0;
	padding: 12px 0 14px;
	font-size: 13px;
}

.powrot a {
	color: #6f6a66;
	text-decoration: none;
}

.powrot a:hover {
	color: #800000;
	text-decoration: underline;
}


/* --- 4. BANERY --------------------------------------------------------- */
/* Baner glowny: plik 2400 px szerokosci, atrybuty width/height w HTML
   podaja POLOWE (1200 x 400). Stad ostrosc na ekranach o podwojnej
   gestosci pikseli. Baner NIE nalezy do kolumny tresci - ma pelna
   szerokosc ramy i przylega do jej krawedzi.                            */

.banner {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Grafiki drugorzedne na dole strony maja 985 px. Ograniczone do
   szerokosci kolumny, zeby nie wisialy wesrodkowane.                    */

.polecane .banner {
	max-width: 880px;
}


/* --- 5. NAGLOWEK TEKSTOWY (opcjonalny) -------------------------------- */
/* Uzywaj TYLKO wtedy, gdy baner nie zawiera tytulu szkolenia.           */

.naglowek {
	padding: 30px 0 0;
}

.etykieta {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #800000;
}

.naglowek h1 {
	margin: 0 0 10px;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.22;
	color: #1f1c1a;
}


/* --- 6. PASEK FAKTOW -------------------------------------------------- */

.fakty {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 32px;
	margin-top: 30px;
	margin-bottom: 0;
	padding: 20px 24px;
	background-color: #f7f3f0;
	border-left: 4px solid #800000;
	font-size: 15px;
}

.fakty li {
	padding: 5px 0;
}

.fakt-nazwa {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8a827c;
}


/* --- 7. TRESC OPISOWA ------------------------------------------------- */

.tresc {
	padding: 30px 0 0;
}

.tresc p {
	margin: 0 0 14px;
	text-align: left;
}

.tresc h2 {
	margin: 30px 0 12px;
	font-family: "EB Garamond", Georgia, "Times New Roman", serif;
	font-size: 24px;
	font-weight: 600;
	color: #800000;
}

/* Gdy h2 otwiera blok .tresc, jego gorny margines sumuje sie z gornym
   wcieciem bloku i robi sie podwojna przerwa.                          */

.tresc h2:first-child {
	margin-top: 0;
}

.tresc ul {
	margin: 0 0 14px;
	padding-left: 22px;
}

.tresc li {
	margin-bottom: 6px;
}


/* --- 8. WEZWANIE DO ZAPISU -------------------------------------------- */

.zapis {
	margin-top: 34px;
	padding: 0;
	text-align: center;
}

.przycisk {
	display: inline-block;
	padding: 15px 40px;
	background-color: #800000;
	color: #ffffff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	border-radius: 3px;
}

.przycisk:hover {
	background-color: #4d0000;
	color: #ffffff;
}

.zapis-info {
	margin: 12px 0 0;
	font-size: 13px;
	color: #6f6a66;
}

.cta {
	margin: 34px 0 0;
	text-align: center;
}

.cta img {
	display: block;
	max-width: 880px;
	height: auto;
	margin: 0 auto;
}


/* --- 9. RAMKA ORGANIZACYJNA ------------------------------------------- */

.info {
	margin-top: 30px;
	padding: 18px 22px;
	background-color: #faf8f6;
	border: 1px solid #e3dbd4;
	font-size: 15px;
}

.info p {
	margin: 0 0 10px;
}

.info p:last-child {
	margin-bottom: 0;
}


/* --- 10. UDOSTEPNIANIE ------------------------------------------------ */

.udostepnij {
	margin-top: 30px;
	padding: 18px 0 0;
	border-top: 1px solid #e3dbd4;
	font-size: 14px;
}

.udostepnij-nazwa {
	margin-right: 8px;
	color: #6f6a66;
}

.udostepnij a {
	display: inline-block;
	margin: 4px 6px 0 0;
	padding: 6px 15px;
	border: 1px solid #800000;
	border-radius: 3px;
	color: #800000;
	text-decoration: none;
	font-size: 13px;
}

.udostepnij a:hover {
	background-color: #800000;
	color: #ffffff;
}


/* --- 11. POZOSTALE SZKOLENIA + STOPKA -------------------------------- */

.ozdobnik {
	border: 0;
	border-top: 1px solid #ddd3cb;
	width: 70%;
	margin: 40px auto;
}

.polecane {
	padding: 0;
	text-align: center;
}

.polecane p {
	margin: 0 0 12px;
}

.polecane .link-glowny {
	font-size: 17px;
	font-weight: 700;
}

.stopka {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 2px solid #800000;
	text-align: center;
	font-size: 14px;
	line-height: 1.8;
}

.stopka-nazwa {
	font-weight: 700;
}


/* --- 12. STRONA POSZKOLENIOWA ---------------------------------------- */
/* Materialy do pobrania + zagniezdzone nagranie.                       */

.pobierz {
	margin-top: 10px;
	text-align: center;
}

.pobierz img {
	max-width: 434px;
	width: 100%;
	height: auto;
}

.pobierz-info {
	margin: 12px 0 0;
	font-size: 13px;
	color: #6f6a66;
}

.wideo {
	margin-top: 10px;
}

/* Odtwarzacz wypelnia szerokosc kolumny i sam liczy wysokosc z proporcji
   16:9. Przy kolumnie 880 px daje to ok. 880 x 495 px, czyli praktycznie
   tyle, co dawne sztywne 900 x 507 - ale skaluje sie na telefonie.
   Chcesz odtwarzacz na pelna szerokosc karty (1200 x 675 px)?
   Dopisz nizej regule:  .wideo { max-width: 1200px; }                  */

.wideo iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	background-color: #000000;
}


/* --- 13. TELEFONY ---------------------------------------------------- */
/* Zapytania medialne MUSZA byc na koncu pliku. Regula dopisana po nich
   nadpisuje ustawienia dla waskich ekranow.
   margin-left/right nadpisuje auto z sekcji 2a - na waskim ekranie
   bloki maja staly odstep od krawedzi zamiast centrowania.             */

@media (max-width: 760px) {

	body {
		padding: 0 0 24px;
		font-size: 15px;
	}

	.strona {
		box-shadow: none;
	}

	.powrot,
	.naglowek,
	.fakty,
	.tresc,
	.zapis,
	.info,
	.udostepnij,
	.polecane,
	.pobierz,
	.wideo,
	.stopka {
		margin-left: 18px;
		margin-right: 18px;
	}

	.naglowek h1 {
		font-size: 26px;
	}

	.fakty {
		grid-template-columns: 1fr;
	}

	.przycisk {
		display: block;
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* --- 14. DRUK -------------------------------------------------------- */

@media print {

	body {
		background: #ffffff;
		padding: 0;
		font-size: 11pt;
	}

	.strona {
		width: auto;
		box-shadow: none;
	}

	.powrot,
	.udostepnij,
	.polecane,
	.wideo {
		display: none;
	}
}