/*
 * Pre-planning overview. Figma 1899:40042 desktop: left column 765, right 391
 * (64 gap), 84 between left blocks; price card 1901:41701 sticky on the right.
 * Mobile 1902:41757: one column, order intro, audiences, card, steps, reports;
 * steps show 2 chips (2260:53571). Compact sticky card 3256:73174 (mobile/
 * pre-planningadvice/2): fixed at the top once the card is scrolled past.
 */

.preplanning__grid {
	display: grid;
	grid-template-columns: minmax(0, 765fr) minmax(0, 391fr);
	gap: 84px clamp(32px, 4.4vw, 64px);
	align-items: start;
}

.preplanning__grid > * { grid-column: 1; min-width: 0; }

.preplanning__grid > .preplanning__aside {
	grid-column: 2;
	grid-row: 1 / span var(--rows, 3);
	align-self: stretch;
}

.preplanning--no-card .preplanning__grid { grid-template-columns: minmax(0, 1fr); }

.preplanning__title,
.preplanning__heading { font: var(--f-header-xl); color: var(--c-text-dark); }

/* ---------- Intro + audiences ---------- */
.preplanning__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.preplanning__text { font: var(--f-body-s); color: var(--c-text-dark); }

.preplanning__audiences {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	padding-top: 16px;
}

.preplanning__audience {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 24px;
	border-top: 1px solid var(--c-border-light);
}

.preplanning__audience:first-child { padding-top: 0; border-top: 0; }
.preplanning__audience:last-child { padding-bottom: 0; }

.preplanning__audience-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 1 460px;
	min-width: 0;
}

.preplanning__audience-title { font: var(--f-header-xs); color: var(--c-text-dark); }
.preplanning__audience-desc { font: var(--f-body-xs); color: var(--c-text-dark); }
.preplanning__audience-img { flex: none; width: 164px; height: auto; }

/* ---------- card/preplanning ---------- */
.preplanning__aside { position: relative; }

.price-card {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 19px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .05);
}

.price-card__title { font: var(--f-header-l); color: var(--c-text-dark); }

.price-card__price {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c-border-light);
	color: var(--c-text-dark);
}

.price-card__amount { font: var(--f-header-xl); }
.price-card__note { margin-bottom: 7px; font: var(--f-body-s); }

.price-card__benefits {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.price-card__label { font: var(--f-subtitle-m); color: var(--c-text-grey); }

.price-card__list { font: var(--f-body-s); color: var(--c-text-dark); }
.price-card__list ul { display: flex; flex-direction: column; gap: 16px; padding: 0; list-style: none; }
.price-card__list li { position: relative; min-height: 21px; margin: 0; padding-left: 28px; }
.price-card__list li + li { margin-top: 0; }

.price-card__list li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	margin-top: -10px;
	height: 20px;
	background-color: var(--c-secondary);
	-webkit-mask: url("../../assets/icons/check.svg") center / contain no-repeat;
	mask: url("../../assets/icons/check.svg") center / contain no-repeat;
}

.price-card__list strong { font-weight: 800; }

/* Compact sticky card: mobile only (see the media query). */
.price-bar { display: none; }

/* ---------- Steps ---------- */
.preplanning__steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pp-steps {
	display: flex;
	flex-direction: column;
	gap: 21px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pp-step__top {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pp-step__top::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-border-dark);
}

.pp-step__day {
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	border-radius: var(--r-pill);
	background: var(--c-secondary);
	color: var(--c-text-dark);
	font: var(--f-subtitle-m);
	white-space: nowrap;
}

.pp-step__body {
	display: grid;
	grid-template-columns: minmax(0, 421fr) minmax(0, 280fr);
	gap: clamp(24px, 4.4vw, 64px);
	align-items: start;
}

.pp-step__body > .pp-step__content:only-child { grid-column: 1 / -1; }

.pp-step__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pp-step__title { font: var(--f-header-s); color: var(--c-text-dark); }
.pp-step__text { font: var(--f-body-s); color: var(--c-text-dark); }
.pp-step__title + .pp-step__text { margin-top: -8px; } /* 8 between title and text, 16 before tags */

.pp-step__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pp-step__media {
	aspect-ratio: 3 / 2;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-bg-grey);
}

/* ---------- Reports ---------- */
.preplanning__reports {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pp-reports { gap: 16px; }

.pp-report { width: 244px; }

.pp-report__link {
	position: relative;
	display: block;
	height: 172px;
	border: 1px solid var(--c-border-light);
	overflow: hidden;
	background: var(--c-bg-white);
}

.pp-report__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.pp-report__zoom {
	--icon-size: 24px;
	position: absolute;
	right: 12px;
	bottom: 12px;
	color: var(--c-primary);
	transition: transform .15s ease;
}

.pp-report__link:hover .pp-report__zoom { transform: scale(1.15); }

@media (max-width: 767px) {
	.preplanning__grid { grid-template-columns: minmax(0, 1fr); row-gap: 84px; }
	.preplanning__grid > .preplanning__aside { grid-column: 1; grid-row: auto; }

	.preplanning__title,
	.preplanning__heading { font: var(--f-header-l); }

	.preplanning__audiences { margin-top: 16px; padding-top: 0; }

	.preplanning__audience {
		flex-direction: column-reverse;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.preplanning__audience-text { flex: none; width: 100%; }

	.price-card { position: static; }
	.price-card__title { font: var(--f-header-m); }

	/* card/preplanning "sticky" 3256:73174: 390 wide, white, 16/20, bottom border, gap 12 / 8 */
	.price-bar {
		position: fixed;
		top: var(--header-h);               /* right under the fixed header */
		left: 0;
		right: 0;
		z-index: 30;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 16px var(--gutter);
		border-bottom: 1px solid var(--c-bg-grey);
		background: var(--c-bg-white);
		color: var(--c-text-dark);
		transform: translateY(calc(-100% - var(--header-h)));
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}

	.price-bar[hidden] { display: none; }

	.price-bar.is-stuck {
		transform: none;
		visibility: visible;
		transition: transform .25s ease, visibility 0s;
	}

	.price-bar__text { display: flex; flex-direction: column; gap: 8px; }
	.price-bar__title { font: var(--f-header-xs); }
	.price-bar__price { display: flex; align-items: center; gap: 4px; }
	.price-bar__amount { font: var(--f-header-xs); }
	.price-bar__note { font: var(--f-body-s); }

	.pp-steps { gap: 24px; }
	.pp-step__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.pp-step__media { order: -1; }
	.pp-step__tags > li:nth-child(n+3) { display: none; }   /* 2 chips per step on mobile */

	.preplanning .pp-reports {  /* beats ul[role=list] { padding: 0 } */
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
	}
}