/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--btn-size);
	font-weight: 600;
	line-height: var(--btn-lh);
	letter-spacing: var(--btn-ls);
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

/* Medium primary — accent pill with an arrow bubble on the right. */
.btn--primary {
	gap: var(--space-7);
	height: 64px;
	padding: 8px 8px 8px 30px;
	background: var(--color-accent);
	color: var(--color-neutral-7);
}

.btn--primary:hover { background: var(--color-accent-light); }

.btn__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: var(--radius-pill);
	background: var(--color-accent-light);
}

.btn__arrow img { width: 8px; height: 10.667px; }

/* Medium secondary — light pill. */
.btn--secondary {
	height: 64px;
	padding: 23px 58px;
	background: var(--color-neutral-7);
	color: var(--color-primary);
}

.btn--secondary:hover { background: var(--color-neutral-4); }

/* Small secondary — dark pill (used in the header). */
.btn--sm-dark {
	height: 46px;
	padding: 14px 33px 14px 34px;
	background: var(--color-primary);
	color: var(--color-neutral-7);
}

.btn--sm-dark:hover { background: #25355c; }

/* Small primary — same pill as `--sm-dark`, in accent (member "Osobní web"). */
.btn--sm-accent {
	height: 46px;
	padding: 14px 33px 14px 34px;
	background: var(--color-accent);
	color: var(--color-neutral-7);
}

.btn--sm-accent:hover { background: var(--color-accent-light); }

/*
 * Phones: CTAs run the full column width. The header pill, the small dark /
 * accent chips and the round icon buttons keep their intrinsic size, and the
 * rows that hold two CTAs side by side stack so each one gets the full width.
 */
@media (max-width: 767px) {
	.btn {
		width: 100%;
		justify-content: center;
	}

	.site-header__actions .btn,
	.btn--sm-dark,
	.btn--sm-accent { width: auto; }

	.hero__buttons,
	.page-hero__buttons,
	.author-band__actions,
	.team__cta,
	.form__footer {
		flex-direction: column;
		align-items: stretch;
		/* The row is shrink-wrapped by an align-items: flex-start parent. */
		align-self: stretch;
		width: 100%;
	}
}