/*
	Uzupelnienia do main.css: przyklejony naglowek, zachowanie slotow reklamowych,
	stabilny hero, rowne kafle, formularz newslettera i poprawki na waskim ekranie.
	Trzymamy je osobno, zeby bylo widac, co doszlo po pierwszym skladzie makiety.
*/

/* ------------------------------------------------------------ naglowek */

/*
	Naglowek jedzie z czytelnikiem, wiec menu jest pod reka przez caly czas.
	Na szerokim ekranie hamburger znika, bo powtarzalby to, co i tak widac.
*/
.am-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #fff;
}

.admin-bar .am-head {
	top: 32px;
}

html {
	scroll-padding-top: 90px;
}

@media (min-width: 901px) {
	.ikona-burger,
	.am-tools .kreska:last-of-type {
		display: none;
	}

	.szuflada {
		display: none !important;
	}
}

@media screen and (max-width: 782px) {
	.admin-bar .am-head {
		top: 46px;
	}
}

/* ------------------------------------------------------- sloty reklamowe */

/*
	Wysokosc ustala kontener, nie kreacja. Zle przyciety plik od reklamodawcy
	nie rozwala ukladu, a przegladarka rezerwuje miejsce przed wczytaniem obrazka.
*/
.slot-home-top,
.slot-home-mid,
.slot-article-inline,
.slot-archive-grid,
.slot-home-sponsored {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--proporcje, auto);
	overflow: visible;
	background: #F2F2F3;
}

.slot-home-top .kreacja,
.slot-home-mid .kreacja,
.slot-article-inline .kreacja,
.slot-archive-grid .kreacja,
.slot-home-sponsored .kreacja,
.slot-home-top .kreacja-link,
.slot-home-mid .kreacja-link,
.slot-article-inline .kreacja-link,
.slot-archive-grid .kreacja-link,
.slot-home-sponsored .kreacja-link {
	height: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
}

.slot-home-top .kreacja-img,
.slot-home-mid .kreacja-img,
.slot-article-inline .kreacja-img,
.slot-archive-grid .kreacja-img,
.slot-home-sponsored .kreacja-img {
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	box-shadow: 0 0 0 var(--ramka-reklamy) var(--czerwien);
}

/*
	Etykieta nigdy nie jest elementem ukladu: w slocie poziomym stoi nad kreacja,
	inaczej zjadalaby szerokosc i baner nie doszedlby do krawedzi hero.
*/
.slot-home-top .etykieta-reklamy,
.slot-home-mid .etykieta-reklamy,
.slot-article-inline .etykieta-reklamy,
.slot-archive-grid .etykieta-reklamy,
.slot-home-sponsored .etykieta-reklamy {
	position: absolute;
	right: 0;
	top: -15px;
	pointer-events: none;
}

.slot-home-rail .kreacja-img,
.slot-article-rail .kreacja-img {
	max-width: 100%;
	object-fit: contain;
}

/* ------------------------------------------------------------ hero bez skokow */

/*
	Wszystkie slajdy leza na sobie w jednej komorce siatki, wiec wysokosc hero
	nie zmienia sie przy zmianie slajdu. Wczesniej aktywny slajd wchodzil
	do ukladu i caly rzad podskakiwal razem z lista obok.
*/
.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.hero-slajd {
	position: relative;
	inset: auto;
	grid-area: 1 / 1;
	visibility: hidden;
	transition: opacity .5s ease, visibility 0s linear .5s;
}

.hero-slajd.jest-aktywny {
	position: relative;
	visibility: visible;
	transition: opacity .5s ease;
}

/*
	Tytul dostaje dwa wiersze, lead dwa. Dluzszy tekst jest ucinany, wiec kazdy
	slajd ma te sama wysokosc, mniej wiecej taka jak na wizualizacji,
	a przycisk nie wchodzi na numeracje slajdow.
*/
@media (min-width: 901px) {
	.hero-tresc {
		padding: 28px 40px 48px;
		justify-content: flex-start;
	}

	.hero-tyt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		overflow: hidden;
		margin: 10px 0 12px;
	}

	.hero-tresc p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		overflow: hidden;
		margin-bottom: 16px;
	}

	.pager {
		bottom: 16px;
	}
}

