/*
 * Event page — sections of the "Event page" pattern (patterns/event-page.php).
 * Mobile first; tablet from 48em, desktop from 64em.
 */

:where(.event-hero, .event-intro, .event-programme, .event-signup) :is(p, h1, h2, h3, figure) { margin: 0; }

/* Classic themes (and the editor) wrap group contents in extra divs; let the children join the parent's grid/flex. */
:is(.event-hero, .event-intro, .event-programme, .event-signup) .wp-block-group__inner-container,
:is(.event-hero, .event-intro, .event-programme, .event-signup) :is(.block-editor-inner-blocks, .block-editor-block-list__layout) { display: contents; }

/* Editor only: blocks inside the sections are not limited to the editor's content width. */
.editor-styles-wrapper :is(.event-hero, .event-intro, .event-programme, .event-signup).wp-block,
.editor-styles-wrapper :is(.event-hero, .event-intro, .event-programme, .event-signup) .wp-block { max-width: none; margin: 0; }
.editor-styles-wrapper .event-programme.wp-block { max-width: 1040px; margin-inline: auto; }

/* Anchors land below the sticky header. */
@media (min-width: 48em) {
	.event-programme,
	.event-signup,
	.event-signup__aside { scroll-margin-top: var(--header-height); }
}

/* ---------- Shared ---------- */
/* Headings set in Inter get no outline (typography.css thickens the Hatton titles). */
.event-timeline__title,
.event-signup .gform_wrapper .gsection_title,
.event-signup .gform_wrapper .gform_validation_errors > h2 { -webkit-text-stroke: 0; }
@media (min-width: 48em) {
	.event-timeline__item--session .event-timeline__title { -webkit-text-stroke: .025em currentColor; }
}
/* The big main titles only a touch heavier (the outline grows with the font size). */
.event-hero .event-hero__title { -webkit-text-stroke-width: .008em; }

:is(.event-intro, .event-programme) .section-title {
	margin: 0;
	font-size: var(--fs-heading-2);
	line-height: var(--lh-heading-2);
}

.event-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--space-20);
}

.event-label {
	width: fit-content;
	padding: 0 var(--space-10);
	background: var(--label-differentiator-bg);
	color: var(--drab);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-weight: var(--fw-bold);
}
.event-label--comfort { background: var(--label-comfort-bg); color: var(--brand-websafe); }
/* Thema: --label-thema-bg disappears on the sand page background, so the darker sand. */
.event-label--thema   { background: var(--pale);             color: var(--ink); }

.event-eyebrow {
	color: var(--brand-websafe);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-weight: var(--fw-bold);
}

