/* ==========================================================================
   Events: The Events Calendar on the light page (MOCKUP 3, "The Events
   Calendar: on light, with chips and selects in the shared style, event rows
   using the event card's type, the month grid with hairlines").

   Frame: tribe-events/fox-view.php prints the dark page-head band, then
   <div class="fox-section fox-tone-light fox-tec"> holding TEC's view; the
   single event (tribe-events/single-event.php) prints its own bands inside
   .fox-evsingle. Every colour comes from the section tone (--tone-*) or the
   literal palette (--c-*); nothing here relies on the deprecated --color-*
   names. TEC's own --tec-color-* are re-pointed below so anything this file
   does not restyle still lands on the light page.

   Markup: inc/events.php, parts/events/filter-bar.php,
   tribe/events/v2/**, tribe-events/*.php. Owned by the events agent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TEC variables -> tone tokens, and TEC's container
   ----------------------------------------------------------------------- */

.fox-tec .tribe-common,
.fox-tec .tribe-events,
.fox-evsingle .tribe-common,
.fox-evsingle .tribe-events {
	--tec-color-text-primary: var(--tone-heading);
	--tec-color-text-primary-light: var(--tone-text);
	--tec-color-text-secondary: var(--tone-text);
	--tec-color-text-disabled: var(--tone-placeholder);
	--tec-color-text-events-title: var(--tone-heading);
	--tec-color-text-event-title: var(--tone-heading);
	--tec-color-text-event-date: var(--tone-text);
	--tec-color-text-event-date-secondary: var(--tone-text);
	--tec-color-text-events-bar-input: var(--tone-field-fg);
	--tec-color-text-events-bar-input-placeholder: var(--tone-placeholder);
	--tec-color-text-view-selector-list-item: var(--tone-heading);
	--tec-color-text-view-selector-list-item-hover: var(--tone-heading);
	--tec-color-text-day-of-week-month: var(--tone-text);
	--tec-color-link-primary: var(--tone-heading);
	--tec-color-link-accent: var(--tone-link);
	--tec-color-link-accent-hover: var(--tone-link-hover);
	--tec-color-accent-primary: var(--c-ink);
	--tec-color-accent-primary-hover: var(--c-ink);
	--tec-color-accent-primary-active: var(--c-ink);
	--tec-color-accent-primary-background: var(--tone-chip-fill);
	--tec-color-icon-primary: var(--tone-heading);
	--tec-color-icon-primary-alt: var(--tone-icon);
	--tec-color-icon-secondary: var(--tone-icon);
	--tec-color-icon-active: var(--tone-heading);
	--tec-color-icon-focus: var(--tone-focus);
	--tec-color-background: transparent;
	--tec-color-background-secondary: var(--tone-surface);
	--tec-color-background-events: transparent;
	--tec-color-background-view-selector: transparent;
	--tec-color-background-events-bar: transparent;
	--tec-color-background-view-selector-list-item-hover: var(--tone-chip-fill);
	--tec-color-background-messages: var(--tone-surface);
	--tec-color-background-secondary-hover: var(--tone-chip-fill);
	--tec-color-background-tooltip: var(--c-white);
	--tec-color-border-default: var(--tone-border-strong);
	--tec-color-border-secondary: var(--tone-border);
	--tec-color-border-tertiary: var(--tone-border);
	--tec-color-border-hover: var(--tone-heading);
	--tec-color-border-active: var(--tone-heading);
	--tec-color-border-events-bar: var(--tone-border-strong);
	--tec-color-button-primary: var(--c-ink);
	--tec-color-button-primary-hover: var(--c-ink);
	--tec-color-button-primary-active: var(--c-ink);
	--tec-color-button-secondary: var(--tone-chip-fill);
	--tec-color-button-secondary-hover: var(--tone-chip-fill);
	--tec-color-day-marker-month: var(--tone-heading);
	--tec-color-day-marker-current-month: var(--tone-heading);
	--tec-color-day-marker-past-month: var(--tone-text);
	--tec-color-icon-events-bar: var(--tone-heading);
	--tec-color-icon-events-bar-active: var(--tone-heading);
	--tec-color-icon-events-bar-hover: var(--tone-heading);
	--tec-color-background-search-container: var(--c-white);
	--tec-color-background-view-selector-tabs: transparent;
	--tec-color-border-secondary-month-grid: var(--tone-border);
	--tec-color-category-text: var(--tone-heading);
	--tec-color-text-events-bar-submit-button: #141414;
	--tec-color-background-events-bar-submit-button: var(--c-gold);
	--tec-color-background-events-bar-submit-button-hover: var(--c-gold-hover);
	--tec-color-background-events-bar-submit-button-active: var(--c-gold-hover);
	--tec-color-text-events-bar-submit-button-hover: #141414;
	--tec-color-text-events-bar-submit-button-active: #141414;
	font-family: var(--font-sans);
	color: var(--tone-text);
}

/* TEC sizes its own container; inside .fox-wrap it should just fill it. */
.fox-tec .tribe-common-l-container,
.fox-tec .tribe-events-l-container { max-width: none; padding-left: 0; padding-right: 0; }
.fox-tec .tribe-events-l-container { padding-top: 0; padding-bottom: 0; min-height: 0; }
.fox-tec .tribe-common { -webkit-font-smoothing: antialiased; }
.fox-tec--listing { padding-top: var(--space-5); }

/* One focus ring site-wide (D5): TEC's resets are out-specified here. */
.fox-tec .tribe-common a:focus-visible,
.fox-tec .tribe-common button:focus-visible,
.fox-tec .tribe-common input:focus-visible,
.fox-tec .tribe-common select:focus-visible,
.fox-evsingle .tribe-common a:focus-visible,
.fox-evsingle .tribe-common button:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 3px; box-shadow: none; }
/* The subscribe control's focusable element is its inner text button; ring the
   whole 44px box instead, so the ring matches the target (D5). */
.fox-tec .tribe-common .tribe-events-c-subscribe-dropdown__button:has(:focus-visible),
.fox-evsingle .tribe-events-c-subscribe-dropdown__button:has(:focus-visible) { outline: 2px solid var(--tone-focus); outline-offset: 3px; }
.fox-tec .tribe-common .tribe-events-c-subscribe-dropdown__button button:focus-visible,
.fox-evsingle .tribe-common .tribe-events-c-subscribe-dropdown__button button:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   1. Control row. TEC's header is a wrapping flex row: the Fox filter
   (lounge chips + type select + status line) and TEC's events bar (Search +
   List/Month/Day) share its first line, the top bar (prev/next, Today, date)
   takes the second and the Fox empty state the third.
   ----------------------------------------------------------------------- */