/* ----------------------------------------------------------- rowne kafle */

/*
	Kafel newsa ma trzymac te sama wysokosc niezaleznie od dlugosci tytulu.
	Rezerwujemy wiersze tekstu i ucinamy nadmiar, zeby rzad nie skakal.
*/
.kafel h3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(3 * 1.38em);
}

.kafel.maly h3 {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	min-height: calc(2 * 1.38em);
}

/* -------------------------------------------------------- newsletter */

/*
	Formularz obejmuje cala sekcje, zeby zgoda szla razem z adresem,
	ale nie zmienia ukladu: display contents zostawia siatke taka jak byla.
*/
.nl-formularz {
	display: contents;
}

/* Pulapka na roboty. Czlowiek tego nie widzi, robot wypelnia i odpada. */
.am-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-komunikat {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	font-weight: 600;
}

.nl-komunikat--ok {
	color: #14612f;
}

.nl-komunikat--blad {
	color: var(--czerwien);
}

/* --------------------------------------------------------- waski ekran */

@media (max-width: 900px) {
	/*
		Dlugi pas i tak nie wypelni wysokosci na telefonie,
		wiec slot bierze wysokosc z kreacji i nie zostawia pustego pola.
	*/
	.slot-home-mid,
	.slot-archive-grid,
	.slot-home-top,
	.slot-article-inline,
	.slot-home-sponsored {
		aspect-ratio: auto;
		background: none;
	}

	.slot-home-mid .kreacja,
	.slot-archive-grid .kreacja,
	.slot-home-top .kreacja,
	.slot-article-inline .kreacja,
	.slot-home-sponsored .kreacja,
	.slot-home-mid .kreacja-link,
	.slot-archive-grid .kreacja-link,
	.slot-home-top .kreacja-link,
	.slot-article-inline .kreacja-link,
	.slot-home-sponsored .kreacja-link {
		height: auto;
		width: 100%;
	}

	.slot-home-mid .kreacja-img,
	.slot-archive-grid .kreacja-img,
	.slot-home-top .kreacja-img,
	.slot-article-inline .kreacja-img,
	.slot-home-sponsored .kreacja-img {
		width: 100%;
		height: auto;
	}

	.slot-home-top .etykieta-reklamy,
	.slot-home-mid .etykieta-reklamy,
	.slot-article-inline .etykieta-reklamy,
	.slot-archive-grid .etykieta-reklamy,
	.slot-home-sponsored .etykieta-reklamy {
		top: -13px;
	}

	/* Na telefonie hero jest wyzszy, ale tekst tez ma staly limit wierszy. */
	.hero-tyt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		line-clamp: 3;
		overflow: hidden;
	}

	.hero-tresc p {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		line-clamp: 4;
		overflow: hidden;
	}

	/*
		Tarcza oceny ma stale 108 px, wiec musi stac w kolumnie o tej szerokosci.
		Bez jawnego wskazania miejsca ladowala w kolumnie elastycznej i wychodzila na oceny.
	*/
	.werdykt-lewo .tarcza {
		grid-column: 1;
		grid-row: 1;
	}

	.werdykt-lewo .model {
		grid-column: 2;
		grid-row: 1;
	}

	.werdykt-lewo .score-podpis {
		grid-column: 1;
		grid-row: 2;
	}

	/*
		Lista newsow pod hero: kazdy wiersz ma te sama wysokosc,
		zdjecie po lewej, dwa wiersze tytulu po prawej. Tak jak na wizualizacji.
	*/
	.rzad-kafle .kafel {
		min-height: 102px;
		align-items: center;
	}

	.rzad-kafle .kafel h3,
	.rzad-kafle .kafel.maly h3 {
		-webkit-line-clamp: 2;
		line-clamp: 2;
		min-height: calc(2 * 1.38em);
	}

	.rzad-kafle .kafel-tresc {
		justify-content: center;
	}

	/* Szuflada na telefonie: pozycje w poziomie, zeby nie zjadala ekranu. */
	.szuflada ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slajd {
		transition: none;
	}
}

