/**
 * Funkciók aloldal — Csomag-elérhetőség (kategória-szintű 6-soros tábla)
 *
 * COMPARISON_TABLE — kategória-szintű (NEM `_DEEP`, az az Árak aloldalra megy).
 * 6 sor (AI Motor / Márka / Csapat / Lead / Támogatás / Premium extrák) ×
 * 3 oszlop (Basic / Standard / Premium). Mobilon ugyanazt a struktúrát
 * tartja meg horizontális scroll nélkül — a sorok cella-stack-elve
 * jelennek meg (key + 3 oszlop egymás alatt).
 *
 * Háttér: halvány szürke (a háttér-ritmus szerint).
 *
 * Forrás:
 *   - docs/subpages/funkciok.md 5. szekció (kategória-tábla)
 *   - SECTION_COMPOSITIONS.md 15.2 + 15.7 (COMPARISON_TABLE)
 */

.funkciok-package-table {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.funkciok-package-table {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.funkciok-package-table {
		padding: var(--spacing-section-desktop) var(--container-padding-desktop);
	}
}

.funkciok-package-table__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	scroll-margin-top: 96px;
}

/* ==========================================================================
   Fejléc
   ========================================================================== */

.funkciok-package-table__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin: 0 0 var(--spacing-xl);
	max-width: 720px;
}

@media (min-width: 1200px) {
	.funkciok-package-table__header {
		margin-bottom: var(--spacing-2xl);
	}
}

.funkciok-package-table__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
	margin: 0;
}

.funkciok-package-table__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

.funkciok-package-table__subtitle a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-base);
}

.funkciok-package-table__subtitle a:hover {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* ==========================================================================
   Tábla — kártya wrapper
   ========================================================================== */

.funkciok-package-table__panel {
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	overflow: hidden;
}

.funkciok-package-table__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
}

/* ==========================================================================
   Desktop / Tablet (≥768px) — klasszikus 4-oszlopos tábla
   ========================================================================== */

@media (min-width: 768px) {
	.funkciok-package-table__row {
		display: table-row;
	}

	.funkciok-package-table__th,
	.funkciok-package-table__td {
		padding: 16px 20px;
		vertical-align: middle;
		border-bottom: 1px solid var(--color-border);
		text-align: left;
	}

	.funkciok-package-table__row:last-child .funkciok-package-table__td {
		border-bottom: none;
	}

	.funkciok-package-table__head .funkciok-package-table__th {
		background-color: var(--color-background-alt);
		font-size: var(--fs-body-sm);
		line-height: var(--lh-body-sm);
		font-weight: var(--fw-bold);
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.funkciok-package-table__th--col,
	.funkciok-package-table__td--col {
		text-align: center;
		width: 18%;
	}

	.funkciok-package-table__td--key {
		font-weight: var(--fw-bold);
		color: var(--color-text);
	}

	.funkciok-package-table__td--col {
		color: var(--color-text);
	}

	.funkciok-package-table__row--featured .funkciok-package-table__td {
		background-color: var(--color-primary-light);
	}

	.funkciok-package-table__td--empty {
		color: var(--color-text-muted);
	}
}

@media (min-width: 1200px) {
	.funkciok-package-table__th,
	.funkciok-package-table__td {
		padding: 20px 24px;
	}
}

/* ==========================================================================
   Mobile (<768px) — sor-stack: kategória-cím + 3 csomag-érték egymás alatt
   --------------------------------------------------------------------------
   Megőrzi a sticky-első-oszlop pattern szellemiségét anélkül, hogy
   horizontális scroll kéne. A `<thead>` rejtett, minden sor egy mini-blokk.
   ========================================================================== */

@media (max-width: 767px) {
	.funkciok-package-table__table,
	.funkciok-package-table__head,
	.funkciok-package-table__body,
	.funkciok-package-table__row,
	.funkciok-package-table__th,
	.funkciok-package-table__td {
		display: block;
		width: 100%;
	}

	.funkciok-package-table__head {
		position: absolute;
		left: -9999px;
		top: -9999px;
	}

	.funkciok-package-table__row {
		padding: 16px 20px;
		border-bottom: 1px solid var(--color-border);
	}

	.funkciok-package-table__row:last-child {
		border-bottom: none;
	}

	.funkciok-package-table__td {
		padding: 4px 0;
		border: none;
	}

	.funkciok-package-table__td--key {
		font-size: var(--fs-h6);
		line-height: var(--lh-h6);
		font-weight: var(--fw-bold);
		color: var(--color-text);
		margin-bottom: 8px;
	}

	.funkciok-package-table__td--col {
		display: flex;
		align-items: baseline;
		gap: 12px;
		font-size: var(--fs-body-md);
		line-height: var(--lh-body-md);
		color: var(--color-text);
	}

	.funkciok-package-table__td--col::before {
		content: attr(data-label);
		font-size: var(--fs-body-sm);
		line-height: var(--lh-body-sm);
		font-weight: var(--fw-bold);
		color: var(--color-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.04em;
		min-width: 80px;
		flex-shrink: 0;
	}

	.funkciok-package-table__row--featured {
		background-color: var(--color-primary-light);
		border-radius: var(--radius-small);
		margin: 4px;
	}
}

/* ==========================================================================
   Lábjegyzet a tábla alatt — Q2/Q3 roadmap-utalás
   ========================================================================== */

.funkciok-package-table__footnote {
	margin: var(--spacing-lg) auto 0;
	max-width: 760px;
	text-align: center;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-md);
	color: var(--color-text-muted);
}


/* ==========================================================================
   CTA-sor a tábla alatt
   ========================================================================== */

.funkciok-package-table__cta {
	margin-top: var(--spacing-xl);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

@media (min-width: 1200px) {
	.funkciok-package-table__cta {
		margin-top: var(--spacing-2xl);
	}
}