/*
 * Widget embed page body. Figma top area / text/hero: band #F6F3FD that runs
 * under the light header (text starts 157 from the top = header 93 + 64),
 * 32 below the text. Calculator 1502:22398: left-aligned 852 column, Tool
 * pill, 16 gaps, header/2XL title, body/M dark text. Speak to an Expert
 * 2048:41343: centred 604 column, body/M grey text. Mobile 2315:54454 /
 * 1380:30752: header/L title, body/XS text, 6-10 gaps, 16 under the text.
 * Page background #FAFAFA down to the footer; widget column 480, 32 below the
 * band (24 on mobile).
 */

.widget-page {
	background: var(--c-bg-grey);
}

/* The grey runs down to the footer: no white page gap under this section. */
.site-main:has(.widget-page) { padding-bottom: 0; }

.widget-page__hero {
	padding: calc(var(--header-h) + 64px) 0 32px;
	background: var(--c-bg-purple);
}

.widget-page__hero-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: calc(var(--hero-w, 852px) + 2 * var(--gutter));
}

.widget-page__hero--center .widget-page__hero-inner {
	align-items: center;
	text-align: center;
}

.widget-page__title { font: var(--f-header-2xl); color: var(--c-text-dark); text-wrap: balance; }
.widget-page__text { font: var(--f-body-m); color: var(--c-text-dark); }
.widget-page--booking .widget-page__text { color: var(--c-text-grey); }

.widget-page__hero .tag .icon { --icon-size: 12px; }

/* Figma keeps every title on one line in its column (PA booking 1902:44453: 994). */
@media (min-width: 1100px) {
	.widget-page__title { white-space: nowrap; }
}

.widget-page__body {
	max-width: calc(480px + 2 * var(--gutter));
	padding-top: 32px;
	padding-bottom: var(--section-gap);
}

/* Widgets size their own iframe (embed.js resize). */
.widget-page__mount { min-height: 200px; }
.widget-page__mount iframe { display: block; width: 100%; border: 0; }

/* Preview only: where the widget would be. */
.widget-page__note {
	margin-top: -200px;
	min-height: 200px;
	display: grid;
	place-items: center;
	padding: 24px;
	border: 1px dashed var(--c-purple-soft);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
	color: var(--c-text-grey);
	font: var(--f-subtitle-m);
	text-align: center;
}

.widget-page__note[hidden] { display: none; }

@media (max-width: 767px) {
	.widget-page__hero { padding: calc(var(--header-h) + 8px) 0 16px; }
	.widget-page__hero-inner { gap: 6px; }

	.widget-page__hero--center .widget-page__hero-inner {
		align-items: flex-start;
		text-align: left;
	}

	.widget-page__title { font: var(--f-header-l); }
	.widget-page__text { margin-top: 4px; font: var(--f-body-xs); }

	/* Booking pages (no tag) 1380:30753: 16 under the header, 8 gap, 20 under the text. */
	.widget-page__hero--no-tag { padding: calc(var(--header-h) + 16px) 0 20px; }
	.widget-page__hero--no-tag .widget-page__hero-inner { gap: 8px; }
	.widget-page__hero--no-tag .widget-page__text { margin-top: 0; }

	.widget-page__body { padding-top: 24px; }
}