/* =============================================================================
   Block: Events Slider (acf/kf-events-slider)

   Two styles on one section skeleton:
     - Conferences: image-led cards, deep indigo panel, Learn More pill.
     - Webinars:    translucent gradient cards, time row, event-tag pill,
                    Register/Watch Now link, top accent strip + aqua glow.

   Track geometry: full-width section; header sits in the content container;
   the track's first card aligns with the container's content edge via
   padding-inline-start (and scroll-padding-inline-start so snapping lands
   there), cards bleed past the viewport's right edge (no right padding).
   The container inset mirrors the theme's contentSize (1280px) with the
   root padding (20px) as the small-viewport floor.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens — theme presets where they exist (white, indigo, body/obsidian);
   the rest defined once here. Every occurrence references a variable.

   Suggested theme.json palette additions (advisory only, NOT applied):
     { "slug": "deep",    "color": "#2d2f8f", "name": "Deep" },
     { "slug": "mist",    "color": "#e8e9ff", "name": "Mist" },
     { "slug": "carbon",  "color": "#4c4c5b", "name": "Carbon" },
     { "slug": "aqua",    "color": "#95ffec", "name": "Aqua" },
     { "slug": "coral",   "color": "#ff9371", "name": "Coral" }
   ----------------------------------------------------------------------- */

.kf-es {
	/* colors */
	--kf-es-white:      var(--wp--preset--color--white);
	--kf-es-indigo:     var(--wp--preset--color--indigo);
	--kf-es-obsidian:   #1a1825; /* ≈ theme "body" preset; local name kept */
	--kf-es-deep:       #2d2f8f;
	--kf-es-mist:       #e8e9ff;
	--kf-es-carbon:     #4c4c5b;
	--kf-es-aqua:       #95ffec;
	--kf-es-coral:      #ff9371;

	/* nav-button fill: the export's raw #1a1a1a is mapped to obsidian
	   (one decision, documented) — obsidian is the section's dark ink. */
	--kf-es-nav-fill:   var(--kf-es-obsidian);

	/* layout */
	/* --kf-es-inset: max(
		calc((100% - var(--wp--style--global--content-size, 1280px)) / 2),
		var(--wp--style--root--padding-left, 20px)
	); */

	--kf-es-inset: 0px;
	--kf-es-card-w: clamp(260px, 40vw, 380px);
	--kf-es-gap: clamp(16px, 3vw, 40px);

	position: relative;
	width: 100%;
	box-sizing: border-box;
	/* overflow-x: clip;  */
	/* card bleed must not create a page-level scrollbar */
}

/* ---------------------------------------------------------------------------
   Section header — inside the content container; text left, nav right
   (buttons vertically aligned to the top of the text block; the two exports
   differ slightly — top alignment picked and documented).
   ----------------------------------------------------------------------- */

.kf-es__container {
	width: 100%;
	max-width: calc(var(--wp--style--global--content-size, 1280px) + 2 * var(--kf-es-inset));
	margin-inline: auto;
	padding-inline: var(--kf-es-inset);
	box-sizing: border-box;
}

.kf-es__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: clamp(40px, 6vw, 80px);
}

.kf-es__header-text {
	min-width: min(100%, 280px);
	flex: 1 1 320px;
	max-width: 720px;
}

/* 60px → theme preset x60 (fluid). */
.kf-es__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-60);
	font-weight: 300;
	line-height: 1;
	color: var(--kf-es-obsidian);
	overflow-wrap: break-word;
}

/* 20px → theme preset default (fluid). */
.kf-es__intro {
	margin: 20px 0 0;
	font-size: var(--wp--preset--font-size--default);
	font-weight: 400;
	line-height: 30px;
	color: var(--kf-es-obsidian);
	overflow-wrap: break-word;
}

/* Nav buttons — 52×52 circles, dark fill, white chevron glyph. */
.kf-es__nav {
	display: flex;
	gap: 15px;
	flex: 0 0 auto;
}

.kf-es__nav:not(:has(> :not([aria-disabled="true"]))) {
    display: none; /* hide the nav if all buttons are disabled (no scroll) */
}

.kf-es__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 49px;
	padding: 0;
	background: var(--kf-es-nav-fill);
	color: var(--kf-es-white);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kf-es__nav-btn svg {
	display: block;
}

.kf-es__nav-btn:hover {
	background: var(--kf-es-indigo);
}

.kf-es__nav-btn:focus-visible {
	outline: 3px solid var(--kf-es-indigo);
	outline-offset: 3px;
}

/* Disabled at the ends: dimmed fill AND opacity AND aria-disabled — never
   color alone. Buttons stay focusable for discoverability but do nothing. */
.kf-es__nav-btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Track — horizontal scroll container, CSS scroll snapping.
   Left edge aligns with the container content edge; no right padding so
   cards run to and past the viewport edge.
   ----------------------------------------------------------------------- */

