/* ==========================================================================
   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); }

/* --------------------------------------------------------------------------
   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); }

/* 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; }
.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; }

.av-hero__grid{
	display: flex;
	align-items: center;
	min-height: clamp(460px, 62vh, 680px);
}

/* 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
   -------------------------------------------------------------------------- */

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

.av-kafel{
	background: linear-gradient(180deg, #fff 0%, var(--av-blush) 100%);
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}

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

/* Wrapper jest zawsze, <a> gdy karta ma link, <div> gdy nie ma.
   Jedna regula odstepow zamiast warunkowych paddingow na dzieciach. */
.av-kafel__link{
	display: block;
	height: 100%;
	padding: 40px 26px;
	color: inherit;
	text-decoration: none;
}

.av-kafel__ikona{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--av-blush);
	color: var(--av-red);
}

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

.av-kafel__tytul{
	font-family: var(--av-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 16px;
	line-height: 1.45;
}

.av-kafel__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;
}

/* --------------------------------------------------------------------------
   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);
	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;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}

.av-kurs{
	background: #fff;
	border: 1px solid var(--av-sand-soft);
	border-radius: 2px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

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

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

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

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

.av-kurs__tresc{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px 30px;
}

.av-kurs__tytul{
	font-family: var(--av-font-head);
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
}

.av-kurs__cena{
	font-family: var(--av-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--av-red);
}

.av-kurs__cena del{ color: var(--av-ink-soft); font-weight: 400; margin-right: 6px; }

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

/* --------------------------------------------------------------------------
   8. O nas
   -------------------------------------------------------------------------- */

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

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

.av-onas__tresc .av-haslo{ margin-top: 26px; }

.av-onas__tresc{ max-width: 68ch; }

/* ---- Zespol ----
   Liczba kolumn idzie z klasy modyfikujacej, ustawianej w PHP z liczby osob.
   Swiadomie nie uzywam auto-fit, bo przy dwoch osobach rozciagnalby karty
   na cala szerokosc i zdjecia zrobilyby sie nienaturalnie duze. */

.av-zespol{
	list-style: none;
	margin: clamp(44px, 6vw, 72px) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(24px, 3.2vw, 44px);
}

/* Ograniczenie szerokosci przy malej liczbie osob. Bez tego dwie karty
   rozciagaja sie na polowe kontenera kazda i portret robi sie wiekszy
   od zdjecia w sekcji hero. */
.av-zespol--1{ grid-template-columns: minmax(0, 1fr); max-width: 360px; }
.av-zespol--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.av-zespol--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; }
.av-zespol--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.av-zespol--1,
.av-zespol--2,
.av-zespol--3{ margin-inline: auto; }

.av-osoba__foto{
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--av-blush);
	margin-bottom: 22px;
}

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

.av-osoba__imie{
	font-family: var(--av-font-head);
	font-weight: 600;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	color: var(--av-ink);
	margin: 0 0 6px;
}

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

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

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

/* --------------------------------------------------------------------------
   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: 1024px){
	.av-zespol--3,
	.av-zespol--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@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; }
}

@media (max-width: 600px){
	.av-zespol--2,
	.av-zespol--3,
	.av-zespol--4{ grid-template-columns: minmax(0, 1fr); }
}