.fox-tec .tribe-events .tribe-events-header { align-items: flex-start; gap: var(--space-3) var(--space-5); }
.fox-tec .tribe-events .tribe-events-header .fox-evfilter {
	flex: 1 1 520px; min-width: 0; box-sizing: border-box;
	margin: 0; padding: 0; background: none; border: 0;
}
.fox-evfilter__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) 14px; }
.fox-evfilter__lounges { min-width: 0; max-width: 100%; }
.tribe-common .fox-evfilter ul.fox-chips { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.tribe-common .fox-evfilter ul.fox-chips li { margin: 0; padding: 0; }
.tribe-common .fox-evfilter p { margin: 0; }
.tribe-common .fox-evfilter label { margin: 0; }
/* TEC's .tribe-common reset strips anchors; restate the shared chip. */
.tribe-common .fox-evfilter a.fox-chip {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 20px; box-sizing: border-box;
	background: transparent; color: var(--tone-heading);
	border: 1px solid var(--tone-chip-border); border-radius: var(--radius-pill);
	font: 500 var(--fs-chip)/1.2 var(--font-sans); letter-spacing: 0;
	text-decoration: none; white-space: nowrap;
}
.tribe-common .fox-evfilter a.fox-chip:hover { background: var(--tone-chip-fill); color: var(--tone-heading); }
.tribe-common .fox-evfilter a.fox-chip[aria-current] { background: var(--tone-chip-fill); border-color: var(--tone-chip-active-border); }

/* The event-type select: the shared field (white, hairline, radius 6, tone
   chevron), 44px so it lines up with the chips beside it. */
.fox-evfilter__type { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin: 0; }
.fox-evfilter__select { display: inline-flex; }
.tribe-common .fox-evfilter select.fox-input {
	width: auto; min-width: 13rem; min-height: 44px; padding: 8px 40px 8px 14px;
	background-color: var(--tone-field-bg); color: var(--tone-field-fg);
	border: 1px solid var(--tone-field-border); border-radius: var(--radius-field);
	font: 400 1rem/1.3 var(--font-sans);
	appearance: none; -webkit-appearance: none;
	background-image: var(--tone-select-chevron); background-repeat: no-repeat; background-position: right 14px center;
	cursor: pointer;
}
.tribe-common .fox-evfilter select.fox-input:hover { border-color: var(--tone-heading); }

.fox-evfilter__foot,
.tribe-common .fox-evfilter .fox-evfilter__foot {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4);
	margin-top: var(--space-3); font-size: var(--fs-small); color: var(--tone-text);
}
.tribe-common .fox-evfilter .fox-evfilter__status { margin: 0; color: var(--tone-text); font-weight: 500; }
.fox-evfilter__tz { color: var(--tone-text); font-weight: 400; }
.tribe-common .fox-evfilter .fox-evfilter__clear {
	display: inline-flex; align-items: center; min-height: 32px;
	color: var(--tone-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tribe-common .fox-evfilter .fox-evfilter__clear:hover { color: var(--tone-link-hover); }

/* The way into the past events on a PHONE. TEC hides its entire top bar below
   700px, and its Past button with it, so a phone had no way in. This one shows
   only while that bar is hidden — above 700px the button sits next to Today
   where it belongs, and the two are never both on screen. A real button, not a
   text link: it is a destination, and it is the one control a thumb reaches for
   on this row. */
.fox-evfilter__past,
.tribe-common .fox-evfilter .fox-evfilter__past {
	display: none;
	align-items: center;
	min-height: 44px; padding: 0 16px;
	border: 1px solid var(--tone-border); border-radius: var(--radius-pill);
	color: var(--tone-heading); text-decoration: none;
	font-size: var(--fs-small); font-weight: 500;
}
.tribe-common .fox-evfilter .fox-evfilter__past:hover { border-color: var(--tone-heading); color: var(--tone-heading); }
.tribe-common .fox-evfilter .fox-evfilter__past.is-showing-past { border-color: var(--c-gold); color: var(--c-gold); }
@media (max-width: 699px) {
	.fox-evfilter__past,
	.tribe-common .fox-evfilter .fox-evfilter__past { display: inline-flex; }
	/* and it gets its own line, away from the status sentence */
	.fox-evfilter__foot,
	.tribe-common .fox-evfilter .fox-evfilter__foot { align-items: flex-start; }
}

@media (max-width: 599px) {
	.fox-evfilter__type, .fox-evfilter__select { width: 100%; }
	.tribe-common .fox-evfilter select.fox-input { width: 100%; min-width: 0; }
}
@media (pointer: coarse) {
	.tribe-common .fox-evfilter .fox-evfilter__clear { min-height: 44px; }
}

/* Phones: chips and select fold behind one "Filter · Gilbert · All types"
   button (filter-bar.php). CSS on html.js, set in <head>, so the page never
   jumps; without JavaScript the button is hidden and the row stays open. */
.fox-evfilter__toggle { display: none; }
@media (max-width: 699px) {
	html.js .tribe-common .fox-evfilter .fox-evfilter__toggle {
		display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; box-sizing: border-box;
		background: transparent; color: var(--tone-heading); border: 1px solid var(--tone-chip-border); border-radius: var(--radius-field);
		font: 400 1rem/1.3 var(--font-sans); text-align: left; cursor: pointer;
	}
	html.js .fox-evfilter__toggle-k { font-weight: 500; }
	html.js .fox-evfilter__toggle-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tone-text); }
	html.js .fox-evfilter__toggle-icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease-premium); }
	html.js .fox-evfilter.is-open .fox-evfilter__toggle-icon { transform: rotate(180deg); }
	html.js .fox-evfilter:not(.is-open) .fox-evfilter__row { display: none; }
	html.js .fox-evfilter.is-open .fox-evfilter__row { margin-top: var(--space-3); }
}

/* The Fox empty state spans the row under the top bar; TEC's own "There were
   no results found." says less, so it is hidden beside ours. */