/* ---------- Hero ---------- */
.event-hero {
	display: grid;
	overflow: hidden;
	/* Doesn't stretch endlessly on very large screens. */
	max-width: calc(var(--container-max) * 2); /* 2880px */
	margin-inline: auto;
	background: var(--white);
}
.event-hero__intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-15);
	padding: var(--space-40) var(--space-20);
	background: var(--soft);
	text-align: left;
}
/* Line height 1.08: tight, but the descenders (g) still clear the ascenders (d) of the next line. */
.event-hero .event-hero__title {
	font-size: 48px;
	line-height: 1.08;
	color: var(--brand);
}
.event-hero__date,
.event-hero__eyebrow {
	color: var(--brand);
	font-family: var(--font-brand);
	font-size: 22px;
	line-height: 1.4;
}
/* Directly under the date, as a second line of it. */
.event-hero .event-hero__eyebrow { margin-top: calc(-1 * var(--space-15)); }
.event-hero__media {
	position: relative;
	height: 240px;
}
.event-hero .event-hero__media img {
	position: absolute;
	/* 1px past the right edge: the column is a fraction of a pixel wide, and some browsers
	   (Safari) round the photo down, leaving a hairline gap. The hero clips the overflow. */
	inset: 0 -1px 0 0;
	width: calc(100% + 1px);
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.event-facts {
	display: grid;
	background: var(--brand-websafe);
	border-top: 6px solid var(--brand);
	color: var(--white);
}
.event-fact { padding: var(--space-15) var(--space-20); }
.event-fact + .event-fact { border-top: 1px solid var(--brand-pressed); }
.event-fact__label { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.event-fact__value { font-weight: var(--fw-bold); line-height: var(--lh-body); }

@media (min-width: 48em) {
	.event-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.event-hero__intro { grid-column: span 6; gap: var(--space-20); padding: var(--space-50) var(--space-30); }
	.event-hero .event-hero__title { font-size: 64px; }
	.event-hero__date,
	.event-hero__eyebrow { font-size: var(--fs-heading-2); }
	.event-hero .event-hero__eyebrow { margin-top: calc(-1 * var(--space-20)); }
	.event-hero__media { grid-column: span 6; height: auto; min-height: 420px; }
	.event-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.event-fact { padding: var(--space-20) var(--space-30); }
	.event-fact + .event-fact { border-top: 0; border-left: 1px solid var(--brand-pressed); }
}
@media (min-width: 64em) {
	.event-hero__intro { grid-column: span 5; padding: var(--space-60) var(--space-50); }
	/* 120/100 at 1440px, scaled down on smaller desktops so long words fit the column. */
	/* Grows with the screen: 56px at 1024px (laptop), ~76px at 1440px, ~98px at 1920px, 128px at 2560px, max 136px. */
	.event-hero .event-hero__title { font-size: clamp(56px, 4.69vw + 8px, 136px); }
	/* Scales along with the title: 24px at 1024px, ~28px at 1440px, ~33px at 1920px, 40px at 2560px. */
	.event-hero__date,
	.event-hero__eyebrow { font-size: clamp(24px, 1.04vw + 13.3px, 42px); }
	.event-hero__media { grid-column: span 7; min-height: 520px; }
	.event-fact { padding-inline: var(--space-50); }
}

/* ---------- Intro ---------- */
.event-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-15);
	padding: var(--space-60) var(--space-20);
	background: var(--sand-deep);
	border-block: 1px solid var(--soft);
	text-align: center;
}
.event-intro p { max-width: 700px; }

@media (min-width: 48em) {
	.event-intro { gap: var(--space-20); padding-inline: var(--space-30); }
	.event-intro p { font-size: 18px; line-height: 30px; }
}
@media (min-width: 64em) {
	.event-intro { padding-block: var(--space-80); }
}

/* ---------- Programme ---------- */
.event-programme {
	max-width: 1040px;
	margin-inline: auto;
	padding: var(--space-60) var(--space-20);
}
.event-programme .event-programme__note {
	margin: var(--space-5) 0 var(--space-40);
	text-align: center;
	color: var(--dim);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
	font-style: italic;
}

/*
 * Timeline. Each item is a grid row; the rail and dot are pseudo-elements
 * centred on --rail. Session items (with text) get a card and a filled dot.
 */
.event-timeline {
	--rail: 10px;
	--dot: 14px;
	--dot-top: 6px;
	--session-dot-top: 4px;
}
.event-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	column-gap: var(--space-10);
	padding-bottom: var(--space-30);
}
.event-timeline__item:last-child { padding-bottom: 0; }
:is(.event-timeline__time, .event-timeline__body) { grid-column: 2; }

.event-timeline__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--rail) - 1px);
	width: 2px;
	background: var(--pale);
}
.event-timeline__item:first-child::before { top: calc(var(--dot-top) + var(--dot) / 2); }
.event-timeline__item:last-child::before { bottom: auto; height: calc(var(--dot-top) + var(--dot) / 2); }

