/* Elementy wspólne dla bloków. Wartości mobilne z makiety 390 px, desktopowe z 1800 px. */

.a-inner {
	position: relative;
	width: 100%;
	max-width: 1800px;
	margin-inline: auto;
}

/* Pojawianie się: właściwość translate nie koliduje z transformacjami elementów. */
@keyframes a-reveal {
	from {
		opacity: 0;
		translate: 0 18px;
	}
}

.is-revealed {
	animation: a-reveal 800ms cubic-bezier(0.2, 0.6, 0.2, 1) var(--reveal-delay, 0ms) backwards;
}

/* Typografia */
.t-eyebrow {
	font-size: 14px;
	letter-spacing: var(--tracking-caps);
	line-height: 21px;
	text-transform: uppercase;
}

.t-body {
	margin: 0;
	font-size: 14px;
	line-height: 24px;
}

/* Etykieta sekcji z linią */
.section-label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--color-muted);
	font-size: 16px;
	line-height: 22px;
}

.section-label::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* Okrągłe strzałki */
.arrow-link {
	display: inline-block;
	transition: opacity var(--transition);
}

.arrow-link:hover {
	opacity: 0.6;
}

.arrow-circle--l {
	--size: 52px;
}

.arrow-circle--l .arrow-circle__icon {
	width: 38%;
	height: 42%;
}

.arrow-circle--down {
	transform: rotate(90deg);
}

.arrow-circle--value {
	--size: 32px;
	color: var(--color-line);
}

.arrow-circle--value .arrow-circle__icon {
	width: 62%;
	height: 68%;
}

/* Lista wartości marki */
.value-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.value-list__item {
	display: flex;
	align-items: center;
	gap: 30px;
}

/* Przyciski */
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	padding-inline: 12px;
	border: 1px solid var(--color-ink);
	color: var(--color-ink);
	font-size: 14px;
	letter-spacing: var(--tracking-caps);
	line-height: 20px;
	text-transform: uppercase;
	transition: background-color var(--transition), color var(--transition);
}

.btn:hover {
	background: var(--color-ink);
	color: var(--color-bg);
}

.btn--solid {
	background: var(--color-bg);
}

.btn--solid:hover {
	background: var(--color-white);
	color: var(--color-ink);
}

.btn--dark {
	background: var(--color-ink);
	color: var(--color-white);
}

.btn--dark:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.text-link {
	display: inline-block;
	font-size: 14px;
	letter-spacing: var(--tracking-caps);
	line-height: 23px;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 4px;
}

.text-link:hover {
	text-decoration: none;
}

/* Formularze */
.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field__label {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	line-height: 20px;
	text-transform: uppercase;
}

.field__required {
	color: #b08d57;
}

.field__input {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--color-field);
	border-radius: 0;
	background: none;
	font-size: 14px;
	font-weight: 300;
}

textarea.field__input {
	height: 128px;
	padding-block: 8px;
	resize: vertical;
}

.field__input:focus {
	outline: 0;
	border-bottom-color: currentColor;
	box-shadow: 0 1px 0 currentColor;
}

.field__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 12px;
	line-height: 19px;
}

.consent input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--color-ink);
}

.consent a {
	text-decoration: underline;
}

.form-trap {
	position: absolute;
	left: -9999px;
}

.form-notice {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid currentColor;
	font-size: 14px;
	line-height: 20px;
}

@media (min-width: 1024px) {
	.t-eyebrow {
		font-size: max(13px, calc(16 * var(--u)));
		line-height: calc(28 * var(--u));
	}

	.t-body {
		line-height: 25px;
	}

	.section-label {
		--bleed: max(0px, (100vw - 1800px) / 2);
		gap: calc(16 * var(--u));
		font-size: max(16px, calc(20 * var(--u)));
		line-height: calc(28 * var(--u));
	}

	.section-label::before {
		width: calc(197 * var(--u) + var(--bleed));
		margin-left: calc(-1 * var(--bleed));
	}

	.arrow-circle--l {
		--size: max(52px, calc(74 * var(--u)));
	}

	.arrow-circle--l .arrow-circle__icon {
		width: 45%;
		height: 49%;
	}

	.arrow-circle--value {
		--size: max(30px, calc(38 * var(--u)));
	}

	.arrow-circle--value .arrow-circle__icon {
		width: 45%;
		height: 50%;
	}

	.value-list__item {
		gap: calc(54 * var(--u));
	}

	.btn {
		width: calc(234 * var(--u));
		min-width: 180px;
		height: calc(56 * var(--u));
		min-height: 44px;
		font-size: max(13px, calc(16 * var(--u)));
		line-height: calc(28 * var(--u));
	}

	.text-link {
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.16em;
		line-height: 21px;
	}

	.field__label {
		font-weight: 300;
		line-height: 19px;
	}

	.field__input {
		height: calc(57 * var(--u));
		min-height: 44px;
		font-size: max(14px, calc(16 * var(--u)));
	}

	textarea.field__input {
		height: calc(169 * var(--u));
	}

	.consent {
		gap: calc(15 * var(--u));
	}

	.consent input {
		width: 14px;
		height: 14px;
		margin-top: 3px;
	}
}