.fox-tec .tribe-events .tribe-events-header .fox-evempty { order: 10; flex: 0 0 100%; box-sizing: border-box; margin: var(--space-3) 0 0; }
.fox-tec .tribe-events .tribe-events-header:has(.fox-evempty) .tribe-events-c-messages { display: none; }
.fox-tec .tribe-common .fox-evempty { padding: var(--space-6) var(--space-5); border: 1px dashed var(--tone-border-strong); border-radius: var(--radius-img); background: transparent; text-align: center; }
.tribe-common .fox-evempty .fox-empty__title { margin: 0 auto .35em; }
.fox-tec .tribe-common .fox-evempty .fox-actions { margin-top: var(--space-4); justify-content: center; }
.tribe-common .fox-evempty p { margin: 0 auto; }
.tribe-common .fox-evempty a:not(.fox-btn) { color: var(--tone-link); text-decoration: underline; text-underline-offset: .2em; }
/* TEC's resets strip button borders and colours; restate the shared buttons. */
.fox-tec .tribe-common .fox-evempty .fox-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--radius-btn); font: 500 var(--fs-btn)/1 var(--font-sans); letter-spacing: var(--tracking-btn); text-transform: uppercase; text-decoration: none; }
.fox-tec .tribe-common .fox-evempty .fox-btn--outline { border: 1px solid var(--tone-btn-outline); color: var(--tone-btn-outline-fg); background: transparent; }
.fox-tec .tribe-common .fox-evempty .fox-btn--gold { border: 1px solid var(--c-gold); color: #141414; background: var(--c-gold); }
.fox-tec .tribe-common .fox-evempty .fox-btn--gold:hover { background: var(--c-gold-hover); border-color: var(--c-gold-hover); }

/* --------------------------------------------------------------------------
   2. Events bar (Search + view switch), top bar, date picker: 44px pills,
   Inter, hairlines; no TEC blue, no dark-theme leftovers.
   ----------------------------------------------------------------------- */

.fox-tec .tribe-events .tribe-events-c-events-bar { box-shadow: none; background: none; }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-header__events-bar,
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-header__events-bar {
	position: relative; flex: 0 0 auto; width: auto; margin: 0;
	display: flex; align-items: center; gap: var(--space-3);
	background: none; border: 0; overflow: visible;
}
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-header__top-bar { flex: 0 0 100%; margin: 0; }

/* Shared pill look for Search, the phone view switch and Today. */
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button,
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-button,
.fox-tec .tribe-common.tribe-events .tribe-events-c-view-selector__button,
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__today-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 0 18px; box-sizing: border-box;
	background: transparent; color: var(--tone-heading);
	border: 1px solid var(--tone-chip-border); border-radius: var(--radius-pill);
	font: 500 var(--fs-chip)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button:hover,
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button[aria-expanded="true"],
.fox-tec .tribe-common.tribe-events .tribe-events-c-view-selector__button:hover,
.fox-tec .tribe-common.tribe-events .tribe-events-c-view-selector__button--active,
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__today-button:hover { background: var(--tone-chip-fill); border-color: var(--tone-chip-active-border); color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button::before,
.fox-tec .tribe-events .tribe-events-c-view-selector__button::before { display: none; }
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button-icon-svg,
.fox-tec .tribe-events .tribe-events-c-view-selector__button-icon-svg { width: 16px; height: 16px; }
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button-icon-svg path,
.fox-tec .tribe-events .tribe-events-c-view-selector__button-icon-svg path,
.fox-tec .tribe-events .tribe-events-c-view-selector__button-icon-svg rect { fill: currentColor; }
.fox-tec .tribe-events .tribe-events-c-events-bar__search-button-text,
.fox-tec .tribe-events .tribe-events-c-view-selector__button-text {
	position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
	clip: auto !important; clip-path: none !important; overflow: visible !important; white-space: nowrap;
	font: 500 var(--fs-chip)/1.2 var(--font-sans); color: inherit;
}
/* TEC hides the search button and blocks Today with !important at its medium
   breakpoint; these are the only !important rules that fight it. */
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar .tribe-events-c-events-bar__search-button { display: inline-flex !important; visibility: visible; }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-top-bar__today-button { display: inline-flex !important; align-items: center; justify-content: center; }

/* Wide screens: the search form opens as a white panel under the button. */
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-container {
	display: none;
	position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; left: auto;
	width: min(520px, 80vw); padding: var(--space-3);
	background: var(--c-white); border: 1px solid var(--tone-border-strong); border-radius: var(--radius-img);
	box-shadow: var(--shadow-card);
}
.fox-tec .tribe-common--breakpoint-medium.tribe-events .fox-search-open .tribe-events-c-events-bar__search-container { display: block; }
.fox-tec .tribe-events .tribe-events-c-search__input-control .tribe-events-c-search__input,
.fox-tec .tribe-events .tribe-events-c-search__input {
	min-height: 48px; padding: 11px 14px 11px 44px; box-sizing: border-box;
	background-color: var(--tone-field-bg); color: var(--tone-field-fg);
	border: 1px solid var(--tone-field-border); border-radius: var(--radius-field);
	font: 400 1rem/1.4 var(--font-sans);
}
.fox-tec .tribe-events .tribe-events-c-search__input::placeholder { color: var(--tone-placeholder); opacity: 1; }
.fox-tec .tribe-events .tribe-events-c-search__input-control-icon-svg path { fill: var(--tone-icon); }
.fox-tec .tribe-events .tribe-events-c-search__button {
	min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-btn);
	background: var(--c-gold); color: #141414;
	font: 500 var(--fs-btn)/1 var(--font-sans); letter-spacing: var(--tracking-btn); text-transform: uppercase;
}
.fox-tec .tribe-events .tribe-events-c-search__button:hover { background: var(--c-gold-hover); }

/* View switch: a pill-shaped segmented control; the active view takes the chip fill. */
.fox-tec .tribe-events .tribe-events-c-view-selector__list-item-link { min-height: 44px; display: flex; align-items: center; }
.fox-tec .tribe-events .tribe-events-c-view-selector__list-item-text { font: 500 var(--fs-chip)/1.2 var(--font-sans); letter-spacing: 0; color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text { color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-c-view-selector__list-item-link::after,
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after { display: none; }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list {
	gap: 2px; padding: 3px; border: 1px solid var(--tone-chip-border); border-radius: var(--radius-pill); background: transparent;
}
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item { margin: 0; height: auto; }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link { min-height: 38px; padding: 0 18px; border-radius: var(--radius-pill); }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item:hover .tribe-events-c-view-selector__list-item-link { background: var(--tone-chip-fill); }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link { background: var(--tone-chip-fill); box-shadow: inset 0 0 0 1px var(--tone-chip-active-border); }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__content { background: none; border: 0; box-shadow: none; }
/* Phone dropdown. */
.fox-tec .tribe-events .tribe-events-c-view-selector__content {
	background: var(--c-white); border: 1px solid var(--tone-border-strong); border-radius: var(--radius-img); box-shadow: var(--shadow-card);
}
.fox-tec .tribe-events .tribe-events-c-view-selector__list-item--active { background: var(--tone-chip-fill); }
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item,
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active { background: transparent; }
.fox-tec .tribe-common.tribe-events .tribe-events-header__events-bar,
.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-header__events-bar .tribe-events-c-events-bar__views,
.fox-tec .tribe-common.tribe-events .tribe-events-c-events-bar__views,
.fox-tec .tribe-common.tribe-events .tribe-events-c-view-selector { background: none; border: 0; box-shadow: none; overflow: visible; }
.fox-tec .tribe-common.tribe-events .tribe-events-header__events-bar { display: flex; align-items: center; gap: var(--space-2); }

/* Top bar: prev/next, Today and the date sit in one row under the controls. */
.fox-tec .tribe-events .tribe-events-c-top-bar { margin-top: 0; }
.fox-tec .tribe-events .tribe-events-c-top-bar__nav-link {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--tone-chip-border); border-radius: var(--radius-pill); background: transparent;
}
.fox-tec .tribe-events .tribe-events-c-top-bar__nav-link:not([disabled]):hover { background: var(--tone-chip-fill); border-color: var(--tone-chip-active-border); }
.fox-tec .tribe-events .tribe-events-c-top-bar__nav-link-icon-svg path { fill: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-c-top-bar__nav-link[disabled] .tribe-events-c-top-bar__nav-link-icon-svg path { fill: var(--tone-placeholder); }
/* The date control reads as a control (UI sans, control size), not a title;
   the full label shows at every width ("October 2026"). */
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font: 500 var(--fs-chip)/1.2 var(--font-sans); letter-spacing: 0; color: var(--tone-heading);
}
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-mobile { display: none !important; }
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-desktop,
.fox-tec .tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-desktop.tribe-common-a11y-hidden {
	display: inline !important; font: inherit; color: inherit;
	position: static !important; width: auto !important; height: auto !important; margin: 0 !important;
	clip: auto !important; clip-path: none !important; overflow: visible !important;
	visibility: visible !important; opacity: 1 !important; white-space: nowrap;
}
.fox-tec .tribe-events .tribe-events-c-top-bar__datepicker-button-icon-svg { width: 12px; height: 12px; }
.fox-tec .tribe-events .tribe-events-c-top-bar__datepicker-button-icon-svg path { fill: var(--tone-icon); }

@media (max-width: 767px) {
	/* Phones: Search and the view switch get their own line, start-aligned. */
	.fox-tec .tribe-common.tribe-events .tribe-events-header { flex-direction: row; }
	.fox-tec .tribe-common.tribe-events .tribe-events-header__events-bar { flex: 0 0 100%; justify-content: flex-start; margin: 0; }
	.fox-tec .tribe-common.tribe-events .tribe-events-header__top-bar { flex: 0 0 100%; }
}

/* Bootstrap datepicker (appended to the view) */
.fox-tec .tribe-events .datepicker,
.tribe-events .datepicker {
	background: var(--c-white); color: var(--c-ink-2);
	border: 1px solid var(--c-chip-border); border-radius: var(--radius-img); box-shadow: var(--shadow-card);
	font-family: var(--font-sans);
}
.tribe-events .datepicker .datepicker-switch,
.tribe-events .datepicker .dow { color: var(--c-ink); font-family: var(--font-sans); font-weight: 500; }
.tribe-events .datepicker .day,
.tribe-events .datepicker .month,
.tribe-events .datepicker .year { color: var(--c-ink-2); }
.tribe-events .datepicker .day.old, .tribe-events .datepicker .day.new { color: var(--c-ink-3); font-weight: 400; }
.tribe-events .datepicker .day:hover, .tribe-events .datepicker .day.focused,
.tribe-events .datepicker .month:hover, .tribe-events .datepicker .month.focused,
.tribe-events .datepicker .year:hover, .tribe-events .datepicker .year.focused,
.tribe-events .datepicker .datepicker-switch:hover, .tribe-events .datepicker .prev:hover, .tribe-events .datepicker .next:hover { background: var(--c-chip-fill); color: var(--c-ink); }
.tribe-events .datepicker .day.active, .tribe-events .datepicker .month.active, .tribe-events .datepicker .year.active,
.tribe-events .datepicker .day.active:hover, .tribe-events .datepicker .month.active:hover { background: var(--c-ink); color: var(--c-white); }
.tribe-events .datepicker .day.current, .tribe-events .datepicker .month.current { color: var(--c-ink); font-weight: 700; }

/* Messages ("There are no upcoming events", "Showing …") */
.fox-tec .tribe-events .tribe-events-c-messages__message {
	font-family: var(--font-sans); font-size: var(--fs-small); padding: var(--space-4) var(--space-5);
	background: var(--tone-surface); border: 1px solid var(--tone-border); border-radius: var(--radius-img); color: var(--tone-text);
}
.fox-tec .tribe-events .tribe-events-c-messages__message-list-item-link { color: var(--tone-link); text-decoration: underline; }

/* --------------------------------------------------------------------------
   3. List view rows (tribe/events/v2/list/event.php): the event card as a
   row. Photo 4:3 radius 14, title 500, grey sublines, hairline between rows.
   ----------------------------------------------------------------------- */

.fox-tec .tribe-events .tribe-events-calendar-list__month-separator { margin: var(--space-6) 0 0; padding: 0; align-items: center; }
.fox-tec .tribe-events .tribe-events-calendar-list__month-separator-text {
	font: 500 var(--fs-kicker)/1.2 var(--font-sans); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--tone-accent);
}
.fox-tec .tribe-events .tribe-events-calendar-list__month-separator::after { background: var(--tone-border); }
.fox-tec .tribe-events .tribe-events-calendar-list__event-row.fox-evrow,
.fox-tec .tribe-events .fox-evrow--day {
	display: block; margin: 0; padding: var(--space-5) 0; border-bottom: 1px solid var(--tone-border);
}
.fox-tec .tribe-events .tribe-events-calendar-list__month-separator + .tribe-events-calendar-list__event-row.fox-evrow { padding-top: var(--space-4); }
.fox-tec .tribe-events .tribe-events-calendar-list__event-row.fox-evrow:last-child,
.fox-tec .tribe-events .fox-evrow--day:last-child { border-bottom: 0; }
.fox-tec .tribe-events .tribe-events-calendar-list__event-wrapper.fox-evrow__wrap { flex: none; width: 100%; max-width: none; margin: 0; padding: 0; }
.fox-evrow__card.tribe-events-calendar-list__event,
.fox-tec .tribe-common .tribe-events-calendar-list__event.fox-evrow__card {
	position: relative; isolation: isolate;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--space-5);
	margin: 0; padding: 0; background: none; border: 0; overflow: visible;
}
/* Venue-listing row: date block | photo | text | actions (Details, RSVP) on
   the right. The date block starts at 700px and is left out of Day view (the
   whole page is one date); under 1000px the actions sit under the text. */
