/* 03 Tófólia árak (/tofolia-ar/): szekció elrendezés. A részek stílusa a pages/content.css-ben (.tf-lp-). */

.tf-arak-prices {
	margin-top: 32px;
}

.tf-arak-prices__note {
	margin-top: 14px;
	color: var(--c-muted);
	font-size: var(--fs-xs);
	line-height: 1.55;
}

/* Szekció címek (a design „Mi befolyásolja az árat?” mérete). */
.tf-arak-factors__title,
.tf-arak-compare__title,
.tf-arak-shipping__title,
.tf-arak-tips__title {
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	line-height: 1.2;
}

.tf-arak-factors {
	display: grid;
	margin-top: 56px;
}

.tf-arak-factors__title {
	margin-bottom: 18px;
}

.tf-arak-factors__photo {
	display: none;
}

/* ---------- Árpélda ---------- */
.tf-arak-example {
	margin-top: 40px;
}

/* ---------- PVC vagy EPDM + összehasonlító táblázat ---------- */
.tf-arak-compare {
	margin-top: 48px;
	scroll-margin-top: calc(var(--header-h) + 16px);
}

.tf-arak-compare__head {
	max-width: 820px;
	margin-bottom: 20px;
	padding-inline: calc(var(--gutter) - var(--wide-inset));
}

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

.tf-arak-table {
	margin-top: 28px;
}

.tf-arak-table__title {
	margin-bottom: 12px;
	padding-inline: calc(var(--gutter) - var(--wide-inset));
	font-size: var(--fs-card);
	line-height: 1.3;
}

/* ---------- Szállítás és tekercsek ---------- */
.tf-arak-shipping {
	display: grid;
	gap: 18px;
	margin-top: 48px;
}

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

.tf-arak-shipping__weight {
	margin-top: 12px;
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.tf-arak-shipping__weight strong {
	color: var(--c-ink);
}

.tf-arak-shipping__table {
	padding: 10px;
}

.tf-arak-shipping__table .tf-lp-shipping__wrap {
	padding-inline: 16px;
}

/* ---------- Vásárlási tippek ---------- */
.tf-arak-tips {
	display: grid;
	margin-top: 48px;
}

.tf-arak-tips__title {
	margin-bottom: 18px;
}

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

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

.tf-arak-faq .tf-faq__a a {
	color: var(--c-blue-strong);
	font-weight: 600;
}

/* A design kompakt GYIK-ja: kisebb kérdés és válasz, a +/− jel kör nélkül. */
.tf-arak-faq .tf-faq__toggle {
	width: 16px;
	height: 16px;
	background: transparent;
}

/* ---------- Kapcsolódó oldalak ---------- */
.tf-arak-related {
	margin-top: 40px;
	text-align: center;
}

.tf-arak-related__title {
	color: var(--c-muted);
	font-family: var(--f-body);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.tf-arak-related__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}

@media (min-width: 960px) {
	.tf-arak-prices {
		margin-top: 82px;
	}

	.tf-arak-prices__note {
		margin-top: 20px;
		font-size: var(--fs-sm);
	}

	.tf-arak-factors,
	.tf-arak-tips {
		grid-template-columns: minmax(0, 510fr) minmax(0, 715fr);
		gap: 71px;
		align-items: start;
		margin-top: 64px;
	}

	.tf-arak-factors__title {
		margin-bottom: 26px;
	}

	.tf-arak-factors__photo {
		display: block;
		overflow: hidden;
		aspect-ratio: 510 / 320;
		border-radius: var(--r-lg);
		background: var(--c-surface);
	}

	.tf-arak-factors__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tf-arak-example {
		margin-top: 80px;
	}

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

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

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

	.tf-arak-table {
		margin-top: 48px;
	}

	.tf-arak-table__title {
		margin-bottom: 18px;
	}

	.tf-arak-shipping {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 32px 64px;
		align-items: start;
		margin-top: 96px;
	}

	.tf-arak-shipping__lead {
		margin-top: 16px;
		font-size: 1.0625rem;
	}

	.tf-arak-shipping__weight {
		margin-top: 18px;
	}

	.tf-arak-shipping__table {
		padding: 12px;
	}

	.tf-arak-rolls {
		grid-column: 1 / -1;
	}

	.tf-arak-tips {
		margin-top: 96px;
	}

	.tf-arak-tips__title {
		position: sticky;
		top: calc(var(--header-h) + 24px);
		padding-top: 22px;
	}

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

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

	.tf-arak-faq .tf-faq__q {
		padding: 18px 24px;
		font-size: var(--fs-body);
	}

	.tf-arak-faq .tf-faq__a {
		padding: 0 24px 18px;
		font-size: var(--fs-sm);
	}

	.tf-arak-related {
		margin-top: 56px;
	}
}