/*
 * AFFINA Design System v0.1
 * Fonty nie są dołączone do wtyczki.
 * Wgraj DM Sans i Libre Baskerville lokalnie w WordPress/WoodMart
 * lub zapewnij ich @font-face w warstwie projektu.
 */

:root {
	--affina-font-ui: "DM Sans", "Helvetica Neue", Arial, sans-serif;
	--affina-font-editorial: "Libre Baskerville", Georgia, serif;

	--affina-bg-cream: #ece8df;
	--affina-bg-paper: #f5f2eb;
	--affina-bg-olive: #303529;
	--affina-bg-ink: #171714;

	--affina-text-dark: #1e1e1a;
	--affina-text-light: #f5f1e8;
	--affina-text-muted: #777468;
	--affina-line: rgba(30, 30, 26, .18);

	--affina-space-1: clamp(.5rem, .4rem + .35vw, .8rem);
	--affina-space-2: clamp(.9rem, .7rem + .5vw, 1.35rem);
	--affina-space-3: clamp(1.4rem, 1rem + 1vw, 2.3rem);
	--affina-space-4: clamp(2.2rem, 1.4rem + 2vw, 4rem);
	--affina-space-5: clamp(3.5rem, 2rem + 4vw, 7rem);
	--affina-space-6: clamp(5rem, 3rem + 6vw, 10rem);

	--affina-shell: min(92vw, 1680px);
	--affina-copy: 44rem;
	--affina-transition: 520ms cubic-bezier(.22, 1, .36, 1);
}

.affina-shell {
	width: var(--affina-shell);
	margin-inline: auto;
}

.affina-display {
	margin: 0;
	font-family: var(--affina-font-editorial);
	font-size: clamp(3.4rem, 8vw, 9.5rem);
	font-weight: 400;
	line-height: .91;
	letter-spacing: -.055em;
	text-wrap: balance;
}

.affina-kicker {
	font-family: var(--affina-font-ui);
	font-size: clamp(.68rem, .56rem + .2vw, .82rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.affina-link {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	width: fit-content;
	color: inherit;
	font-family: var(--affina-font-ui);
	font-size: .9rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: .35rem;
	transition:
		gap var(--affina-transition),
		opacity var(--affina-transition);
}

.affina-link:hover,
.affina-link:focus-visible {
	gap: 1.05rem;
	opacity: .72;
}

/* Wspólne fundamenty sekcji AFFINA */
.affina-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

[data-affina-reveal] .affina-reveal-target {
	opacity: 0;
	transform: translate(
		var(--affina-reveal-offset-x, 0px),
		calc(22px + var(--affina-reveal-offset-y, 0px))
	);
	transition:
		opacity 850ms cubic-bezier(.22, 1, .36, 1),
		transform 850ms cubic-bezier(.22, 1, .36, 1);
}

[data-affina-reveal].is-visible .affina-reveal-target {
	opacity: 1;
	transform: translate(
		var(--affina-reveal-offset-x, 0px),
		var(--affina-reveal-offset-y, 0px)
	);
}

.elementor-editor-active [data-affina-reveal] .affina-reveal-target,
.elementor-editor-preview [data-affina-reveal] .affina-reveal-target,
body.wp-admin [data-affina-reveal] .affina-reveal-target {
	opacity: 1 !important;
	transform: translate(
		var(--affina-reveal-offset-x, 0px),
		var(--affina-reveal-offset-y, 0px)
	) !important;
}

@media (prefers-reduced-motion: reduce) {
	[data-affina-reveal] .affina-reveal-target,
	[data-affina-reveal].is-visible .affina-reveal-target {
		opacity: 1;
		transform: translate(
		var(--affina-reveal-offset-x, 0px),
		var(--affina-reveal-offset-y, 0px)
	);
		transition: none;
	}
}

/* WooCommerce potrafi globalnie wymuszać height:auto dla wszystkich obrazów.
   Komponenty AFFINA z obrazem typu cover mają własne zasady kadrowania. */
body.woocommerce .affina-hero__media img,
body.woocommerce-page .affina-hero__media img,
body.woocommerce .affina-full-bleed-image__media img,
body.woocommerce-page .affina-full-bleed-image__media img,
body.woocommerce .affina-vouchers__card-media img,
body.woocommerce-page .affina-vouchers__card-media img,
body.woocommerce .affina-editorial-story__media img,
body.woocommerce-page .affina-editorial-story__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}