/* ═══════════════════════════════════════════════════════════════════
   Reklamní box nástroje v úvodu článku (App\Model\Article\ArticleToolPromo, 2026-09-11)
   Načítá ho jen partial Article/_toolPromo.latte. Vizuální jazyk navazuje na .annc-crosslink
   (broskvový rámeček, blush gradient), ilustrace je čisté CSS + motiv oznámení.
   ═══════════════════════════════════════════════════════════════════ */

.tool-promo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-xl);
	margin: 0 0 var(--space-2xl);
	padding: var(--space-xl);
	border: 2px solid var(--color-peach);
	border-radius: var(--radius-lg-plus);
	background: linear-gradient(135deg, var(--color-blush) 0%, var(--color-white) 55%, var(--color-cream) 100%);
	overflow: hidden;
}

.tool-promo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--space-xs) var(--space-sm-plus);
	border: 1px solid var(--color-peach);
	border-radius: var(--radius-full);
	background: var(--color-white);
	color: var(--color-primary-dark);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tool-promo-eyebrow-heart {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.tool-promo-title {
	margin: var(--space-md) 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	line-height: 1.15;
	color: var(--color-iron);
}

.tool-promo-text {
	margin: 0 0 var(--space-md);
	font-size: var(--text-l);
	line-height: 1.55;
	color: var(--color-steel);
}

.tool-promo-benefits {
	display: grid;
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
}

.tool-promo-benefits li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	font-size: var(--text-l);
	line-height: 1.45;
	color: var(--color-iron);
}

.tool-promo-benefits li::before {
	content: none;
}

.tool-promo-benefits svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	padding: 4px;
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-white);
}

.tool-promo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
}

.tool-promo-note {
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

/* ── Ilustrace ── */
.tool-promo-visual {
	display: flex;
	justify-content: center;
	width: 190px;
}

/* Svatební web — mobil s pozvánkou a tlačítkem pro hosty */
.tool-promo-phone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 156px;
	padding: 28px 14px 18px;
	border: 6px solid var(--color-iron);
	border-radius: 28px;
	background: var(--color-white);
	box-shadow: 0 18px 40px var(--shadow-lg);
	transform: rotate(3deg);
}

.tool-promo-phone::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 50%;
	width: 44px;
	height: 6px;
	margin-left: -22px;
	border-radius: var(--radius-full);
	background: var(--color-silver);
}

.tool-promo-phone-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 72px;
	border-radius: var(--radius-md-plus);
	background: linear-gradient(135deg, var(--color-peach) 0%, var(--color-primary) 100%);
	color: var(--color-white);
}

.tool-promo-phone-photo svg {
	width: 28px;
	height: 28px;
}

.tool-promo-phone-names {
	margin-top: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--color-iron);
}

.tool-promo-phone-date {
	font-size: var(--text-sm);
	color: var(--color-stone);
}

.tool-promo-phone-line {
	width: 100%;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-silver);
}

.tool-promo-phone-line--short {
	width: 70%;
}

.tool-promo-phone-btn {
	margin-top: 6px;
	padding: 6px var(--space-sm-plus);
	border-radius: var(--radius-full);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: 600;
	white-space: nowrap;
}

/* Svatební oznámení — kartička A6 se skutečným motivem z editoru */
.tool-promo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 150px;
	aspect-ratio: 105 / 148;
	padding: var(--space-md);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	box-shadow: 0 18px 40px var(--shadow-lg);
	text-align: center;
	transform: rotate(-4deg);
}

.tool-promo-card-motif {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--color-teal);
	pointer-events: none;
}

.tool-promo-card-kicker,
.tool-promo-card-names,
.tool-promo-card-date {
	position: relative;
}

.tool-promo-card-kicker {
	font-size: var(--text-sm);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-stone);
}

.tool-promo-card-names {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--color-iron);
}

.tool-promo-card-names svg {
	width: 10px;
	height: 10px;
	color: var(--color-primary);
}

.tool-promo-card-date {
	font-size: var(--text-sm);
	color: var(--color-steel);
}

/* Plánovač — odškrtané úkoly a graf rozpočtu */
.tool-promo-planner {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	width: 170px;
	padding: var(--space-md);
	border-radius: var(--radius-md-plus);
	background: var(--color-white);
	box-shadow: 0 18px 40px var(--shadow-lg);
	transform: rotate(2deg);
}

.tool-promo-planner-label {
	font-family: var(--font-heading);
	font-size: var(--text-l);
	color: var(--color-iron);
}

