/* =============================================================================
   Block: Conference Event Header (acf/kf-conference-event-header)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Color tokens (block-level custom properties).
   Theme presets used where available (white, indigo); the rest are defined
   here so every occurrence references a variable, not a raw hex.
   ----------------------------------------------------------------------- */

.kf-conference-event-header {
	--kf-ceh-obsidian: #1a1825;
	--kf-ceh-mist:     #e8e9ff;
	--kf-ceh-deep:     #2d2f8f;
	--kf-ceh-base:     #0a0b2e;
	--kf-ceh-indigo:   var(--wp--preset--color--indigo);
	--kf-ceh-white:    var(--wp--preset--color--white);

	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 50px;

	padding: 80px;
	padding-top: calc(80px + var(--header-nav-bar-height, 0px));

	--kf-ceh-bg-color: var(--kf-ceh-base);
	--kf-ceh-image-fit: contain;

	/*
	 * Layered background (bottom to top in the paint order):
	 *   1. background-color  (always at the very back)
	 *   2. var(--kf-ceh-bg-image, transparent)  (dynamic: image or empty)
	 *   3. accent gradient      (#020326 -> #5f61ff -> transparent)
	 *   4. dark-overlay gradient (rgba(base,0.95) -> transparent)  -- topmost
	 *
	 * Gradient directions are implementation decisions (the Figma export
	 * carries stops only): both bias the opaque/dark end toward the left
	 * text column for legibility.
	 */
	background-color: var(--kf-ceh-bg-color, #0a0b2e);
	background-image:
		var(--kf-ceh-bg-image, transparent),
		linear-gradient(to right, #020326 0%, var(--kf-ceh-indigo) 70%, rgba(95, 97, 255, 0) 100%),
		linear-gradient(to right, rgba(10, 11, 46, 0.95) 0%, rgba(10, 11, 46, 0.95) 0%, transparent 70%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Layout -- two-column grid (left content, right image panel).
   On viewports narrower than 800px the columns stack: image panel below text.
   ----------------------------------------------------------------------- */

.kf-conference-event-header__inner {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

@media (min-width: 800px) {
	.kf-conference-event-header__inner {
		grid-template-columns: minmax(0, 620px) 1fr;
		gap: 100px;
	}
}

/* ---------------------------------------------------------------------------
   Content (left column)
   ----------------------------------------------------------------------- */

.kf-conference-event-header__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 620px;
	color: var(--kf-ceh-white);
	box-sizing: border-box;
}

/* --- Eyebrow --- */
.kf-conference-event-header__eyebrow {
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kf-ceh-mist);
	margin: 0;
}

/* --- Title (h1, the page's main heading) --- */
.kf-conference-event-header__title.kf-conference-event-header__title {
	font-size: var(--wp--preset--font-size--x-60);
	font-weight: 300;
	line-height: 1;
	margin: 0;
	color: var(--kf-ceh-white);
	word-break: break-word;
	text-wrap: pretty;
}

/* --- Intro paragraph --- */
.kf-conference-event-header__intro {
	font-size: var(--wp--preset--font-size--x18);
	line-height: 1.5;
	margin: 0;
	opacity: 0.85;
	color: var(--kf-ceh-white);
	word-break: break-word;
	text-wrap: pretty;
}

/* --- Divider (fading hairline) --- */
.kf-conference-event-header__divider {
	width: 100%;
	max-width: 620px;
	height: 1px;
	margin: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, transparent 100%);
}

/* ---------------------------------------------------------------------------
   Meta group (date row + location/booth row)
   ----------------------------------------------------------------------- */

.kf-conference-event-header__meta {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.kf-conference-event-header__meta-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--x-20);
	font-weight: 400;
	line-height: 1.2;
	color: var(--kf-ceh-white);
}

/* Icon -- 24x24, mist fill, decorative (aria-hidden on SVG). */
.kf-conference-event-header__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--kf-ceh-mist);
}

/* Vertical separator between location and booth text. */
.kf-conference-event-header__separator {
	display: inline-block;
	width: 1px;
	height: 1.2em;
	background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* ---------------------------------------------------------------------------
   Buttons row (two pill CTAs)
   ----------------------------------------------------------------------- */

.kf-conference-event-header__buttons {
	display: inline-flex;
	gap: 15px;
	margin-top: 40px;
	flex-wrap: wrap;
}

/* Beats the mobile margin rule below. */
.kf-conference-event-header__buttons.kf-conference-event-header__buttons--no-meta {
	margin-top: 1.3em;
}

.kf-conference-event-header__button.kf-conference-event-header__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 49px;
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: none;
	cursor: pointer;
	/* transition: opacity 0.2s ease; */
	box-sizing: border-box;
}

