/**
 * SFFilm TEC Photo View Styles
 *
 * Overrides TEC Pro's photo view to match SFFilm Figma design.
 * Conditionally enqueued only on event views.
 *
 * Figma reference: node 9999:7251
 *
 * TEC uses container-based breakpoint classes (not CSS media queries):
 *   .tribe-common--breakpoint-xsmall  (~660px+)
 *   .tribe-common--breakpoint-medium  (~768px+)
 *
 * Design tokens from theme.json:
 *   --wp--preset--font-family--instrument-sans
 *   --wp--preset--font-family--fragment-mono
 *   --wp--preset--color--base          (#FFFFFF)
 *   --wp--preset--color--contrast      (#000000)
 *   --wp--preset--color--accent-1      (#4F51F8 — brand indigo)
 *   --wp--preset--color--accent-2      (#F2F2F2 — light gray)
 *   --wp--preset--color--accent-4      (#BBBAB8 — gray)
 */

/* ==========================================================================
   1. Grid Layout — Override TEC's flexbox with CSS Grid
   Figma: grid-cols 3, gap-x 16px, gap-y 40px, py 24px
   ========================================================================== */

.tribe-events-pro .tribe-events-pro-photo .tribe-common-g-row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 40px;
	flex-wrap: unset;
	margin: 0 !important;
	padding: 24px 0;
}

/* Override TEC's per-breakpoint column widths */
.tribe-events-pro .tribe-events-pro-photo__event,
.tribe-common--breakpoint-xsmall.tribe-events-pro .tribe-events-pro-photo__event,
.tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-photo__event {
	width: auto !important;
	max-width: unset;
	flex: unset;
	padding: 0;
	margin-bottom: 0;
}

/* Override TEC's gutter padding */
.tribe-events-pro .tribe-common-g-row--gutters > .tribe-common-g-col.tribe-events-pro-photo__event,
.tribe-common--breakpoint-medium.tribe-events-pro .tribe-common-g-row--gutters > .tribe-common-g-col.tribe-events-pro-photo__event {
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   2. Card — Image
   Figma: aspect-ratio 5/4, overflow hidden, rgba(0,0,0,0.2) overlay

   All card selectors are scoped under .tribe-common to beat TEC's
   aggressive reset styles (.tribe-common h3, .tribe-common a, etc.)
   ========================================================================== */

.tribe-common .sffilm-photo-card__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Reset TEC's default image wrapper */
.tribe-events-pro .tribe-events-pro-photo__event-featured-image-wrapper {
	flex: none;
	margin-bottom: 0;
}

.tribe-common .sffilm-photo-card__image-link {
	display: block;
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

/* Override TEC's grid layout image sizing (padding-top: 56.25%) */
.tribe-events-pro.tribe-events-pro-photo--grid .sffilm-photo-card .sffilm-photo-card__image-link {
	padding-top: 0;
	max-width: unset;
}

/* Override .tribe-common img { height: auto } from TEC's common-skeleton.css */
.tribe-common .sffilm-photo-card__image-link img.sffilm-photo-card__image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.tribe-common .sffilm-photo-card__image-link:hover .sffilm-photo-card__image {
	transform: scale(1.03);
}

.tribe-common .sffilm-photo-card__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
	transition: background 0.3s ease;
}

.tribe-common .sffilm-photo-card__image-link:hover .sffilm-photo-card__overlay {
	background: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   3. Card — Content
   Figma: gap 8px between text elements, 16px gap between image and text
   ========================================================================== */

.tribe-common .sffilm-photo-card__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 16px;
}

/* Title — Figma: Instrument Sans Bold, 32px/38px, -0.5px tracking */
/* stylelint-disable property-no-vendor-prefix -- required for line-clamp */
.tribe-common .sffilm-photo-card__title {
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	letter-spacing: -0.5px;
	margin: 0;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* stylelint-enable property-no-vendor-prefix */

.tribe-common .sffilm-photo-card__title a {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.tribe-common .sffilm-photo-card__title a:hover {
	text-decoration: underline;
}

/* Film meta — Figma: Instrument Sans Regular, 16px/22px, rgba(0,0,0,0.75) */
.tribe-common .sffilm-photo-card__film-meta {
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.75);
	margin: 0;
}

/* Date & Venue — Figma: flex-wrap, horizontal layout, 8px gap between items
   Date and venue appear on the same line when space allows */
.tribe-common .sffilm-photo-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-top: 8px;
}

/* Figma: Fragment Mono Regular, 16px/22px, uppercase, 4px icon-text gap */
.tribe-common .sffilm-photo-card__date,
.tribe-common .sffilm-photo-card__venue {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}

.tribe-common .sffilm-photo-card__icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   4. Card — Chips / Badges
   Figma: RECTANGULAR (no border-radius), Fragment Mono 16px, 1.2px spacing
   Background: #4F51F8, padding 4px 8px, uppercase white text
   ========================================================================== */

.tribe-common .sffilm-photo-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 8px;
}