/* Slot sponsorowany na telefonie: proporcje zostaja, wiec miejsce jest zarezerwowane. */
@media (max-width: 900px) {
	.slot-home-sponsored {
		aspect-ratio: var(--proporcje, auto);
		background: #F2F2F3;
	}

	.slot-home-sponsored .kreacja,
	.slot-home-sponsored .kreacja-link {
		height: 100%;
		width: auto;
		max-width: 100%;
	}

	.slot-home-sponsored .kreacja-img {
		width: auto;
		height: 100%;
		max-width: 100%;
	}
}

/* Jawna szerokosc slotu w siatce kafli, inaczej margin auto zostawia zero. */
.rzad-kafle .slot,
.slot-home-sponsored,
.slot-w-siatce .slot {
	width: 100%;
}

/*
	Safari nie wylicza aspect-ratio podanego zmienna, wiec kreacja nie moze zalezec
	od wysokosci kontenera. Obrazek bierze cala szerokosc, a wysokosc z wlasnych proporcji.
*/
.slot-home-top .kreacja-img,
.slot-home-mid .kreacja-img,
.slot-article-inline .kreacja-img,
.slot-archive-grid .kreacja-img,
.slot-home-sponsored .kreacja-img {
	width: 100%;
	height: auto;
	max-height: 100%;
}

.slot-home-top .kreacja,
.slot-home-mid .kreacja,
.slot-article-inline .kreacja,
.slot-archive-grid .kreacja,
.slot-home-sponsored .kreacja,
.slot-home-top .kreacja-link,
.slot-home-mid .kreacja-link,
.slot-article-inline .kreacja-link,
.slot-archive-grid .kreacja-link,
.slot-home-sponsored .kreacja-link {
	width: 100%;
	height: auto;
}

/* Etykieta stoi nad kreacja, z wlasnym cieniem wiersza, zeby nie wchodzila na ramke. */
.slot .etykieta-reklamy {
	line-height: 1;
	top: -17px;
}

/*
	Rzad werdyktu jak na wizualizacji: nizsza tarcza, ciasniejsza lista ocen,
	mniejsze marginesy karty. Dzieki temu prawa kolumna z reklama konczy sie
	rowno z dolem boksu Punkt widzenia.
*/
@media (min-width: 901px) {
	.rzad-2 .karta {
		padding: 16px 20px;
	}

	.werdykt .tarcza,
	.werdykt .tarcza svg {
		width: 78px;
		height: 78px;
	}

	.werdykt .tarcza {
		margin: 6px auto 0;
	}

	.werdykt .ocena {
		font-size: 22px;
	}

	.werdykt .na {
		font-size: 9px;
		margin-top: 1px;
	}

	.werdykt .score-podpis {
		margin-top: 8px;
		font-size: 9.5px;
	}

	.oceny div {
		padding: 5px 0;
	}

	.werdykt .link-strzalka {
		margin-top: 12px;
	}

	.punkt blockquote {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.punkt-grid {
		grid-template-columns: 150px minmax(0, 1fr);
	}
}

/*
	Prawa kolumna do dolu: slot rozciaga sie na cala wysokosc lewej kolumny,
	wiec ramka reklamy konczy sie rowno z boksem Punkt widzenia.
*/
@media (min-width: 901px) {
	.rzad {
		align-items: stretch;
	}

	.kol-prawa {
		height: 100%;
	}

	.slot-home-rail {
		height: 100%;
		aspect-ratio: auto;
		align-items: flex-start;
		justify-content: center;
	}

	.slot-home-rail .kreacja,
	.slot-home-rail .kreacja-link {
		height: auto;
		width: 100%;
	}

	.slot-home-rail .kreacja-img {
		width: 100%;
		height: auto;
	}
}

/* Szerokosc kolumny reklamowej: slot wypelnia kolumne, nie liczy jej z obrazka. */
.slot-home-rail,
.slot-article-rail {
	width: 100%;
}

/* Odstep etykiety od kreacji, zeby napis nie dotykal ramki reklamy. */
.slot .etykieta-reklamy {
	top: -22px;
	line-height: 1;
}

@media (min-width: 901px) {
	.rzad {
		margin-top: 24px;
	}
}

@media (max-width: 900px) {
	.slot .etykieta-reklamy {
		top: -18px;
	}
}