/**
 * rtvplaneta — komentarze.
 *
 * Osobny arkusz, bo dyskusja stoi pod DWOMA typami stron: wpisem i kartą
 * produktu. Wcześniej te reguły leżały w arkuszu karty produktu, przez co
 * komentarze pod wpisem byłyby nieostylowane.
 *
 * Ładowany tylko tam, gdzie dyskusja faktycznie jest — patrz functions.php.
 *
 * Większość znaczników generuje rdzeń WordPressa (wp_list_comments,
 * comment_form), więc stylujemy TU jego klasy: .comment-list, .comment-body,
 * .comment-form. Nie zmieniamy ich nazw, bo przyjdą z aktualizacją rdzenia.
 */

.rtv-komentarze {
	margin-top: 48px;
	padding-top: 8px;
}

/* =========================================================================
 * Lista
 * ====================================================================== */

.rtv-komentarze__lista,
.rtv-komentarze__lista .children {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rtv-komentarze__lista .comment,
.rtv-komentarze__lista .pingback {
	padding: 20px 0;
	border-bottom: 1px solid var(--rtv-border-light);
}

/* Odpowiedzi wcięte i oznaczone kreską, żeby przy dłuższym wątku było
   widać, do czego ktoś się odnosi. */
.rtv-komentarze__lista .children {
	margin: 16px 0 0 20px;
	padding-left: 20px;
	border-left: 2px solid var(--rtv-border);
}

.rtv-komentarze__lista .children .comment:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.rtv-komentarze .comment-body {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 8px 14px;
	align-items: start;
}

.rtv-komentarze .comment-author {
	display: contents;
}

.rtv-komentarze .comment-author img,
.rtv-komentarze .avatar {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.rtv-komentarze .comment-author .fn {
	grid-column: 2;
	font-family: var(--rtv-font-display);
	font-size: 14.5px;
	font-weight: 800;
	font-style: normal;
}

.rtv-komentarze .says {
	display: none;
}

.rtv-komentarze .comment-metadata {
	grid-column: 2;
	font-family: var(--rtv-font-meta);
	font-size: 11.5px;
	color: var(--rtv-faint);
}

.rtv-komentarze .comment-content {
	grid-column: 2;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--rtv-lead);
}

.rtv-komentarze .comment-content p {
	margin: 0 0 .7em;
}

.rtv-komentarze .comment-content p:last-child {
	margin-bottom: 0;
}

.rtv-komentarze .reply {
	grid-column: 2;
}

.rtv-komentarze .comment-reply-link {
	font-family: var(--rtv-font-display);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rtv-accent);
}

/* Komentarz autora wpisu — wyróżniony, bo odpowiedź redakcji ma inną wagę
   niż głos w dyskusji. Klasa pochodzi z rdzenia. */
.rtv-komentarze .bypostauthor > .comment-body .fn::after {
	content: "redakcja";
	margin-left: 8px;
	padding: 2px 6px;
	background: var(--rtv-ink);
	color: var(--rtv-on-dark);
	font-family: var(--rtv-font-meta);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	vertical-align: middle;
}

.rtv-komentarze__zamkniete {
	font-size: 14px;
	color: var(--rtv-muted);
	margin: 20px 0 0;
}

/* =========================================================================
 * Formularz
 * ====================================================================== */

.rtv-komentarze .comment-respond {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--rtv-border);
}

.rtv-komentarze .comment-reply-title {
	font-family: var(--rtv-font-display);
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 6px;
}

.rtv-komentarze__nota {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--rtv-faint);
	margin: 0 0 18px;
}

.rtv-komentarze .comment-form label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--rtv-font-meta);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rtv-muted);
}

.rtv-komentarze .comment-form p {
	margin: 0 0 16px;
}

.rtv-komentarze .comment-form input[type="text"],
.rtv-komentarze .comment-form input[type="email"],
.rtv-komentarze .comment-form input[type="url"],
.rtv-komentarze .comment-form textarea {
	width: 100%;
	max-width: 520px;
	padding: 10px 12px;
	border: 1px solid var(--rtv-border);
	background: var(--rtv-bg);
	font: inherit;
	font-size: 15px;
	color: var(--rtv-ink);
}

.rtv-komentarze .comment-form textarea {
	max-width: 100%;
	resize: vertical;
}

.rtv-komentarze .comment-form input:focus,
.rtv-komentarze .comment-form textarea:focus {
	border-color: var(--rtv-ink);
	outline: 2px solid var(--rtv-accent);
	outline-offset: 1px;
}

.rtv-komentarze .comment-form-cookies-consent label {
	display: inline;
	font-family: var(--rtv-font-body);
	font-size: 13.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--rtv-muted);
}

.rtv-komentarze__wyslij {
	cursor: pointer;
}

/* Trzy pola obok siebie, gdy jest miejsce: imię, e-mail, adres strony. */
@media (min-width: 700px) {

	.rtv-komentarze .comment-form-author,
	.rtv-komentarze .comment-form-email,
	.rtv-komentarze .comment-form-url {
		display: inline-block;
		width: calc(33.333% - 11px);
		margin-right: 14px;
		vertical-align: top;
	}

	.rtv-komentarze .comment-form-url {
		margin-right: 0;
	}
}