.event-timeline__item::after {
	content: "";
	position: absolute;
	top: var(--dot-top);
	left: calc(var(--rail) - var(--dot) / 2);
	width: var(--dot);
	height: var(--dot);
	border: 2px solid var(--brand);
	border-radius: var(--radius-round);
	background: var(--sand);
}
.event-timeline__item--session::after {
	top: var(--session-dot-top);
	left: calc(var(--rail) - 10px);
	width: 20px;
	height: 20px;
	border: 0;
	background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Crect width='3' height='12' x='5' y='4' rx='1.5'/%3E%3Crect width='3' height='12' x='12' y='4' rx='1.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.event-timeline__time {
	display: flex;
	align-items: baseline;
	gap: .25em;
	color: var(--brand-websafe);
	font-family: var(--font-base);
	font-size: var(--fs-heading-5);
	line-height: var(--lh-heading-5);
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
}
.event-timeline__start { font-size: var(--fs-heading-4); line-height: var(--lh-heading-4); }

.event-timeline__title {
	margin-top: var(--space-5);
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-bold);
}
/* Mobile shows labels only on the session cards. */
.event-timeline__item:not(.event-timeline__item--session) .event-label { display: none; }

.event-timeline__item--session .event-timeline__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-top: var(--space-10);
	padding: var(--space-20);
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.event-timeline__item--session .event-timeline__title {
	margin: 0;
	font-size: var(--fs-heading-5);
	line-height: var(--lh-heading-5);
}
.event-timeline__text {
	color: var(--drab);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

@media (min-width: 48em) {
	.event-programme { padding: 70px var(--space-30); }
	:is(.event-intro, .event-programme) .section-title { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); }
	.event-programme .event-programme__note { margin: var(--space-10) 0 var(--space-60); }

	.event-timeline {
		--time-col: 110px;
		--rail: calc(var(--time-col) + 25px);
		--dot: 16px;
		--dot-top: 8px;
		--session-dot-top: 26px;
	}
	.event-timeline__item {
		grid-template-columns: var(--time-col) calc((var(--rail) - var(--time-col)) * 2) minmax(0, 1fr);
		column-gap: 0;
		padding-bottom: var(--space-50);
	}
	.event-timeline__time { grid-column: 1; }
	.event-timeline__body { grid-column: 3; }
	.event-timeline__item:first-child::before { top: 14px; }
	.event-timeline__item:last-child::before { height: 14px; }

	.event-timeline__time {
		display: block;
		padding-top: 2px;
		text-align: right;
	}
	.event-timeline__item--session .event-timeline__time { padding-top: 22px; }
	.event-timeline__start {
		color: var(--brand);
		font-size: 22px;
		line-height: 30px;
	}
	.event-timeline__end {
		color: var(--drab);
		font-size: var(--fs-body-sm);
		line-height: var(--lh-body-sm);
		font-weight: var(--fw-regular);
	}

	.event-timeline__body { padding-top: 4px; }
	.event-timeline__item:not(.event-timeline__item--session) .event-label { display: block; }
	.event-timeline__title {
		margin-top: var(--space-10);
		font-size: var(--fs-heading-4);
		line-height: var(--lh-heading-4);
	}

	.event-timeline__item--session .event-timeline__body { margin-top: 0; padding: var(--space-30); }
	.event-timeline__item--session .event-timeline__title {
		font-family: var(--font-brand);
		font-weight: var(--fw-regular);
		font-size: var(--fs-heading-3);
		line-height: var(--lh-heading-3);
	}
	.event-timeline__text { font-size: var(--fs-body); line-height: var(--lh-body-long); }
}
@media (min-width: 64em) {
	.event-programme { padding: var(--space-100) var(--space-40); }
	.event-timeline { --time-col: 200px; --rail: calc(var(--time-col) + 30px); }
}

/* ---------- Sign-up ---------- */
.event-signup {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding: var(--space-40) var(--space-20) var(--space-60);
	background: var(--sand-deep);
	border-top: 1px solid var(--soft);
}
.event-signup__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-30);
}
.event-signup .event-signup__title {
	font-size: var(--fs-heading-2);
	line-height: var(--lh-heading-2);
}
.event-signup__note {
	color: var(--drab);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	font-style: italic;
}
/* After a successful submit only the confirmation remains. */
.event-signup__form:has(.gform_confirmation_message) .event-signup__head { display: none; }

