/**
 * rtvplaneta — tekst ciągły: wpis i zwykła strona.
 *
 * Kolumna o stałej mierze i typografia treści z edytora. Wspólne dla wpisów
 * (recenzja, news, poradnik) i zwykłych stron (O redakcji, Kontakt, Polityka
 * prywatności), bo w obu przypadkach czytelnik czyta zdania, a nie porównuje
 * danych w kolumnach. To, co ma tylko wpis — tagi, podpis autora, „Czytaj
 * dalej” — zostaje w wpis.css.
 *
 * Nagłówek artykułu (.rtv-art__*) i podpis autora siedzą w theme.css.
 */

.rtv-tekst {
	padding: 28px 0 56px;
}

/*
 * Tekst stoi w jednej kolumnie o stałej mierze i jest wyśrodkowany
 * w kontenerze. To NIE jest to samo co karta produktu: tam szerokość niosła
 * dane porównywalne w kolumnach, tutaj niesie zdania, a wiersz dłuższy niż
 * ~75 znaków gubi się przy powrocie do początku linijki.
 */
.rtv-tekst__kolumna,
.rtv-tekst .rtv-komentarze {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.rtv-tekst__naglowek {
	margin-bottom: 24px;
}

.rtv-tekst__foto {
	margin: 0 0 28px;
	aspect-ratio: 16 / 9;
}

/*
 * Zdjęcie wypełnia kadr, w odróżnieniu od zdjęcia produktu. Fotografia
 * redakcyjna jest kadrowana pod publikację, sprzęt na białym tle nie.
 */
.rtv-tekst__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================================
 * Treść
 * ====================================================================== */

.rtv-tekst__tresc {
	font-size: 18px;
	line-height: 1.7;
	color: var(--rtv-lead);
}

.rtv-tekst__tresc p {
	margin: 0 0 1.2em;
}

.rtv-tekst__tresc h2,
.rtv-tekst__tresc h3,
.rtv-tekst__tresc h4 {
	color: var(--rtv-ink);
	margin: 1.8em 0 .5em;
}

.rtv-tekst__tresc h2 {
	font-size: 27px;
}

.rtv-tekst__tresc h3 {
	font-size: 21px;
}

.rtv-tekst__tresc h4 {
	font-size: 18px;
}

.rtv-tekst__tresc a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.rtv-tekst__tresc ul,
.rtv-tekst__tresc ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.rtv-tekst__tresc li {
	margin-bottom: .5em;
}

.rtv-tekst__tresc blockquote {
	margin: 1.6em 0;
	padding-left: 22px;
	border-left: 3px solid var(--rtv-accent);
	font-size: 20px;
	line-height: 1.5;
	color: var(--rtv-ink);
}

.rtv-tekst__tresc figure {
	margin: 1.6em 0;
}

/*
 * Bloki szerokie i pełnoekranowe wychodzą poza miarę tekstu. Motyw deklaruje
 * align-wide, więc redakcja może tego użyć w edytorze i musi to gdzieś
 * zadziałać — bez tych reguł „szeroki” wyglądałby jak zwykły.
 */
.rtv-tekst__tresc .alignwide,
.rtv-tekst__tresc .alignfull {
	width: min(1040px, 92vw);
	margin-left: 50%;
	transform: translateX(-50%);
	max-width: none;
}

/*
 * „Pełna szerokość" celowo zachowuje się jak „szeroki", zamiast rozciągać się
 * na 100vw. Jednostki vw liczą TAKŻE pasek przewijania, więc blok o szerokości
 * 100vw na stronie z pionowym paskiem wystaje poza okno o jego szerokość
 * i przewija cały dokument w bok. To dokładnie ten rodzaj usterki, który
 * naprawialiśmy w tabeli rankingu — nie ma powodu wprowadzać go z powrotem
 * dla efektu, którego kolumna tekstu o szerokości 760 px i tak nie potrzebuje.
 *
 * 92vw jest bezpieczne, bo zawsze mieści się w oknie z zapasem.
 */

.rtv-tekst__tresc pre,
.rtv-tekst__tresc table {
	/* Kod i tabele przewijają się we własnym pudełku, zamiast rozpychać
	   stronę — patrz komentarz przy .rtv-scroll-x w theme.css. */
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/*
 * Tabele w treści — ten sam język co tabela parametrów na karcie produktu:
 * wiersze rozdzielone jasną kreską, etykiety szare i pogrubione. Najczęściej
 * trafią tu w regulaminie i polityce prywatności (lista ciasteczek, dane
 * kontaktowe), gdzie bez odstępów komórki zlewały się w jeden ciąg tekstu.
 *
 * border-collapse działa mimo display: block powyżej — właściwość jest
 * dziedziczona przez anonimowe pudełko tabeli, które przeglądarka tworzy
 * w środku.
 */
.rtv-tekst__tresc table {
	margin: 1.6em 0;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.5;
}

.rtv-tekst__tresc th,
.rtv-tekst__tresc td {
	padding: 11px 24px 11px 0;
	border-bottom: 1px solid var(--rtv-border-light);
	text-align: left;
	vertical-align: baseline;
}

.rtv-tekst__tresc th {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--rtv-muted);
	border-bottom: 2px solid var(--rtv-ink);
}

/* =========================================================================
 * Wąskie ekrany
 * ====================================================================== */

@media (max-width: 700px) {

	.rtv-tekst__tresc {
		font-size: 17px;
	}

	.rtv-tekst__tresc h2 {
		font-size: 23px;
	}

	.rtv-tekst__tresc h3 {
		font-size: 19px;
	}

	/*
	 * Komórki tabeli z dolną granicą szerokości. Bez niej przeglądarka ściska
	 * kolumny z długim tekstem do szerokości najdłuższego słowa i opis ciasteczka
	 * łamie się po jednym wyrazie w wierszu. Z granicą tabela po prostu szerzej
	 * przewija się w bok we własnym pudełku, a tekst w kolumnach da się czytać.
	 * Tylko na wąskich ekranach: na desktopie miejsca wystarcza i taka granica
	 * mogłaby niepotrzebnie wypchnąć w przewijanie tabelę z wieloma kolumnami.
	 */
	.rtv-tekst__tresc th,
	.rtv-tekst__tresc td {
		min-width: 8.5em;
	}

	/* Na wąskim ekranie nie ma z czego robić szerokiego bloku — zrównujemy
	   go z tekstem, żeby nie wystawał poza gutter. */
	.rtv-tekst__tresc .alignwide,
	.rtv-tekst__tresc .alignfull {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
}

@media (max-width: 600px) {

	.rtv-tekst {
		padding: 20px 0 40px;
	}
}