.fox-evrow__date { display: none; }
@media (min-width: 700px) {
	.fox-evrow__card.tribe-events-calendar-list__event,
	.fox-tec .tribe-common .tribe-events-calendar-list__event.fox-evrow__card {
		grid-template-columns: 64px 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "date media body" "date media actions"; row-gap: var(--space-3);
	}
	.fox-evrow--day .fox-evrow__card.tribe-events-calendar-list__event,
	.fox-tec .tribe-common .fox-evrow--day .tribe-events-calendar-list__event.fox-evrow__card {
		grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "media body" "media actions";
	}
	.fox-evrow__date {
		grid-area: date; align-self: center; display: flex; flex-direction: column; align-items: center;
		margin: 0; text-align: center; color: var(--tone-heading); line-height: 1;
	}
	.fox-evrow--day .fox-evrow__date { display: none; }
	.fox-evrow__date-wd, .fox-evrow__date-m { font-size: var(--fs-fine); font-weight: 500; letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
	.fox-evrow__date-wd { color: var(--tone-muted); }
	.fox-evrow__date-d { margin: 6px 0 5px; font-size: 2.5rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
	.fox-evrow__date-m { color: var(--tone-gold); }
	.fox-evrow__media { grid-area: media; }
	.fox-tec .tribe-events .fox-evrow__body.tribe-events-calendar-list__event-details { grid-area: body; align-self: end; }
	.fox-tec .tribe-events .fox-evrow__actions { grid-area: actions; align-self: start; }
}
@media (min-width: 1000px) {
	.fox-evrow__card.tribe-events-calendar-list__event,
	.fox-tec .tribe-common .tribe-events-calendar-list__event.fox-evrow__card {
		grid-template-columns: 72px 280px minmax(0, 1fr) auto; grid-template-rows: auto;
		grid-template-areas: "date media body actions"; gap: var(--space-6);
	}
	.fox-evrow--day .fox-evrow__card.tribe-events-calendar-list__event,
	.fox-tec .tribe-common .fox-evrow--day .tribe-events-calendar-list__event.fox-evrow__card {
		grid-template-columns: 280px minmax(0, 1fr) auto; grid-template-areas: "media body actions";
	}
	.fox-tec .tribe-events .fox-evrow__body.tribe-events-calendar-list__event-details { align-self: center; }
	.fox-tec .tribe-events .fox-evrow__actions { align-self: center; flex-direction: column; align-items: flex-end; }
}
.fox-evrow__media {
	position: relative; aspect-ratio: 4 / 3; margin: 0; padding: 0; overflow: hidden;
	border-radius: var(--radius-img); background: var(--tone-media);
	transition: transform var(--dur-slow) var(--ease-premium), box-shadow var(--dur-slow) var(--ease-premium);
}
.fox-evrow__media > .fox-img, .fox-evrow__media > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fox-evrow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-premium), filter var(--dur-slow) ease; }
.fox-evrow__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(20, 20, 20, .16); opacity: 0; transition: opacity var(--dur-slow) var(--ease-premium); pointer-events: none; }
.fox-evrow__media .fox-card__flag { top: auto; right: auto; bottom: 10px; left: 10px; z-index: 2; }

.fox-tec .tribe-events .fox-evrow__body.tribe-events-calendar-list__event-details {
	min-width: 0; width: auto; max-width: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 6px; align-self: center;
}
.fox-evrow__body .tribe-events-calendar-list__event-header { display: flex; flex-direction: column; gap: 2px; margin: 0; }
/* TEC orders date -> title -> venue with flex `order`; the row reads title -> when -> where. */
.fox-tec .tribe-events .tribe-events-calendar-list__event-header .fox-evrow__title { order: 1; }
.fox-tec .tribe-events .tribe-events-calendar-list__event-header .fox-evrow__sub:not(.fox-evrow__where) { order: 2; }
.fox-tec .tribe-events .tribe-events-calendar-list__event-header .fox-evrow__where { order: 3; }
.fox-tec .tribe-events .fox-evrow__title { margin: 0 0 4px; font: 500 var(--fs-card-title)/1.25 var(--font-sans); letter-spacing: -.005em; color: var(--tone-heading); text-wrap: pretty; }
.fox-tec .tribe-events .fox-evrow__title a { color: inherit; border: 0; text-decoration: none; }
.fox-tec .tribe-events .fox-evrow__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; } /* the whole row opens the event */
.fox-tec .tribe-events .fox-evrow__title a:focus-visible { outline: none; }
.fox-evrow__card:has(.fox-evrow__link:focus-visible) { outline: 2px solid var(--tone-focus); outline-offset: 8px; border-radius: var(--radius-img); }
.fox-tec .tribe-events .fox-evrow__sub { margin: 0; font: 400 var(--fs-subline)/1.45 var(--font-sans); color: var(--tone-text); }
.fox-tec .tribe-events .fox-evrow__sub .tribe-events-calendar-list__event-datetime { color: inherit; font: inherit; }
.fox-evrow .fox-card__status { font-weight: 500; color: var(--tone-heading); }
.fox-evrow .fox-card__status.is-canceled { color: var(--tone-danger); }
/* An evening that has happened (the list runs past · today · upcoming): still
   there to read and to look at the photographs, quietly a step back. */
.fox-evrow .fox-card__status.is-past { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-fine); color: var(--tone-muted); }
/* Nothing in a past row is dimmed. The photographs ARE the reason the past is
   on the calendar — Fuente Friday is there so its twenty pictures stay
   reachable — so fading them undercut the whole point of the change. The quiet
   "Past" label carries the status on its own (removed 2026-10-20; it had been
   .72 opacity on the photo, and before that on the date too, which also put
   two labels under the contrast floor). */
