/*
=================================================================
  Block: Events Library (Phase 2 — listing)
  Day-grouped upcoming events: filter pills, search, About panel,
  dotted day timeline, event rows, Load More.
  All values bind design-system tokens (theme.json). Surface/line/
  muted bind the named v1.1 tokens (surface-mint / line-moss /
  text-muted — promoted from the local --evt-* mixes 2026-07-24).
=================================================================
*/

.cfc-events-library {
	/* Shared control height (search icon/field + mobile catdrop), matched to the
	   FILTER-PILL height by construction (Jose 2026-07-23): small-font line (snug)
	   + the pill's 0.55em×2 padding + 2px×2 borders. The pill declares the same
	   line-height explicitly so the two can never drift apart. Lives on the block
	   root because the search sits in the heading row, not the controls row. */
	--filter-height: calc(
		var(--wp--preset--font-size--small) * var(--wp--custom--line-height--snug)
		+ var(--wp--preset--font-size--small) * 1.1 /* token-exception: component-internal geometry — mirrors the pill's 0.55em top+bottom padding */
		+ 4px /* token-exception: component-internal geometry — the pill's 2px×2 borders */
	);

	display: block;
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--80);
}

/* ---- Controls: filter pills + mobile dropdown --------------------------- */
.cfc-events-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
}

.cfc-events-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	flex: 1 1 auto;
}

.cfc-events-pill {
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug); /* paired with the --filter-height calc above */
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	background: transparent;
	border: 2px solid var(--wp--custom--color--line-moss);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.55em 1.1em;
	cursor: pointer;
	transition: var(--wp--custom--transition--base);
	transition-property: background-color, color, border-color;
}

.cfc-events-pill:hover {
	border-color: var(--wp--preset--color--primary);
}

.cfc-events-pill.is-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--neutral-0);
}

.cfc-events-pill:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Collapsible search: rests as a square icon button; .is-open (events-library.js)
   animates it out into the bordered icon + input + clear control. */
.cfc-events-search {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: var(--filter-height);
	width: var(--filter-height);
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--quaternary);
	border-radius: var(--wp--custom--radius--sm);
	flex: 0 0 auto;
	overflow: hidden;
	transition: var(--wp--custom--transition--base);
	transition-property: width, padding, border-color;
	margin-top: 0 !important; /* override the heading row's bottom margin so the search can expand in place */
}

/* Open: stays put at the heading row's right end and simply widens in place
   (Jose 2026-07-23 — hover/click expands; the width/padding transition on the
   base rule is the expanding animation). */
.cfc-events-search.is-open {
	width: 260px;
	padding: 2px 1.25em 0 0; /* token-exception: optical text centering — asymmetric padding, ported 1:1 from the cooking-classes controls */
}

.cfc-events-search:focus-within {
	border-color: var(--wp--preset--color--secondary);
}

.cfc-events-search.has-text {
	border-color: var(--wp--preset--color--secondary);
}

/* The square trigger: fills the collapsed control (borders excluded) so the icon
   never shifts as the field animates open next to it. */
.cfc-events-search__toggle {
	flex: 0 0 auto;
	width: calc(var(--filter-height) - 4px); /* token-exception: component-internal geometry — the hit area inside the control's 2px borders */
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.cfc-events-search__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: -4px; /* inside the control — the wrapper's overflow:hidden would clip an outer ring */
}

.cfc-events-search__icon {
	color: var(--wp--preset--color--primary);
}

/* Collapsed: faded out (opacity only — visibility/display would make focus() fail
   during the opening transition); events-library.js parks tabindex=-1 on it so the
   invisible field is never a keyboard tab stop. */
.cfc-events-search__input {
	opacity: 0;
	font-family: var(--wp--preset--font-family--gill-sans);
	font-weight: 600; /* matches the filter pills */
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	border: none;
	background: transparent;
	color: var(--wp--preset--color--primary);
	outline: none;
	flex: 1;
	min-width: 0;
	transition: opacity var(--wp--custom--transition--base);
}

.cfc-events-search.is-open .cfc-events-search__input {
	opacity: 1;
}

/* Chrome/Safari draw their own clear × inside type=search — hide it, the control
   has its own clear button. */
.cfc-events-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.cfc-events-search__input::placeholder {
	color: var(--wp--preset--color--primary);
	opacity: 0.5;
}

.cfc-events-search__clear[hidden] {
	display: none;
}

.cfc-events-search__clear {
	background: none;
	border: 0;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--wp--custom--transition--base);
}

.cfc-events-search__clear:hover {
	opacity: 0.7;
}

.cfc-events-search__clear:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* Mobile category dropdown (cooking-classes dropdown pattern; replaces the pill
   strip below 600px — hidden on desktop). */
.cfc-events-catdrop {
	position: relative;
	display: none;
}

