/* =====================================================================
   X-Pay Blog — база: сброс, типографика, контейнер, кнопки, утилиты
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--xp-sticky-top, 120px) + 16px); }
body {
	margin: 0;
	background: var(--xp-bg);
	color: var(--xp-text);
	font-family: var(--xp-font);
	font-weight: var(--xp-fw-light);
	font-size: var(--xp-fs-md);
	line-height: var(--xp-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--xp-fw-bold); line-height: var(--xp-lh-tight); letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--xp-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--xp-black); color: var(--xp-white); }

.xp-container { width: 100%; max-width: calc(var(--xp-container) + var(--xp-gutter) * 2); margin: 0 auto; padding: 0 var(--xp-gutter); }
.xp-main { min-height: 50vh; }
.screen-reader-text, .sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Заголовки страниц ---------- */
.xp-h1 { font-size: var(--xp-fs-h1); line-height: 1.1; letter-spacing: -.025em; }
.xp-h2 { font-size: var(--xp-fs-h2); letter-spacing: -.02em; }
.xp-lead { font-size: var(--xp-fs-lg); color: var(--xp-text-2); max-width: 720px; }

/* ---------- Кнопки ---------- */
.xp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 20px; border-radius: var(--xp-r-sm);
	border: 1px solid var(--xp-accent); background: var(--xp-accent); color: var(--xp-accent-text);
	font-size: var(--xp-fs-md); font-weight: var(--xp-fw-medium); line-height: 1.2; white-space: nowrap;
	transition: background-color .2s var(--xp-ease), color .2s var(--xp-ease), border-color .2s var(--xp-ease);
}
.xp-btn:hover { background: var(--xp-gray-800); border-color: var(--xp-gray-800); }
.xp-btn--ghost { background: transparent; color: var(--xp-text); border-color: var(--xp-line-strong); }
.xp-btn--ghost:hover { background: var(--xp-gray-100); border-color: var(--xp-gray-100); }
.xp-btn--inverse { background: var(--xp-white); color: var(--xp-black); border-color: var(--xp-white); }
.xp-btn--inverse:hover { background: var(--xp-gray-200); border-color: var(--xp-gray-200); }
.xp-btn--sm { min-height: 34px; padding: 6px 14px; font-size: var(--xp-fs-sm); }

/* ---------- Чипы (рубрика, метка) ---------- */
.xp-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--xp-r-pill);
	background: var(--xp-gray-100); color: var(--xp-text); font-size: var(--xp-fs-xs); font-weight: var(--xp-fw-medium); line-height: 16px;
	transition: background-color .2s;
}
a.xp-chip:hover { background: var(--xp-gray-200); }
.xp-chip--inverse { background: var(--xp-black); color: var(--xp-white); }

/* ---------- Секции ---------- */
.xp-section { padding: var(--xp-space-7) 0; }
.xp-section + .xp-section { padding-top: 0; }
.xp-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--xp-space-5); }
.xp-section__title { font-size: var(--xp-fs-h2); letter-spacing: -.02em; }
.xp-section__more { font-size: var(--xp-fs-sm); font-weight: var(--xp-fw-medium); white-space: nowrap; border-bottom: 1px solid var(--xp-line-strong); padding-bottom: 2px; transition: border-color .2s; }
.xp-section__more:hover { border-color: var(--xp-black); }