/**
 * Árak aloldal — Pricing Card grid (PRICING_GRID_3COL)
 *
 * 3 oszlopos csomag-kártya grid (Basic / Standard / Premium). **Mind a 3
 * kártya kék (2px primary) keretet kap** a prémium érzethez. A középső
 * (Standard, `--featured`) kártya **teljes primary-kék háttérrel** lesz
 * még kontrasztosabb: fehér tipográfia + fehér badge + fehér CTA-gomb.
 *
 * Mobil (≤767px): 3 kártya egymás alatt, A KIEMELT (Standard) FELÜL
 * (`order: -1`). Tablet+ (≥768px): 3 oszlop egymás mellett, eredeti sorrend
 * (Basic — Standard — Premium).
 *
 * Pricing Card anatómia (SECTION_COMPOSITIONS.md 15.8):
 *   - Csomag-cím (H3)
 *   - Ár (38-44px) + "/ hó" felirat kisebben
 *   - "Kinek való" sub (1 mondat)
 *   - Funkció-bullet lista (✓/—) — kompakt, Body Medium
 *   - CTA-gomb (full-width)
 *   - Mind: kék 2px keret + `--shadow-card`
 *   - Kiemelt: primary-kék háttér + fehér tipográfia + erősebb glow shadow +
 *     fehér "Legnépszerűbb" badge primary szöveggel + fehér CTA-gomb.
 *
 * Forrás:
 *   - docs/subpages/arak.md 2. szekció (csomag-kártyák)
 *   - SECTION_COMPOSITIONS.md 15.3 + 15.8
 *   - 2026-04-28-i visual-tweak: minden kártya kék keret, featured = full primary bg
 */

/* ==========================================================================
   Wrapper + container
   ========================================================================== */

.arak-pricing-cards {
	padding: var(--spacing-section-mobile) var(--container-padding-mobile);
	background-color: var(--color-background);
}

@media (min-width: 768px) {
	.arak-pricing-cards {
		padding: var(--spacing-section-tablet) var(--container-padding-tablet);
	}
}

@media (min-width: 1200px) {
	.arak-pricing-cards {
		/* Az első szekció a header alatt — desktopon 48px top padding (a globális
		 * aloldal-keret szabálya, lásd SECTION_COMPOSITIONS.md 15.1). A header
		 * bottom paddingje 0, így a teljes függőleges levegőt ez a 48px adja. */
		padding: var(--spacing-xl) var(--container-padding-desktop) var(--spacing-section-desktop);
	}
}

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

/* ==========================================================================
   Grid — 1 col mobil → 3 col tablet+
   --------------------------------------------------------------------------
   Tablet+ : align-items: stretch, hogy a kiemelt kártya magassága a többit
   is felhúzza (egységes magas kártyák).
   Mobil  : Standard kártya order: -1 (felülre), badge a tetején marad.
   ========================================================================== */

.arak-pricing-cards__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: stretch;
	/* 24px extra felül, hogy a "Legnépszerűbb" badge ne lógjon ki a wrapperből */
	padding-top: 12px;
}

