/**
 * Funkciók aloldal — Érték-blokk (REUSABLE)
 *
 * Egy szekció: eyebrow ikon-bubble + H2 + lead + 2-oszlopos Mini Feature Card grid.
 * A Funkciók aloldal mind a 3 érték-blokkjához ugyanez a CSS — a paramétereket
 * (ikon, H2, lead, funkciók-tömb, opcionális sub-fejlécek) a renderelő
 * `template-parts/sections/funkciok-content.php` adja át.
 *
 * Háttér: a `.funkciok-value-block--alt` modifier halvány szürke háttért ad
 * (Blokk 2 — Márka & Ügyfélélmény). Default fehér.
 *
 * Sub-fejlécek (Blokk 3 — Rendszer): `.funkciok-value-block__subgroup` —
 * H3 + funkció-grid, közöttük függőleges szeparátor (margin + felső border).
 *
 * Forrás:
 *   - docs/subpages/funkciok.md 2-4. szekció (3 érték-blokk + 4.1-4.4 sub)
 *   - SECTION_COMPOSITIONS.md 15.2 (GRID_CARDS, 2-oszlopos)
 *   - SECTION_COMPOSITIONS.md 15.8 — Mini Feature Card anatómia
 */

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

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

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

.funkciok-value-block--alt {
	background-color: var(--color-background-alt);
}

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

/* ==========================================================================
   Szekció-fejléc — eyebrow-ikon-bubble + H2 + lead
   ========================================================================== */

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

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

.funkciok-value-block__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-value-block__lead {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   Mini Feature Card grid
   ========================================================================== */

.funkciok-feature-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.funkciok-feature-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (min-width: 1200px) {
	.funkciok-feature-grid {
		gap: 24px;
	}
}

/* ==========================================================================
   Mini Feature Card (kompakt — main.css-beli .package-pill + szöveg)
   --------------------------------------------------------------------------
   Anatómia (SECTION_COMPOSITIONS.md 15.8):
     [csomag-pill] [funkció-cím]
     1 mondat leírás
   ========================================================================== */

.funkciok-feature-card {
	background-color: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-panel);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (min-width: 1200px) {
	.funkciok-feature-card {
		padding: 24px;
	}
}

.funkciok-feature-card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-card-hover);
}

/* Halvány-szürke szekcióban a kártya kontrasztja érdekében marad fehér,
   csak a border erősebb. */
.funkciok-value-block--alt .funkciok-feature-card {
	border-color: var(--color-border);
}

.funkciok-feature-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.funkciok-feature-card__title {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0;
}

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

/* ==========================================================================
   Sub-csoport (Blokk 3 — Rendszer 4.1-4.4)
   ========================================================================== */

.funkciok-value-block__subgroup {
	scroll-margin-top: 96px;
}

.funkciok-value-block__subgroup + .funkciok-value-block__subgroup {
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--color-border);
}

@media (min-width: 1200px) {
	.funkciok-value-block__subgroup + .funkciok-value-block__subgroup {
		margin-top: var(--spacing-2xl);
		padding-top: var(--spacing-2xl);
	}
}

.funkciok-value-block__subtitle {
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	margin: 0 0 var(--spacing-md);
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Note — kiegészítő disclaimer-bekezdés (Blokk 4 — Hamarosan érkezik
   "A roadmap változhat..." typedef)
   ========================================================================== */

.funkciok-value-block__note {
	margin: var(--spacing-xl) 0 0;
	padding-top: var(--spacing-md);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
	text-align: center;
}

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