/* =========================================================
   Компонент: кнопка (ТЗ §2.4)
   ========================================================= */

.phm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--phm-font-body);
	font-weight: 500;
	line-height: 1.2;
	border-radius: var(--phm-radius-btn);
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition:
		background-color var(--phm-dur) var(--phm-ease),
		color var(--phm-dur) var(--phm-ease),
		border-color var(--phm-dur) var(--phm-ease);
}

/* ---- Primary ---- */

.phm-btn--primary {
	background: var(--phm-primary-dark);
	color: var(--phm-white);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: var(--phm-btn-ls);
	padding: 20px 40px;
}

.phm-btn--primary:hover,
.phm-btn--primary:focus-visible {
	background: var(--phm-primary);
	color: var(--phm-white);
}

/* ---- Ghost ---- */

.phm-btn--ghost {
	border-color: var(--phm-primary-dark);
	color: var(--phm-primary-dark);
	background: transparent;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: var(--phm-btn-ls);
	padding: 20px 40px;
}

.phm-btn--ghost:hover,
.phm-btn--ghost:focus-visible {
	background: var(--phm-primary-dark);
	color: var(--phm-white);
}

/* ---- Outline light (на темному фоні) ---- */

.phm-btn--outline-light {
	border-color: var(--phm-white);
	color: var(--phm-white);
	background: transparent;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: var(--phm-btn-ls);
	padding: 16px 32px;
}

.phm-btn--outline-light:hover,
.phm-btn--outline-light:focus-visible {
	background: var(--phm-white);
	color: var(--phm-primary-dark);
}

/* ---- Text ---- */

.phm-btn--text {
	color: var(--phm-primary-dark);
	font-size: 15px;
	font-weight: 500;
	padding: 0;
	background: none;
}

.phm-btn--text:hover,
.phm-btn--text:focus-visible {
	color: var(--phm-primary);
}

/* ---- Середній розмір: 16/32 — шапка, підвал, панель опису послуги ---- */

.phm-btn--medium.phm-btn--primary,
.phm-btn--medium.phm-btn--ghost {
	padding: 16px 32px;
}

/* ---- Компактний розмір (шапка в стані «gescrollt») ---- */

.phm-btn--compact.phm-btn--primary,
.phm-btn--compact.phm-btn--ghost {
	font-size: 13px;
	padding: 12px 26px;
}

/* ---- Стрілка їде на 4px (ТЗ §2.4) ---- */

.phm-btn__arrow {
	display: inline-block;
	transition: transform var(--phm-dur) var(--phm-ease);
}

.phm-btn:hover .phm-btn__arrow,
.phm-btn:focus-visible .phm-btn__arrow {
	transform: translateX(4px);
}

/* ---- Мобільні: кнопки на всю ширину (ТЗ §7, 480px) ---- */

@media (max-width: 480px) {
	.phm-btn--primary,
	.phm-btn--ghost {
		width: 100%;
		padding-inline: 24px;
	}
}