/* Mikulášova pošta – pruh sesterského webu Ježíšek píše.
   Barvy podle jezisekpise.cz: noční modrá, zlatá, vínová, krémová. */

@font-face {
	font-family: "MP Dancing Script";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/dancing-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "MP Dancing Script";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/dancing-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.mpj-promo {
	--mpj-night: #16233d;
	--mpj-night-2: #22365c;
	--mpj-gold: #d9a441;
	--mpj-gold-light: #f0cd7c;
	--mpj-wine: #7e1422;
	--mpj-cream: #fbf3e4;
	--mpj-cream-soft: rgba(251, 243, 228, .78);

	position: relative;
	box-sizing: border-box;
	container-type: inline-size;
	overflow: hidden;
	max-width: 1120px;
	margin: 48px auto;
	padding: 0;
	border-radius: 20px;
	background:
		radial-gradient(ellipse at 90% 0%, rgba(217, 164, 65, .13), transparent 45%),
		radial-gradient(ellipse at 6% 100%, rgba(126, 20, 34, .38), transparent 60%),
		linear-gradient(135deg, var(--mpj-night) 0%, var(--mpj-night-2) 100%);
	box-shadow: 0 26px 50px -30px rgba(10, 18, 34, .9);
	color: var(--mpj-cream);
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	isolation: isolate;
}

.mpj-promo *,
.mpj-promo *::before,
.mpj-promo *::after {
	box-sizing: border-box;
}

/* Zlatý proužek nahoře – navazuje na zlatou linku webu. */
.mpj-promo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--mpj-gold) 20%, var(--mpj-gold-light) 50%, var(--mpj-gold) 80%, transparent);
}

/* Třpytivé hvězdičky jako na hlavičce webu. */
.mpj-star {
	position: absolute;
	z-index: -1;
	width: 18px;
	height: 18px;
	background: var(--mpj-gold-light);
	clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
	opacity: .55;
}

.mpj-star--1 { top: 12%; right: 40%; }
.mpj-star--2 { bottom: 9%; left: 52%; width: 11px; height: 11px; opacity: .35; }
.mpj-star--3 { top: 18%; right: 26%; width: 13px; height: 13px; opacity: .4; }
.mpj-star--4 { bottom: 14%; right: 3%; width: 22px; height: 22px; }

.mpj-promo__inner {
	display: grid;
	grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 34px;
	padding: 38px 42px;
}

/* --- Logo --- */

.mpj-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	color: inherit;
	text-decoration: none;
}

.mpj-brand__logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 96px;
	height: auto;
}

.mpj-brand__word {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mpj-brand__spark {
	flex: none;
	width: 22px;
	height: 22px;
	fill: var(--mpj-gold);
}

.mpj-brand__name {
	font-family: "MP Dancing Script", "Brush Script MT", cursive;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--mpj-gold-light);
	white-space: nowrap;
}

.mpj-brand__tag {
	padding-left: 30px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mpj-cream-soft);
}

/* --- Text --- */

.mpj-copy {
	min-width: 0;
	padding-left: 34px;
	border-left: 1px solid rgba(240, 205, 124, .28);
}

.mpj-copy__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mpj-gold);
}

.mpj-copy__title {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 2.4vw, 29px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.mpj-copy__text,
.mpj-copy__offer,
.mpj-copy__code {
	margin: 0;
	font-size: 15.5px;
	color: var(--mpj-cream-soft);
}

.mpj-copy__offer {
	margin-top: 8px;
	color: var(--mpj-gold-light);
	font-weight: 600;
}

.mpj-copy__code {
	margin-top: 8px;
}

.mpj-copy__code strong {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 10px;
	border: 1px dashed var(--mpj-gold);
	border-radius: 6px;
	color: #fff;
	letter-spacing: .08em;
}

/* --- Pečeť se slevou a tlačítko --- */

.mpj-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.mpj-seal {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 26%, var(--mpj-gold-light), var(--mpj-gold) 58%, #b27f24);
	box-shadow: 0 0 0 5px rgba(240, 205, 124, .18), 0 14px 24px -14px rgba(0, 0, 0, .8);
	color: #fff;
	text-align: center;
	transform: rotate(-8deg);
}

.mpj-seal__value {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(120, 72, 10, .45);
}

.mpj-seal__label {
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mpj-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--mpj-gold-light), var(--mpj-gold));
	box-shadow: 0 10px 22px -12px rgba(217, 164, 65, .9);
	color: var(--mpj-night);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}

.mpj-btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.mpj-btn:hover,
.mpj-btn:focus {
	color: var(--mpj-night);
	transform: translateY(-1px);
	box-shadow: 0 14px 26px -12px rgba(217, 164, 65, 1);
}

.mpj-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* --- Užší místo: logo nahoře, text a akce pod ním --- */

@container (max-width: 860px) {
	.mpj-promo__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 22px 28px;
		padding: 32px 30px;
	}

	.mpj-brand {
		grid-column: 1 / -1;
	}

	.mpj-copy {
		padding-left: 0;
		border-left: 0;
	}
}

@container (max-width: 560px) {
	.mpj-promo__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 20px;
		padding: 30px 22px 32px;
		text-align: center;
	}

	.mpj-brand {
		align-items: center;
	}

	.mpj-brand__tag {
		padding-left: 0;
	}

	.mpj-brand__name {
		font-size: 34px;
	}

	.mpj-action {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	.mpj-seal {
		width: 96px;
		height: 96px;
	}

	.mpj-seal__value {
		font-size: 27px;
	}

	.mpj-btn {
		white-space: normal;
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpj-btn {
		transition: none;
	}
}