/* ==========================================================================
   Avuerra, sekcje
   Kolejnosc: dekoracje, ramy sekcji, potem kazda sekcja po kolei.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Elementy dekoracyjne
   -------------------------------------------------------------------------- */

.av-dekor{
	position: absolute;
	bottom: 0;
	width: clamp(120px, 17vw, 260px);
	aspect-ratio: 1 / 1;
	color: var(--av-red);          /* steruje kreskowaniem przez currentColor */
	pointer-events: none;
	z-index: 0;
}

.av-dekor--lewo{ left: 0; }

/* Ten sam plik, odbity. Nie ma osobnego SVG dla prawej strony. */
.av-dekor--prawo{ right: 0; transform: scaleX(-1); }

.av-dekor svg{ width: 100%; height: 100%; display: block; }

.av-dekor__blush{ fill: var(--av-blush); }
.av-dekor__solid{ fill: var(--av-red); }

/* Fale. Dziala wylacznie na desktopie. Na tablecie i telefonie sekcje sa
   waskie i wysokie, przez co linie z rozciaganego SVG robily klebowisko
   obok tekstu. Zamiast walczyc ze skalowaniem, na mniejszych ekranach
   fale sa po prostu ukryte. Intensywnosc na desktopie regulujesz jedna
   wartoscia --av-fale-krycie. */
.av-dekor--fale{
	inset: auto 0 0 0;
	width: 100%;
	height: 100%;
	max-height: 720px;
	aspect-ratio: auto;
	transform: none;
	color: var(--av-red);
	opacity: var(--av-fale-krycie, .16);
}

.av-dekor--fale svg{ width: 100%; height: 100%; display: block; }

.av-sekcja--ciemna .av-dekor--fale{
	color: #FF5347;
	opacity: calc(var(--av-fale-krycie, .16) * .8);
}

/* Ponizej desktopu fale sa ukryte, bez zadnego skalowania. */
@media (max-width: 1024px){
	.av-dekor--fale{ display: none; }
}

/* --------------------------------------------------------------------------
   2. Rama sekcji
   -------------------------------------------------------------------------- */

.av-sekcja{
	position: relative;
	overflow: hidden;              /* dekoracja ma byc przycieta krawedzia */
	padding-block: var(--av-sekcja-y);
	background: var(--av-paper);
}

/* Tresc zawsze nad dekoracja. */
.av-sekcja > *:not(.av-dekor){
	position: relative;
	z-index: 1;
}

.av-sekcja--ciemna{
	background: var(--av-ink);
	color: var(--av-paper);
}

.av-sekcja--ciemna .av-tekst{ color: var(--av-sand-soft); }
.av-sekcja--ciemna .av-naglowek{ color: var(--av-paper); }