.kf-conference-event-header__button:focus-visible {
	outline: 2px solid var(--kf-ceh-indigo);
	outline-offset: 2px;
}

/* Primary -- solid white, obsidian text. */
.kf-conference-event-header__button--primary {
	background: var(--kf-ceh-white);
	color: var(--kf-ceh-obsidian);
}

.kf-conference-event-header__button--primary.kf-conference-event-header__button--primary:hover,
.kf-conference-event-header__button--primary.kf-conference-event-header__button--primary:focus-visible {
	background: #1a1825;
}

/* Secondary -- translucent white, glassmorphism. */
.kf-conference-event-header__button--secondary {
	/* background: rgba(255, 255, 255, 0.1); */
	color: var(--kf-ceh-white);
	/* backdrop-filter: blur(8px); */
	/* -webkit-backdrop-filter: blur(8px); */
	/* border: 1px solid rgba(255, 255, 255, 0.2); */
}

.kf-conference-event-header__button--secondary.glass-style {
	--saturation: 120%;
}

/* ---------------------------------------------------------------------------
   Media panel (right column)
   ----------------------------------------------------------------------- */

.kf-conference-event-header__media {
	width: 100%;
	max-width: 520px;
	min-width: 300px;
	aspect-ratio: 1 / 1;

	border-radius: 20px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	/* border: 1px solid rgba(255, 255, 255, 0.1); */
	padding: 50px;

	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.kf-conference-event-header--image-cover .kf-conference-event-header__media {
	padding: 0px !important;
}

.kf-conference-event-header__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.kf-conference-event-header__image {
	max-width: 100%;
	height: 100%;
	width: 100%;
	object-fit: var(--kf-ceh-image-fit, contain);
	object-position: center;
	display: block;
}

/* ---------------------------------------------------------------------------
   Responsive -- stack columns below 800px, scale radius and padding.
   ----------------------------------------------------------------------- */

@media (max-width: 799px) {
	.kf-conference-event-header {
		border-radius: 30px;
		padding: 60px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header__inner {
		gap: 40px;
	}

	.kf-conference-event-header__content {
		gap: 16px;
		text-align: center;
	}

	.kf-conference-event-header__buttons {
		margin-top: 24px;
		justify-content: center;
	}

	.kf-conference-event-header__media {
		padding: 30px;
		min-width: auto;
		margin-left: auto;
		margin-right: auto;
	}

	.kf-conference-event-header__meta {
		align-items: center;
	}
}

/* Ensure no horizontal overflow at very narrow widths (375px and below). */
@media (max-width: 375px) {
	.kf-conference-event-header {
		padding: 20px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.kf-conference-event-header__button {
		width: 100%;
	}
}

/* =============================================================================
   Style 2 -- full-bleed photo background, indigo glow on the left, no media
   panel. Background Image (--kf-ceh-bg-image) is the photo.
   Paint order: photo -> dark overlay -> blurred glow ellipses -> content.
   ========================================================================== */

.kf-conference-event-header--style-2 {
	/* Where the 1400px design frame would start: content container left edge - 80px. */
	--kf-ceh-glow-origin: max(0px, calc((100% - var(--wp--style--global--content-size, 1280px)) / 2 - 80px));

	background-color: var(--kf-ceh-bg-color, #0a0b2e);
	background-image: none;
	isolation: isolate;
}

/* Photo + dark overlay. Starts at the design-frame origin and grows only to the
   right on wide screens; anchored left so its left edge never moves. */
.kf-conference-event-header--style-2::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: var(--kf-ceh-glow-origin);
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--kf-ceh-bg-color), rgba(26, 24, 37, 0.7) 5%, rgba(10, 11, 46, 0.35) 50%, rgba(45, 47, 143, 0) 100%),
		var(--kf-ceh-bg-image, none);
	background-size: cover;
	background-position: right 100%;
	background-repeat: no-repeat;
}

/*
 * Glow layer. The ellipses are anchored to where the 1400px design frame
 * would start (content container left edge - 80px), so on wide screens they
 * stay aligned with the text instead of sticking to the section edge. Left
 * of that point the glow continues as a static blue strip (colors sampled
 * from the design's left edge).
 */
.kf-conference-event-header__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* background-image: linear-gradient(to bottom, #4648c6 0%, #4143b2 45%, #4748c7 100%); */
	background-size: var(--kf-ceh-glow-origin) 100%;
	background-repeat: no-repeat;
}

.kf-conference-event-header__glow-shapes {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: var(--kf-ceh-glow-origin);
	/* overflow: hidden; */
}

/* Blurred indigo ellipses (Figma "Ellipse 25" bottom-left, "Ellipse 27" top-left). */
.kf-conference-event-header__glow-shapes::before,
.kf-conference-event-header__glow-shapes::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(133px);
	background: linear-gradient(to bottom, var(--kf-ceh-deep), var(--kf-ceh-indigo));
}

