/* ==========================================================================
   Főoldali szakaszok: problémalista (.mw-pain), modern alapok (.mw-modern),
   folyamat (.mw-process). A belépő animációkat az inview.js indítja
   (.is-in osztály); JS nélkül minden azonnal látszik.
   ========================================================================== */

/* --- Kéthasábos elrendezések töréspontjai (design: auto-fit minmax) ------ */
@media (max-width: 863px) {
	.mw-cols--pain { flex-wrap: wrap !important; }
	.mw-cols--pain > .wp-block-column { flex-basis: 100% !important; }
}
.mw-sticky { position: sticky; top: calc(var(--mw-header-h) + var(--wp--preset--spacing--50)); }
@media (max-width: 863px) { .mw-sticky { position: static; } }
.mw-pain .mw-sticky .is-style-lead { margin-top: var(--wp--preset--spacing--40); }

/* --- Problémalista ----------------------------------------------------------- */
.mw-pain__list { list-style: none; margin: 0; padding: 0; counter-reset: mw-pain; }
.mw-pain__list li {
	--d: 0ms;
	counter-increment: mw-pain;
	position: relative;
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: baseline;
	padding: 1.1rem 0;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text);
	transition: grid-template-columns 320ms ease;
}
.mw-pain__list li:first-child { font-weight: 500; }
.mw-pain__list li::before {
	content: counter(mw-pain, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--ui);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	color: var(--wp--preset--color--accent-deep);
	transition: transform 320ms ease, color 320ms ease;
}
.mw-pain__list li::after,
.mw-pain__list::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: rgba(16, 46, 70, .14);
	transform-origin: left;
}
.mw-pain__list li:first-child::after { display: none; }
.mw-pain__list { position: relative; }
.mw-pain__list::after { top: auto; bottom: 0; --d: 660ms; }
.mw-pain__list li:nth-child(2) { --d: 110ms; }
.mw-pain__list li:nth-child(3) { --d: 220ms; }
.mw-pain__list li:nth-child(4) { --d: 330ms; }
.mw-pain__list li:nth-child(5) { --d: 440ms; }
.mw-pain__list li:nth-child(6) { --d: 550ms; }
.mw-pain__list li:nth-child(n+7) { --d: 600ms; }
/* Animáció csak ha a JS előkészítette (.is-armed) */
.mw-pain__list.is-armed li::after,
.mw-pain__list.is-armed::after {
	transform: scaleX(0);
	transition: transform 900ms var(--mw-ease-enter) var(--d), background-color 320ms ease;
}
.mw-pain__list.is-armed li {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms ease calc(var(--d) + 150ms), transform 600ms var(--mw-ease-enter) calc(var(--d) + 150ms), grid-template-columns 320ms ease;
}
.mw-pain__list.is-in li::after, .mw-pain__list.is-in::after { transform: scaleX(1); }
.mw-pain__list.is-in li { opacity: 1; transform: none; }
.mw-pain__list.is-done li { transition-delay: 0ms; }
.mw-pain__list.is-done li:hover { grid-template-columns: calc(2.5rem + 8px) minmax(0, 1fr); }
.mw-pain__list.is-done li:hover::after { background: var(--wp--preset--color--accent); }
.mw-pain__list.is-done li:hover::before { color: var(--wp--preset--color--accent); transform: translateX(4px); }