.fox-evrow .fox-dot { padding-inline: .3em; }
.fox-tec .tribe-events .fox-evrow__text { margin: 4px 0 0; }
.fox-tec .tribe-events .fox-evrow__text p { margin: 0; color: var(--tone-muted); font-size: var(--fs-small); line-height: 1.55; max-width: 60ch; }
.fox-evrow__reason { margin: 4px 0 0; color: var(--tone-danger); font-size: var(--fs-small); }
.fox-evrow__fine { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font-size: var(--fs-fine); color: var(--tone-muted); }
.fox-evrow__price { color: var(--tone-heading); font-weight: 500; }
.fox-tec .tribe-events .fox-evrow__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; }
.fox-evrow__actions a { position: relative; z-index: 4; }
.fox-tec .tribe-events .fox-evrow__actions .fox-btn { padding: 0 18px; border: 1px solid var(--tone-btn-outline); color: var(--tone-btn-outline-fg); background: transparent; }
.fox-tec .tribe-events .fox-evrow__actions .fox-btn:hover { background: var(--tone-btn-outline-hover); }
/* Details: a quiet text link (the row is the link; the outline is for RSVP). */
.fox-tec .tribe-events .fox-evrow__more {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font: 500 var(--fs-small)/1.2 var(--font-sans); color: var(--tone-heading); white-space: nowrap;
}
.fox-evrow__more svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease-premium); }

/* Hover = keyboard focus (D5): the image lifts, the title underlines. */
@media (hover: hover) {
	.fox-evrow__card:hover .fox-evrow__media::after { opacity: 1; }
	.fox-evrow__card:hover .fox-evrow__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
	.fox-tec .tribe-events .fox-evrow__card:hover .fox-evrow__more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
.fox-evrow__card:has(.fox-evrow__link:focus-visible) .fox-evrow__media::after { opacity: 1; }
.fox-evrow__card:has(.fox-evrow__link:focus-visible) .fox-evrow__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (prefers-reduced-motion: no-preference) {
	.fox-evrow__card:hover .fox-evrow__more svg, .fox-evrow__card:has(.fox-evrow__link:focus-visible) .fox-evrow__more svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
	@media (hover: hover) {
		.fox-evrow__card:hover .fox-evrow__media { transform: translateY(-4px); box-shadow: var(--shadow-card); }
		.fox-evrow__card:hover .fox-evrow__media img { transform: scale(1.03); }
	}
	.fox-evrow__card:has(.fox-evrow__link:focus-visible) .fox-evrow__media { transform: translateY(-4px); box-shadow: var(--shadow-card); }
	.fox-evrow__card:has(.fox-evrow__link:focus-visible) .fox-evrow__media img { transform: scale(1.03); }
}

/* Canceled: the status leads subline 1 (MOCKUP 2.5, same as the card), the
   photo dims; never hidden, never struck through (legibility). */
.fox-evrow.is-canceled .fox-evrow__title a { color: var(--tone-text); }
.fox-evrow.is-canceled .fox-evrow__media img { filter: grayscale(.85) brightness(.75); }
.fox-evrow.is-canceled .fox-evrow__date, .fox-evrow.is-canceled .fox-evrow__date-m { color: var(--tone-muted); }

/* List nav (Previous / Next Events) */
.fox-tec .tribe-events .tribe-events-c-nav { border-top: 1px solid var(--tone-border); margin-top: var(--space-6); padding-top: var(--space-3); }
.fox-tec .tribe-events .tribe-events-c-nav__prev, .fox-tec .tribe-events .tribe-events-c-nav__next {
	min-height: 44px; font: 500 var(--fs-btn)/1.2 var(--font-sans); letter-spacing: var(--tracking-btn); text-transform: uppercase; color: var(--tone-heading);
}
.fox-tec .tribe-events .tribe-events-c-nav__prev:disabled, .fox-tec .tribe-events .tribe-events-c-nav__next:disabled { color: var(--tone-placeholder); }
.fox-tec .tribe-events .tribe-events-c-nav__prev:not(:disabled):hover, .fox-tec .tribe-events .tribe-events-c-nav__next:not(:disabled):hover { color: var(--tone-link-hover); }
.fox-tec .tribe-events .tribe-events-c-nav__prev-icon-svg path, .fox-tec .tribe-events .tribe-events-c-nav__next-icon-svg path { fill: currentColor; }
.fox-tec .tribe-events .tribe-events-c-nav__list { align-items: center; }
.fox-tec .tribe-events .tribe-events-c-nav__today { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0 4px; line-height: 1.2; }

/* Subscribe / export dropdown (list, month, day and the single event) */
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button,
.fox-evsingle .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; box-sizing: border-box;
	background: transparent; color: var(--tone-btn-outline-fg);
	border: 1px solid var(--tone-btn-outline); border-radius: var(--radius-btn);
}
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active,
.fox-evsingle .tribe-events-c-subscribe-dropdown__button:hover,
.fox-evsingle .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active { background: var(--tone-chip-fill); color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__button-text,
.fox-evsingle .tribe-events-c-subscribe-dropdown__button-text {
	color: inherit; background: transparent; border: 0; white-space: nowrap;
	font: 500 var(--fs-btn)/1.2 var(--font-sans); letter-spacing: var(--tracking-btn); text-transform: uppercase;
}
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__button svg,
.fox-evsingle .tribe-events-c-subscribe-dropdown__button svg { color: var(--tone-icon); }
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__button svg path,
.fox-evsingle .tribe-events-c-subscribe-dropdown__button svg path { fill: currentColor; }
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__content,
.fox-evsingle .tribe-events-c-subscribe-dropdown__content {
	background: var(--c-white); border: 1px solid var(--tone-border-strong); border-radius: var(--radius-img); box-shadow: var(--shadow-card);
}
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__list-item:hover,
.fox-evsingle .tribe-events-c-subscribe-dropdown__list-item:hover { background: var(--tone-chip-fill); }
.fox-tec .tribe-events .tribe-events-c-subscribe-dropdown__list-item-link,
.fox-evsingle .tribe-events-c-subscribe-dropdown__list-item-link { color: var(--tone-heading); font-family: var(--font-sans); min-height: 44px; display: flex; align-items: center; }
/* TEC's single-event rule (0,4,0) turns the open/hovered button to
   --tec-color-background, which the theme maps to transparent: the label
   vanished. Same light fill as the list's button, label and icons kept. */
body.single-tribe_events .fox-evsingle .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within, .tribe-events-c-subscribe-dropdown__button--active) { background: var(--tone-chip-fill); color: var(--tone-heading); }
body.single-tribe_events .fox-evsingle .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within, .tribe-events-c-subscribe-dropdown__button--active) :is(.tribe-events-c-subscribe-dropdown__button-text, svg) { color: var(--tone-heading); background: transparent; }
.fox-tec .tribe-common .tribe-events-c-subscribe-dropdown__button button:focus:not(:focus-visible),
.fox-evsingle .tribe-events-c-subscribe-dropdown__button button:focus:not(:focus-visible) { outline: none; }
/* App marks beside each option (subscribe-links/item.php). */
body .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__list-item a.fox-cal-link { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.fox-cal-link__icon { display: inline-flex; flex: none; width: 20px; height: 20px; color: var(--tone-heading); }
.fox-cal-link__icon svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   4. Month view: desktop grid with #E8E8E8 hairlines, readable chips, and
   the phone day picker + agenda.
   ----------------------------------------------------------------------- */

.fox-tec .tribe-events .tribe-events-calendar-month__header { margin-top: var(--space-4); }
.fox-tec .tribe-events .tribe-events-calendar-month__header-column { padding-bottom: 8px; }
.fox-tec .tribe-events .tribe-events-calendar-month__header-column-title {
	font: 500 var(--fs-kicker)/1.2 var(--font-sans); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--tone-accent);
}
.fox-tec .tribe-events .tribe-events-calendar-month__header-column-title-desktop { color: inherit; }
.fox-tec .tribe-events .tribe-events-calendar-month__body { border-color: var(--tone-border); }
.fox-tec .tribe-events .tribe-events-calendar-month__day { border-color: var(--tone-border); background: transparent; }
/* Past and other-month days are told apart by ground and weight, never by
   fading the numeral: #F3F3F3 ground, #444 numerals (AA). TEC fades the whole
   cell with opacity, so that is reset too. */