.tool-promo-task {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.tool-promo-task-check {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 2px solid var(--color-ash);
	border-radius: var(--radius-full);
}

.tool-promo-task.is-done .tool-promo-task-check {
	border-color: var(--color-primary);
	background: var(--color-primary);
}

.tool-promo-task-line {
	width: 100%;
	height: 6px;
	border-radius: var(--radius-full);
	background: var(--color-silver);
}

.tool-promo-task-line--mid {
	width: 80%;
}

.tool-promo-task-line--short {
	width: 60%;
}

.tool-promo-budget {
	display: flex;
	align-items: center;
	gap: var(--space-sm-plus);
	margin-top: var(--space-xs);
	padding-top: var(--space-sm-plus);
	border-top: 1px solid var(--color-silver);
}

.tool-promo-donut {
	position: relative;
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: var(--radius-full);
	background: conic-gradient(var(--color-primary) 0 42%, var(--color-teal) 42% 68%, var(--color-silver) 68% 100%);
}

.tool-promo-donut::after {
	content: "";
	position: absolute;
	inset: 10px;
	border-radius: var(--radius-full);
	background: var(--color-white);
}

.tool-promo-budget-text {
	display: flex;
	flex-direction: column;
	font-size: var(--text-sm);
	color: var(--color-stone);
}

.tool-promo-budget-value {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	color: var(--color-iron);
}

/* Kalendář a počasí — měsíc s vybraným dnem */
.tool-promo-calendar {
	position: relative;
	width: 170px;
	border-radius: var(--radius-md-plus);
	background: var(--color-white);
	box-shadow: 0 18px 40px var(--shadow-lg);
	transform: rotate(-2deg);
}

.tool-promo-calendar-month {
	display: block;
	padding: var(--space-sm) var(--space-sm-plus);
	border-radius: var(--radius-md-plus) var(--radius-md-plus) 0 0;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--text-l);
	text-align: center;
}

.tool-promo-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
	padding: var(--space-sm-plus);
}

.tool-promo-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var(--radius-sm);
	font-size: 10px;
	color: var(--color-steel);
}

.tool-promo-calendar-day.is-picked {
	background: var(--color-primary);
	color: var(--color-white);
}

.tool-promo-calendar-day svg {
	width: 10px;
	height: 10px;
}

.tool-promo-calendar-weather {
	position: absolute;
	right: -16px;
	bottom: -14px;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-xs) var(--space-sm-plus);
	border-radius: var(--radius-full);
	background: var(--color-white);
	box-shadow: 0 6px 16px var(--shadow-md);
	color: var(--color-iron);
	font-size: var(--text-md);
	font-weight: 600;
	transform: rotate(2deg);
}

.tool-promo-calendar-weather svg {
	width: 18px;
	height: 18px;
	color: var(--color-warning);
}

/* Svatební barvy — vějíř vzorníku */
.tool-promo-swatches {
	position: relative;
	width: 180px;
	height: 170px;
}

.tool-promo-swatch {
	position: absolute;
	bottom: 6px;
	left: 58px;
	width: 64px;
	height: 140px;
	border-radius: var(--radius-md);
	background: linear-gradient(var(--swatch) 0 74%, var(--color-white) 74%);
	box-shadow: 0 8px 20px var(--shadow-md);
	transform-origin: 50% 100%;
}

.tool-promo-swatch--1 { --swatch: var(--color-blush-dark); transform: rotate(-28deg); }
.tool-promo-swatch--2 { --swatch: var(--color-peach); transform: rotate(-14deg); }
.tool-promo-swatch--3 { --swatch: var(--color-primary); transform: rotate(0deg); }
.tool-promo-swatch--4 { --swatch: var(--color-teal); transform: rotate(14deg); }
.tool-promo-swatch--5 { --swatch: var(--color-vanilla-dark); transform: rotate(28deg); }

/* Fotoalbum — fotky od hostů a QR kód */
.tool-promo-album {
	position: relative;
	width: 180px;
	height: 170px;
}

.tool-promo-album-photo {
	position: absolute;
	width: 92px;
	height: 108px;
	padding: 7px 7px 22px;
	background: linear-gradient(135deg, var(--color-peach) 0%, var(--color-primary) 100%) content-box, var(--color-white);
	box-shadow: 0 10px 24px var(--shadow-lg);
}

.tool-promo-album-photo--1 {
	top: 0;
	left: 4px;
	transform: rotate(-9deg);
}

.tool-promo-album-photo--2 {
	top: 14px;
	left: 64px;
	background: linear-gradient(135deg, var(--color-teal-muted) 0%, var(--color-teal) 100%) content-box, var(--color-white);
	transform: rotate(7deg);
}

.tool-promo-album-qr {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	background: var(--color-white);
	box-shadow: 0 10px 24px var(--shadow-lg);
	color: var(--color-iron);
}

.tool-promo-album-qr svg {
	width: 58px;
	height: 58px;
}

.tool-promo-album-qr-label {
	font-size: 10px;
	font-weight: 600;
	color: var(--color-primary-dark);
	white-space: nowrap;
}

/* E-shop — dárková krabice se štítkem */
.tool-promo-gift svg {
	width: 170px;
	height: 170px;
	filter: drop-shadow(0 14px 22px var(--shadow-md));
}

.tool-promo-gift-box { fill: var(--color-primary); }
.tool-promo-gift-lid { fill: var(--color-primary-dark); }
.tool-promo-gift-ribbon,
.tool-promo-gift-bow,
.tool-promo-gift-knot { fill: var(--color-teal); }
.tool-promo-gift-tag { fill: var(--color-white); }
.tool-promo-gift-heart { fill: var(--color-primary); }

@media (max-width: 768px) {
	.tool-promo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
		padding: var(--space-lg);
	}

	.tool-promo-title {
		font-size: var(--text-2xl);
	}

	/* Na mobilu ilustrace jen natahuje stránku — box nese text a tlačítko */
	.tool-promo-visual {
		display: none;
	}

	.tool-promo-btn {
		width: 100%;
		text-align: center;
	}
}