/**
 * Компонент: Button.
 *
 * .tri-btn применяется и к <a> (навигация), и к <button> (действие).
 * Выбор тега делает шаблон, а не CSS: см. docs/ARCHITECTURE.md.
 *
 * Размеры и цвета — ровно те, что стоят у кнопок в /design-reference:
 *   sm  padding:11px 22px; font-size:14px;   — CTA в шапке
 *   md  padding:12px 22px; font-size:14px;   — CTA в мегаменю
 *   lg  padding:16px 30px; font-size:16px;   — CTA в hero главной
 *   lg-15-5 то же, но font-size:15.5px       — CTA в hero услуги
 * Радиус у всех — 10px, hover — transform:translateY(-2px) + тень.
 */

.tri-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--tri-space-8);
	/* reference: md — padding:12px 22px; font-size:14px; font-weight:600 */
	padding: var(--tri-space-12) var(--tri-space-22);
	border: var(--tri-border-width) solid transparent;
	border-radius: var(--tri-radius-10);
	font-family: inherit;
	font-size: var(--tri-fs-14);
	/* Вес кнопки — про нажимаемость, а не про тон: см. --tri-fw-600. */
	font-weight: var(--tri-fw-500);
	line-height: var(--tri-lh-1-25);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	max-width: 100%;
	transition:
		color var(--tri-duration-28) var(--tri-ease),
		background-color var(--tri-duration-28) var(--tri-ease),
		border-color var(--tri-duration-28) var(--tri-ease),
		box-shadow var(--tri-duration-32) var(--tri-ease),
		transform var(--tri-duration-32) var(--tri-ease);
}

.tri-btn:hover {
	transform: translateY(-2px); /* reference: style-hover="transform:translateY(-2px)" */
}

.tri-btn:active {
	transform: translateY(0);
}

.tri-btn[aria-disabled="true"],
.tri-btn:disabled {
	opacity: 0.55;
	pointer-events: none;
	transform: none;
}

.tri-btn__icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

/* --- Размеры ------------------------------------------------------- */

/* reference: CTA в шапке — padding:11px 22px; font-size:14px */
.tri-btn--sm {
	padding: var(--tri-space-11) var(--tri-space-22);
	font-size: var(--tri-fs-14);
}

/* reference: CTA в hero главной — padding:16px 30px; font-size:16px */
.tri-btn--lg {
	padding: var(--tri-space-16) var(--tri-space-30);
	font-size: var(--tri-fs-16);
}

/* reference: CTA в hero услуги — тот же бокс, кегль 15.5px */
.tri-btn--lg-15-5 {
	padding: var(--tri-space-16) var(--tri-space-30);
	font-size: var(--tri-fs-15-5);
}

.tri-btn--block {
	display: flex;
	width: 100%;
}

/* --- Варианты ------------------------------------------------------ */

/* reference: background:#F8B327; color:#12295C; font-weight:600 */
.tri-btn--accent {
	background-color: var(--tri-color-accent);
	color: var(--tri-color-navy);
}

.tri-btn--accent:hover,
.tri-btn--accent:focus-visible {
	color: var(--tri-color-navy);
	box-shadow: var(--tri-shadow-accent-26-3);
}

/* reference: вариант того же CTA с тёмным текстом (мегаменю) */
.tri-btn--accent-ink {
	background-color: var(--tri-color-accent);
	color: var(--tri-color-ink);
}

.tri-btn--accent-ink:hover,
.tri-btn--accent-ink:focus-visible {
	color: var(--tri-color-ink);
	box-shadow: var(--tri-shadow-accent-26-3);
}

/* reference: background:#FFFFFF; color:#16181D; font-weight:800 */
.tri-btn--white {
	background-color: var(--tri-color-white);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

.tri-btn--white:hover,
.tri-btn--white:focus-visible {
	color: var(--tri-color-ink);
	box-shadow: var(--tri-shadow-navy-36-1);
}

/* reference: background:rgba(255,255,255,0.92); border:1px solid #DDE0E6;
   color:#16181D; font-weight:800 — вторичная кнопка hero услуги */
.tri-btn--outline {
	background-color: rgba(255, 255, 255, 0.92);
	border-color: var(--tri-color-border);
	color: var(--tri-color-ink);
	font-weight: var(--tri-fw-800);
}

.tri-btn--outline:hover,
.tri-btn--outline:focus-visible {
	border-color: var(--tri-color-navy);
	color: var(--tri-color-ink);
}

/* reference: сплошная синяя кнопка */
.tri-btn--navy {
	background-color: var(--tri-color-navy);
	color: var(--tri-color-white);
}

.tri-btn--navy:hover,
.tri-btn--navy:focus-visible {
	background-color: var(--tri-color-navy-mid);
	color: var(--tri-color-white);
	box-shadow: var(--tri-shadow-primary-26-22);
}

/* reference: текстовая ссылка-действие — 13.5px w700 #12295C */
.tri-btn--link {
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--tri-color-navy);
	font-size: var(--tri-fs-13-5);
	font-weight: var(--tri-fw-700);
}

.tri-btn--link:hover {
	transform: none;
	color: var(--tri-color-ink);
}

/* На синем фоне вторичная кнопка — прозрачная с белой границей.
   reference: border:1px solid rgba(255,255,255,0.4); color:#FFFFFF */
:is(.tri-section--navy, .tri-section--navy-deep) .tri-btn--outline,
.tri-btn--on-dark {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--tri-color-white);
	font-weight: var(--tri-fw-800);
}

:is(.tri-section--navy, .tri-section--navy-deep) .tri-btn--outline:hover,
.tri-btn--on-dark:hover {
	border-color: var(--tri-color-white);
	color: var(--tri-color-white);
}

/* --- Группа кнопок ------------------------------------------------- */

/* reference: display:flex; gap:14px */
.tri-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tri-space-14);
}

/* --- Кнопки редактора Gutenberg ------------------------------------ */

.wp-block-button__link {
	border-radius: var(--tri-radius-10);
	font-size: var(--tri-fs-14);
	/* Вес кнопки — про нажимаемость, а не про тон: см. --tri-fw-600. */
	font-weight: var(--tri-fw-500);
	padding: var(--tri-space-12) var(--tri-space-22);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:not([class*="background-color"]) {
	background-color: var(--tri-color-accent);
	color: var(--tri-color-navy);
}

/* ------------------------------------------------------------------
 * ЦЕЛИ НАЖАТИЯ НА СЕНСОРНЫХ ЭКРАНАХ (мобильный этап 14.09)
 *
 * Ссылки-действия внутри карточек набраны мелким шрифтом: по высоте
 * они занимали 20–26px, и палец попадал в них через раз. Размер
 * шрифта и вид ссылки не меняются — увеличивается только область,
 * по которой можно нажать.
 * ---------------------------------------------------------------- */
@media (max-width: 1023px) {
	.tri-btn--link {
		min-block-size: 44px;
	}
}