.event-signup__aside {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.event-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-15);
}
.event-info .event-info__title {
	font-size: var(--fs-heading-4);
	line-height: var(--lh-heading-4);
}
.event-info__value { font-weight: var(--fw-bold); line-height: var(--lh-body); }
.event-info__meta {
	color: var(--drab);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

/* Icons (mask, so they take the text colour). Shown from tablet up. */
.event-info__item::before,
.event-notice::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.event-info__item::before { display: none; color: var(--brand-websafe); }
.event-info__item--date     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M6.5 1.25a.75.75 0 0 1 .75.75v.75h5.5V2a.75.75 0 0 1 1.5 0v.75h1.25c.966 0 1.75.784 1.75 1.75v11a1.75 1.75 0 0 1-1.75 1.75h-11a1.75 1.75 0 0 1-1.75-1.75v-11c0-.966.784-1.75 1.75-1.75h1.25V2a.75.75 0 0 1 .75-.75m-2 6.07a.25.25 0 0 0-.25.25v7.93c0 .138.112.25.25.25h11a.25.25 0 0 0 .25-.25V7.57a.25.25 0 0 0-.25-.25z'/%3E%3C/svg%3E"); }
.event-info__item--location { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 0C2.692 0 0 2.643 0 5.89c0 .848.177 1.657.525 2.405 1.5 3.223 4.376 6.625 5.222 7.591a.337.337 0 0 0 .506 0c.846-.966 3.722-4.368 5.222-7.59A5.66 5.66 0 0 0 12 5.89C12 2.643 9.308 0 6 0m0 9C4.346 9 3 7.654 3 6s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3'/%3E%3C/svg%3E"); }
.event-info__item--mail     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='2.75' y='4.25' width='14.5' height='11.5' rx='1.5'/%3E%3Cpath d='m3 5 7 6 7-6'/%3E%3C/svg%3E"); }

.event-notice {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 18A9 9 0 1 1 9 0a9 9 0 0 1 0 18M9 3a1.499 1.499 0 1 0 0 3 1.499 1.499 0 1 0 0-3m1.078 4H7.809C7.361 7 7 7.32 7 7.712c0 .394.363.712.809.712h.08v4.15H7V14h4v-1.426h-.884V7z'/%3E%3C/svg%3E");
	display: flex;
	gap: var(--space-15);
	align-items: flex-start;
	padding: var(--space-20);
	background: var(--sentiment-info);
	border: 1px solid var(--brand);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}
.event-notice::before { margin-top: 1px; color: var(--brand-websafe); }
.event-notice p { line-height: inherit; }
.event-notice strong { display: block; }

@media (min-width: 48em) {
	.event-signup {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-30);
		align-items: start;
		padding: var(--space-60) var(--space-30);
	}
	.event-signup__form { grid-column: 1 / -1; padding: var(--space-40); }
	.event-signup__head { gap: var(--space-10); margin-bottom: var(--space-40); }
	.event-signup .event-signup__title { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); }

	.event-signup__aside {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.event-info { gap: var(--space-20); padding: var(--space-30); }
	.event-info .event-info__title { font-size: var(--fs-heading-3); line-height: var(--lh-heading-3); }
	.event-info__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-15); }
	.event-info__item::before { display: block; grid-row: span 2; }
}
@media (min-width: 64em) {
	.event-signup {
		gap: var(--space-40);
		/* Content max 1440px, background full width. */
		padding: var(--space-100) max(var(--space-40), (100% - var(--container-max)) / 2 + var(--space-40));
	}
	.event-signup__form { grid-column: 2 / span 7; padding: var(--space-50); }
	.event-signup__aside {
		grid-column: span 3;
		display: flex;
		position: sticky;
		top: calc(var(--header-height) + var(--space-20));
	}
}