.fox-tec .tribe-events .tribe-events-calendar-month__day--past,
.fox-tec .tribe-events .tribe-events-calendar-month__day--other-month { background: var(--tone-surface); opacity: 1; }
.fox-tec .tribe-events .tribe-events-calendar-month__day-date-daynum {
	font: 500 var(--fs-h4)/1.2 var(--font-sans); color: var(--tone-heading);
}
.fox-tec .tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum,
.fox-tec .tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum,
.fox-tec .tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date,
.fox-tec .tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date { color: var(--tone-text); font-weight: 400; opacity: 1; }
.fox-tec .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum { font-weight: 700; color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-calendar-month__day--current { box-shadow: inset 0 2px 0 var(--c-ink); }

/* Event chips in the grid: white, 1px hairline, radius 6; no side tab (D7). */
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event {
	position: relative; margin-top: 6px; padding: 8px 10px;
	background: var(--c-white); border: 1px solid var(--tone-border-strong); border-radius: var(--radius-field);
	transition: background-color var(--dur-fast) ease;
}
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event:hover { background: var(--tone-chip-fill); }
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event-datetime { color: var(--tone-text); font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; }
.fox-month__where { color: var(--tone-text); }
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event-title { margin-top: 2px; font: 500 .875rem/1.35 var(--font-sans); }
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event-title-link { color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover { color: var(--tone-heading); text-decoration: underline; border-color: transparent; }
/* Canceled: the quiet list treatment (grey ground, muted title, the small red
   CANCELED label), not a red frame that made it the loudest thing on the grid. */
.fox-tec .tribe-events .tribe-events-calendar-month__calendar-event.tribe-events-status__list-event-canceled,
.fox-tec .tribe-events .tribe-events-status__list-event-canceled.tribe-events-calendar-month__calendar-event { border-color: var(--tone-border); background: var(--tone-surface); }
.fox-tec .tribe-events .tribe-events-status__list-event-canceled .tribe-events-calendar-month__calendar-event-title-link,
.fox-tec .tribe-events .tribe-events-status__list-event-canceled .tribe-events-calendar-month-mobile-events__mobile-event-title-link { color: var(--tone-text); }
.fox-tec .tribe-events .tribe-events-status-label__text--canceled,
.tribe-events .tribe-events-status-label__text--canceled { color: var(--tone-danger); font: 700 .75rem/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.fox-tec .tribe-events .tribe-events-status-label__text--postponed,
.tribe-events .tribe-events-status-label__text--postponed { color: var(--tone-heading); font: 700 .75rem/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.fox-tec .tribe-events .tribe-events-calendar-month__more-events-link { color: var(--tone-link); font-weight: 500; text-decoration: underline; }

/* Tooltips (tooltipster lives at the end of <body>, outside .fox-tec) */
.tribe-events-tooltip-theme.tooltipster-base { --tec-color-background-tooltip: var(--c-white); background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.tribe-events-tooltip-theme .tooltipster-box {
	background: var(--c-white) !important;
	border: 1px solid var(--c-chip-border) !important;
	border-radius: var(--radius-img) !important;
	box-shadow: var(--shadow-card) !important;
}
.tribe-events-tooltip-theme .tooltipster-content { padding: 14px 16px; color: var(--c-ink-2); font-family: var(--font-sans); }
.tribe-events-tooltip-theme .tooltipster-content > * { background: transparent; box-shadow: none; border-radius: 0; color: var(--c-ink-2); font-family: var(--font-sans); }
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-title,
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-title-link { font: 500 1.125rem/1.3 var(--font-sans); color: var(--c-ink); }
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-datetime { color: var(--c-ink-2); font-size: .875rem; }
.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-description { color: var(--c-ink-3); font-size: .875rem; }
.tribe-events-tooltip-theme .tooltipster-arrow-background { border-top-color: var(--c-white) !important; border-bottom-color: var(--c-white) !important; }
.tribe-events-tooltip-theme .tooltipster-arrow-border { border-top-color: var(--c-chip-border) !important; border-bottom-color: var(--c-chip-border) !important; }

/* Phone month: day buttons + the agenda under the grid */
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--mobile { min-height: 44px; color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--mobile:hover,
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--mobile:focus-visible { background: var(--tone-chip-fill); }
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--selected,
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--selected:hover,
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--selected:focus { background: var(--c-ink); }
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum { color: var(--c-white); }
.fox-tec .tribe-events .tribe-events-calendar-month__mobile-events-icon--event { background-color: var(--c-ink); }
.fox-tec .tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event { background-color: var(--c-white); }

.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events { background: transparent; }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-day { border-color: var(--tone-border); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__day-marker { background: var(--tone-surface); border-radius: var(--radius-field); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__day-marker-date,
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__day-marker-day { color: var(--tone-heading); font: 500 var(--fs-kicker)/1.3 var(--font-sans); letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event {
	position: relative; margin: 0; padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--tone-border); border-radius: 0;
}
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event:last-child { border-bottom: 0; }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime { color: var(--tone-text); font-size: var(--fs-small); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title { margin: 0 0 2px; font: 500 var(--fs-card-title)/1.25 var(--font-sans); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link { color: var(--tone-heading); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-cost { color: var(--tone-text); }
.fox-tec .tribe-events .tribe-events-calendar-month-mobile-events__more-events-link { color: var(--tone-link); }

/* --------------------------------------------------------------------------
   5. Day view: time separators in the kicker style, rows from
   parts/events/row.php (tribe/events/v2/day/event.php).
   ----------------------------------------------------------------------- */

.fox-tec .tribe-events .tribe-events-calendar-day { margin-top: var(--space-5); }
.fox-tec .tribe-events .tribe-events-calendar-day__time-separator { margin: var(--space-5) 0 0; align-items: center; }
.fox-tec .tribe-events .tribe-events-calendar-day__time-separator-text { color: var(--tone-accent); font: 500 var(--fs-kicker)/1.2 var(--font-sans); letter-spacing: var(--tracking-kicker); text-transform: uppercase; }
.fox-tec .tribe-events .tribe-events-calendar-day__time-separator::after { background: var(--tone-border); }

/* --------------------------------------------------------------------------
   6. Single event (tribe-events/single-event.php): photo + head band come
   from parts/page-head.php; this is the light body and the closing band.
   ----------------------------------------------------------------------- */

.fox-evsingle { display: block; }
.fox-evsingle .fox-pagehead .fox-evsingle__when { margin-top: 12px; font-size: var(--fs-lead); color: var(--c-warm-white); }
.fox-evsingle .fox-pagehead .fox-evsingle__where { margin: 8px 0 0; font-size: var(--fs-subline); color: var(--tone-text); }
.fox-evsingle .fox-pagehead .fox-evsingle__where a { color: var(--c-warm-white); text-decoration: underline; text-decoration-color: var(--tone-border-strong); text-underline-offset: 4px; }
.fox-evsingle .fox-pagehead .fox-evsingle__where a:hover { color: var(--c-gold); text-decoration-color: currentColor; }
.fox-evsingle .fox-pagehead .fox-evsingle__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.fox-evsingle .fox-pagehead .fox-badge { white-space: normal; }
.fox-evsingle.is-canceled .fox-mediahead img { filter: grayscale(.85) brightness(.75); }

.fox-evsingle__body { padding-top: var(--space-6); }
.fox-evsingle__status { margin: 0 0 var(--space-6); max-width: 980px; }
.fox-evsingle__status p { margin: 0; }
.fox-evsingle__status p + p { margin-top: var(--space-2); }
.fox-evsingle__status a { color: var(--tone-link); text-decoration: underline; text-underline-offset: 3px; }

.fox-evsingle .fox-evsingle__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); overflow: visible; }
@media (min-width: 1000px) {
	.fox-evsingle .fox-evsingle__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
	.fox-evsingle__aside { align-self: start; position: sticky; top: calc(var(--fox-header-h) + var(--fox-admin-bar, 0px) + var(--space-5)); }
}
.fox-evsingle .tribe-events-single-event-description { color: var(--tone-text); font-size: var(--fs-body); line-height: 1.6; }
.fox-evsingle .tribe-events-single-event-description p { margin: 0 0 1em; }
.fox-evsingle__disclaimer {
	margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-4);
	border: 1px solid var(--tone-border-strong); border-radius: var(--radius-field);
	font-size: var(--fs-small); color: var(--tone-muted);
}

.fox-evsingle__panel h2.fox-kicker { margin: 0 0 var(--space-4); }
.fox-evsingle__dl { margin: 0 0 var(--space-5); display: grid; gap: 0; }
.fox-evsingle__dl > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--tone-border); }
.fox-evsingle__dl > div:first-child { border-top: 0; padding-top: 0; }
.fox-evsingle__dl dt { margin: 0; padding-top: 2px; font: 500 var(--fs-fine)/1.4 var(--font-sans); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--tone-muted); }
.fox-evsingle__dl dd { margin: 0; color: var(--tone-heading); }
.fox-evsingle__dl dd a { color: var(--tone-heading); text-decoration: underline; text-decoration-color: var(--tone-border-strong); text-underline-offset: 3px; }
.fox-evsingle__dl dd a:hover { text-decoration-color: currentColor; }
.fox-evsingle__lounge { display: inline-flex; min-height: 32px; align-items: center; margin-right: var(--space-3); }
@media (pointer: coarse) {
	.fox-evsingle__lounge, .fox-evsingle dd > a { display: inline-flex; align-items: center; min-height: 44px; }
}
.fox-evsingle__tz { display: block; font-size: var(--fs-fine); color: var(--tone-muted); }

.fox-evsingle__cal .tribe-events.tribe-common { margin: 0; }
.fox-evsingle__cal .tribe-events-c-subscribe-dropdown__container { display: block; margin: 0; }
.fox-evsingle__cal .tribe-events-c-subscribe-dropdown { width: 100%; }
.fox-evsingle__cal .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button { width: 100%; justify-content: center; }
.fox-evsingle__cal .tribe-events-c-subscribe-dropdown__content { width: 100%; }

.fox-evsingle__foot {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
	margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--tone-border);
}
.fox-evsingle .fox-evsingle__nav .tribe-events-sub-nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; padding: 0; list-style: none; }
.fox-evsingle .fox-evsingle__nav li { margin: 0; }
.fox-evsingle .fox-evsingle__nav a {
	display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
	color: var(--tone-text); font-size: var(--fs-small); text-decoration: none;
}
.fox-evsingle .fox-evsingle__nav a:hover { color: var(--tone-heading); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 599px) {
	.fox-evsingle__foot { flex-direction: column; align-items: flex-start; }
	.fox-evsingle .fox-evsingle__nav .tribe-events-sub-nav { flex-direction: column; }
}
.fox-evsingle__visit-list { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.fox-evsingle__visit-list a { min-height: 44px; display: inline-flex; align-items: center; }

/* Print: the list should read as a plain schedule. */
@media print {
	.fox-evfilter__row, .fox-evfilter__clear, .fox-tec .tribe-events-c-events-bar, .fox-tec .tribe-events-c-top-bar__nav, .fox-evsingle__cal { display: none !important; }
}

/* --------------------------------------------------------------------------
   Phones and touch (Impeccable critique of the events page, theme 2.4.5)
   ----------------------------------------------------------------------- */
@media (max-width: 699px) {
	/* List: the "Upcoming" date picker cost a whole row above the first event;
	   Month view is the way to a date. "Today" in the bottom pager sat alone
	   between PREVIOUS and NEXT, and the list already starts today. */
	.fox-tec .tribe-events-view--list .tribe-events-c-top-bar { display: none; }
	.fox-tec .tribe-events-view--list .tribe-events-c-nav__list-item--today { display: none; }
	/* With the date row gone, the header padding plus the first month
	   separator's margin left a 48px hole above the first event; 16px total. */
	.fox-tec .tribe-events-view--list .tribe-events-header { padding-bottom: 0; }
	.fox-tec .tribe-events .tribe-events-calendar-list > .tribe-events-calendar-list__month-separator:first-child { margin-top: var(--space-4); }
}
@media (pointer: coarse) {
	.fox-tec .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link { min-height: 44px; }
	.fox-tec .tribe-events .tribe-events-calendar-month__day-date-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
	.fox-evsingle__where a,
	.fox-evsingle__status a { display: inline-flex; align-items: center; min-height: 44px; }
}


/* PAST / TODAY / UPCOMING inside the one list. Heavier than TEC's month
   separator, because these are the three groups the calendar is built around
   and the month lines sit underneath them. */
.fox-tec .tribe-events .fox-evgroup { margin: var(--space-5) 0 2px; padding: 0; border: 0; background: none; }
.fox-tec .tribe-events .fox-evgroup:first-child { margin-top: 0; }
.fox-tec .tribe-events .fox-evgroup__title {
	margin: 0; padding-bottom: 8px;
	border-bottom: 2px solid var(--tone-heading);
	font: 500 1rem/1.2 var(--font-sans);
	letter-spacing: .08em; text-transform: uppercase; color: var(--tone-heading);
}
/* A past group is a step back, not the headline act. */
.fox-tec .tribe-events #fox-ev-past .fox-evgroup__title { border-bottom-color: var(--tone-border); color: var(--tone-muted); }

/* --------------------------------------------------------------------------
   A core gallery block inside event (or page) content.

   Core lays its gallery out as a flex row whose items size to their content,
   which on the Fuente Friday event turned twenty 1600x1200 photographs into
   240px tiles (Andrus, 2026-10-20: "all gallery photos are small and cannot
   view/open/click?"). This gives it an explicit grid instead, and lets it out
   of the reading column — a column measured for prose is too narrow for a
   wall of photographs.

   inc/blocks.php wraps each image in a link to the full file and hands the
   gallery to the theme lightbox, so these tiles open.
   -------------------------------------------------------------------------- */
.fox-blockgallery.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: var(--space-3);
	margin: var(--space-5) 0;
	/* Out of the prose measure, up to the section's own width. */
	width: min(var(--fox-wrap-max, 1180px), calc(100vw - 2 * var(--fox-gutter)));
	margin-inline: calc(50% - min(var(--fox-wrap-max, 1180px), calc(100vw - 2 * var(--fox-gutter))) / 2);
}
.fox-blockgallery.wp-block-gallery > figure.wp-block-image {
	margin: 0;
	flex: none;          /* core's flex sizing no longer applies */
	width: auto;
}
.fox-blockgallery.wp-block-gallery > figure.wp-block-image > a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md, 10px);
	background: var(--tone-surface);
	cursor: zoom-in;
}
.fox-blockgallery.wp-block-gallery > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform var(--dur-slow, .4s) var(--ease-premium, ease);
}
.fox-blockgallery.wp-block-gallery > figure.wp-block-image > a:hover img,
.fox-blockgallery.wp-block-gallery > figure.wp-block-image > a:focus-visible img { transform: scale(1.03); }
.fox-blockgallery.wp-block-gallery > figure.wp-block-image > a:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 3px; }
.fox-blockgallery.wp-block-gallery figcaption {
	margin-top: 6px;
	font-size: var(--fs-fine, 13px);
	line-height: 1.45;
	color: var(--tone-muted);
}
@media (prefers-reduced-motion: reduce) {
	.fox-blockgallery.wp-block-gallery > figure.wp-block-image img { transition: none; }
	.fox-blockgallery.wp-block-gallery > figure.wp-block-image > a:hover img { transform: none; }
}
@media (max-width: 599px) {
	.fox-blockgallery.wp-block-gallery { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}

/* --------------------------------------------------------------------------
   Share panel (parts/share.php), to the client's screenshot of 2026-10-20:
   a white panel, the four targets two across, and a dark full-width
   "Copy link" under them.
   -------------------------------------------------------------------------- */
.fox-share__intro { margin: 6px 0 var(--space-3); color: var(--tone-text); font-size: var(--fs-fine, 14px); line-height: 1.55; }
.fox-share__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.fox-share__btn {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--tone-border); border-radius: var(--radius-sm, 8px);
	color: var(--tone-heading); text-decoration: none;
	font-size: var(--fs-fine, 14px); font-weight: 600;
	transition: border-color var(--dur, .2s) ease, background-color var(--dur, .2s) ease;
}
.fox-share__btn:hover { border-color: var(--tone-heading); background: var(--tone-surface); }
.fox-share__btn:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 2px; }
.fox-share__btn svg { width: 18px; height: 18px; flex: none; }
/* The design's Copy link is a FILLED dark button. .fox-btn--dark is the
   outline variant, so the fill is set here rather than bending that one. */