.kf-es__track {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding-inline-start: var(--kf-es-inset);
	padding-inline-end: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: var(--kf-es-inset);
	-webkit-overflow-scrolling: touch;
	/* Firefox/Chrome hide-the-bar while keeping scrollability */
	scrollbar-width: none;

	width: calc(100% + ((100vw - 100%) / 2));
    margin-right: calc((100vw - 100%) / -2);
}

.kf-es__track::-webkit-scrollbar {
	display: none;
}

.kf-es__track:focus-visible {
	outline: 3px solid var(--kf-es-indigo);
	outline-offset: -3px;
}

.kf-es__list {
	display: flex;
	gap: var(--kf-es-gap);
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content; /* the row is intentionally wider than the frame */
}

.kf-es__item {
	flex: 0 0 var(--kf-es-card-w);
	width: var(--kf-es-card-w);
	scroll-snap-align: start;
	display: flex;
}

/* ---------------------------------------------------------------------------
   Card base (shared).
   ----------------------------------------------------------------------- */

.kf-es__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 20px;
	box-sizing: border-box;
	overflow-wrap: break-word;
	color: inherit;
	text-decoration: none;
}

.kf-es__card-head {
	display: flex;
	flex-direction: column;

	height: 100%;
}

.kf-es__card-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-24);
	overflow-wrap: break-word;
}

.kf-es__meta-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.kf-es__icon {
	flex: 0 0 auto;
}

.kf-es__meta-value {
	overflow-wrap: break-word;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   Conferences cards — image area + deep content panel.
   ----------------------------------------------------------------------- */

.kf-es__card--conference {
	background: var(--kf-es-deep);
	color: var(--kf-es-white);
}

.kf-es__card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 380 / 190;
	overflow: hidden;
	border-radius: 20px 20px 0 0; /* top corners meet the image; bottom meet panel */
}

.kf-es__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient overlay of the deep color fading to transparent where the image
   meets the content panel (approximation of the design blend). */
.kf-es__card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, var(--kf-es-deep) 100%);
	pointer-events: none;
}

.kf-es__card--conference .kf-es__card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 25px 35px;
	border-radius: 0 0 20px 20px;
	flex: 1;
	box-sizing: border-box;
}

.kf-es__card--conference .kf-es__card-title {
	font-weight: 500;
	line-height: 1.05; /* design 0.9 clipped ascenders in practice; readable lift */
	letter-spacing: -0.02em;
	color: var(--kf-es-white);
}

.kf-es__card--conference .kf-es__card-meta {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 15px;
}

/* 20px → theme preset default (fluid). */
.kf-es__card--conference .kf-es__meta-row {
	color: var(--kf-es-white);
}

.kf-es__card--conference .kf-es__icon {
	color: var(--kf-es-mist);
}

.kf-es__card--conference .kf-es__meta-value {
	font-size: var(--wp--preset--font-size--default);
	font-weight: 500;
	line-height: 1.2;
	color: var(--kf-es-white);
}

/* "Learn More" pill — glass effect approximated with translucency, a
   lighter border, and a subtle backdrop tint (no backdrop-filter dependency
   for robustness; noted as an approximation). */
.kf-es__card--conference .kf-es__card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	border-radius: 49px;
	padding: 18px 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}


.kf-es__card--conference .kf-es__card-cta {
    --c-light: #ffffff8c;
	--c-dark: #ffffff24;

	--glass-reflex-dark: 1;
	--glass-reflex-light: 1;
	
	--saturation: 110%;

	background-color: #ffffff08;
	backdrop-filter: blur(8px) saturate(var(--saturation));
	-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
	box-shadow: inset 0 0 0 1px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0px -2px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px 
			color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0px 3px 4px -2px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 1px 5px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0px 6px 16px 0px 
			color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
	transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
}

a.kf-es__card--conference:hover .kf-es__card-cta,
a.kf-es__card--conference:active .kf-es__card-cta,
a.kf-es__card--conference:focus-visible .kf-es__card-cta {
    --c-light: #ffffffa5;
    --c-dark: #ffffff3d;
    background-color: #ffffff35;
}

a.kf-es__card--conference:focus-visible {
	outline: 2px solid var(--kf-es-white);
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
   Webinars section decorations — top accent strip + aqua glow layers.
   ----------------------------------------------------------------------- */

.kf-es--webinars {
	background: var(--kf-es-white);
	padding-top: 10px; /* room for the strip pinned to the section's top */

	padding-bottom: 100px;
}

/* Two large blurred aqua radial-gradient ellipses behind the track —
   decorative, aria-hidden, cannot affect layout or contrast. */
.kf-es__glow {
	position: absolute;
	/* inset: 0; */
    bottom: 0;
    height: 500px;
    left: 0;
    right: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 18% 68%, rgba(149, 255, 236, 0.45) 0%, rgba(187, 241, 240, 0.28) 40%, rgba(222, 223, 255, 0.12) 65%, transparent 80%),
		radial-gradient(55% 50% at 82% 40%, rgba(149, 255, 236, 0.30) 0%, rgba(187, 241, 240, 0.18) 45%, transparent 75%);
	filter: blur(40px);
}

