/**
 * Cikk- és jogi oldalak: /roller-vagy-ebike/, /ingazas/, /jogi-tudnivalok/.
 * A tokenek a style.css :root blokkjából jönnek.
 */

.lr-prose {
	max-width: 74ch;
}

.lr-prose__p {
	font-size: 17px;
	line-height: 1.7;
	color: #374151;
	margin: 0 0 18px;
	text-wrap: pretty;
}

.lr-prose h2 {
	margin-top: 40px;
}

/* --- AnswerLead: az AI ezt emeli ki, ezért önmagában is teljes válasz --- */

.lr-answerlead {
	font-size: 20px;
	line-height: 1.6;
	color: var(--lr-ink);
	margin: 0 0 32px;
	padding-left: 20px;
	border-left: 3px solid var(--lr-volt-deep);
	text-wrap: pretty;
}

/* --- Szerzőblokk --- */

.lr-author {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--lr-paper-line);
	border-bottom: 1px solid var(--lr-paper-line);
}

.lr-author__avatar {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--lr-paper-tint);
	border: 2px solid var(--lr-volt);
}

.lr-author__avatar img,
.lr-author__avatar picture {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lr-author__name {
	font-family: var(--lr-display);
	font-weight: 500;
	font-size: 18px;
	color: var(--lr-ink);
}

.lr-author__role {
	font-size: 14px;
	color: #4b5563;
	margin-top: 2px;
}

.lr-author__meta {
	font-family: var(--lr-mono);
	font-size: 12px;
	color: #6b7280;
	margin-top: 6px;
}

/* --- Verdikt-kártyák --- */

.lr-verdicts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--lr-ink-line);
	border: 1px solid var(--lr-ink-line);
}

.lr-verdict {
	background: var(--lr-ink-raised);
	padding: 28px 26px 30px;
}

.lr-verdict--accent {
	background: #1b2016;
	box-shadow: inset 3px 0 0 var(--lr-volt);
}

.lr-verdict__label {
	font-family: var(--lr-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lr-volt);
	margin-bottom: 14px;
}

.lr-verdict p {
	font-size: 16px;
	line-height: 1.6;
	color: #a9b1bb;
	margin: 0;
	text-wrap: pretty;
}

/* --- Táblázatok (valódi <table>) --- */

.lr-tablewrap {
	overflow-x: auto;
}

.lr-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--lr-paper-line);
	background: var(--lr-paper);
	font-size: 15px;
}

.lr-table__caption {
	/* A caption nem tűnhet el `position: absolute`-tal: üres dobozt hagy a
	   táblázat fölött. Nullára húzzuk, és úgy rejtjük el. */
	display: block;
	height: 0;
	overflow: hidden;
	clip-path: inset(50%);
	font-size: 0;
	line-height: 0;
}

.lr-table thead th {
	background: var(--lr-paper-tint);
	font-family: var(--lr-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	text-align: left;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lr-paper-line);
	z-index: 2;
}

.lr-table thead th:last-child {
	color: var(--lr-ink);
}

.lr-table tbody th {
	text-align: left;
	font-weight: 500;
	color: var(--lr-ink);
	padding: 18px 20px;
	vertical-align: top;
	background: var(--lr-paper);
}

.lr-table tbody td {
	padding: 18px 20px;
	line-height: 1.5;
	color: #4b5563;
	vertical-align: top;
	border-left: 1px solid var(--lr-paper-line);
}

.lr-table tbody tr {
	border-bottom: 1px solid var(--lr-paper-line);
}

.lr-table tbody tr:last-child {
	border-bottom: 0;
}

/* A jobb megoldást 3px-es színsáv jelöli, nem teljes háttérszín. */
.lr-table tbody td.is-better {
	box-shadow: inset 3px 0 0 var(--lr-volt-deep);
	color: var(--lr-ink);
}

.lr-table tr.is-total th,
.lr-table tr.is-total td {
	background: var(--lr-paper-tint);
	font-weight: 500;
	color: var(--lr-ink);
}

.lr-table__mute {
	color: var(--lr-mute);
	font-style: italic;
}

.lr-table__col {
	display: none;
}

.lr-table__legend {
	font-size: 13px;
	color: #6b7280;
	margin: 12px 0 0;
}

/* --- HonestCallout --- */

.lr-honest {
	background: var(--lr-ink-raised);
	border-left: 3px solid var(--lr-volt);
	padding: 30px 32px;
	max-width: 900px;
}

.lr-honest__label {
	font-family: var(--lr-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lr-volt);
	margin-bottom: 16px;
}

.lr-honest__text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--lr-body);
	margin: 0 0 16px;
	text-wrap: pretty;
}