.tribe-common .sffilm-photo-card__chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent-1);
	padding: 4px 8px;
	border-radius: 0;
	white-space: nowrap;
}

/* ==========================================================================
   5. Events Bar — Search input, button, view selector, filter toggle
   Figma: All inside one container with 1px black border, padding 17px
   All selectors scoped under .tribe-common to beat TEC's resets.
   ========================================================================== */

/* Unified bordered container for the entire events bar
   Figma: 80px total height (border-box), 1px black border, 17px padding */
.tribe-common.tribe-events .tribe-events-header__events-bar.tribe-events-c-events-bar {
	border: 1px solid #000 !important;
	border-radius: 0 !important;
	padding: 17px !important;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 80px;
	box-sizing: border-box;
}

/* Override TEC's border modifier */
.tribe-common.tribe-events .tribe-events-c-events-bar--border {
	border-color: #000 !important;
}

/* Search form layout */
.tribe-common.tribe-events .tribe-events-c-events-bar__search-container {
	flex: 1;
}

.tribe-common.tribe-events .tribe-events-c-search.tribe-events-c-events-bar__search-form {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Search input — Figma: Instrument Sans Medium, 20px/28px, height 40px, no border */
.tribe-common.tribe-events .tribe-events-c-search__input-control {
	flex: 1;
}

.tribe-common.tribe-events .tribe-events-c-search__input-group {
	display: flex;
	flex: 1;
	align-items: center;
}

/* Search input — Figma: icon 24px + 8px gap + text, so padding-left ~40px
   to clear TEC's absolutely-positioned search SVG icon */
.tribe-common.tribe-events .tribe-events-c-search__input.tribe-common-form-control-text__input,
.tribe-common.tribe-events .tribe-events-c-search__input {
	font-family: var(--wp--preset--font-family--instrument-sans) !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	line-height: 28px !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 6px 0 6px 40px !important;
	height: 40px !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	outline: none !important;
	box-shadow: none !important;
}

.tribe-common.tribe-events .tribe-events-c-search__input::placeholder {
	color: var(--wp--preset--color--accent-4) !important;
	font-weight: 500;
}

/* Search icon — Figma: 24×24, vertically centered */
.tribe-common.tribe-events .tribe-events-c-search__input-control-icon-svg {
	width: 24px !important;
	height: 24px !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%);
	color: var(--wp--preset--color--accent-4);
}

/* Search button — Figma: "SEARCH" + arrow_outward, black border, NOT filled
   Fragment Mono Regular, 16px/22px, 1.2px tracking, uppercase */
.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button {
	font-family: var(--wp--preset--font-family--fragment-mono) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast) !important;
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	height: 46px;
	box-sizing: border-box;
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button:hover,
.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button:focus {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Invert SVG icon color on hover */
.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button:hover .sffilm-photo-card__icon,
.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button:focus .sffilm-photo-card__icon {
	color: var(--wp--preset--color--base);
}

.tribe-common.tribe-events .tribe-common-c-btn.tribe-events-c-search__button .sffilm-photo-card__icon {
	flex-shrink: 0;
}

/* "Show Filters" button — Figma: Instrument Sans Regular, 16px/22px
   with grid_view icon + chevron, transparent background */
.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button {
	font-family: var(--wp--preset--font-family--instrument-sans) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--wp--preset--color--contrast) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	outline: none !important;
	box-shadow: none !important;
}

