/* EvePics – A4 promo poster (/{lang}/promo/poster). Variables from public.css; page chrome/print in promo.css. */

.poster-body {
	/* Poster is always light (public.css switches vars in dark mode). */
	color-scheme: light;
	--bg-page: #f4f6f9;
	--text-primary: #1a1d24;
	--text-secondary: #5c6370;
	font-family: var(--font-body);
	color: var(--text-primary);
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.poster-body *,
.poster-body *::before,
.poster-body *::after {
	box-sizing: border-box;
}

.poster-sheet {
	width: 210mm;
	height: 297mm;
	margin: 0 auto var(--space-xl);
	background: #fff;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Hero */
.poster-hero {
	width: 100%;
	padding: 16mm 18mm 38mm;
	color: #f8fafc;
	text-align: center;
	background:
		radial-gradient(70mm 50mm at 5% 0%, rgba(79, 70, 229, .5), transparent 70%),
		radial-gradient(80mm 55mm at 100% 15%, rgba(14, 116, 144, .55), transparent 70%),
		radial-gradient(70mm 45mm at 90% 100%, rgba(168, 85, 247, .4), transparent 70%),
		#020617;
}

.poster-brand {
	display: inline-flex;
	align-items: center;
	gap: 4mm;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 36px;
	color: #f8fafc;
}

.poster-brand img {
	width: 16mm;
	height: 16mm;
	display: block;
}

.poster-title {
	margin: 12mm auto 0;
	max-width: 165mm;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 44px;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: #f8fafc;
}

/* QR */
/* Own stacking context: side card (z -2) < QR shadow (z -1) < QR card. */
.poster-qr-row {
	position: relative;
	isolation: isolate;
	width: 100%;
	margin-top: -30mm;
	padding: 0 14mm;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 7mm;
}

.poster-qr-card {
	position: relative;
	flex-shrink: 0;
	width: 92mm;
	padding: 7mm 7mm 6mm;
	background: #fff;
	border-radius: var(--radius-lg);
	text-align: center;
}

/* Chrome prints blurred box-shadows clipped or as flat slabs. The same shadows drawn as an SVG
   blur behind each card (sized to the card, no viewBox) print exactly as on screen. */
.poster-qr-card::before,
.poster-qr-aside-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
/* = var(--shadow-lg): 0 12px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04) */
.poster-qr-card::before {
	inset: -48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='a' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Crect x='48' y='60' rx='16' style='width:calc(100%25 - 96px);height:calc(100%25 - 96px)' fill-opacity='.08' filter='url(%23a)'/%3E%3Crect x='48' y='52' rx='16' style='width:calc(100%25 - 96px);height:calc(100%25 - 96px)' fill-opacity='.04' filter='url(%23b)'/%3E%3C/svg%3E");
}
/* 6px 10px 22px rgba(15,23,42,.12) */
.poster-qr-aside-card::before {
	inset: -44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='a' x='-30%25' y='-50%25' width='160%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3C/filter%3E%3Crect x='50' y='54' rx='19' style='width:calc(100%25 - 88px);height:calc(100%25 - 88px)' fill='%230f172a' fill-opacity='.12' filter='url(%23a)'/%3E%3C/svg%3E");
}

.poster-qr-title {
	margin: 0 0 4mm;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--text-primary);
}

.poster-qr-img {
	width: 70mm;
	height: 70mm;
	margin: 0 auto;
	padding: 1mm;
	background: #fff;
}

.poster-qr-img img {
	width: 100%;
	height: 100%;
	display: block;
	image-rendering: pixelated;
}

.poster-qr-url {
	margin: 4mm 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	color: var(--accent);
}

.poster-qr-url--with-code {
	font-size: 14px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.poster-qr-demo {
	margin: 2mm 0 0;
	font-size: 11px;
	line-height: 1.35;
	color: var(--text-secondary);
	overflow-wrap: anywhere;
}

.poster-qr-aside {
	display: none;
}

.poster-qr-row.is-open {
	position: relative;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
}

.poster-qr-row.is-open .poster-qr-aside {
	display: flex;
	flex-direction: column;
	position: absolute;
	z-index: -2;
	top: 0;
	bottom: 0;
	left: calc(14mm + 92mm - 16mm);
	right: 14mm;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	pointer-events: none;
}

.poster-qr-row.is-open .poster-qr-aside::before {
	content: "";
	flex: 5 1 0;
}

.poster-qr-row.is-open .poster-qr-aside::after {
	content: "";
	flex: 2 1 0;
}

.poster-qr-aside-card {
	position: relative;
	flex: 0 0 auto;
	min-width: 0;
	padding: 5mm 6mm 5mm 22mm;
	background: #f4f6f9;
	border-radius: 0 5mm 5mm 5mm;
}

.poster-qr-aside-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--text-primary);
}