.kf-conference-event-header__glow-shapes::before {
	width: 974px;
	height: 869px;
	left: -302px;
	top: 271px;
	transform: rotate(-137.6deg);
}

.kf-conference-event-header__glow-shapes::after {
	width: 1055px;
	height: 941px;
	left: -343px;
	top: -500px;
	transform: rotate(179deg);
}

.kf-conference-event-header--style-2 .kf-conference-event-header__inner {
	position: relative;
	z-index: 1;
	grid-template-columns: minmax(0, 540px);
	gap: 0;
}

.kf-conference-event-header--style-2 .kf-conference-event-header__content {
	max-width: 540px;
}

.kf-conference-event-header--style-2 .kf-conference-event-header__intro {
	font-size: var(--wp--preset--font-size--x-18);
}

.kf-conference-event-header--style-2 .kf-conference-event-header__meta-row {
	font-weight: 500;
}

.kf-conference-event-header--style-2 .kf-conference-event-header__button--primary {
	font-weight: 400;
}


/* Tablet -- tighter padding, keep left-aligned text over the photo. */
@media (min-width: 800px) and (max-width: 1100px) {
	.kf-conference-event-header--style-2 {
		padding: 60px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header--style-2.kf-conference-event-header--style-2::before {
		background-position: 65% center;
	}

	.kf-conference-event-header--style-2 .kf-conference-event-header__inner {
		grid-template-columns: minmax(0, 480px);
	}
}

/* Mobile -- photo stays visible on the right; overlay darkens the whole
   area so text stays readable at full width; glow scaled down. */
@media (max-width: 799px) {
	.kf-conference-event-header--style-2 {
		padding: 40px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header--style-2.kf-conference-event-header--style-2::before {
		background-image:
			linear-gradient(to bottom, rgba(26, 24, 37, 0.55) 0%, rgba(10, 11, 46, 0.65) 100%),
			var(--kf-ceh-bg-image, none);
		background-position: 70% center;
	}

	.kf-conference-event-header__glow-shapes::before,
	.kf-conference-event-header__glow-shapes::after {
		width: 640px;
		height: 570px;
		filter: blur(90px);
	}

	.kf-conference-event-header__glow-shapes::before {
		left: -260px;
		top: auto;
		bottom: -300px;
	}

	.kf-conference-event-header__glow-shapes::after {
		left: -280px;
		top: -320px;
	}

	.kf-conference-event-header--style-2 .kf-conference-event-header__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.kf-conference-event-header--style-2 .kf-conference-event-header__content {
		max-width: none;
		text-align: left;
	}

	.kf-conference-event-header--style-2 .kf-conference-event-header__meta {
		align-items: flex-start;
	}

	.kf-conference-event-header--style-2 .kf-conference-event-header__buttons {
		justify-content: flex-start;
	}
}

@media (max-width: 375px) {
	.kf-conference-event-header--style-2 {
		padding: 24px;
		padding-top: calc(48px + var(--header-nav-bar-height, 0px));
	}
}

.kf-conference-event-header__eyebrow--has-icon {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kf-conference-event-header__eyebrow-icon,
.kf-conference-event-header__button-icon {
	display: block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	object-fit: contain;
}

.kf-conference-event-header__button-icon {
	transition: filter 0.3s ease;
}

.kf-conference-event-header__button:hover .kf-conference-event-header__button-icon,
.kf-conference-event-header__button:focus-visible .kf-conference-event-header__button-icon {
	filter: brightness(0) invert(1);
}

.kf-conference-event-header__button--has-icon {
	gap: 10px;
}

.kf-conference-event-header--style-3 {
	--kf-ceh-mint: #9aed99;

	background-color: var(--kf-ceh-bg-color, #0a0b2e);
	/* Stops fitted to Hero 2.png; the export's gradient rectangle is taller than the frame. */
	background-image: linear-gradient(153deg, var(--kf-ceh-deep) 9%, #0d0d29 114%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	isolation: isolate;

	padding-top: calc(160px + var(--header-nav-bar-height, 0px));
	padding-bottom: 100px;
}

.kf-conference-event-header--style-3::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--kf-ceh-bg-image, none);
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	-webkit-mask-image: linear-gradient(to right, transparent 40%, #000 65%);
	mask-image: linear-gradient(to right, transparent 40%, #000 65%);
}

/* Blur is half the Figma layer blur radius, same as the Style 2 glow. */
.kf-conference-event-header--style-3 .kf-conference-event-header__blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: linear-gradient(to right, var(--kf-ceh-indigo), var(--kf-ceh-mint));
	transform: rotate(19.41deg);
}

.kf-conference-event-header--style-3 .kf-conference-event-header__blob--1 {
	left: 41.3%;
	top: 43.5%;
	width: 21.8%;
	height: 45.6%;
	filter: blur(133px);
}

.kf-conference-event-header--style-3 .kf-conference-event-header__blob--2 {
	left: 72.2%;
	top: 96.1%;
	width: 34.1%;
	height: 58.1%;
	filter: blur(109px);
}

/* Export puts this below the frame; position and colors are fitted to Hero 2.png. */
.kf-conference-event-header--style-3 .kf-conference-event-header__blob--3 {
	left: 5%;
	top: 68%;
	width: 100%;
	height: 85%;
	opacity: 0.8;
	background: linear-gradient(to right, var(--kf-ceh-indigo) -10%, var(--kf-ceh-mint) 61%);
	transform: rotate(6.7deg);
	filter: blur(60px);
}

.kf-conference-event-header--style-3 .kf-conference-event-header__glow {
	z-index: 1;
}

.kf-conference-event-header--style-3 .kf-conference-event-header__inner {
	position: relative;
	z-index: 2;
	grid-template-columns: minmax(0, 540px);
	gap: 0;
}

.kf-conference-event-header--style-3 .kf-conference-event-header__content {
	max-width: 540px;
}

.kf-conference-event-header--style-3 .kf-conference-event-header__intro {
	font-size: var(--wp--preset--font-size--x-18);
}

.kf-conference-event-header--style-3 .kf-conference-event-header__meta-row {
	font-weight: 500;
}

.kf-conference-event-header--style-3 .kf-conference-event-header__button--primary {
	font-weight: 400;
}

/* Overrides the block's 120% glass saturation for Style 3 only. */
.kf-conference-event-header--style-3 .kf-conference-event-header__button--secondary.glass-style {
	--saturation: 150%;
}

@media (min-width: 800px) and (max-width: 1100px) {
	.kf-conference-event-header--style-3 {
		padding: 60px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header--style-3 .kf-conference-event-header__inner {
		grid-template-columns: minmax(0, 480px);
	}
}

@media (max-width: 799px) {
	.kf-conference-event-header--style-3 {
		padding: 40px;
		padding-top: calc(60px + var(--header-nav-bar-height, 0px));
	}

	.kf-conference-event-header--style-3 .kf-conference-event-header__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.kf-conference-event-header--style-3 .kf-conference-event-header__content {
		max-width: none;
		text-align: left;
	}

	.kf-conference-event-header--style-3 .kf-conference-event-header__meta {
		align-items: flex-start;
	}

	.kf-conference-event-header--style-3 .kf-conference-event-header__buttons {
		justify-content: flex-start;
	}
}

@media (max-width: 375px) {
	.kf-conference-event-header--style-3 {
		padding: 24px;
		padding-top: calc(48px + var(--header-nav-bar-height, 0px));
	}
}

/* Respect reduced motion -- no animations/transitions when requested. */
@media (prefers-reduced-motion: reduce) {
	.kf-conference-event-header__button {
		transition: none;
	}
}