.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button:focus,
.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button:active,
.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* Filter bar panel — remove focus outline on the dropdown container */
.tribe-common.tribe-events .tribe-events-c-events-bar__filter-container,
.tribe-common.tribe-events .tribe-filter-bar {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.tribe-common.tribe-events .tribe-filter-bar:focus,
.tribe-common.tribe-events .tribe-filter-bar:focus-within {
	outline: none !important;
}

/* View selector — Figma: "Photo" + chevron, Instrument Sans Regular 16px */
.tribe-common.tribe-events .tribe-events-c-view-selector__button {
	font-family: var(--wp--preset--font-family--instrument-sans) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	color: var(--wp--preset--color--contrast) !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* ==========================================================================
   6. Top Bar — Today button, date picker, nav arrows
   Figma: "TODAY" bordered button + "Now - May 24" with chevron on left,
   "Sort by" with chevron on right. Separate row below search.
   ========================================================================== */

/* Top bar container — Figma: flex, space-between, items-center */
.tribe-common.tribe-events .tribe-events-c-top-bar.tribe-events-header__top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0;
	margin-bottom: 0;
	border-bottom: none;
}

/* Hide nav arrows — Figma doesn't show prev/next in the top bar.
   TEC's views-skeleton.css uses:
     .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-top-bar__nav { display: block !important }
   We need HIGHER specificity (extra ancestor) since our CSS loads first. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav,
.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav {
	display: none !important;
}

/* TODAY button — Figma: Fragment Mono Regular, 16px/22px, 1.2px tracking,
   uppercase, black border, transparent bg, px-24 py-12 */
.tribe-common.tribe-events .tribe-events-c-top-bar__today-button {
	font-family: var(--wp--preset--font-family--fragment-mono) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 22px !important;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast) !important;
	background: transparent !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	height: 46px;
	box-sizing: border-box;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tribe-common.tribe-events .tribe-events-c-top-bar__today-button:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Datepicker — Figma: Instrument Sans Medium, 24px/34px, -0.5px tracking */
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker {
	padding-left: 16px;
}

.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--wp--preset--font-family--instrument-sans) !important;
	font-weight: 500 !important;
	font-size: 24px !important;
	line-height: 34px !important;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--contrast) !important;
	background: transparent !important;
	border: none !important;
	padding: 4px 0 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}

.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button:hover {
	opacity: 0.7;
}

/* Datepicker caret icon */
.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button .tribe-events-c-top-bar__datepicker-button-icon-svg {
	width: 24px;
	height: 24px;
}

/* Top bar left/right layout — Figma: left group (today + datepicker),
   right group (sort dropdown), space-between */
.sffilm-top-bar__left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sffilm-top-bar__right {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* ==========================================================================
   6b. Sort Dropdown
   Figma: "Sort by" + chevron, Instrument Sans Regular 16px
   ========================================================================== */

.sffilm-sort-dropdown {
	position: relative;
}

.sffilm-sort-dropdown__toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

.sffilm-sort-dropdown__toggle:hover {
	opacity: 0.7;
}

.sffilm-sort-dropdown__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.sffilm-sort-dropdown__toggle[aria-expanded="true"] .sffilm-sort-dropdown__chevron {
	transform: rotate(180deg);
}

.sffilm-sort-dropdown__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 10;
	min-width: 180px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--contrast);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sffilm-sort-dropdown__option {
	display: block;
	width: 100%;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	background: transparent;
	border: none;
	cursor: pointer;
}

.sffilm-sort-dropdown__option:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--contrast);
}

.sffilm-sort-dropdown__option.is-active {
	font-weight: 600;
}

/* ==========================================================================
   7. Responsive Breakpoints
   ========================================================================== */

/* Tablet: 2 columns */
@media (max-width: 1023px) {
	.tribe-events-pro .tribe-events-pro-photo .tribe-common-g-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}

	.tribe-common .sffilm-photo-card__title {
		font-size: 26px;
		line-height: 32px;
	}
}

/* ==========================================================================
   Mobile: 1 column, compact events bar
   Figma: node 9999:8140
   Top bar:   [TODAY] [Now – May 24 ∨]
   Events bar: [Filters ∨] [⊞ Grid View ∨] [🔍]
   Sort dropdown hidden, search collapsed to toggle icon

   HTML order in <header>: events-bar → filter-bar → top-bar
   Figma visual order:     top-bar → events-bar → filter-bar
   → Use CSS order to resequence.
   ========================================================================== */