/* --- Modern alapok ------------------------------------------------------------ */
.mw-video-54 { margin: 0; }
.mw-video-54 video { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; }
.mw-modern .is-style-lead { margin-top: var(--wp--preset--spacing--40); }
.mw-compare__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--ui);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.mw-compare--good .mw-compare__head { font-weight: 600; color: var(--wp--preset--color--accent-deep); border-bottom-color: var(--wp--preset--color--accent); }
.mw-compare--good .mw-compare__head::after {
	content: "";
	flex: none;
	width: 28px; height: 28px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='10.5' stroke='%23B99A4A' stroke-width='1.2'/%3E%3Cpath d='M7.5 12.3l3 3 6-6.3' stroke='%23B99A4A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.mw-compare .wp-block-list { margin-top: 0 !important; }
.mw-compare__list li {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
}
.mw-compare__list li::before { content: "—"; color: var(--wp--preset--color--border); }
.mw-compare--good .mw-compare__list li { color: var(--wp--preset--color--text); font-weight: 500; }
.mw-compare--good .mw-compare__list li::before { color: var(--wp--preset--color--accent); }

/* --- Folyamat ------------------------------------------------------------------ */
.mw-section-head.is-centered { text-align: center; }
.mw-proc.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Tableten is 3 hasáb (2+1 elrendezés helyett); mobilon egymás alatt, laposabb képekkel. */
@media (max-width: 639px) {
	.mw-proc.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
	.mw-proc .mw-zoom img { aspect-ratio: 16 / 10 !important; }
}
.mw-proc { list-style: none; }
.mw-zoom.wp-block-image { flex-shrink: 0; margin: 0; overflow: hidden; border-radius: 4px; background: rgba(16, 46, 70, .06); }
.mw-zoom img { display: block; width: 100%; border-radius: 0; transition: transform 700ms ease; }
.mw-zoom:hover img { transform: scale(1.03); }
.mw-proc__step {
	--d: 0ms; --r: 0s;
	position: relative;
	margin-top: calc(var(--wp--preset--spacing--50) - 5px) !important;
	padding-top: calc(var(--wp--preset--spacing--50) + 6px);
	/* alapvonal (y=5px) + álló arany pont (9 px) */
	background:
		radial-gradient(circle at 4.5px 5.5px, var(--wp--preset--color--accent) 4.5px, transparent 5px) no-repeat,
		linear-gradient(rgba(16, 46, 70, .14), rgba(16, 46, 70, .14)) 0 5px / 100% 1px no-repeat;
}
.mw-proc__item:nth-child(2) .mw-proc__step { --d: 450ms; --r: 2.4s; }
.mw-proc__item:nth-child(3) .mw-proc__step { --d: 900ms; --r: 4.8s; }
.mw-proc__step::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 5px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(1);
	transform-origin: left;
}
.mw-proc.is-armed .mw-proc__step::before { transform: scaleX(0); transition: transform 1100ms var(--mw-ease-enter) var(--d); }
.mw-proc.is-in .mw-proc__step::before { transform: scaleX(1); }
.mw-proc__step::after {
	content: "";
	position: absolute;
	top: 2px; left: 0;
	width: 7px; height: 7px;
	border-radius: 999px;
	background: #D9C28A;
	box-shadow: 0 0 0 4px rgba(185, 154, 74, .18);
	opacity: 0;
	z-index: 1;
}
.mw-proc.is-in .mw-proc__step::after { animation: mw-proc-run 7.2s linear infinite; animation-delay: calc(1.6s + var(--r)); }
@keyframes mw-proc-run {
	0% { left: 0; opacity: 0; }
	3% { opacity: 1; }
	30% { opacity: 1; }
	33% { left: calc(100% - 7px); opacity: 0; }
	100% { left: calc(100% - 7px); opacity: 0; }
}
.mw-proc__num {
	font-family: var(--wp--preset--font-family--ui);
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .2em;
	color: var(--wp--preset--color--accent-deep);
}
@media (prefers-reduced-motion: reduce) {
	.mw-proc__step::after { display: none; }
}
/* Összehasonlító lista: auto-fit minmax(320px) → 2 hasáb 752 px-től */
@media (min-width: 752px) {
	.wp-block-columns.mw-cols--compare { flex-wrap: nowrap !important; }
	.wp-block-columns.mw-cols--compare > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; }
}
@media (max-width: 751px) {
	.wp-block-columns.mw-cols--compare { flex-wrap: wrap !important; }
	.wp-block-columns.mw-cols--compare > .wp-block-column { flex-basis: 100% !important; }
}
/* Modern alapok: auto-fit minmax(340px) → 2 hasáb 792 px-től */
@media (min-width: 782px) and (max-width: 791px) {
	.wp-block-columns.mw-cols--modern { flex-wrap: wrap !important; }
	.wp-block-columns.mw-cols--modern > .wp-block-column { flex-basis: 100% !important; }
}