.poster-qr-aside-code {
	margin: 4mm 0 0;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--accent);
	overflow-wrap: anywhere;
}

.poster-qr-aside-code:empty {
	display: none;
}

.poster-code-form {
	max-width: 210mm;
	margin: 0 auto var(--space-md);
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	grid-template-areas:
		"code-label intro-label"
		"code-input intro-input";
	column-gap: var(--space-md);
	row-gap: .35rem;
	align-items: stretch;
	color: var(--text-primary);
}

.poster-code-field {
	display: contents;
}

.poster-code-field--code label {
	grid-area: code-label;
}

.poster-code-field--intro label {
	grid-area: intro-label;
}

.poster-code-field--code input {
	grid-area: code-input;
	align-self: start;
	height: auto;
}

.poster-code-field--intro textarea {
	grid-area: intro-input;
}

.poster-code-form label {
	display: flex;
	align-items: flex-end;
	margin: 0;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-secondary);
}

.poster-code-form input,
.poster-code-form textarea {
	font: inherit;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-default);
	background: var(--bg-card);
	color: var(--text-primary);
}

.poster-code-form textarea {
	min-height: 4.6rem;
	resize: vertical;
	line-height: 1.35;
}

@media screen and (max-width: 520px) {
	.poster-code-form {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"code-label"
			"code-input"
			"intro-label"
			"intro-input";
	}
}

/* Steps */
.poster-steps {
	list-style: none;
	margin: 10mm 0 0;
	padding: 0 18mm;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8mm;
	text-align: center;
}

.poster-steps li {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--text-primary);
}

.poster-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 11mm;
	height: 11mm;
	margin: 0 auto 3mm;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	font-size: 18px;
}

/* Advantages */
.poster-features {
	list-style: none;
	margin: 10mm 0 12mm;
	padding: 0 18mm;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5mm;
	text-align: center;
}

.poster-features li {
	padding: 4mm 3mm 3.5mm;
	border: 1px solid rgba(26, 29, 36, 0.1);
	border-radius: 3.5mm;
	background: #f4f6f9;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-secondary);
}

.poster-feature-icon {
	display: block;
	width: 10mm;
	height: 10mm;
	margin: 0 auto 2.5mm;
	padding: 2.4mm;
	border-radius: 50%;
	background: var(--accent);
}

/* Site icons mix white / currentColor strokes: render them all white on the accent disc. */
.poster-feature-icon img {
	width: 100%;
	height: 100%;
	display: block;
	filter: brightness(0) invert(1);
}

@media print {
	.poster-sheet {
		margin: 0;
		box-shadow: none;
	}

}

@media screen and (max-width: 820px) {
	.poster-sheet {
		zoom: .45;
	}
}
/* Same look on screen and in print: no blur, no alpha (printers dither them into grey slabs).
   Top cards: navy outline + solid offset shadow. Bottom: flat brand tints. */
.poster-qr-card::before,
.poster-qr-aside-card::before {
	content: none;
	display: none;
	background: none;
}
.poster-qr-card,
.poster-qr-aside-card,
.poster-features li {
	border: 0;
	outline: 0;
	filter: none;
	backdrop-filter: none;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
/* Top (QR + code cards): white, thin navy outline, solid offset shadow (navy under QR, teal under code). */
.poster-qr-card { background: #fff; outline: .5mm solid #0f172a; box-shadow: 2mm 2mm 0 0 #0f172a; }
.poster-qr-aside-card { background: #fff; outline: .5mm solid #0f172a; box-shadow: 2mm 2mm 0 0 #0d9488; }
/* Bottom (advantages): flat brand tint, accent disc icon, no shadow, no border. */
.poster-features li { background: #e6f4f2; box-shadow: none; color: #134e4a; }