.lr-honest__list {
	margin: 0 0 16px;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.lr-honest__list li {
	font-size: 16px;
	line-height: 1.55;
	color: #a9b1bb;
}

.lr-honest__list li::marker {
	color: var(--lr-volt-deep);
}

/* --- GYIK --- */

.lr-faq {
	border-top: 1px solid var(--lr-paper-line);
}

.lr-faq__item {
	border-bottom: 1px solid var(--lr-paper-line);
}

.lr-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 18px 34px 18px 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--lr-ink);
	position: relative;
}

.lr-faq__q::-webkit-details-marker {
	display: none;
}

.lr-faq__q::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--lr-mono);
	font-size: 20px;
	color: var(--lr-volt-deep);
}

.lr-faq__item[open] .lr-faq__q::after {
	content: "−";
}

.lr-faq__q:focus-visible {
	outline: 2px solid var(--lr-ink);
	outline-offset: 2px;
}

.lr-faq__a {
	padding: 0 34px 20px 0;
	font-size: 16px;
	line-height: 1.65;
	color: #4b5563;
	text-wrap: pretty;
}

/* --- LegalNotice --- */

.lr-legalnotice {
	background: var(--lr-paper-tint);
	border-left: 3px solid var(--lr-warn);
	border-radius: 2px;
	padding: 24px 28px;
	margin: 24px 0;
	max-width: 900px;
}

.lr-legalnotice__label {
	font-family: var(--lr-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #b45309;
	margin-bottom: 12px;
}

.lr-legalnotice__body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--lr-ink);
}

.lr-legalnotice__body p {
	margin: 0 0 10px;
}

.lr-legalnotice__body p:last-child {
	margin-bottom: 0;
}

.lr-legalnotice__meta {
	font-family: var(--lr-mono);
	font-size: 13px;
	color: #6b7280;
	margin-top: 14px;
}

.lr-legal-meta {
	font-size: 15px;
	color: #4b5563;
	margin: 0 0 32px;
}

/* --- Reszponzív --- */

@media (max-width: 900px) {
	.lr-verdicts {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Táblázat mobilon: soronként tördel, nem vízszintesen görgetünk. */
	.lr-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.lr-table,
	.lr-table tbody,
	.lr-table tr,
	.lr-table th,
	.lr-table td {
		display: block;
		width: 100%;
	}

	.lr-table tbody tr {
		border-bottom: 1px solid var(--lr-ink);
		padding-bottom: 6px;
		margin-bottom: 10px;
	}

	.lr-table tbody th {
		padding: 14px 16px 6px;
		font-size: 16px;
	}

	.lr-table tbody td {
		border-left: 0;
		padding: 6px 16px 12px;
	}

	.lr-table tbody td.is-better {
		box-shadow: inset 3px 0 0 var(--lr-volt-deep);
	}

	.lr-table__col {
		display: block;
		font-family: var(--lr-mono);
		font-size: 10.5px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #63697a;
		margin-bottom: 4px;
	}

	.lr-answerlead {
		font-size: 18px;
	}

	.lr-honest {
		padding: 24px 22px;
	}
}

/* --- Ingázás-kalkulátor --- */

.lr-warnbar {
	background: #2a2415;
	border-left: 3px solid var(--lr-warn);
	padding: 16px 20px;
	margin-bottom: 28px;
	font-size: 15px;
	line-height: 1.6;
	color: #d8cfae;
	max-width: 900px;
}

.lr-warnbar__label {
	display: block;
	font-family: var(--lr-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lr-warn);
	margin-bottom: 6px;
}

.lr-warnbar code {
	font-family: var(--lr-mono);
	font-size: 13px;
	color: var(--lr-paper);
}

.lr-calc__updated {
	font-family: var(--lr-mono);
	font-size: 13px;
	color: var(--lr-mute);
	margin: 0 0 28px;
}

.lr-commute {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1px;
	background: var(--lr-ink-line);
	border: 1px solid var(--lr-ink-line);
}

.lr-commute__inputs {
	background: var(--lr-ink-raised);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lr-commute__inputs label {
	font-family: var(--lr-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lr-mute);
}

.lr-field__unit {
	font-family: var(--lr-mono);
	font-size: 11px;
	color: #828b97;
}

.lr-field__pair {
	display: grid;
	grid-template-columns: 1fr 92px;
	gap: 12px;
	align-items: center;
}

.lr-commute input[type="number"],
.lr-commute select {
	width: 100%;
	font-family: var(--lr-mono);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: var(--lr-paper);
	background: var(--lr-ink);
	border: 1px solid var(--lr-ink-line);
	border-radius: 2px;
	padding: 10px 11px;
}

.lr-commute input[type="number"]:focus,
.lr-commute select:focus {
	outline: 2px solid var(--lr-volt);
	outline-offset: 1px;
}

.lr-commute input[type="range"] {
	width: 100%;
	height: 22px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
}

.lr-commute input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	background: var(--lr-ink-line);
}

.lr-commute input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 22px;
	background: var(--lr-volt);
	margin-top: -10px;
	border: 0;
	border-radius: 1px;
}

