/**
 * Árak aloldal — Próbaidőszak (DARK_INNER_CARD)
 *
 * **Fehér szekció + belső sötét-navy kártya** ("kártyásított dark blokk").
 * Eyebrow + H2 + Sub + 3 sor magyarázat (üveg-érzetű mini-kártyák a sötét
 * panelen belül) + 1 CTA.
 *
 * A `.section--dark` utility-t a **belső panelre** (`.arak-trial__panel`)
 * tesszük, NEM a `<section>` wrapperre — ez a 2026-04-28-i konvenció
 * (SECTION_COMPOSITIONS.md 11. fejezet). A `.section--dark` automatikusan
 * felülírja a heading/body/eyebrow/pill-chip/icon-bubble színeket fehérre.
 *
 * Szélesség: a panel a teljes container-szélességet kitölti
 * (`--container-max-width`, 1200px) — NINCS plusz max-width szűkítés.
 * Padding: desktopon 48px, tableten 40px, mobilon 32px.
 *
 * Forrás:
 *   - docs/subpages/arak.md 3. szekció (Próbaidőszak)
 *   - SECTION_COMPOSITIONS.md 15.3 (DARK_INNER_CARD — Próbaidőszak)
 *   - SECTION_COMPOSITIONS.md 11. (sötét szekció szín-rendszere)
 *   - 2026-04-28-i konvenció: dark style ALWAYS card-szintű, soha nem
 *     full-section background.
 */

/* A szekció vertikális paddingje 0 — a panel önálló vizuális egységként él,
 * a függőleges levegőt a szomszéd szekciók saját bottom/top paddingje adja
 * (pricing-cards alulról + comparison-table felülről). Csak a horizontális
 * gutterek maradnak a container-szélesség biztosításához. */
.arak-trial {
	padding: 0 var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.arak-trial {
		padding: 0 var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.arak-trial {
		padding: 0 var(--container-padding-desktop);
	}
}

.arak-trial__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

/* ==========================================================================
   Belső sötét panel — a "kártyásított dark blokk"
   ========================================================================== */

.arak-trial__panel {
	background-color: var(--color-text);
	border-radius: var(--radius-panel-lg);
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

@media (min-width: 768px) {
	.arak-trial__panel {
		padding: 40px;
		align-items: center;
		text-align: center;
	}
}

@media (min-width: 1200px) {
	.arak-trial__panel {
		padding: 48px;
	}
}

.arak-trial__title {
	font-size: var(--fs-h2);
	line-height: var(--lh-h2);
	font-weight: var(--fw-black);
	letter-spacing: -0.02em;
	margin: 0;
}

.arak-trial__subtitle {
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	margin: 0;
	max-width: 64ch;
}

/* ==========================================================================
   Cards-wrapper — szűkített szélesség, hogy ne fullwidth-en üljenek a kártyák
   ========================================================================== */

.arak-trial__cards {
	width: 100%;
	max-width: 880px;
	margin: 16px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}

@media (min-width: 768px) {
	.arak-trial__cards {
		gap: 16px;
		margin-top: 24px;
	}
}


/* ==========================================================================
   Steps — 3 sor magyarázat (üveg-érzetű kártyák sötét háttéren)
   ========================================================================== */

.arak-trial__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	width: 100%;
}

@media (min-width: 768px) {
	.arak-trial__steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* Mobilon: row (szám balra, szöveg jobbra) — kompakt megjelenítés.
 * Desktopon: column (szám fent, szöveg lent) — a homepage countdown perk-cardokkal
 * konzisztens kompozíció (lásd `blocks/countdown/countdown.css` __perk).
 */
.arak-trial__step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 16px;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-panel);
	text-align: left;
}

@media (min-width: 768px) {
	.arak-trial__step {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
	}
}

.arak-trial__step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--radius-input);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-primary);
	font-size: 16px;
}

.arak-trial__step-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.arak-trial__step-title {
	margin: 0;
	font-size: var(--fs-body-md);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	color: #ffffff;
}

.arak-trial__step-text {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-md);
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   CTA
   ========================================================================== */

.arak-trial__cta {
	margin-top: 16px;
}

@media (min-width: 768px) {
	.arak-trial__cta {
		margin-top: 24px;
	}
}

/* ==========================================================================
   Founding member megerősítő blokk — közvetlenül a CTA alatt
   ========================================================================== */

.arak-trial__founding {
	width: 100%;
	margin: 0;
	padding: 20px 24px;
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-panel);
}

@media (min-width: 768px) {
	.arak-trial__founding {
		padding: 24px 28px;
	}
}

.arak-trial__founding-title {
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body-md);
	line-height: 1.3;
	font-weight: var(--fw-bold);
	color: #ffffff;
}

.arak-trial__founding-title i {
	color: var(--color-primary);
	font-size: 14px;
}

.arak-trial__founding-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.arak-trial__founding-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	color: rgba(255, 255, 255, 0.9);
}

.arak-trial__founding-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 10px;
}