/* stylelint-disable property-no-vendor-prefix -- required for mask-image */
@media (max-width: 767px) {

	/* --- Grid: single column --- */
	.tribe-events-pro .tribe-events-pro-photo .tribe-common-g-row {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	/* --- Card: typography --- */
	.tribe-common .sffilm-photo-card__title {
		font-size: 24px;
		line-height: 30px;
	}

	.tribe-common .sffilm-photo-card__date,
	.tribe-common .sffilm-photo-card__venue {
		font-size: 14px;
		line-height: 20px;
	}

	.tribe-common .sffilm-photo-card__chip {
		font-size: 14px;
		line-height: 20px;
	}

	/* Card: meta wraps naturally (date + venue on same line when space allows) */
	.tribe-common .sffilm-photo-card__meta {
		gap: 4px 8px;
	}

	/* ==========================================================================
	   Header: reorder children so top-bar is visually first
	   HTML: events-bar (0) → filter-bar (1) → top-bar (2)
	   Figma: top-bar (-1) → events-bar (0) → filter-bar (1)
	   ========================================================================== */

	.tribe-common.tribe-events .tribe-events-header {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
	}

	/* All header children must be full-width (TEC's flex defaults shrink them) */
	.tribe-common.tribe-events .tribe-events-header > * {
		width: 100% !important;
		box-sizing: border-box;
	}

	.tribe-common.tribe-events .tribe-events-header .tribe-events-c-top-bar.tribe-events-header__top-bar {
		order: -1;
	}

	/* ==========================================================================
	   Top Bar: TODAY + datepicker only — sort dropdown hidden
	   ========================================================================== */

	/* Hide sort dropdown */
	.sffilm-top-bar__right {
		display: none !important;
	}

	/* Force-show TODAY button — TEC hides it via:
	   .tribe-common .tribe-common-a11y-hidden { display:none!important } (0,2,0)
	   We need higher specificity (0,4,0+) to win. */
	.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__today-button.tribe-common-a11y-hidden {
		display: inline-block !important;
		visibility: visible !important;
	}

	/* Keep nav arrows hidden (same high specificity) */
	.tribe-common.tribe-events .tribe-events-c-top-bar .tribe-events-c-top-bar__nav.tribe-common-a11y-hidden {
		display: none !important;
	}

	/* Top bar layout: flex row, left-aligned */
	.tribe-common.tribe-events .tribe-events-c-top-bar.tribe-events-header__top-bar {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.sffilm-top-bar__left {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
	}

	/* ==========================================================================
	   Events Bar: compact horizontal row — no border
	   Figma order: [Filters ∨] [⊞ Grid View ∨] [🔍]
	   ========================================================================== */

	.tribe-common.tribe-events .tribe-events-header__events-bar.tribe-events-c-events-bar,
	.tribe-common--breakpoint-medium.tribe-events .tribe-events-header__events-bar.tribe-events-c-events-bar {
		border: none !important;
		height: auto !important;
		padding: 16px 0 8px !important;
		flex-direction: row !important;
		align-items: center !important;
		flex-wrap: wrap;
		gap: 24px;
	}

	/* --- Filter button: order 1 — hide icon, show "Filters" + caret --- */
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button-container {
		order: 1;
	}

	/* Hide filter sliders icon on mobile */
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button .tribe-common-c-svgicon--filter {
		display: none !important;
	}

	/* Un-hide text span, replace "Show filters" with "Filters" via font-size trick */
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button .tribe-events-c-events-bar__filter-button-text {
		clip: auto !important;
		clip-path: none !important;
		height: auto !important;
		width: auto !important;
		overflow: visible !important;
		position: static !important;
		white-space: nowrap !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 0 !important;
	}

	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button .tribe-events-c-events-bar__filter-button-text::after {
		content: 'Filters';
		font-family: var(--wp--preset--font-family--instrument-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		color: var(--wp--preset--color--contrast);
	}

	/* Caret via button::after (matches TEC's caret-down SVG path) */
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button::after {
		content: '';
		display: inline-block;
		width: 10px;
		height: 7px;
		flex-shrink: 0;
		background-color: currentColor;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M1.008.609L5 4.6 8.992.61l.958.958L5 6.517.05 1.566l.958-.958z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath d='M1.008.609L5 4.6 8.992.61l.958.958L5 6.517.05 1.566l.958-.958z'/%3E%3C/svg%3E");
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	/* --- View selector: order 2 — keep TEC's native icon + "Photo" label + caret --- */
	.tribe-common.tribe-events .tribe-events-c-events-bar__views {
		order: 2;
		flex-shrink: 0;
		width: auto !important;
		max-width: none !important;
	}

	/* View selector button: flex row so icon + text + caret align.
	   TEC collapses this on small containers — force it open. */
	.tribe-common.tribe-events .tribe-events-c-view-selector__button {
		display: flex !important;
		align-items: center;
		gap: 4px;
		width: auto !important;
		max-width: none !important;
	}

	/* Force view selector icon SVG visible (TEC collapses it to 0px without breakpoint-medium) */
	.tribe-common.tribe-events .tribe-events-c-view-selector__button .tribe-events-c-view-selector__button-icon-svg {
		width: 18px !important;
		height: 18px !important;
		display: inline-block !important;
		flex-shrink: 0;
	}

	/* Un-hide view selector button text (overrides tribe-common-a11y-visual-hide) */
	.tribe-common.tribe-events .tribe-events-c-view-selector__button .tribe-events-c-view-selector__button-text {
		clip: auto !important;
		clip-path: none !important;
		height: auto !important;
		width: auto !important;
		overflow: visible !important;
		position: static !important;
		white-space: nowrap !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}

	/* Ensure caret is visible */
	.tribe-common.tribe-events .tribe-events-c-view-selector__button .tribe-events-c-view-selector__button-icon-caret-svg {
		display: inline-block !important;
		width: 10px;
		height: 7px;
		flex-shrink: 0;
	}

	/* Force view selector dropdown closed — TEC shows it expanded without
	   breakpoint-medium. Keep it as a toggle dropdown. */
	.tribe-common.tribe-events .tribe-events-c-view-selector__content {
		display: none !important;
	}

	.tribe-common.tribe-events .tribe-events-c-view-selector__content[aria-hidden="false"] {
		display: block !important;
	}

	/* --- Search toggle: order 3, rightmost (TEC's native mobile toggle) --- */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-button,
	.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-button {
		display: flex !important;
		align-items: center;
		justify-content: center;
		order: 3;
		margin-left: auto;
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		cursor: pointer;
	}

	.tribe-common.tribe-events .tribe-events-c-events-bar__search-button .tribe-common-c-svgicon--search {
		width: 20px;
		height: 20px;
		color: var(--wp--preset--color--contrast);
		fill: var(--wp--preset--color--contrast);
	}

	/* --- Search container: hidden by default, full-width when expanded --- */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container,
	.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar__search-container {
		display: none !important;
	}

	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] {
		display: block !important;
		order: 4;
		width: 100%;
		flex-basis: 100%;
		padding-top: 8px;
	}

	/* Search form layout when expanded: stack input + button vertically */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] .tribe-events-c-search.tribe-events-c-events-bar__search-form {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
		border: 1px solid var(--wp--preset--color--contrast);
		padding: 12px !important;
	}

	/* Input group: full width */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] .tribe-events-c-search__input-group {
		width: 100% !important;
		flex: none !important;
	}

	/* Input control: full width */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] .tribe-events-c-search__input-control {
		width: 100% !important;
		flex: none !important;
	}

	/* Input field: full width, visible placeholder */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] .tribe-events-c-search__input {
		width: 100% !important;
		box-sizing: border-box !important;
		font-size: 16px !important;
		height: 40px !important;
	}

	/* Submit button: full width, centered */
	.tribe-common.tribe-events .tribe-events-c-events-bar__search-container[aria-hidden="false"] .tribe-events-c-search__button {
		width: 100% !important;
		justify-content: center;
		box-sizing: border-box;
	}

	/* ==========================================================================
	   Datepicker calendar: scale down and reposition to fit viewport
	   TEC renders it inside .tribe-events-c-top-bar__datepicker (position:relative)
	   at x≈133, causing overflow on 375px screens.
	   ========================================================================== */

	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker {
		position: static !important;
	}

	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		z-index: 10;
	}

	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container .datepicker-dropdown {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		font-size: 12px;
	}

	/* Compact day cells */
	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container .datepicker table {
		width: 100%;
	}

	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container .datepicker td,
	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-container .datepicker th {
		padding: 4px 2px !important;
		width: 14.28% !important;
		text-align: center;
	}

	/* ==========================================================================
	   Remove black focus/active outlines on tap — all header controls except TODAY.
	   Uses :focus:not(:focus-visible) to preserve keyboard a11y.
	   ========================================================================== */

	.tribe-common.tribe-events .tribe-events-c-events-bar__search-button:focus:not(:focus-visible),
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button:focus:not(:focus-visible),
	.tribe-common.tribe-events .tribe-events-c-view-selector__button:focus:not(:focus-visible),
	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button:focus:not(:focus-visible),
	.tribe-common.tribe-events .tribe-events-c-search__button:focus:not(:focus-visible),
	.tribe-common.tribe-events .tribe-events-c-search__input:focus:not(:focus-visible) {
		outline: none !important;
		box-shadow: none !important;
		border-color: transparent !important;
	}

	.tribe-common.tribe-events .tribe-events-c-events-bar__search-button:active,
	.tribe-common.tribe-events .tribe-events-c-events-bar__filter-button:active,
	.tribe-common.tribe-events .tribe-events-c-view-selector__button:active,
	.tribe-common.tribe-events .tribe-events-c-top-bar__datepicker-button:active,
	.tribe-common.tribe-events .tribe-events-c-search__button:active {
		outline: none !important;
		box-shadow: none !important;
	}
}
/* stylelint-enable property-no-vendor-prefix */