/* ---------------------------------------------------------------------------
   Webinars cards — one translucent indigo gradient fill + one soft shadow
   (no extra DOM for the glass effect).
   ----------------------------------------------------------------------- */

.kf-es__card--webinar {
	position: relative;
	padding: 30px;
	gap: 20px;
	flex: 1;
	background: linear-gradient(
		to right,
		rgba(95, 97, 255, 0.15) 0%,
		rgba(95, 97, 255, 0.03) 71%,
		rgba(95, 97, 255, 0.09) 100%
	);
	/* border: 1px solid rgba(95, 97, 255, 0.18); */
	box-shadow: inset -10px -10px 26px rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.kf-es__card--webinar {
  position: relative;
}

.kf-es__card--webinar::before {
	content: '';
	position: absolute;
	inset: 0px;
   
	border-radius: inherit;

	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
  
	pointer-events: none;

	padding: 1px;
	background: linear-gradient(105deg, rgba(255, 255, 255, .8) 6%, rgba(255, 255, 255, .2) 16%, rgba(255, 255, 255, .7) 100%);
}

.kf-es__card--webinar .kf-es__card-title {
	font-weight: 600;
	line-height: 1.2;
	color: var(--kf-es-obsidian);

	flex-grow: 1;
}

.kf-es__card--webinar .kf-es__card-meta {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 15px;
}

.kf-es__card--webinar .kf-es__meta-row {
	color: var(--kf-es-obsidian);
}

.kf-es__card--webinar .kf-es__icon {
	color: var(--kf-es-obsidian);
	margin-top: 2px;
	width: 18px;
    height: 18px;
}

.kf-es__card--webinar .kf-es__meta-value,
.kf-es__meta-value--time {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kf-es-obsidian);
}

/* event-tag pills — one per assigned term, wrapping onto new lines. */
.kf-es__card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kf-es__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 49px;
	padding: 6px 10px;
	border: 0.5px solid var(--kf-es-carbon);
	background: transparent;
	color: var(--kf-es-carbon);
}

.kf-es__pill-glyph {
	flex: 0 0 auto;
	color: var(--kf-es-indigo);
}

.kf-es__pill-label {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.15;
	color: var(--kf-es-carbon);
	overflow-wrap: break-word;
	min-width: 0;
}

/* Register / Watch Now link — pinned near the card bottom. */
.kf-es__card--webinar .kf-es__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--kf-es-indigo);
	text-decoration: none;
}

.kf-es__card--webinar .kf-es__link-glyph {
	flex: 0 0 auto;
	color: var(--kf-es-indigo);
}

a.kf-es__card--webinar:hover .kf-es__card-cta,
a.kf-es__card--webinar:focus-visible .kf-es__card-cta {
	text-decoration: underline;
	text-underline-offset: 4px;
}

a.kf-es__card--webinar:focus-visible {
	outline: 2px solid var(--kf-es-indigo);
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
   Empty state (editor only).
   ----------------------------------------------------------------------- */

.kf-es__empty {
	padding: 40px var(--kf-es-inset);
	font-size: var(--wp--preset--font-size--default);
	color: var(--kf-es-carbon);
	border: 1px dashed currentColor;
	border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Responsive.
   Nothing overflows vertically or clips content at 375px: titles, meta
   rows, pills wrap; the track's intentional horizontal overflow is the one
   allowed horizontal scroll (overflow:clip on the section keeps the page
   body from scrolling sideways). Card radius shrinks on small screens.
   ----------------------------------------------------------------------- */

@media (max-width: 781px) {
	.kf-es__card {
		border-radius: 14px;
	}

	.kf-es__card-media,
	.kf-es__card--conference .kf-es__card-body {
		border-radius: 14px 14px 0 0;
	}

	.kf-es__card--conference .kf-es__card-body {
		border-radius: 0 0 14px 14px;
		padding: 22px 24px;
	}

	.kf-es__card--webinar {
		padding: 24px;
	}

	/* Slightly wider cards so a full card fits in a 375px viewport. */
	.kf-es {
		--kf-es-card-w: clamp(240px, 78vw, 340px);
		--kf-es-gap: 16px;
	}

	.kf-es__header {
		gap: 20px;
	}

	.kf-es__nav-btn {
		width: 46px;
		height: 46px;
	}
}

/* ---------------------------------------------------------------------------
   Reduced motion — smooth scrolling off; snap still applies.
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kf-es__nav-btn,
	.kf-es__card--conference .kf-es__card-cta {
		transition: none;
	}

	.kf-es__track {
		scroll-behavior: auto;
	}
}