.cfc-events-catdrop__toggle {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--gill-sans);
	font-weight: 600; /* matches the filter pills */
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	height: var(--filter-height);
	padding: 2px 1.25em 0; /* token-exception: optical text centering — asymmetric padding, ported 1:1 from the cooking-classes controls */
	border: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
	transition: var(--wp--custom--transition--base);
	transition-property: background-color, color;
	white-space: nowrap;
}

.cfc-events-catdrop__toggle:hover,
.cfc-events-catdrop__toggle.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--quaternary);
}

.cfc-events-catdrop__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

.cfc-events-catdrop__arrow {
	transition: transform var(--wp--custom--transition--base);
}

.cfc-events-catdrop__toggle[aria-expanded="true"] .cfc-events-catdrop__arrow {
	transform: rotate(180deg);
}

.cfc-events-catdrop__menu {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--40));
	left: 0;
	right: 0;
	background: var(--wp--preset--color--quaternary);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--float);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px); /* token-exception: decorative animation curves */
	transition: var(--wp--custom--transition--base);
	transition-property: opacity, visibility, transform;
	z-index: var(--wp--custom--z--raised);
	max-height: 300px;
	overflow-y: auto;
}

.cfc-events-catdrop__menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cfc-events-catdrop__option {
	display: block;
	width: 100%;
	text-align: left;
	white-space: nowrap;
	padding: 0.6em 1.25em 0.4em; /* optical centering, matches cooking-classes options */
	border: none;
	background: none;
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--base);
}

.cfc-events-catdrop__option:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--alpha--faint), transparent);
}

.cfc-events-catdrop__option:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: -3px;
}

.cfc-events-catdrop__option.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--quaternary);
	font-weight: 400;
}

/* ---- About [category] panel -------------------------------------------- */
.cfc-events-about {
	background: var(--wp--custom--color--surface-mint);
	border-left: 4px solid var(--wp--preset--color--secondary);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--60);
}

.cfc-events-about__eyebrow {
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cfc-events-about__copy {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
}

.cfc-events-about__copy :where(p):last-child {
	margin-bottom: 0;
}

/* ---- Section heading + search ------------------------------------------ */
/* One row: the heading on the left, the collapsible search on the right. The
   ROW owns the underline so it spans beneath both. nowrap keeps the expanding
   search in place (it squeezes the heading's free space, never wraps). */
.cfc-events-heading-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: nowrap;
	border-bottom: 2px solid var(--wp--custom--color--line-moss);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
}

.cfc-events-heading {
	margin-bottom: 0;
}

/* ---- Happening Now (disclosure) ---------------------------------------- */
/* Same heading-row + underline treatment as Upcoming Events; the ONLY new style is
   the disclosure toggle. Rows are standard event rows with no dotted timeline, so
   they stack with the same gap as a day group's rows (.cfc-events-day__rows). */
.cfc-events-happening {
	margin-bottom: var(--wp--preset--spacing--80);
}

.cfc-events-disclosure {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.cfc-events-disclosure:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

.cfc-events-disclosure__chevron {
	display: inline-flex;
	transition: transform var(--wp--custom--transition--button);
}

.cfc-events-disclosure[aria-expanded="false"] .cfc-events-disclosure__chevron {
	transform: rotate(-90deg);
}

.cfc-events-happening__rows {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* ---- List + day groups + dotted timeline ------------------------------- */
.cfc-events-list {
	position: relative;
	padding-left: var(--wp--preset--spacing--70);
}

/* Continuous dotted connector down the left gutter. */
.cfc-events-list::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.75rem;
	bottom: 0.75rem;
	border-left: 2px dotted var(--wp--preset--color--secondary);
	opacity: 0.55;
}

.cfc-events-day {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--60);
}

.cfc-events-day__label {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--gill-sans);
	margin: 0 0 var(--wp--preset--spacing--50);
	border: 0;
	padding: 0;
}

.cfc-events-day__dot {
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--70) + 1px);
	top: 0.35em;
	width: 12px;
	height: 12px;
	border-radius: var(--wp--custom--radius--round);
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--quaternary);
}

.cfc-events-day__primary {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	line-height: var(--wp--custom--line-height--snug);
}

.cfc-events-day__sub {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--custom--color--text-muted);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}

.cfc-events-day__rows {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* ---- Event row --------------------------------------------------------- */
/* Mirrors the .letter-card treatment (blocks/letters-from-lisa): Almond card +
   drop shadow + neutral hover. The whole card is a click target for the modal
   (events-modal.js delegation on data-event-id); the title <a> stays the
   accessible/crawlable link. */
.cfc-event-row {
	display: grid;
	grid-template-columns: 300px 1fr auto;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
	background: var(--wp--preset--color--quaternary);
	filter: drop-shadow(var(--wp--custom--shadow--drop));
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50);
	transition: background-color var(--wp--custom--transition--base);
	cursor: pointer;
}

@media (hover: hover) {
	.cfc-event-row:hover {
		background: var(--wp--custom--color--neutral-50);
	}
}