.fox-share__copy { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	background: var(--c-band-dark); border-color: var(--c-band-dark); color: var(--c-white); }
.fox-share__copy:hover { background: #000; border-color: #000; color: var(--c-white); }
.fox-share__copy:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 2px; }
.fox-share__copy svg { width: 18px; height: 18px; flex: none; }
.fox-share__done:empty { display: none; }
.fox-share__done { margin: 10px 0 0; font-size: var(--fs-fine, 13px); color: var(--tone-muted); }

/* The same panel inside the dialog the head's "Share event" button opens. */
.fox-sharedlg { border: 0; padding: 0; background: transparent; max-width: min(420px, calc(100vw - 32px)); }
.fox-sharedlg::backdrop { background: rgba(20, 20, 20, .72); }
.fox-sharedlg .fox-share { margin: 0; }
.fox-sharedlg__close { position: absolute; top: 10px; right: 10px; }

/* --------------------------------------------------------------------------
   Event body blocks, to the client's design of 2026-10-20
   (Screenshot 6.51.59 PM): the times as dark tiles with a gold label, and the
   "Important" notes in a bordered panel.

   These are ORDINARY EDITOR BLOCKS carrying a class, not template code: a
   group with .fox-evtile holds a small gold label and a large time, and a
   group with .fox-evnote holds the heading and its list. Writing up the next
   event means copying the block, not changing the theme.
   -------------------------------------------------------------------------- */