/* Czerwien podstawowa ma na grafitie 3,3:1, czyli za malo. */
.av-sekcja--ciemna .av-dekor{ color: #FF5347; }
.av-sekcja--ciemna .av-dekor__solid{ fill: #FF5347; }
.av-sekcja--ciemna .av-dekor__blush{ fill: rgba(255, 83, 71, .18); }
.av-sekcja--ciemna .av-kreska{ background: #FF5347; }
/* Na grafitie tarcza slonca jasnieje. Szczeliny sa przezroczyste, wiec same
   pokazuja grafit tla, bez osobnej reguly. Litera U dziedziczy kolor
   naglowka, wiec jej nie ruszamy. */
.av-sekcja--ciemna .av-slonce__tarcza{ color: #FF5347; }
.av-sekcja--ciemna .av-przycisk{ background: #FF5347; color: var(--av-ink); }
.av-sekcja--ciemna .av-przycisk:hover{ background: #fff; color: var(--av-ink); }

.av-sekcja__head{
	text-align: center;
	margin-bottom: clamp(36px, 5vw, 62px);
}

.av-sekcja__tytul{
	font-size: clamp(27px, 3.6vw, 40px);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.av-hero{ padding-block: 0; }

/* Wysokosc hero.
   Rachunek na proporcjach ekranu: naglowek zajmuje okolo 20%, drugie tyle
   zostawiamy jako oddech, wiec na sekcje przypada 80%. Razem
   z naglowkiem daje to okolo 92 do 100% ekranu, czyli spod dolnej krawedzi wystaje
   kawalek nastepnej sekcji i widac, ze strona ma ciag dalszy.
   Gorny limit chroni przed absurdalnie wysokim hero na duzych monitorach. */
.av-hero__grid{
	display: flex;
	align-items: center;
	min-height: clamp(460px, 80vh, 900px);
}

/* svh zamiast vh na telefonie, zeby pasek adresu chowajacy sie przy
   przewijaniu nie zmienial wysokosci sekcji w trakcie. */
@supports (height: 100svh){
	.av-hero__grid{
		min-height: clamp(460px, 80svh, 900px);
	}
}

/* Tekst zajmuje lewa polowe kontenera. Kontener jest wysrodkowany, wiec
   jego polowa wypada dokladnie na srodku ekranu i styka sie ze zdjeciem
   co do piksela, bez uzycia 100vw, ktore rozjezdza sie o szerokosc paska
   przewijania. */
.av-hero__tresc{
	width: 50%;
	padding-block: clamp(52px, 6vw, 96px);
	padding-right: clamp(28px, 4vw, 64px);
}

.av-hero__grid--solo .av-hero__tresc{
	width: 100%;
	padding-right: 0;
}

.av-hero__naglowek{
	font-size: clamp(31px, 4.6vw, 54px);
	line-height: 1.22;
}

.av-hero__tresc .av-tekst{ margin-top: 26px; }

.av-hero__akcja{ margin: 30px 0 0; }

/* Zdjecie stoi poza kontenerem i wypelnia cala prawa polowe sekcji,
   az do krawedzi ekranu, bez marginesow. */
.av-hero > .av-hero__foto{
	position: absolute;
	inset: 0 0 0 50%;
	z-index: 0;
}

.av-hero__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Lagodne przejscie tla strony w zdjecie. Warstwa lezy na fotografii,
   nie pod nia, i sciemnia sie tylko przy lewej krawedzi. */
.av-hero__foto::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgb(var(--av-paper-rgb)) 0%,
		rgba(var(--av-paper-rgb), .88) 8%,
		rgba(var(--av-paper-rgb), .45) 22%,
		rgba(var(--av-paper-rgb), .12) 36%,
		rgba(var(--av-paper-rgb), 0) 48%
	);
}

/* --------------------------------------------------------------------------
   4. Tekst, pelny edytor
   Klient wkleja tu dowolna tresc, wiec stylujemy wszystko, co edytor
   potrafi wyprodukowac, zamiast liczyc na to, ze uzyje tylko akapitow.
   -------------------------------------------------------------------------- */

.av-proza{
	font-family: var(--av-font-body);
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--av-ink-soft);
}

.av-proza > :first-child{ margin-top: 0; }
.av-proza > :last-child{ margin-bottom: 0; }

.av-proza h1,
.av-proza h2,
.av-proza h3,
.av-proza h4{
	font-family: var(--av-font-head);
	font-weight: 600;
	color: var(--av-ink);
	line-height: 1.2;
	margin: 1.6em 0 .5em;
	text-wrap: balance;
}

.av-proza h1{ font-size: clamp(30px, 4vw, 44px); }
.av-proza h2{ font-size: clamp(25px, 3.2vw, 34px); }
.av-proza h3{ font-size: clamp(21px, 2.4vw, 26px); }
.av-proza h4{ font-size: 19px; }

.av-proza p{ margin: 0 0 1.15em; }

.av-proza a{
	color: var(--av-red);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.av-proza a:hover{ color: var(--av-red-hover); }

.av-proza strong{ color: var(--av-ink); font-weight: 600; }

.av-proza ul,
.av-proza ol{ margin: 0 0 1.15em; padding-left: 1.4em; }

.av-proza li{ margin-bottom: .5em; }

.av-proza ul{ list-style: none; padding-left: 0; }

.av-proza ul li{
	position: relative;
	padding-left: 1.6em;
}

.av-proza ul li::before{
	content: "";
	position: absolute;
	left: .3em;
	top: .66em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--av-red);
}

.av-proza blockquote{
	margin: 1.8em 0;
	padding-left: clamp(20px, 2.5vw, 32px);
	border-left: 2px solid var(--av-red);
	font-family: var(--av-font-head);
	font-style: italic;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.4;
	color: var(--av-ink);
}

.av-proza blockquote p:last-child{ margin-bottom: 0; }

.av-proza img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.8em 0;
}

.av-proza hr{
	border: 0;
	height: 1px;
	background: var(--av-sand-soft);
	margin: 2.4em 0;
}

/* display:block pozwala szerokiej tabeli przewijac sie samej, zamiast
   rozpychac cala strone w poziomie. */
.av-proza table{
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 15px;
}

.av-proza th,
.av-proza td{
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--av-sand-soft);
}

.av-proza th{ color: var(--av-ink); font-weight: 600; }

.av-sekcja--ciemna .av-proza{ color: var(--av-sand-soft); }
.av-sekcja--ciemna .av-proza h1,
.av-sekcja--ciemna .av-proza h2,
.av-sekcja--ciemna .av-proza h3,
.av-sekcja--ciemna .av-proza h4,
.av-sekcja--ciemna .av-proza strong,
.av-sekcja--ciemna .av-proza blockquote{ color: var(--av-paper); }
.av-sekcja--ciemna .av-proza a{ color: #FF5347; }
.av-sekcja--ciemna .av-proza ul li::before{ background: #FF5347; }
.av-sekcja--ciemna .av-proza blockquote{ border-left-color: #FF5347; }
.av-sekcja--ciemna .av-proza hr,
.av-sekcja--ciemna .av-proza th,
.av-sekcja--ciemna .av-proza td{ border-color: rgba(227, 212, 196, .22); }
.av-sekcja--ciemna .av-proza hr{ background: rgba(227, 212, 196, .22); }

/* --------------------------------------------------------------------------
   5. Kafle
   -------------------------------------------------------------------------- */

/* Wstep pod naglowkiem sekcji, wysrodkowany i weszy od kolumny tekstu,
   zeby wiersze mialy komfortowa dlugosc mimo srodkowania. */
.av-sekcja__wstep{
	max-width: 62ch;
	margin: 22px auto 0;
}

.av-sekcja__wstep .av-tekst{
	text-align: center;
	max-width: none;
	margin: 0 0 .6em;
}

.av-sekcja__wstep .av-tekst:last-child{ margin-bottom: 0; }

.av-kafle__lista{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	align-items: stretch;
}

/* Czerwien karty wyroznionej jest ciemniejsza od czerwieni marki, bo na
   duzej plamie podstawowa robi sie krzykliwa, a bialy tekst traci na niej
   czytelnosc. Trzymam ja w zmiennej, zeby dalo sie ja zmienic w jednym
   miejscu razem z zaslona na zdjeciu. */
.av-kafle{
	--kafel-czerwien: #8E1B1B;
}

.av-kafel{
	display: flex;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow:
		0 1px 2px rgba(60, 30, 20, .04),
		0 16px 40px -28px rgba(60, 30, 20, .3);
	transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}

.av-kafel__link{
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.av-kafel__ikona{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	flex: none;
	margin: 30px auto 24px;
	border-radius: 50%;
	background: var(--av-blush);
	color: var(--av-red);
	transition: background .3s ease, color .3s ease;
}

.av-kafel__ikona svg{ width: 32px; height: 32px; display: block; }

/* ---- Zdjecie ---- */

.av-kafel__foto{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--av-blush);
}

.av-kafel__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Zaslona jest zawsze w kodzie, ale przezroczysta. Dzieki temu przejscie
   na czerwien jest plynne, zamiast pojawiac sie skokiem. */
.av-kafel__zaslona{
	position: absolute;
	inset: 0;
	background: var(--kafel-czerwien, #8E1B1B);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

/* ---- Tresc ---- */

.av-kafel__tresc{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 26px 30px;
}

.av-kafel__tytul{
	font-family: var(--av-font-body);
	color: var(--av-ink);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0;
	transition: color .3s ease;
}

.av-kafel__kreska{
	display: block;
	width: 34px;
	height: 2px;
	background: var(--av-red);
	margin: 16px auto 18px;
	transition: background .3s ease;
}

.av-kafel__opis{
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--av-ink-soft);
	margin: 0 0 .7em;
	max-width: none;
	transition: color .3s ease;
}

.av-kafel__opis:last-child{ margin-bottom: 0; }

/* Odnosnik zawsze na dole karty, niezaleznie od dlugosci opisu. */
.av-kafel__cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 22px;
	font-family: var(--av-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--av-red);
	transition: color .3s ease;
}

.av-kafel__cta svg{ width: 20px; height: 20px; flex: none; }

/* ---- Wariant czerwony ----
   Ten sam zestaw regul obsluguje karte oznaczona jako wyrozniona i kazda
   karte pod kursorem. Drugi selektor z klasami animacji jest konieczny,
   bo regula wejscia sekcji ustawia transform z wyzsza specyficznoscia. */

.av-kafel--wyrozniony,
.av-kafel:hover,
.av-kafel.av-anim.av-widoczny:hover{
	background: var(--kafel-czerwien, #8E1B1B);
}

.av-kafel:hover,
.av-kafel.av-anim.av-widoczny:hover{
	transform: translateY(-4px);
	box-shadow:
		0 2px 4px rgba(60, 30, 20, .06),
		0 26px 56px -30px rgba(60, 30, 20, .4);
}

.av-kafel--wyrozniony .av-kafel__zaslona,
.av-kafel:hover .av-kafel__zaslona{ opacity: .62; }

.av-kafel--wyrozniony .av-kafel__ikona,
.av-kafel:hover .av-kafel__ikona{
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.av-kafel--wyrozniony .av-kafel__tytul,
.av-kafel:hover .av-kafel__tytul{ color: #fff; }

.av-kafel--wyrozniony .av-kafel__kreska,
.av-kafel:hover .av-kafel__kreska{ background: #fff; }

.av-kafel--wyrozniony .av-kafel__opis,
.av-kafel:hover .av-kafel__opis{ color: rgba(255, 255, 255, .88); }

.av-kafel--wyrozniony .av-kafel__cta,
.av-kafel:hover .av-kafel__cta{ color: #fff; }

/* Klawiatura ma dostac to samo co mysz. */
.av-kafel__link:focus-visible{
	outline: 2px solid var(--av-ink);
	outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce){
	.av-kafel,
	.av-kafel__ikona,
	.av-kafel__zaslona,
	.av-kafel__tytul,
	.av-kafel__kreska,
	.av-kafel__opis,
	.av-kafel__cta{ transition: none; }

	.av-kafel:hover,
	.av-kafel.av-anim.av-widoczny:hover{ transform: none; }
}
/* --------------------------------------------------------------------------
   6. Atuty
   -------------------------------------------------------------------------- */

.av-atuty__lista{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(26px, 3.5vw, 48px);
}

.av-atut{
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding-left: clamp(20px, 2.5vw, 34px);
	border-left: 1px solid var(--av-sand-soft);
}

.av-atut:first-child{
	border-left: 0;
	padding-left: 0;
}

.av-atut__ikona{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--av-blush);
	color: var(--av-red);
}

.av-atut__ikona svg{ width: 28px; height: 28px; display: block; }

.av-atut__tytul{
	font-family: var(--av-font-body);
	color: var(--av-ink);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 6px 0 12px;
	line-height: 1.4;
}

.av-atut__opis{
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--av-ink-soft);
	margin: 0;
	max-width: none;
}

/* Kreski pionowe mialy sens tylko w jednym rzedzie. */
@media (max-width: 781px){
	.av-atut{ border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   7. Kursy
   -------------------------------------------------------------------------- */

.av-kursy__lista{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

/* Szerokosc wedlug liczby kart. Bez tego pojedynczy kurs dostawal cale
   1180 pikseli, cena wisiala samotnie po lewej, a lista konkretow ciagnela
   sie przez pol ekranu. Karta ma wygladac jak karta, nie jak pas. */
.av-kursy__lista--1{ max-width: 420px; }
.av-kursy__lista--2{ max-width: 820px; }

/* --------------------------------------------------------------------------
   Karuzela kursow, wlaczana od czterech kart (data-karuzela).
   Poziomy tor z zatrzaskiem, przewijany strzalkami, kropkami i palcem.
   -------------------------------------------------------------------------- */

.av-kursy__karuzela{ position: relative; }

.av-kursy__lista--karuzela{
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.av-kursy__lista--karuzela::-webkit-scrollbar{ display: none; }

.av-kursy__lista--karuzela > .av-oferta{
	scroll-snap-align: start;
	flex: 0 0 calc((100% - 44px) / 3);
}

/* W karuzeli karty maja byc widoczne od razu, bo te poza kadrem nie wchodza
   w pole widzenia i animacja wejscia zostawilaby je puste. */
.av-kursy__lista--karuzela .av-anim{ opacity: 1; transform: none; }

@media (max-width: 900px){
	.av-kursy__lista--karuzela > .av-oferta{ flex-basis: calc((100% - 22px) / 2); }
}

@media (max-width: 600px){
	.av-kursy__lista--karuzela > .av-oferta{ flex-basis: 82%; }
}

.av-kursy__strzalka{
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--av-linia-lekka);
	background: #fff;
	color: var(--av-red);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}

.av-kursy__strzalka--wstecz{ left: -10px; }
.av-kursy__strzalka--dalej{ right: -10px; }

.av-kursy__strzalka:hover{ background: var(--av-red); color: #fff; }
.av-kursy__strzalka:disabled{ opacity: 0; pointer-events: none; }

@media (max-width: 600px){
	.av-kursy__strzalka{ display: none; }
}

.av-kursy__kropki{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.av-kursy__kropka{
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--av-sand-soft);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.av-kursy__kropka--aktywna{ background: var(--av-red); transform: scale(1.25); }

/* Karta oferty w stylu cennika: etykieta, tytul, jedno zdanie, duza cena,
   lista konkretow, przycisk. Bez miniatury, bo zdjecie w tym miejscu
   niczego nie mowilo, a zabieralo miejsce pracujace na decyzje. */

.av-oferta{ display: flex; }

.av-oferta__karta{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: clamp(26px, 3vw, 36px);
	transition: transform .25s ease, box-shadow .25s ease;
}

.av-oferta__karta:hover{
	transform: translateY(-4px);
	box-shadow: 0 14px 34px -20px rgba(46, 33, 26, .5);
}

.av-oferta__etykieta{
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 14px;
}

.av-oferta__tytul{
	font-family: var(--av-font-head);
	font-weight: 600;
	font-size: clamp(22px, 2.4vw, 27px);
	line-height: 1.22;
	color: var(--av-ink);
	margin: 0 0 12px;
}

.av-oferta__tytul a{ color: inherit; text-decoration: none; }
.av-oferta__tytul a:hover{ color: var(--av-red); }

.av-oferta__lead{
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--av-ink-soft);
	margin: 0 0 22px;
	max-width: none;
}

.av-oferta__cena{
	font-family: var(--av-font-head);
	font-weight: 600;
	font-size: clamp(30px, 3.4vw, 38px);
	line-height: 1.1;
	color: var(--av-ink);
	margin: 0;
}

.av-oferta__cena del{ color: var(--av-ink-soft); font-size: .6em; margin-right: 8px; }
.av-oferta__cena ins{ text-decoration: none; }

.av-oferta__jednostka{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	margin: 6px 0 0;
}

/* Lista konkretow rozpycha srodek karty, wiec przycisk zawsze siedzi
   na dole, niezaleznie od tego, ile faktow ma dany kurs. */
.av-oferta__cechy{
	list-style: none;
	margin: 22px 0 26px;
	padding: 22px 0 0;
	border-top: 1px solid var(--av-linia-lekka);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.av-oferta__cechy li{
	position: relative;
	padding-left: 26px;
	font-family: var(--av-font-body);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--av-ink-soft);
}

.av-oferta__cechy li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--av-red);
	border-bottom: 2px solid var(--av-red);
	transform: rotate(-45deg);
}

/* Najblizsze terminy na karcie. Miasto z lewej, data z prawej, zeby daty
   ustawily sie w kolumne i dalo sie je porownac jednym spojrzeniem. */
.av-oferta__terminy{
	border-top: 1px solid var(--av-linia-lekka);
	margin: 0 0 22px;
	padding: 18px 0 0;
}

.av-oferta__terminy-tytul{
	font-family: var(--av-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	margin: 0 0 10px;
}

.av-oferta__terminy-lista{
	list-style: none;
	margin: 0;
	padding: 0;
}

.av-oferta__terminy-lista li{
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 4px 0;
	font-family: var(--av-font-body);
	font-size: 13.5px;
	line-height: 1.5;
}

.av-oferta__miasto{ color: var(--av-ink); }
.av-oferta__data{ color: var(--av-ink-soft); white-space: nowrap; }

.av-oferta__terminy-wiecej{
	font-family: var(--av-font-body);
	font-size: 12.5px;
	color: var(--av-ink-soft);
	margin: 8px 0 0;
}

.av-oferta__cta{ align-self: stretch; margin-top: auto; }

.av-kursy__akcja{
	text-align: center;
	margin: clamp(32px, 4vw, 52px) 0 0;
}

/* Komunikat diagnostyczny, widoczny tylko dla zalogowanego redaktora. */
.av-diagnoza{
	border: 1px dashed var(--av-red);
	border-radius: 3px;
	background: var(--av-blush);
	padding: 22px 26px;
	max-width: 720px;
	margin-inline: auto;
	font-family: var(--av-font-body);
}

.av-diagnoza__tytul{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 12px;
}

.av-diagnoza__lista{
	margin: 0 0 14px;
	padding-left: 20px;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--av-ink);
}

.av-diagnoza__lista li{ margin-bottom: 6px; }

.av-diagnoza__stopka{
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--av-ink-soft);
	margin: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   8. O nas
   Sekcja ma wlasny zestaw zmiennych. Paleta i krój pochodza z osobnej
   specyfikacji i roznia sie od tokenow marki: czerwien jest ciemniejsza
   (#8C2B2B zamiast #D30000), a krój tekstu to Jost zamiast Libre Franklin.
   Trzymam to w zmiennych lokalnych, wiec powrot na marke to podmiana
   dwoch linijek ponizej, bez ruszania reszty arkusza.

   Jost dziala dopiero, gdy krój jest zaladowany. Dopoki go nie ma,
   przegladarka schodzi na krój tekstowy motywu i uklad zostaje ten sam.
   -------------------------------------------------------------------------- */

.av-onas{
	--onas-akcent:   #8C2B2B;
	/* Tlo bierzemy z tokena strony, a nie z osobnej specyfikacji. Roznica
	   miedzy #FBF6F2 a #FBF7F4 jest minimalna, ale wystarczyla, zeby sekcja
	   odcinala sie od sasiednich jak wklejona z innej strony. */
	--onas-tlo:      var(--av-paper);
	--onas-karta:    #FFFCFA;
	--onas-ramka:    #EFE1D9;
	--onas-linia:    #EDDFD6;
	--onas-tekst:    #1E1A18;
	--onas-tekst-2:  #4A423E;
	--onas-tekst-3:  #554D48;
	--onas-lead:     #2A2320;
	--onas-krag:     #F5EAE3;
	--onas-font-body: 'Jost', var(--av-font-body);

	position: relative;
	overflow: hidden;
	background: var(--onas-tlo);

	/* Odstepy boczne i dolny nalezą do kontenera, nie do sekcji.
	   Dekoracja jest pozycjonowana bezwzglednie, a taki element liczy
	   right i bottom od wewnetrznej krawedzi odstepu sekcji, nie od jej
	   krawedzi. Odstep na sekcji odsuwal wiec ksztalt od brzegu ekranu
	   i od dolnej linii, przez co wisial w powietrzu zamiast wchodzic
	   w kadr od krawedzi. */
	padding: 120px 0 0;
}

.av-onas > .av-kontener{
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding-inline: clamp(24px, 5vw, 64px);
	padding-bottom: 140px;
}

/* ---- Naglowek sekcji ----
   Na gorze, na pelna szerokosc. Tekst pod nim, nie obok. */

.av-onas__tresc{ padding-bottom: 88px; max-width: none; }

.av-onas__tytul{
	font-size: clamp(25px, 3.2vw, 36px);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--onas-tekst);
}

.av-onas .av-kreska{ background: var(--onas-akcent); }

.av-onas__tresc .av-tekst{
	font-family: var(--onas-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.85;
	color: var(--onas-tekst-2);
	margin-top: 26px;
	max-width: none;
	text-wrap: pretty;
}

/* Haslo stoi teraz pod naglowkiem, nad akapitami, jako lead sekcji.
   Wieksze od tekstu, zeby prowadzilo w cala sekcje. */
.av-onas__tresc .av-haslo{
	color: var(--onas-akcent);
	font-size: clamp(20px, 2.4vw, 27px);
	margin-top: 22px;
}

/* Akcent w sekcji O nas przejmuje jej wlasna, ciemniejsza czerwien,
   zeby markery **tekst** zgadzaly sie z reszta sekcji. */
.av-onas .av-akcent{ color: var(--onas-akcent); }

/* Tekst zamykajacy, pod profilami. Wysrodkowany, na pelna szerokosc,
   oddzielony cienka linia od kart. */
.av-onas__stopka{
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(36px, 4vw, 56px);
	border-top: 1px solid var(--onas-ramka);
	text-align: center;
}

.av-onas__stopka-tekst{
	font-family: var(--av-font-head);
	font-weight: 500;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1.4;
	color: var(--onas-tekst);
	max-width: 66ch;
	margin: 0 auto .5em;
	text-wrap: balance;
}

.av-onas__stopka-tekst:last-child{ margin-bottom: 0; }

/* ---- Siatka zespolu ----
   auto-fit z progiem 380 px: dwie karty obok siebie na duzym ekranie,
   jedna pod druga, gdy zabraknie miejsca. Rownej wysokosci, zeby stopki
   biogramow konczyly sie na tej samej linii. */

/* Tor siatki ma gorny limit 500 px, a nie 1fr.
   Przy torach 1fr karta z wlasnym limitem szerokosci zostawiala pustke
   wewnatrz toru, wiec odstep miedzy kartami rosl do stu kilkudziesieciu
   pikseli, mimo ze gap mowil co innego. Limit na torze sprawia, ze gap
   jest tym, co widac naprawde. */
.av-zespol{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 500px));
	gap: 32px;
	align-items: stretch;
	/* Karty wysrodkowane wzgledem strony, takze wtedy, gdy zostanie
	   widoczna jedna osoba. Puste swiatlo rozklada sie wtedy po rowno
	   z obu stron, zamiast zbierac sie po prawej. */
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---- Karta osoby ---- */

/* Gorny limit szerokosci karty.
   Siatka rozciaga tor na cala dostepna przestrzen, wiec przy jednej osobie
   karta dostawala 1180 px i portret o wysokosci 360 px zamienial sie w waski
   pas, ktory scinal glowy. Limit trzyma proporcje niezaleznie od tego, ile
   osob jest w zespole. */
.av-osoba{
	max-width: 500px;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--onas-karta);
	border: 1px solid var(--onas-ramka);
	border-radius: 4px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(60, 30, 20, .03),
		0 18px 46px -28px rgba(60, 30, 20, .28);
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}

/* Drugi selektor jest konieczny. Karta niesie klase animacji wejscia,
   ktora po pokazaniu ustawia transform na none regula o wyzszej
   specyficznosci, wiec samo .av-osoba:hover nie miałoby szans. */
.av-osoba:hover,
.av-osoba.av-anim.av-widoczny:hover{
	transform: translateY(-6px);
	box-shadow:
		0 2px 4px rgba(60, 30, 20, .05),
		0 30px 64px -30px rgba(60, 30, 20, .38);
}

/* ---- Zdjecie ---- */

/* Kadr zawsze pionowy, proporcja 4 do 5.
   Stala wysokosc w pikselach dawala inna proporcje przy kazdej szerokosci
   karty, wiec przy szerszej karcie portret zamienial sie w pas i scinal
   glowy. Proporcja liczona od szerokosci trzyma pion niezaleznie od ekranu. */
.av-osoba__foto{
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--onas-krag);
}

.av-osoba__img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Wyrownanie do gory kadru. Glowa jest w gornej czesci zdjecia, wiec
	   przy przycinaniu ma zostac zawsze, a uciac ma sie dol. */
	object-position: 50% 0;
	/* Filtr wyrownuje zdjecia z roznych sesji: inne tla i inne nasycenie
	   przestaja rzucac sie w oczy, gdy karty stoja obok siebie. */
	filter: saturate(.95) contrast(1.02);
}

/* Dol zdjecia wtapia sie w tlo karty, wiec nie ma twardej krawedzi
   miedzy fotografia a tekstem. */
.av-osoba__wtop{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(to bottom, rgba(255, 252, 250, 0), rgba(255, 252, 250, .92));
	pointer-events: none;
}

/* ---- Tresc karty ---- */

.av-osoba__tresc{
	position: relative;
	margin-top: -18px;
	padding: 0 32px 38px;
	flex: 1;
}

.av-osoba__kreska{
	width: 40px;
	height: 2px;
	background: var(--onas-akcent);
	border: 0;
	margin: 0 0 16px;
}

.av-osoba__imie{
	font-family: var(--av-font-head);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.14;
	color: var(--onas-tekst);
	margin: 0 0 10px;
	text-wrap: balance;
}

.av-osoba__rola{
	font-family: var(--onas-font-body);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--onas-akcent);
	margin: 0;
}

.av-osoba__lead{
	font-family: var(--av-font-head);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: var(--onas-lead);
	margin: 20px 0 0;
	max-width: none;
	text-wrap: pretty;
}

.av-osoba__lead + .av-osoba__lead{ margin-top: .6em; }

.av-osoba__linia{
	height: 1px;
	background: var(--onas-linia);
	border: 0;
	margin: 30px 0;
	width: 100%;
}

.av-osoba__opis{
	font-family: var(--onas-font-body);
	font-weight: 300;
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--onas-tekst-3);
	margin: 0 0 16px;
	max-width: none;
	text-wrap: pretty;
}

.av-osoba__opis:last-child{ margin-bottom: 0; }

/* Bez zdjecia karta nie moze zaczynac sie ujemnym marginesem, bo tekst
   wszedlby pod krawedz ramki. */
.av-osoba > .av-osoba__tresc:first-child{ margin-top: 0; padding-top: 34px; }

@media (max-width: 900px){
	.av-onas{ padding: 80px 0 0; }
	.av-onas > .av-kontener{ padding-inline: 24px; padding-bottom: 80px; }
	.av-onas__tresc{ padding-bottom: 56px; }

	.av-zespol{ grid-template-columns: minmax(0, 500px); gap: 32px; justify-content: center; }

	.av-osoba__tresc{ padding: 0 26px 34px; }
	.av-osoba > .av-osoba__tresc:first-child{ padding-top: 30px; }
	.av-osoba__imie{ font-size: 27px; }
	.av-osoba__lead{ font-size: 19px; }
}

@media (prefers-reduced-motion: reduce){
	.av-osoba{ transition: none; }
	.av-osoba:hover{ transform: none; }
}

/* --------------------------------------------------------------------------
   9. Kontakt
   -------------------------------------------------------------------------- */

.av-kontakt__grid{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(34px, 5vw, 76px);
	align-items: start;
}

.av-kontakt__grid--solo{
	grid-template-columns: minmax(0, 640px);
	justify-content: center;
}

.av-kontakt__formularz{
	border-left: 1px solid var(--av-red);
	padding-left: clamp(24px, 3vw, 42px);
}

/* Bez tekstu obok kreska pionowa nie ma czego oddzielac. */
.av-kontakt__grid--solo .av-kontakt__formularz{
	border-left: 0;
	padding-left: 0;
}

/* Pola formularza z dowolnej wtyczki, doprowadzone do jednego wygladu. */
.av-kontakt__formularz input[type="text"],
.av-kontakt__formularz input[type="email"],
.av-kontakt__formularz input[type="tel"],
.av-kontakt__formularz textarea{
	width: 100%;
	font-family: var(--av-font-body);
	font-size: 15px;
	color: var(--av-ink);
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	padding: 14px 16px;
}

.av-kontakt__formularz textarea{ min-height: 150px; resize: vertical; }

.av-kontakt__formularz input:focus,
.av-kontakt__formularz textarea:focus{
	outline: 2px solid var(--av-red);
	outline-offset: -1px;
	border-color: transparent;
}

.av-kontakt__formularz input[type="submit"],
.av-kontakt__formularz button[type="submit"]{
	width: 100%;
	cursor: pointer;
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: var(--av-red);
	border: 0;
	border-radius: 2px;
	padding: 16px 30px;
	transition: background .2s ease;
}

.av-kontakt__formularz input[type="submit"]:hover,
.av-kontakt__formularz button[type="submit"]:hover{ background: var(--av-red-hover); }

@media (max-width: 781px){
	.av-kontakt__formularz{ border-left: 0; padding-left: 0; }
}

/* --------------------------------------------------------------------------
   10. CTA
   -------------------------------------------------------------------------- */

.av-cta__tresc{
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.av-cta__naglowek{ font-size: clamp(27px, 3.8vw, 42px); }

.av-cta__tekst{
	margin: 20px auto 32px;
	max-width: 56ch;
}

/* --------------------------------------------------------------------------
   11. Mobile
   -------------------------------------------------------------------------- */

/* ---- Hero na tablecie i telefonie ----
   Podzial na polowy przestaje dzialac ponizej 1024 px, bo na naglowek
   zostaje okolo 320 px i lamie sie po dwa slowa w wierszu. Zamiast tego
   zdjecie idzie na gore, na cala szerokosc ekranu, a gradient obraca sie
   z poziomego na pionowy, zeby dol fotografii wtapial sie w tekst. */
@media (max-width: 1024px){
	.av-hero__grid{
		display: block;
		min-height: 0;
	}

	.av-hero__tresc{
		width: 100%;
		padding-right: 0;
		padding-block: clamp(30px, 5vw, 52px) clamp(44px, 6vw, 72px);
	}

	.av-hero > .av-hero__foto{
		position: relative;
		inset: auto;
		height: clamp(280px, 44vh, 420px);
	}

	.av-hero__foto::after{
		background: linear-gradient(
			to bottom,
			rgba(var(--av-paper-rgb), 0) 55%,
			rgba(var(--av-paper-rgb), .35) 76%,
			rgba(var(--av-paper-rgb), .85) 92%,
			rgb(var(--av-paper-rgb)) 100%
		);
	}
}

@media (max-width: 600px){
	.av-hero > .av-hero__foto{ height: clamp(220px, 36vh, 300px); }
}

@media (max-width: 781px){
	.av-kontakt__grid{ grid-template-columns: minmax(0, 1fr); }
	.av-kontakt__formularz{ border-left: 0; padding-left: 0; }
	.av-dekor{ width: 96px; }
}

/* --------------------------------------------------------------------------
   Plakietka przy cenie, np. „Od 2 osob taniej”.
   Drobna, w czerwieni marki, na jasnym tle, zeby czytala sie jako korzysc
   obok kwoty. Ten sam styl na stronie szkolenia i na karcie na stronie
   glownej, dlatego siedzi tu, a nie w arkuszu sklepu: sekcje.css ladowany
   jest na obu tych widokach, woo.css tylko w sklepie.
   -------------------------------------------------------------------------- */

.av-plakietka{
	display: inline-block;
	margin: 8px 0 0;
	padding: 4px 10px;
	border-radius: 2px;
	background: var(--av-blush);
	font-family: var(--av-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--av-red);
}

/* --------------------------------------------------------------------------
   Aktualnosci, wpisy z bloga
   Siatka kart jak w sekcji kursow: ta sama szerokosc, te same odstepy,
   ta sama ograniczona szerokosc przy jednej i dwoch kartach.
   -------------------------------------------------------------------------- */

.av-wpisy{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

.av-wpisy--1{ max-width: 420px; }
.av-wpisy--2{ max-width: 820px; }

.av-wpis{ display: flex; }

.av-wpis__karta{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--av-karta);
	border: 1px solid var(--av-linia-lekka);
	border-radius: 2px;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.av-wpis__karta:hover{
	border-color: var(--av-sand);
	box-shadow: 0 10px 26px rgba(46, 33, 26, .08);
	transform: translateY(-3px);
}

.av-wpis__foto{
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--av-blush);
}

.av-wpis__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.av-wpis__tresc{
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(20px, 2.4vw, 28px);
}

.av-wpis__data{
	font-family: var(--av-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 0 0 10px;
}

.av-wpis__tytul{
	font-family: var(--av-font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--av-ink);
	margin: 0 0 12px;
}

.av-wpis__tytul a{ color: inherit; text-decoration: none; }
.av-wpis__tytul a:hover{ color: var(--av-red); }

.av-wpis__lead{
	font-family: var(--av-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--av-ink-soft);
	margin: 0 0 18px;
}

/* Odnosnik dosuniety do dolu karty, zeby karty w rzedzie konczyly sie rowno. */
.av-wpis__cta{
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--av-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--av-red);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.av-wpis__cta:hover{ color: var(--av-red-hover); }

/* ==========================================================================
   Logotypy firm, przewijana wstega

   Pas zawiera te sama grupe logotypow kilka razy. Animacja przesuwa go
   dokladnie o szerokosc jednej grupy (--av-loga-skok), wiec po powrocie do
   zera obraz jest identyczny i petla nie ma widocznego ciecia. Czas
   (--av-loga-czas) liczy PHP z liczby logotypow, zeby predkosc byla stala.
   ========================================================================== */

.av-sekcja-loga .av-sekcja__head{ margin-bottom: 38px; }

.av-loga{
	position: relative;
	overflow: hidden;
}

/* Logotypy gasna przy krawedziach zamiast ucinac sie w pol znaku. */
.av-loga::before,
.av-loga::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(40px, 8vw, 110px);
	z-index: 2;
	pointer-events: none;
}

.av-loga::before{
	left: 0;
	background: linear-gradient(90deg, var(--av-paper), rgba(var(--av-paper-rgb), 0));
}

.av-loga::after{
	right: 0;
	background: linear-gradient(270deg, var(--av-paper), rgba(var(--av-paper-rgb), 0));
}

.av-loga__pas{
	display: flex;
	width: max-content;
	animation: av-loga-jedzie var(--av-loga-czas, 30s) linear infinite;
	will-change: transform;
}

@keyframes av-loga-jedzie{
	from{ transform: translate3d(0, 0, 0); }
	to{ transform: translate3d(var(--av-loga-skok, -50%), 0, 0); }
}

/* Zatrzymanie przy najechaniu, zeby dalo sie przeczytac logotyp. */
.av-loga:hover .av-loga__pas,
.av-loga:focus-within .av-loga__pas{ animation-play-state: paused; }

.av-loga__grupa{
	display: flex;
	align-items: center;
	gap: clamp(38px, 5vw, 72px);
	margin: 0;
	padding: 0 clamp(19px, 2.5vw, 36px);
	list-style: none;
}

.av-loga__poz{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
}

.av-loga__link{
	display: flex;
	align-items: center;
	height: 100%;
}

.av-loga__img{
	display: block;
	width: auto;
	max-width: 170px;
	height: auto;
	max-height: 58px;
	object-fit: contain;
	transition: filter .25s ease, opacity .25s ease;
}

/* Wariant stonowany: kolor wraca dopiero przy najechaniu. */
.av-loga--szare .av-loga__img{
	filter: grayscale(1);
	opacity: .58;
}

.av-loga--szare .av-loga__poz:hover .av-loga__img{
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 700px){
	.av-loga__poz{ height: 44px; }
	.av-loga__img{ max-height: 44px; max-width: 128px; }
	.av-sekcja-loga .av-sekcja__head{ margin-bottom: 28px; }
}

/*
 * Ruch wylaczony w ustawieniach systemu. Zamiast animacji dajemy zwykly
 * pasek do przewijania palcem, bo sama wstega bez ruchu pokazywalaby
 * tylko pierwsze logotypy i reszta bylaby nieosiagalna.
 */
@media (prefers-reduced-motion: reduce){
	.av-loga{ overflow-x: auto; }
	.av-loga__pas{ animation: none; }
	.av-loga__grupa:not(:first-child){ display: none; }
	.av-loga__grupa{ flex-wrap: wrap; justify-content: center; row-gap: 26px; }
}

/* --------------------------------------------------------------------------
   Lista produktow z shortcode [avuerra_produkty]

   Te same karty co w sekcji kursow, tylko w zwyklej siatce zamiast karuzeli.
   Karta ma wlasny wyglad w .av-oferta__karta, wiec tutaj ustawiamy sam uklad.
   -------------------------------------------------------------------------- */

.av-oferty{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

@media (max-width: 600px){
	.av-oferty{ grid-template-columns: 1fr; gap: 16px; }
}

/* --------------------------------------------------------------------------
   Zakladki kategorii nad kartami kursow
   -------------------------------------------------------------------------- */

.av-zakladki{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 34px;
}

.av-zakladki__poz{
	padding: 10px 20px;
	background: transparent;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	font-family: var(--av-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--av-ink-soft);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.av-zakladki__poz:hover{
	border-color: var(--av-red);
	color: var(--av-red);
}

.av-zakladki__poz[aria-selected="true"]{
	background: var(--av-red);
	border-color: var(--av-red);
	color: #fff;
}

/* Siatka przy zakladkach: karuzela jest wtedy wylaczona, bo chowanie kart
   psuloby jej tor i kropki. */
.av-kursy__lista--siatka{
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

.av-kursy__lista--siatka .av-oferta[hidden]{ display: none; }

@media (max-width: 600px){
	.av-zakladki{ gap: 8px; margin-bottom: 24px; }
	.av-zakladki__poz{ padding: 9px 15px; font-size: 11.5px; }
	.av-kursy__lista--siatka{ grid-template-columns: 1fr; gap: 16px; }
}

/*
 * Kadence maluje kazdy element button na hover wlasnym tlem
 * (--global-palette-btn-bg-hover), czyli blekitem. Poprzednia wersja ustawiala
 * tu tylko kolor tekstu, wiec tlo zostawalo niebieskie. Nadpisujemy komplet.
 */
.av-zakladki .av-zakladki__poz:hover,
.av-zakladki .av-zakladki__poz:focus,
.av-zakladki .av-zakladki__poz:focus-visible,
.av-zakladki .av-zakladki__poz:active{
	background: var(--av-blush) !important;
	border-color: var(--av-red) !important;
	color: var(--av-red) !important;
	box-shadow: none !important;
}

.av-zakladki .av-zakladki__poz[aria-selected="true"],
.av-zakladki .av-zakladki__poz[aria-selected="true"]:hover,
.av-zakladki .av-zakladki__poz[aria-selected="true"]:focus,
.av-zakladki .av-zakladki__poz[aria-selected="true"]:active{
	background: var(--av-red) !important;
	border-color: var(--av-red) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Strona pojedynczego materialu: webinar albo e-book
   -------------------------------------------------------------------------- */

.av-mat-head{ padding-bottom: clamp(30px, 4vw, 48px); }

.av-mat-head__in{ max-width: 760px; }

.av-mat-head__etykieta{
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--av-red);
}

.av-mat-head__lead{
	margin: 18px 0 0;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.6;
	color: var(--av-ink-soft);
}

.av-mat-head__fakty{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 18px;
	margin: 22px 0 0;
}

.av-mat-head__cena{
	font-family: var(--av-font-head);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	color: var(--av-ink);
	font-variant-numeric: tabular-nums;
}

.av-mat-head__fakt{
	font-size: 14px;
	color: var(--av-ink-soft);
}

.av-mat-head__akcja{ margin: 26px 0 0; }

.av-mat-head__nota{
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--av-ink-soft);
}

.av-mat-foto{ padding-top: 0; padding-bottom: clamp(30px, 4vw, 48px); }

.av-mat-foto__img{
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.av-mat-tresc{ padding-top: 0; }

/* Waska kolumna tekstu. Proza czyta sie najlepiej w okolicach 70 znakow
   w wierszu, a pelna szerokosc sekcji jest na to zbyt szeroka. */
.av-mat-tresc__in{ max-width: 760px; }

.av-mat-koniec{
	margin: 38px 0 0;
	padding-top: 30px;
	border-top: 1px solid var(--av-linia-lekka);
}