.cfc-event-row__media {
	position: relative;
	display: block;
	height: 200px;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.cfc-event-row__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cfc-event-row__img--placeholder {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--custom--color--neutral-0));
}

/* Bug positioning within a row's media (appearance + palette map live in _events.css,
   which loads on the listing, the single page, and the modal alike). */
.cfc-event-row__media .cfc-event-bug {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
}

.cfc-event-row__body {
	min-width: 0;
}

.cfc-event-row__title {
	font-family: var(--wp--preset--font-family--lovechild);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--snug);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cfc-event-row__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.cfc-event-row__title a:hover {
	color: var(--wp--preset--color--secondary);
}

.cfc-event-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--40);
}

.cfc-event-row__when,
.cfc-event-row__where {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
	/* The Gill Sans webfont carries a broken kern pair between "," and a following
	   capital (measured: it swallows ~3.4px of the space in "Fri, Aug"), which makes
	   the date line read as "Fri,Aug". Kerning off restores the authored spaces. */
	font-kerning: none;
}

.cfc-event-row__when .cfc-icon,
.cfc-event-row__where .cfc-icon {
	flex: 0 0 auto;
	color: var(--wp--preset--color--secondary);
}

.cfc-event-row__where a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.cfc-event-row__where a:hover {
	text-decoration: underline;
}

.cfc-event-row__excerpt {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--custom--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--40);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cfc-event-row__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

.cfc-event-chip {
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--custom--color--text-muted);
	background: transparent;
	border: 1px solid var(--wp--custom--color--line-moss);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.3em 0.7em;
	line-height: var(--wp--custom--line-height--none);
}

.cfc-event-row__cta {
	align-self: end;
}

/* ---- Load More + empty state ------------------------------------------- */
.cfc-events-loadmore {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--70);
}

/* display:flex would beat the UA's [hidden] rule — restate it. */
.cfc-events-loadmore[hidden] {
	display: none;
}

/* No-results panel (cooking-classes .no-results-message pattern): dashed card,
   icon, active-filter recap, remove-filter pills, event suggestions. */
.cfc-events-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
	background: color-mix(in srgb, var(--wp--preset--color--quaternary) var(--wp--custom--alpha--half), transparent);
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--alpha--muted), transparent);
	border-radius: var(--wp--custom--radius--lg);
	margin: var(--wp--preset--spacing--60) auto;
	max-width: 600px;
	color: var(--wp--custom--color--text-muted);
}

.cfc-events-empty__icon {
	margin-bottom: var(--wp--preset--spacing--50);
	opacity: 0.6;
	color: var(--wp--preset--color--primary);
}

.cfc-events-empty__title {
	font-family: var(--wp--preset--font-family--lovechild);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.cfc-events-empty__filters {
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--primary);
	margin: var(--wp--preset--spacing--40) 0;
}

.cfc-events-empty__filters-list {
	font-weight: 700;
	color: var(--wp--preset--color--secondary);
}

.cfc-events-empty__remove,
.cfc-events-empty__suggest {
	margin-top: var(--wp--preset--spacing--60);
}

.cfc-events-empty__label {
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	opacity: 0.8;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.cfc-events-empty__pills,
.cfc-events-empty__suggest-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	justify-content: center;
}

.cfc-events-empty__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--gill-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.5em 1em 0.35em; /* token-exception: optical text centering — asymmetric padding, ported 1:1 from the cooking-classes pills */
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: var(--wp--custom--transition--base);
	transition-property: background-color, color;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-decoration: none;
}

.cfc-events-empty__pill:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--quaternary);
}

.cfc-events-empty__pill:focus-visible {
	outline: 3px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

.cfc-events-empty__pill--suggest {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
}

/* aria-busy fade while a fetch is in flight (Phase 3). */
.cfc-events-list[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity var(--wp--custom--transition--base);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 782px) {
	.cfc-event-row {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}

	.cfc-event-row__media {
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.cfc-event-row__cta {
		align-self: stretch;
	}

	.cfc-event-row__cta .wp-block-button {
		width: 100%;
		margin-inline: 0;
	}

	.cfc-event-row__cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

}

/* Mobile (≤600px): the pill strip is replaced by the category dropdown, which
   shares one row with the collapsed search icon; opening the search expands it
   onto its own full-width row below (the controls container already wraps). */
@media (max-width: 600px) {
	/* The open search takes its own full-width row beneath the heading. */
	.cfc-events-heading-row {
		flex-wrap: wrap;
	}

	.cfc-events-pills {
		display: none;
	}

	.cfc-events-catdrop {
		display: block;
		flex: 1 1 auto;
	}

	.cfc-events-search.is-open {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cfc-events-pill,
	.cfc-events-search,
	.cfc-events-search__input,
	.cfc-events-search__clear,
	.cfc-events-catdrop__toggle,
	.cfc-events-catdrop__arrow,
	.cfc-events-catdrop__menu,
	.cfc-events-catdrop__option,
	.cfc-events-empty__pill,
	.cfc-events-list {
		transition: none;
	}
}