/* =========================================================
   KonteMax — „Prémium Tiszta" design rendszer · main.css
   Tokenek, alap-tipográfia, layout, gombok.
   ========================================================= */

:root {
	/* Márkaszínek */
	--kx-blue: #1C7FC2;
	--kx-blue-deep: #0D3A5A;
	--kx-blue-tint: #E6F1FA;
	--kx-anthracite: #14171A;
	--kx-anthracite-2: #16191C;
	--kx-gold: #DD9933;
	--kx-gold-dark: #B57A1F;
	--kx-white: #FFFFFF;

	/* Semlegesek */
	--kx-ink: #16191C;
	--kx-muted: #5c636b;
	--kx-line: #e6e9ed;
	--kx-bg: #FFFFFF;
	--kx-bg-alt: #F4F8FB;
	--kx-bg-soft: #f7f9fb;

	/* Tipográfia */
	--kx-font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--kx-font-body: 'Lora', Georgia, 'Times New Roman', serif;

	/* Ritmus */
	--kx-container: 1200px;
	--kx-gap: clamp(1rem, 2.5vw, 2rem);
	--kx-radius: 14px;
	--kx-radius-sm: 10px;
	--kx-shadow: 0 10px 30px rgba(13, 58, 90, 0.08);
	--kx-shadow-lg: 0 24px 60px rgba(13, 58, 90, 0.14);
	--kx-header-h: 76px;
	--kx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset-lite --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--kx-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--kx-ink);
	background: var(--kx-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--kx-blue); text-decoration: none; transition: color .2s var(--kx-ease); }
a:hover { color: var(--kx-blue-deep); }

/* --- Tipográfia --- */
h1, h2, h3, h4 {
	font-family: var(--kx-font-head);
	color: var(--kx-blue-deep);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 .6em;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
p { margin: 0 0 1.1em; }

/* --- Layout --- */
.kx-container {
	width: 100%;
	max-width: var(--kx-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.25rem);
}
.kx-main { display: block; }
.kx-section { padding-block: clamp(3rem, 7vw, 6rem); }
.kx-section--alt { background: var(--kx-bg-alt); }
.kx-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.kx-section__title { margin-bottom: .35em; }
.kx-section__sub { color: var(--kx-muted); font-size: 1.1rem; margin: 0; }
.kx-section__foot { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

.kx-grid { display: grid; gap: var(--kx-gap); }
.kx-grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kx-grid--posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.kx-eyebrow {
	display: inline-block;
	font-family: var(--kx-font-head);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kx-gold-dark);
	margin-bottom: .5rem;
}
.kx-eyebrow--gold { color: var(--kx-gold); }

/* --- Scroll reveal --- */
.kx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--kx-ease), transform .7s var(--kx-ease); }
.kx-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kx-reveal { opacity: 1; transform: none; } }

.kx-prose { max-width: 780px; }
.kx-prose h2, .kx-prose h3 { margin-top: 1.6em; }
.kx-prose img { border-radius: var(--kx-radius-sm); margin-block: 1.5em; }

.kx-empty { text-align: center; color: var(--kx-muted); padding: 3rem 1rem; }

/* --- Gombok --- */
.kx-btn {
	--btn-bg: var(--kx-blue);
	--btn-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--kx-font-head);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	padding: .85rem 1.5rem;
	border-radius: 999px;
	border: 2px solid transparent;
	background: var(--btn-bg);
	color: var(--btn-fg);
	cursor: pointer;
	transition: transform .2s var(--kx-ease), box-shadow .2s var(--kx-ease), background .2s var(--kx-ease), color .2s var(--kx-ease);
	white-space: nowrap;
}
.kx-btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.kx-btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }

.kx-btn--gold { --btn-bg: var(--kx-gold); --btn-fg: var(--kx-blue-deep); box-shadow: 0 8px 22px rgba(221,153,51,.32); }
.kx-btn--gold:hover { --btn-bg: #e8a848; box-shadow: 0 12px 28px rgba(221,153,51,.42); }

.kx-btn--blue { --btn-bg: var(--kx-blue); --btn-fg: #fff; }
.kx-btn--blue:hover { --btn-bg: var(--kx-blue-deep); }

.kx-btn--ghost { --btn-bg: transparent; --btn-fg: var(--kx-blue-deep); border-color: transparent; padding-inline: .25rem; }
.kx-btn--ghost:hover { --btn-fg: var(--kx-blue); }

.kx-btn--outline { --btn-bg: transparent; --btn-fg: var(--kx-blue-deep); border-color: var(--kx-line); }
.kx-btn--outline:hover { --btn-bg: var(--kx-blue-tint); border-color: var(--kx-blue); }

.kx-btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.55); }
.kx-btn--outline-light:hover { --btn-bg: rgba(255,255,255,.12); border-color: #fff; }

/* --- Segéd --- */
.kx-skip {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--kx-blue-deep); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0;
}
.kx-skip:focus { left: 0; color: #fff; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}