.lr-commute input[type="range"]::-moz-range-track {
	height: 2px;
	background: var(--lr-ink-line);
}

.lr-commute input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 22px;
	background: var(--lr-volt);
	border: 0;
	border-radius: 1px;
}

.lr-field--price {
	border-top: 1px solid var(--lr-ink-line);
	padding-top: 18px;
}

.lr-field__hint {
	font-size: 13px;
	line-height: 1.5;
	color: #828b97;
	margin: 8px 0 0;
}

.lr-commute__out {
	background: var(--lr-ink);
	padding: 30px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lr-commute__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--lr-ink-line);
	border: 1px solid var(--lr-ink-line);
}

.lr-commute__cell {
	background: var(--lr-ink-raised);
	padding: 20px 18px;
}

.lr-commute__label {
	font-family: var(--lr-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lr-mute);
	margin-bottom: 10px;
}

.lr-commute__value {
	font-family: var(--lr-mono);
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	color: var(--lr-paper);
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.lr-commute__value--volt {
	color: var(--lr-volt);
}

.lr-commute__unit {
	font-size: 14px;
	color: var(--lr-mute);
}

.lr-commute__note {
	font-family: var(--lr-mono);
	font-size: 11px;
	color: #828b97;
	margin-top: 8px;
}

.lr-commute__msg {
	font-size: 15px;
	line-height: 1.6;
	color: var(--lr-body);
	background: var(--lr-ink-raised);
	border-left: 3px solid var(--lr-volt);
	padding: 14px 18px;
	margin: 0;
}

.lr-commute__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.lr-commute__copied {
	font-family: var(--lr-mono);
	font-size: 12px;
	color: var(--lr-volt);
}

.lr-commute__legal {
	font-size: 14px;
	line-height: 1.55;
	color: var(--lr-mute);
	margin: 0;
}

.lr-formula {
	background: var(--lr-paper-tint);
	border-left: 3px solid var(--lr-ink);
	padding: 20px 22px;
	overflow-x: auto;
	margin: 0 0 20px;
}

.lr-formula code {
	font-family: var(--lr-mono);
	font-size: 13px;
	line-height: 1.75;
	color: var(--lr-ink);
	white-space: pre;
}

.lr-noscript {
	background: var(--lr-ink-raised);
	border: 1px solid var(--lr-ink-line);
	padding: 24px;
	margin-top: 24px;
	color: var(--lr-body);
}

.lr-table--dark {
	background: var(--lr-ink);
	border-color: var(--lr-ink-line);
}

.lr-table--dark tbody th {
	background: var(--lr-ink);
	color: var(--lr-paper);
}

.lr-table--dark tbody td {
	color: var(--lr-mute);
	border-left-color: var(--lr-ink-line);
}

.lr-table--dark tbody tr {
	border-bottom-color: var(--lr-ink-line);
}

@media (max-width: 900px) {
	.lr-commute {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 479px) {
	.lr-commute__grid {
		grid-template-columns: 1fr;
	}
}


/* A ragadós fejléc csak ott, ahol tényleg hosszú a táblázat – különben
   a sticky th ráúszik az első sorra, és eltakarja. */
.lr-table--sticky thead th {
	position: sticky;
	top: 68px;
	z-index: 2;
}

/* Sorkiemelés, hogy egy kétoszlopos tábla se hasson üresnek. */
.lr-table tbody tr:hover th,
.lr-table tbody tr:hover td {
	background: var(--lr-paper-tint);
}

/* Sötét táblán a hover is sötét marad — világos háttéren a fehér fejléc-szöveg eltűnne. */
.lr-table--dark tbody tr:hover th,
.lr-table--dark tbody tr:hover td {
	background: var(--lr-ink-raised);
	color: var(--lr-paper);
}

.lr-table--dark tbody tr:hover td { color: #d5dae1; }

/* A világos „őszinte” doboz kontrasztja: a felsorolás ne legyen halvány. */
.lr-honest--light .lr-honest__list li,
.lr-honest--light .lr-honest__text {
	color: #2c3440;
}

.lr-honest--light .lr-honest__list li strong {
	color: var(--lr-ink);
}