@media (min-width: 768px) {
	.arak-pricing-cards__grid {
		/* minmax(0, 1fr) kényszeríti az egyenlő szélességet — a sima 1fr
		 * minmax(auto, 1fr), ami a tartalom min-widthje alapján tágítja az oszlopot */
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (min-width: 1200px) {
	.arak-pricing-cards__grid {
		gap: 28px;
	}
}

/* ==========================================================================
   Pricing Card — alap
   --------------------------------------------------------------------------
   Mindhárom kártya (Basic / Standard / Premium) **kék keretet** kap a
   prémium érzethez. A Standard (featured) kártya **teljes primary-kék
   háttérrel** lesz még kontrasztosabb — fehér tipográfiával, fehér badge-dzsel
   és fehér CTA-val.
   ========================================================================== */

.arak-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px 28px;
	min-width: 0; /* kényszerített egyenlő szélességhez a grid-ben */
	background-color: var(--color-card-bg);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

@media (min-width: 768px) and (max-width: 1199px) {
	.arak-pricing-card {
		padding: 28px 20px;
		gap: 16px;
	}
}

@media (min-width: 1200px) {
	.arak-pricing-card {
		padding: 36px 32px;
		gap: 24px;
	}
}

.arak-pricing-card:hover {
	box-shadow: var(--shadow-card-hover);
}

/* ==========================================================================
   Featured (Standard) — primary-kék háttér + fehér tipográfia
   ========================================================================== */

.arak-pricing-card--featured {
	background-color: var(--color-primary);
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(13, 132, 252, 0.28), 0 4px 12px rgba(7, 20, 48, 0.08);
}

.arak-pricing-card--featured:hover {
	box-shadow: 0 16px 40px rgba(13, 132, 252, 0.34), 0 6px 16px rgba(7, 20, 48, 0.10);
}

/* Fehér tipográfia a kék kártyán */
.arak-pricing-card--featured .arak-pricing-card__name,
.arak-pricing-card--featured .arak-pricing-card__price-value {
	color: #ffffff;
}

.arak-pricing-card--featured .arak-pricing-card__audience,
.arak-pricing-card--featured .arak-pricing-card__price-period {
	color: rgba(255, 255, 255, 0.85);
}

/* Ár-blokk alsó elválasztója — világosabb a kék háttéren */
.arak-pricing-card--featured .arak-pricing-card__price {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* Funkció-bullet lista — fehér text + fehér ✓ */
.arak-pricing-card--featured .arak-pricing-card__feature {
	color: #ffffff;
}

.arak-pricing-card--featured .arak-pricing-card__feature-icon {
	color: #ffffff;
}

.arak-pricing-card--featured .arak-pricing-card__feature--off {
	color: rgba(255, 255, 255, 0.65);
}

.arak-pricing-card--featured .arak-pricing-card__feature--off .arak-pricing-card__feature-icon {
	color: rgba(255, 255, 255, 0.65);
}

/* Mobil: a kiemelt kártya felülre kerül */
@media (max-width: 767px) {
	.arak-pricing-card--featured {
		order: -1;
	}
}

/* ==========================================================================
   "Legnépszerűbb" badge a kiemelt kártya tetején
   ========================================================================== */

/* A kártya primary-kék háttér miatt a badge **fehér háttérre** vált, primary
 * szöveggel és csillaggal — így a badge a kártyán élénken kontrasztos marad. */
.arak-pricing-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background-color: #ffffff;
	color: var(--color-primary);
	font-size: var(--fs-body-sm);
	line-height: 1;
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(7, 20, 48, 0.18);
}

.arak-pricing-card__badge i {
	font-size: 12px;
	color: var(--color-primary);
}

/* ==========================================================================
   Card head — cím + "Kinek való" sub
   ========================================================================== */

.arak-pricing-card__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.arak-pricing-card__name {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-bold);
	color: var(--color-text);
	letter-spacing: -0.01em;
	margin: 0;
}

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

/* ==========================================================================
   Ár-blokk
   ========================================================================== */

.arak-pricing-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding: 8px 0 16px;
	border-bottom: 1px solid var(--color-border);
}

.arak-pricing-card__price-value {
	font-size: 38px;
	line-height: 1.1;
	font-weight: var(--fw-black);
	color: var(--color-text);
	letter-spacing: -0.02em;
}

@media (min-width: 768px) and (max-width: 1199px) {
	.arak-pricing-card__price-value {
		font-size: 30px;
	}
}

@media (min-width: 1200px) {
	.arak-pricing-card__price-value {
		font-size: 44px;
	}
}

.arak-pricing-card__price-period {
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text-muted);
}

/* ==========================================================================
   Funkció-bullet lista (✓/—)
   ========================================================================== */

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

.arak-pricing-card__feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.arak-pricing-card__feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-primary);
	font-size: 14px;
}

.arak-pricing-card__feature--off {
	color: var(--color-text-muted);
}

.arak-pricing-card__feature--off .arak-pricing-card__feature-icon {
	color: var(--color-text-muted);
}

/* Roadmap-jelölt bullet — kisebb, dőlt, óra-ikonnal: a Q2-Q3 érkezik utalás. */
.arak-pricing-card__feature--roadmap {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px dashed var(--color-border);
	font-size: var(--fs-body-sm);
	font-style: italic;
	color: var(--color-text-muted);
}

.arak-pricing-card__feature--roadmap .arak-pricing-card__feature-icon {
	color: var(--color-text-muted);
}

.arak-pricing-card--featured .arak-pricing-card__feature--roadmap {
	color: rgba(255, 255, 255, 0.75);
	border-top-color: rgba(255, 255, 255, 0.25);
}

.arak-pricing-card--featured .arak-pricing-card__feature--roadmap .arak-pricing-card__feature-icon {
	color: rgba(255, 255, 255, 0.75);
}

/* ==========================================================================
   CTA — full-width
   ========================================================================== */

.arak-pricing-card__cta {
	margin-top: auto;
}

.arak-pricing-card__cta .btn {
	width: 100%;
	justify-content: center;
}

/* Featured (Standard) CTA — fehér háttér + primary szöveg, hogy a primary-kék
 * kártyán erős kontrasztja legyen. Hover-on enyhén mélyebb fehér + primary-dark. */
.arak-pricing-card--featured .arak-pricing-card__cta .btn {
	background-color: #ffffff;
	color: var(--color-primary);
	border-color: #ffffff;
}

.arak-pricing-card--featured .arak-pricing-card__cta .btn:hover {
	color: #ffffff;
	border-color: #071430;
}