/* 05 EPDM gumi tófólia (/epdm-gumi-tofolia/): szekció elrendezés. A részek stílusa a pages/content.css-ben (.tf-lp-). */

.tf-epdm-hero {
	--tf-hero-min-m: 440px;
}

/* ---------- Gyári szélességek ---------- */
.tf-epdm-widths {
	display: grid;
	gap: 18px;
	margin-top: 44px;
}

.tf-epdm-widths__title {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	line-height: 1.2;
}

.tf-epdm-widths__text {
	margin-top: 14px;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.tf-epdm-widths__note {
	color: var(--c-muted);
	font-size: var(--fs-xs);
}

/* ---------- Felhasználás ---------- */
.tf-epdm-uses {
	margin-top: 48px;
}

/* ---------- EPDM vagy PVC táblázat ---------- */
.tf-epdm-compare {
	margin-top: 48px;
}

.tf-epdm-compare__head {
	max-width: 820px;
	margin-bottom: 20px;
}

.tf-epdm-compare__title {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	line-height: 1.2;
}

.tf-epdm-compare__intro {
	margin-top: 10px;
	color: var(--c-text-2);
	font-size: var(--fs-body);
	line-height: 1.65;
}

.tf-epdm-compare__link {
	margin-top: 16px;
}

/* Telefonon a két oszlop (EPDM, PVC) egyszerre látszik: a sorfejléc a sor fölé kerül, alatta a két érték egymás mellett. */
@media (max-width: 639.98px) {
	.tf-epdm-compare__table {
		padding-inline: 14px;
	}

	.tf-epdm-compare__table :is(.tf-table, thead, tbody) {
		display: block;
		min-width: 0;
	}

	.tf-epdm-compare__table tr {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		border-bottom: 1px solid var(--c-line-soft);
	}

	.tf-epdm-compare__table tr:last-child {
		border-bottom: 0;
	}

	.tf-epdm-compare__table .tf-lp-table__corner {
		display: none;
	}

	.tf-epdm-compare__table :is(thead th, tbody th) {
		white-space: normal;
	}

	.tf-epdm-compare__table tbody th {
		grid-column: 1 / -1;
		width: auto;
		padding: 13px 4px 0;
		border-bottom: 0;
	}

	.tf-epdm-compare__table :is(thead th, td) {
		border-bottom: 0;
	}

	.tf-epdm-compare__table td {
		padding-top: 4px;
		overflow-wrap: anywhere;
		hyphens: auto;
	}

	/* Az ártartomány a nagykötőjel után törhet (a számokban nem törő szóköz van). */
	.tf-epdm-compare__table tbody td strong {
		white-space: normal;
	}
}

/* ---------- GYIK ---------- */
.tf-epdm-faq {
	margin-top: 56px;
}

.tf-epdm-faq .tf-faq__title {
	margin-bottom: 16px;
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
}

/* ---------- Ár doboz (mobilon a széles fotós sávok szélességében, mint a designban) ---------- */
.tf-epdm-price {
	margin-top: 48px;
	padding-inline: var(--wide-inset);
}

@media (min-width: 960px) {
	.tf-epdm-widths {
		grid-template-columns: minmax(0, 536fr) minmax(0, 696fr);
		gap: 64px;
		align-items: center;
		margin-top: 97px;
	}

	.tf-epdm-uses {
		margin-top: 97px;
	}

	.tf-epdm-compare {
		margin-top: 96px;
	}

	.tf-epdm-compare__head {
		margin-bottom: 32px;
	}

	.tf-epdm-compare__intro {
		margin-top: 14px;
		font-size: 1.125rem;
	}

	.tf-epdm-compare__link {
		margin-top: 20px;
	}

	.tf-epdm-faq {
		margin-top: 100px;
	}

	.tf-epdm-faq .tf-faq__title {
		margin-bottom: 22px;
	}

	.tf-epdm-price {
		margin-top: 96px;
		padding-inline: var(--gutter);
	}
}