/*
 * JA Programok — frontend.
 * A színek a téma theme.json palettájából jönnek; a tartalék értékek a
 * design system (docs/04) színei, hogy a jelenlegi témában is rendben legyen.
 */
:root {
	--ja-rose: var(--wp--preset--color--brand-rose, #8E3E4F);
	--ja-rose-hover: var(--wp--preset--color--brand-rose-hover, #75303F);
	--ja-blush-soft: var(--wp--preset--color--brand-blush-soft, #FAF1F0); /* a téma --ja-blush-a az erősebb púder */
	--ja-ink: var(--wp--preset--color--brand-ink, #26243A);
	--ja-body: var(--wp--preset--color--body, #43424E);
	--ja-muted: var(--wp--preset--color--muted, #736A70);
	--ja-line: var(--wp--preset--color--line, #E4DBDA);
	--ja-surface: var(--wp--preset--color--surface, #FBF8F7);
	--ja-success: var(--wp--preset--color--state-success, #3F6B54);
	--ja-radius: 6px;
}

/* ---------- gomb ---------- */
.ja-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border-radius: 3px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}
.ja-button.is-primary {
	background: var(--ja-rose);
	color: #fff;
	border: 0;
}
.ja-button.is-primary:hover,
.ja-button.is-primary:focus-visible {
	background: var(--ja-rose-hover);
	color: #fff;
}
.ja-button.is-secondary {
	background: transparent;
	color: var(--ja-ink);
	border: 1.5px solid var(--ja-ink);
}
.ja-button:focus-visible,
.ja-lesson a:focus-visible,
.ja-curriculum a:focus-visible {
	outline: 2px solid var(--ja-rose);
	outline-offset: 2px;
}

/* ---------- chip, haladássáv ---------- */
.ja-chip {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 3px;
	background: var(--ja-blush-soft);
	color: var(--ja-ink);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
}
.ja-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--ja-line);
	overflow: hidden;
}
.ja-progress__bar {
	display: block;
	height: 100%;
	background: var(--ja-success);
}

/* ---------- programállapot ---------- */
.ja-status {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	background: var(--ja-surface);
}
.ja-status > * { margin: 0; }
.ja-status__title { font-weight: 600; color: var(--ja-ink); }
.ja-status__meta,
.ja-status__login { color: var(--ja-muted); font-size: 0.9375rem; }
.ja-status__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.ja-status__facts li::before { content: "✓ "; color: var(--ja-success); font-weight: 700; }

/* ---------- tananyag ---------- */
.ja-curriculum { margin: 2rem 0; }
.ja-curriculum__title { margin-bottom: 1rem; }
.ja-curriculum__section + .ja-curriculum__section { margin-top: 1.25rem; }
.ja-curriculum__section-title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ja-muted);
}
.ja-curriculum__lessons {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
}
.ja-curriculum__lesson {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	padding: 0.5rem 1rem;
	font-variant-numeric: tabular-nums;
}
.ja-curriculum__lesson + .ja-curriculum__lesson { border-top: 1px solid var(--ja-line); }
.ja-curriculum__lesson > a,
.ja-curriculum__lesson > span:nth-child(2) { flex: 1; }
.ja-curriculum__lesson.is-locked { color: var(--ja-muted); }
.ja-curriculum__lesson.is-done .ja-curriculum__state { color: var(--ja-success); font-weight: 700; }
.ja-curriculum__lesson.is-current { background: var(--ja-blush-soft); }
.ja-curriculum__state { width: 1.25rem; flex: none; display: inline-flex; color: var(--ja-muted); }
.ja-curriculum__lesson.is-open .ja-curriculum__state { color: var(--ja-rose); }
.ja-curriculum__lesson.is-done .ja-curriculum__state { color: var(--ja-success); }
.ja-curriculum__dur { color: var(--ja-muted); font-size: 0.875rem; white-space: nowrap; }
/* A kiemelt (aktuális) sor púder hátterén a halvány szürke nem éri el a 4,5:1-et. */
.ja-curriculum__lesson.is-current .ja-curriculum__dur { color: var(--ja-body); }

/* ---------- lecke ---------- */
.ja-lesson { display: grid; gap: 1.5rem; }
.ja-lesson__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--ja-line);
	font-size: 0.9375rem;
}
.ja-lesson__back { font-weight: 600; text-decoration: none; }
.ja-lesson__pos,
.ja-lesson__dur { color: var(--ja-muted); font-variant-numeric: tabular-nums; }

/* A régi leckékben nyers Vimeo/YouTube <iframe> van: 16:9 arány sablonoldalról,
   a 228 lecke átszerkesztése nélkül. */
.ja-lesson__content iframe[src*="vimeo.com"],
.ja-lesson__content iframe[src*="youtube.com"],
.ja-lesson__content iframe[src*="youtu.be"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}
.ja-lesson__complete .ja-complete { margin: 0; }
.ja-lesson__pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.ja-lesson__pager a {
	display: grid;
	gap: 0.15rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	text-decoration: none;
	color: var(--ja-ink);
}
.ja-lesson__pager small { color: var(--ja-muted); }
.ja-lesson__next { text-align: right; grid-column: 2; }
.ja-lesson__toc summary {
	cursor: pointer;
	min-height: 48px;
	display: flex;
	align-items: center;
	font-weight: 600;
}

.ja-lesson__upsell {
	display: grid;
	gap: 0.6rem;
	justify-items: start;
	padding: 1.5rem;
	border-radius: var(--ja-radius);
	background: var(--ja-blush-soft);
}
.ja-lesson__upsell > * { margin: 0; }
.ja-lesson__upsell-title { font-weight: 600; color: var(--ja-ink); }
.ja-lesson__upsell-meta { color: var(--ja-body); font-variant-numeric: tabular-nums; }

/* ---------- zárolt lecke ---------- */
.ja-locked {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
	padding: 2rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	background: var(--ja-surface);
}
.ja-locked > * { margin: 0; }
.ja-locked__icon { line-height: 1; color: var(--ja-rose); }
.ja-locked__title { font-weight: 600; color: var(--ja-ink); }
.ja-locked__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Programjaim ---------- */
.ja-account__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ja-account__item {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.25rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	background: #fff;
}
.ja-account__item.is-expired { background: var(--ja-surface); }
.ja-account__item.is-expired .ja-account__cover { opacity: 0.6; }
.ja-account__cover { display: block; border-radius: var(--ja-radius); }
.ja-account__cover .ja-cover { --ja-cover-ratio: 1; }
.ja-account__cover .ja-cover.is-typographic > span,
.ja-order-program__cover .ja-cover.is-typographic > span { display: none; }
.ja-account__cover .ja-cover__mark,
.ja-order-program__cover .ja-cover__mark { top: 8%; right: auto; left: 8%; width: 84%; opacity: 0.5; }
.ja-account__body { display: grid; gap: 0.45rem; }
.ja-account__body > * { margin: 0; }
.ja-account__title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	font-weight: 400;
	line-height: 1.2;
}
.ja-account__title a { color: var(--ja-ink); text-decoration: none; }
.ja-account__title a:hover { color: var(--ja-rose); text-decoration: underline; }
.ja-account__body .ja-progress { max-width: 20rem; }
.ja-account__meta { color: var(--ja-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ja-account__note { font-size: 0.9375rem; }
.ja-account__action .ja-button { white-space: nowrap; }
.ja-account__empty { padding: 2rem; border: 1px dashed var(--ja-line); border-radius: var(--ja-radius); text-align: center; }
.ja-account__empty > p { margin: 0 0 1rem; }
.ja-account__empty > p:last-child { margin: 0; }

/* ---------- köszönőoldal: a rendelés programjai ---------- */
.ja-order-programs { display: grid; gap: 1.25rem; }
.ja-order-programs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ja-order-program {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.25rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	background: #fff;
}
.ja-order-program.is-open { border-color: color-mix(in srgb, var(--ja-rose) 35%, var(--ja-line)); box-shadow: 0 1px 0 var(--ja-line), 0 12px 32px -20px rgb(38 36 58 / 0.35); }
.ja-order-program__cover { display: block; border-radius: var(--ja-radius); }
.ja-order-program__cover .ja-cover { --ja-cover-ratio: 1; }
.ja-order-program__body { display: grid; gap: 0.35rem; }
.ja-order-program__body > * { margin: 0; }
.ja-order-program__title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ja-ink);
}
.ja-order-program__meta { color: var(--ja-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ja-order-program__note { font-size: 0.9375rem; color: var(--ja-body); }
.ja-order-program.is-waiting .ja-order-program__note,
.ja-order-program.is-pending .ja-order-program__note { color: var(--wp--preset--color--state-warning, #8A5A12); }
.ja-order-program__action .ja-button { gap: 0.5rem; white-space: nowrap; }
.ja-order-programs__after { display: grid; gap: 0.75rem; }
.ja-order-programs__after > * { margin: 0; }
.ja-order-programs__account,
.ja-checkout-account-notice {
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--ja-rose);
	border-radius: 0 var(--ja-radius) var(--ja-radius) 0;
	background: var(--wp--preset--color--brand-blush-soft, #FAF1F0);
	font-size: 0.9375rem;
}
.ja-order-programs__later { color: var(--ja-muted); font-size: 0.9375rem; }

@media (max-width: 600px) {
	.ja-order-program { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
	.ja-order-program__action { grid-column: 1 / -1; }
	.ja-order-program__action .ja-button { width: 100%; }
}

/* ---------- borító ---------- */
.ja-cover {
	position: relative;
	aspect-ratio: var(--ja-cover-ratio, 3 / 2);
	overflow: hidden;
	border-radius: var(--ja-radius);
	background: var(--ja-blush-soft);
}
.ja-cover__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ja-cover.is-typographic {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	padding: clamp(1rem, 4%, 1.75rem);
	color: var(--ja-ink);
}
/* Tónusok */
.ja-cover.is-typographic.tone-0 { background: var(--wp--preset--color--brand-blush, #EECAC9); }
/* A halvány szürke a púderen csak 3,5:1 — a felső sor sötétebb (5,2:1, WCAG AA). */
.ja-cover.is-typographic.tone-0 .ja-cover__eyebrow { color: color-mix(in srgb, var(--ja-ink) 75%, var(--wp--preset--color--brand-blush, #EECAC9)); }
.ja-cover.is-typographic.tone-1 { background: var(--ja-ink); color: var(--wp--preset--color--brand-blush, #EECAC9); }
.ja-cover.is-typographic.tone-1 .ja-cover__mark { color: var(--wp--preset--color--brand-blush, #EECAC9); opacity: 0.3; }
.ja-cover.is-typographic.tone-1 .ja-cover__eyebrow { color: color-mix(in srgb, #fff 62%, var(--ja-ink)); }
.ja-cover.is-typographic.tone-2 { background: var(--ja-rose); color: #fff; }
.ja-cover.is-typographic.tone-2 .ja-cover__mark { color: #fff; opacity: 0.28; }
.ja-cover.is-typographic.tone-2 .ja-cover__eyebrow { color: color-mix(in srgb, #fff 78%, var(--ja-rose)); }
.ja-cover__mark {
	position: absolute;
	top: -12%;
	right: -10%;
	width: 62%;
	height: auto;
	color: var(--ja-rose);
	opacity: 0.22;
}
.ja-cover__eyebrow,
.ja-cover__meta {
	position: relative;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ja-muted);
}
.ja-cover__title {
	position: relative;
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* ---------- programkártyák ---------- */
.ja-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ja-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.ja-card__media { display: block; border-radius: var(--ja-radius); text-decoration: none; color: inherit; }
.ja-cover, .ja-cover * { text-decoration: none; }
.ja-card__media .ja-cover__img { transition: transform 300ms ease-out; }
.ja-card:hover .ja-card__media .ja-cover__img { transform: scale(1.03); }
.ja-card__body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.ja-card__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ja-card__chips .ja-chip { font-size: 0.8125rem; background: var(--ja-surface); border: 1px solid var(--ja-line); }
.ja-card__chips .ja-chip.is-owned { background: var(--ja-success); border-color: var(--ja-success); color: #fff; }
.ja-card__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.2;
}
.ja-card__title a { color: var(--ja-ink); text-decoration: none; }
.ja-card__title a:hover { color: var(--ja-rose); }
.ja-card__excerpt { margin: 0; color: var(--ja-body); font-size: 0.9375rem; line-height: 1.55; }
.ja-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ja-line);
}
.ja-card__price { font-weight: 600; color: var(--ja-ink); font-variant-numeric: tabular-nums; }
.ja-card__price del { color: var(--ja-muted); font-weight: 400; margin-right: 0.35rem; }
.ja-card__price ins { text-decoration: none; color: var(--ja-rose); }
.ja-card__cta { font-weight: 600; color: var(--ja-rose); text-decoration: none; white-space: nowrap; }
.ja-card__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-Price-amount { white-space: nowrap; }

/* ---------- élő alkalmak ---------- */
.ja-events__filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.ja-filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.1rem;
	border: 1px solid var(--ja-line);
	border-radius: 999px;
	color: var(--ja-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
}
.ja-filter:hover { border-color: var(--ja-ink); }
.ja-filter.is-active { background: var(--ja-ink); border-color: var(--ja-ink); color: #fff; }
.ja-events__month {
	margin: 2.5rem 0 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--ja-ink);
	font-family: var(--wp--preset--font-family--body, system-ui, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ja-ink);
}
.ja-events__month:first-of-type { margin-top: 0; }
.ja-events__list { margin: 0; padding: 0; list-style: none; }
.ja-event {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr) auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--ja-line);
}
.ja-event__date {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.7rem 0.4rem;
	border: 1px solid var(--ja-line);
	border-radius: var(--ja-radius);
	background: var(--wp--preset--color--paper, #fff);
	color: var(--ja-ink);
	text-decoration: none;
	line-height: 1;
}
.ja-event__month { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ja-rose); }
.ja-event__day {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 2.1rem;
	font-variant-numeric: lining-nums;
	white-space: nowrap;
}
.ja-event__weekday { font-size: 0.75rem; color: var(--ja-muted); min-height: 0.75rem; }
.ja-event__body { display: grid; gap: 0.25rem; }
.ja-event__body > * { margin: 0; }
.ja-event__meta { font-size: 0.875rem; color: var(--ja-muted); }
.ja-event__title { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem); line-height: 1.2; }
.ja-event__title a { color: var(--ja-ink); text-decoration: none; }
.ja-event__title a:hover { color: var(--ja-rose); }
.ja-event__excerpt { font-size: 0.9375rem; color: var(--ja-body); }
.ja-event__side { display: grid; justify-items: end; gap: 0.4rem; text-align: right; }
.ja-event__price { font-weight: 600; color: var(--ja-ink); font-variant-numeric: tabular-nums; }
.ja-event__cta { font-weight: 600; color: var(--ja-rose); text-decoration: none; white-space: nowrap; }
.ja-event__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.ja-badge { font-size: 0.8125rem; font-weight: 600; }
.ja-badge.is-few { background: color-mix(in srgb, var(--wp--preset--color--state-warning, #8A6410) 12%, #fff); color: var(--wp--preset--color--state-warning, #8A6410); }
.ja-badge.is-full { background: color-mix(in srgb, var(--wp--preset--color--state-danger, #A33223) 10%, #fff); color: var(--wp--preset--color--state-danger, #A33223); }
.ja-badge.is-muted { background: var(--ja-surface); color: var(--ja-muted); }
.ja-events.is-compact .ja-event { padding: 1.1rem 0; }
.ja-events.is-compact .ja-events__list { border-top: 1px solid var(--ja-line); }
.ja-events__empty {
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	padding: 2rem;
	border-radius: var(--ja-radius);
	background: var(--ja-surface);
}
.ja-events__empty > * { margin: 0; }
.ja-events__empty-title { font-weight: 600; color: var(--ja-ink); }

/* ---------- élő alkalom adatai (termékoldal) ---------- */
.ja-event-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; font-size: 0.9375rem; }
.ja-event-facts li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--ja-ink); }
.ja-event-facts svg { flex: none; margin-top: 0.15rem; color: var(--ja-rose); }
.ja-event-facts li.is-few { color: var(--wp--preset--color--state-warning, #8A6410); font-weight: 600; }
.ja-event-facts a { color: var(--ja-body); }
.ja-event-past {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--ja-radius);
	background: var(--ja-surface);
	color: var(--ja-muted);
	font-size: 0.9375rem;
}

@media (max-width: 640px) {
	.ja-event { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.9rem 1rem; align-items: start; }
	.ja-event__side { grid-column: 2; justify-items: start; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
	.ja-event__day { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ja-card__media .ja-cover__img { transition: none; }
	.ja-card:hover .ja-card__media .ja-cover__img { transform: none; }
}

@media (max-width: 600px) {
	.ja-account__item { grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
	.ja-account__action { grid-column: 1 / -1; }
	.ja-account__action .ja-button { width: 100%; }
	.ja-lesson__pager { grid-template-columns: 1fr; }
	.ja-lesson__next { grid-column: auto; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	.ja-button { transition: none; }
}

/* ---------- kapcsolódó program a blogbejegyzés végén (RelatedProgram) ---------- */
/* Két kártya fér el egymás mellett, a szövegoszlop közepéhez igazítva. */
.ja-related { margin-top: var(--wp--preset--spacing--80, 4rem); }
.ja-related.alignwide { max-width: min(100%, 46rem) !important; margin-inline: auto !important; }
.ja-related__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ja-rose);
}
.ja-related__title { margin: 0 0 var(--wp--preset--spacing--50, 1.5rem); }