/* ---------- Sign-up form (Gravity Forms, see also gravity-forms.css) ---------- */
.event-signup .gform_wrapper.gravity-theme .gform_required_legend { display: none; }
.event-signup .gform_wrapper.gravity-theme .gform_fields { row-gap: var(--space-20); column-gap: var(--space-20); }
.event-signup .gform_wrapper.gravity-theme .gfield_label { display: block; }
.event-signup .gform_wrapper.gravity-theme .gfield_required { color: inherit; }

/* Section breaks = the fieldset legends in the design. */
.event-signup .gform_wrapper.gravity-theme .gsection { border: 0; padding: 0; margin-top: var(--space-10); }
.event-signup .gform_wrapper.gravity-theme .gsection:first-child { margin-top: 0; }
.event-signup .gform_wrapper.gravity-theme .gsection_title {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--fs-heading-5);
	line-height: var(--lh-heading-5);
	font-weight: var(--fw-bold);
}
.event-signup .gform_wrapper.gravity-theme .event-section--small .gsection_title {
	font-family: var(--font-base);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: var(--fw-bold);
}
.event-signup .gform_wrapper.gravity-theme .gsection_description {
	padding: 0;
	color: var(--drab);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}

.event-signup .gform_wrapper.gravity-theme .event-field--short textarea { min-height: 68px; height: 68px; }
.event-signup .gform_wrapper.gravity-theme .gfield_checkbox .gchoice,
.event-signup .gform_wrapper.gravity-theme .gfield_radio .gchoice { min-height: 44px; margin: 0; }

.event-signup .gform_wrapper.gravity-theme .gform_footer {
	margin-top: var(--space-30);
	padding-top: var(--space-30);
	border-top: 1px solid var(--soft);
}
.event-signup .gform_wrapper.gravity-theme .gform_button {
	width: 100%;
	padding: 17px var(--space-20);
	font-size: var(--fs-body);
}

/* Confirmation (markup in the form's confirmation message). */
.event-signup .gform_confirmation_message {
	padding: 0;
	background: none;
	border: 0;
}
.event-confirmation__title {
	margin: 0 0 var(--space-20);
	font-size: var(--fs-heading-3);
	line-height: var(--lh-heading-3);
}
.event-signup .event-confirmation__msg {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 4.395a1 1 0 0 0-.289-.702l-1.404-1.404a1 1 0 0 0-1.404 0L6.132 9.071 3.097 6.026a1 1 0 0 0-1.404 0L.289 7.43a1 1 0 0 0 0 1.404l5.14 5.14a1 1 0 0 0 1.405 0l8.877-8.877A1 1 0 0 0 16 4.395'/%3E%3C/svg%3E");
	display: flex;
	gap: var(--space-15);
	align-items: flex-start;
	margin: 0;
	padding: var(--space-20);
	background: var(--sentiment-confirmation);
	border: 1px solid var(--positive);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
}
.event-confirmation__msg::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--positive);
	background: currentColor;
	-webkit-mask: var(--icon) center / 16px no-repeat;
	mask: var(--icon) center / 16px no-repeat;
}
.event-confirmation__msg strong { display: block; }

@media (min-width: 48em) {
	.event-signup .gform_wrapper.gravity-theme .gsection { margin-top: var(--space-20); }
	.event-signup .gform_wrapper.gravity-theme .gsection_title { font-size: var(--fs-heading-4); line-height: var(--lh-heading-4); }
	.event-signup .gform_wrapper.gravity-theme .gform_footer { margin-top: var(--space-40); }
	.event-signup .gform_wrapper.gravity-theme .gform_button { width: auto; }
	.event-confirmation__title { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); }
}

/* ---------- Front page: only the Landal logo (front-page.php) ---------- */
.event-placeholder {
	display: grid;
	place-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--space-40) var(--space-20);
}
.event-placeholder__logo { width: min(60vw, 320px); height: auto; }
@media (min-width: 64em) {
	.event-placeholder__logo { width: clamp(320px, 20vw, 480px); }
}
.site-main:has(> .event-placeholder) { padding-block: 0; }