/**
 * g_event layout (GROW event mockup). Loaded on single g_event pages and in
 * the g_event editor.
 *
 * The geistlich theme styles a lot with !important (h1 size/weight, margins
 * of everything inside a Cover, button colours and icons), so the rules here
 * are scoped under .g-event-hero / .g-event-body and use !important where they
 * have to win against those.
 *
 * Colours: the theme's --blue, plus the mockup's purple badge and gradient.
 *
 * Structure: the template's stacked groups are vertical Stacks (flex), which
 * WordPress never wraps. Events created before that change have groups whose
 * children sit inside an extra .wp-block-group__inner-container (classic theme,
 * no theme.json); that wrapper is display:contents here and every "> *" rule
 * also matches through it, so both structures render the same.
 */

.g-event-hero,
.g-event-body {
	--g-event-accent: var(--blue, #0050c8);
	--g-event-ink: #1f2937;
	--g-event-muted: #6b7280;
	--g-event-badge: linear-gradient(120deg, #8b45f5 0%, #5a4ff0 45%, #129be8 100%);
	--g-event-panel: linear-gradient(120deg, #8b45f5 0%, #5a4ff0 45%, #129be8 100%);
	--g-event-box: #edf0f5;
	--g-event-box-line: #d6dce6;
	--g-event-radius: 10px;
}

/* Older events: let flex/gap rules see through WordPress's group wrapper. */
.g-event-hero .wp-block-group__inner-container,
.g-event-body .wp-block-group__inner-container {
	display: contents;
}

/* =================================================================== Hero */

/* Card: sections spaced with their own margins/padding (top row and actions
   have rules). The theme forces margins on h1–h6/p/ul/figure inside Covers,
   so those are zeroed inside the card. */
.g-event-hero .g-event-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 38rem;
	padding: 0;
	color: var(--g-event-ink);
	border-radius: var(--g-event-radius);
	//box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
	font-size: 1rem;
	line-height: 1.4;
	  background: rgba(255, 255, 255, .85);
	  -webkit-backdrop-filter: saturate(350%) blur(.25em);
	  backdrop-filter: saturate(350%) blur(.25em);
}

.g-event-hero .g-event-card :is(h1, h2, h3, h4, h5, h6, p, ul, figure) {
	margin: 0 !important;
}

/* Stack children keep their natural height. */
.g-event-hero .g-event-card > *,
.g-event-hero .g-event-card > .wp-block-group__inner-container > * {
	flex-shrink: 0;
}

/* Top row: CE badge | Flyer. */
.g-event-hero .g-event-card__top {
	align-items: center;
	padding: .75rem 1.25rem;
	border-bottom: 1px solid var(--g-event-box-line);
}

.g-event-hero .g-event-badge {
	padding: 0.15em 0.6em;
	border-radius: 4px;
	background: var(--g-event-badge);
	color: #fff;
	font-size: 0.8rem;
	line-height: 1.5;
}

.g-event-hero .g-event-flyer {
	margin-inline-start: auto !important;
	flex: none;
	white-space: nowrap;
	font-size: 0.8rem;
}

.g-event-hero .g-event-flyer .wp-block-button .wp-block-button__link {
	--g-event-doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M12 18v-6M9 15l3 3 3-3'/%3E%3C/svg%3E");
	gap: 0.4em;
	padding: 0.3em 0.6em !important;
	border: 1px solid var(--g-event-box-line) !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--g-event-ink) !important;
	font-size: 1em;
	line-height: 1.4;
	text-decoration: none;
}

.g-event-hero .g-event-flyer .wp-block-button .wp-block-button__link::before {
	display: none !important;
}

.g-event-hero .g-event-flyer .wp-block-button .wp-block-button__link::after {
	content: "" !important;
	display: block !important;
	width: 1em !important;
	height: 1em !important;
	background: var(--g-event-accent) !important;
	-webkit-mask: var(--g-event-doc-icon) center / contain no-repeat;
	mask: var(--g-event-doc-icon) center / contain no-repeat;
}

/* Headshot | title + Featuring. */
.g-event-hero .g-event-card__intro {
	flex-wrap: wrap !important;
	gap: 1rem 1.25rem;
	margin: 1rem 1.25rem;
}

/* Title takes the rest of the row; below ~14rem it wraps under the headshot. */
.g-event-hero .g-event-card__heading {
	flex: 1 1 14rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Theme: h1 { font-size: clamp(…) !important; font-weight: 400 !important; line-height: 1em !important } */
.g-event-hero .g-event-card h1.wp-block-post-title {
	color: var(--g-event-accent);
	font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

.g-event-hero .g-event-featuring {
	font-size: 0.85rem;
}

/* Gradient panel: date pill, countdown, location. */
.g-event-hero .g-event-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1rem 1rem 1.25rem;
	border-radius: 8px;
	background: var(--g-event-panel);
	color: #fff;
	margin: 0 1.25rem 1rem;
}

.g-event-hero .g-event-when {
	padding: 0.2em 0.6em;
	border-radius: 4px;
	background: #fff;
	color: var(--g-event-accent);
	font-size: 0.85rem;
	font-weight: 600;
	justify-self: start;
}

.g-event-hero .g-event-panel .g-event-field--countdown {
	align-self: stretch;
}

/* Extra space between the countdown labels and the address. */
.g-event-hero .g-event-panel .g-event-panel__location {
	margin-top: 0.5rem !important;
	font-size: 0.85rem;
	line-height: 1.4;
}

/* Register | calendar links. */
.g-event-hero .g-event-card__actions {
	gap: 0.75rem 1.5rem;
	border-top: 1px solid var(--g-event-box-line);
	padding: .75rem 1.25rem;
}

.g-event-hero .g-event-register {
	font-size: 0.9rem;
}

/* Theme: dark-blue pill with an external-link icon for new-tab buttons.
   Mockup: blue pill, no icon. */
.g-event-hero .g-event-register .wp-block-button .wp-block-button__link {
	padding: 0.5em 1.25em !important;
	background-color: var(--g-event-accent) !important;
	color: #fff !important;
}

.g-event-hero .g-event-register .wp-block-button .wp-block-button__link::before,
.g-event-hero .g-event-register .wp-block-button .wp-block-button__link::after {
	display: none !important;
}

.g-event-hero .g-event-card .g-event-cal {
	gap: 0.5rem 1.25rem;
	color: var(--g-event-ink);
}

.g-event-hero .g-event-card .g-event-cal .g-event-cal__link {
	font-size: .75rem;
}

/* Headshots (card + speaker box). Theme rounds is-style-rounded images with
   --container-radius; the mockup uses circles with a blue ring. */
.g-event-headshot.wp-block-image {
	flex: none;
	width: 6.5rem;
	margin: 0 !important;
}

.g-event-headshot--large.wp-block-image {
	width: 8rem;
}

.g-event-headshot.wp-block-image.is-style-rounded img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: 50%;
	border: 3px solid var(--g-event-accent);
}

/* =========================================================== Body section */

.g-event-body .g-event-row {
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	align-items: stretch;
}

/* Speaker spans the grid. */
.g-event-body .g-event-row > .g-event-speaker {
	grid-column: 1 / -1 !important;
}

/* One column on small screens. */
@media (max-width: 781px) {
	.g-event-body .g-event-row {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

.g-event-body .g-event-box {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 0 1.25rem 1.5rem;
	background: var(--g-event-box);
	border: 1px solid var(--g-event-box-line);
	border-radius: 6px;
	color: var(--g-event-ink);
	font-size: 0.9rem;
	line-height: 1.5;
	text-align: left;
}

.g-event-body .g-event-box > *,
.g-event-body .g-event-box > .wp-block-group__inner-container > * {
	flex-shrink: 0;
	margin: 0 !important;
}

.g-event-body .g-event-box h2.g-event-box__title {
	margin-inline: -1.25rem !important;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--g-event-box-line);
	color: var(--g-event-accent);
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

.g-event-body .g-event-box ul {
	list-style: disc;
	padding-inline-start: 1.25em;
}

.g-event-body .g-event-box ol {
	list-style: decimal;
	padding-inline-start: 1.25em;
}

.g-event-body .g-event-box li + li {
	margin-block-start: 0.25em;
}

.g-event-body .g-event-box :is(h3, h4) {
	color: var(--g-event-accent);
	font-size: 0.95rem;
}

/* Agenda. */
.g-event-body .g-event-agenda__date {
	color: var(--g-event-accent);
	font-weight: 600;
}

/* Space between agenda items; none between an item's title, time and note. */
.g-event-body .g-event-agenda__items {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.g-event-body .g-event-agenda__item {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.g-event-body .g-event-agenda__items > *,
.g-event-body .g-event-agenda__items > .wp-block-group__inner-container > *,
.g-event-body .g-event-agenda__item > *,
.g-event-body .g-event-agenda__item > .wp-block-group__inner-container > * {
	margin: 0 !important;
}

.g-event-body .g-event-agenda__item p:empty {
	display: none;
}

.g-event-body .g-event-agenda__title {
	font-weight: 700;
}

.g-event-body .g-event-agenda__time {
	font-size: 1.1rem;
}

.g-event-body .g-event-agenda__note {
	color: var(--g-event-accent);
	font-size: 0.85rem;
}

/* Location. */
.g-event-body .g-event-location-address::first-line {
	font-weight: 700;
}

/* Explicit width so the 16:9 map's height is computed at full width. */
.g-event-body .g-event-field--location_map {
	width: 100%;
}

.g-event-body .g-event-field__map {
	border-radius: 4px;
}

/* Speaker. */
.g-event-body .g-event-speaker__body {
	gap: 1.5rem;
}

.g-event-body .g-event-speaker__text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.g-event-body .g-event-speaker__text > *,
.g-event-body .g-event-speaker__text > .wp-block-group__inner-container > * {
	margin: 0 !important;
}

.g-event-body .g-event-speaker__name {
	color: var(--g-event-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.g-event-body .g-event-speaker__body {
		flex-wrap: wrap !important;
	}
}

/* PACE provider statement (synced pattern). */
.g-event-body .g-event-pace {
	gap: 1.25rem;
	margin-block-start: clamp(2.5rem, 6vw, 4rem) !important;
	align-items: center;
}

.g-event-body .g-event-pace .wp-block-image {
	flex: none;
	width: 7.5rem;
	margin: 0 !important;
}

.g-event-body .g-event-pace__text {
	margin: 0 !important;
	color: var(--g-event-muted);
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: left;
}