.fox-prose .fox-evtiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 599px) { .fox-prose .fox-evtiles { grid-template-columns: 1fr; } }

.fox-prose .fox-evtile {
	margin: 0;
	padding: 20px 22px;
	border-radius: var(--radius-sm, 8px);
	background: var(--c-band-dark);
	color: var(--c-white);
}
/* The label: gold, small, letterspaced — the same eyebrow the dark bands use. */
.fox-prose .fox-evtile > p:first-child {
	margin: 0 0 8px;
	color: var(--c-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
}
/* The time itself. */
.fox-prose .fox-evtile > p:last-child {
	margin: 0;
	color: var(--c-white);
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.fox-prose .fox-evnote {
	margin: var(--space-4) 0;
	padding: 22px 24px;
	border: 1px solid var(--tone-border);
	border-radius: var(--radius-sm, 8px);
	background: var(--c-white);
}
.fox-prose .fox-evnote > :first-child { margin-top: 0; }
.fox-prose .fox-evnote > :last-child { margin-bottom: 0; }
.fox-prose .fox-evnote h3,
.fox-prose .fox-evnote h4 { font-size: var(--fs-fine, 15px); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   The aside panels (Event details / Share / "Were you there?")
   -------------------------------------------------------------------------- */
.fox-evsingle__panel { background: var(--tone-surface); border: 0; }
.fox-evsingle__tz { display: block; font-size: var(--fs-fine, 13px); color: var(--tone-muted); }

/* The dark call to action under the share panel. */
.fox-evsingle__addcta {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
	background: var(--c-band-dark); color: var(--c-white);
	text-decoration: none; border: 0;
}
.fox-evsingle__addcta .fox-kicker { grid-column: 1; color: var(--c-gold); margin: 0 0 4px; }
.fox-evsingle__addcta-title { grid-column: 1; font-weight: 700; font-size: var(--fs-lead, 17px); color: var(--c-white); }
.fox-evsingle__addcta svg { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--c-gold); transition: transform var(--dur, .2s) ease; }
.fox-evsingle__addcta:hover svg { transform: translateX(3px); }
.fox-evsingle__addcta:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fox-evsingle__addcta svg { transition: none; } .fox-evsingle__addcta:hover svg { transform: none; } }

/* --------------------------------------------------------------------------
   The album grid
   -------------------------------------------------------------------------- */
.fox-evalbum__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.fox-evalbum__heading h2 { margin: 4px 0 0; }
.fox-evalbum__meta { margin: 8px 0 0; color: var(--tone-muted); font-size: var(--fs-fine, 14px); }
.fox-evalbum__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4) var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (max-width: 999px) { .fox-evalbum__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) { .fox-evalbum__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-2); } }
.fox-evalbum__item { margin: 0; }
.fox-evalbum__link { display: block; overflow: hidden; border-radius: var(--radius-sm, 8px); background: rgba(255, 255, 255, .06); cursor: zoom-in; }
.fox-evalbum__link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow, .4s) var(--ease-premium, ease); }
.fox-evalbum__link:hover img, .fox-evalbum__link:focus-visible img { transform: scale(1.04); }
.fox-evalbum__link:focus-visible { outline: 2px solid var(--c-focus-dark); outline-offset: 3px; }
.fox-evalbum__caption { margin: 10px 0 0; font-size: var(--fs-fine, 14px); font-weight: 700; line-height: 1.35; color: var(--c-warm-white); }
.fox-evalbum__text { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-sand); }
@media (prefers-reduced-motion: reduce) { .fox-evalbum__link img { transition: none; } .fox-evalbum__link:hover img { transform: none; } }

/* The note's list sits inside the panel's padding rather than hanging out of
   it, and wrapped lines line up under the first word, not under the bullet. */
.fox-prose .fox-evnote ul { margin: 0; padding-left: 1.25em; list-style: disc; }
.fox-prose .fox-evnote li { margin: 0 0 6px; padding-left: .15em; }
.fox-prose .fox-evnote li::marker { color: var(--tone-muted); }
.fox-prose .fox-evnote li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   "Add your photos to the album" (fox_core_photo_form), to the client's
   screenshot of 2026-10-20: the invitation on the left, a white panel of
   fields on the right.
   -------------------------------------------------------------------------- */
.fox-evsubmit__grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) {
	.fox-evsubmit__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
}
.fox-evsubmit__intro h2 { margin: 4px 0 var(--space-3); }
.fox-evsubmit__rules { margin: var(--space-3) 0 0; padding-left: 1.25em; list-style: disc; color: var(--tone-text); font-size: var(--fs-fine, 15px); line-height: 1.6; }
.fox-evsubmit__rules li { margin-bottom: 6px; }
.fox-evsubmit__rules li::marker { color: var(--tone-muted); }

.fox-evsubmit__form .fox-form {
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--tone-border);
	border-radius: var(--radius-md, 12px);
	background: var(--c-white);
}
.fox-photoform__row { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .fox-photoform__row { grid-template-columns: 1fr 1fr; } }

/* The file field reads as a drop area rather than a bare browser button. */
.fox-photoform__drop {
	padding: 18px;
	border: 1px dashed var(--tone-border);
	border-radius: var(--radius-sm, 8px);
	background: var(--tone-surface);
}
.fox-photoform__drop input[type="file"] { width: 100%; font-size: var(--fs-fine, 14px); color: var(--tone-text); }
.fox-photoform__drop input[type="file"]:focus-visible { outline: 2px solid var(--tone-focus); outline-offset: 2px; }
.fox-field__optional { font-weight: 400; color: var(--tone-muted); }