/**
 * [mitff_programme] styling — matches "The Program Desktop - one day" mockup.
 *
 * Placeholder colours below (--mitff-color-*) are best-guess matches to the
 * mockup, NOT confirmed brand hex values. Swap them for the real MIT Future
 * Fest palette before launch. Mobile layout is a basic stacked fallback only
 * — full mobile design is a follow-up pass.
 */

.mitff-programme {
	--mitff-color-registration: #2f6fed;
	--mitff-color-panel: #e5225d;
	--mitff-color-reception: #2fb45a;
	--mitff-color-installation: #1fc8d6;
	--mitff-color-exhibition: #2f6fed;
	--mitff-color-walkingtour: #FFA500;
	--mitff-color-symposium: #C154C1;
	--mitff-color-futurelab: #E0AFFF;
	--mitff-color-experience: #32CD32;
	--mitff-color-performance: #FFEF00;
	--mitff-color-celebration: #FF46A2;
	--mitff-color-default: #888888;

	--mitff-color-think: #e5225d;
	--mitff-color-discover: #2fb45a;
	--mitff-color-move: #f2a900;
	--mitff-color-play: #7b3ff2;

	--mitff-color-keynote: #7b3ff2;
	--mitff-color-vip: #e5225d;
	--mitff-color-dropin: #1fc8d6;

	--mitff-border-color: #e2e2e2;
	--mitff-detail-bg: #f5f5f5;

	font-size: 15px;
	color: #111;

	/* When a filter is applied, JS scrolls this element into view via
	   scrollIntoView(). This keeps it from landing flush under a sticky
	   header — adjust to match your theme's actual fixed-nav height. */
	scroll-margin-top: 100px;
}

.mitff-programme-empty {
	color: #666;
}

/* Day heading */
.mitff-day {
	margin-bottom: 40px;
}

.mitff-day__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.mitff-day__heading h2 {
	margin: 0;
	font-size: 1.5em;
	font-weight: 700;
}

/* Groups the drop-in block's title with its note directly underneath (see
   partial-dropin-block.php) so both sit as one flex item within
   .mitff-day__heading instead of the note becoming its own flex item and
   landing beside the title/toolbar on the same line. min-width: 0 stops a
   long title from being able to push .mitff-day__toolbar (margin-left:
   auto) out of the row. */
.mitff-day__heading-text {
	min-width: 0;
}

.mitff-day__arrow {
	display: inline-flex;
	color: #111;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.mitff-day__arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Toolbar (Tags filter + search) — only printed once, on the first day's
   heading row, and pushed to the far right of that flex row via
   margin-left: auto so it sits on the same line as "Wednesday, September
   30". The Tags filter sits to the left of the search box within it. */
.mitff-day__toolbar {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.mitff-filter-standalone {
	/* No gap here — .mitff-filter already carries its own margin-left to
	   space itself from the label text, same as the header-row columns. */
	position: relative;
	display: flex;
	align-items: center;
	font-size: 0.85em;
	font-weight: 600;
	flex: 0 0 auto;
}

.mitff-search {
	position: relative;
	flex: 0 0 auto;
}

.mitff-search__input {
	width: 220px;
	height: 36px;
	padding: 0 40px 0 16px;
	border: none;
	border-radius: 18px;
	background: #f0f0f0;
	color: #111;
	font-size: 0.9em;
	font-family: "neue-haas-grotesk-text", sans-serif;
}

.mitff-search__input::placeholder {
	color: #888;
}

.mitff-search__input:focus {
	outline: 2px solid #7b3ff2;
	outline-offset: 1px;
}

.mitff-search__icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #666;
	pointer-events: none;
}

@media (max-width: 767px) {
	.mitff-day__heading {
		flex-wrap: wrap;
	}

	/* Category filter replaces the Event Type filter on mobile (see the
	   782px block below, which hides the header row's Type filter) — it
	   stays visible here and wraps onto its own line above search rather
	   than sharing a cramped line with it. */
	.mitff-day__toolbar {
		margin-left: 0;
		flex-wrap: wrap;
		flex: 1 1 100%;
	}

	.mitff-filter-standalone {
		flex: 1 1 100%;
	}

	.mitff-search {
		flex: 1 1 auto;
	}

	.mitff-search__input {
		width: 100%;
	}
}

/* Table */
.mitff-day__table {
	border-top: 1px solid var(--mitff-border-color);
}

.mitff-row {
	display: grid;
	grid-template-columns: 140px 110px 150px 1fr 260px;
	gap: 16px;
	align-items: stretch;
	padding: 0 8px;
	border-bottom: 1px solid var(--mitff-border-color);
	/* A little breathing room above a row when it's the target of a
	   #mitff-event-123 deep link and gets scrolled to. */
	scroll-margin-top: 20px;
}

/* On desktop this wrapper is invisible to layout — its column children
   act as direct grid items of .mitff-row, same as before it existed. On
   mobile it becomes the padded box (see media query), so the sibling
   .mitff-row__detail can bleed edge-to-edge off an unpadded card instead
   of fighting negative margins to cancel the card's own padding. */
.mitff-row__columns {
	display: contents;
}

/* Vertical spacing lives on each column (not the row) so a column's box —
   and any border on it — spans the row's full height edge-to-edge,
   reaching the grey divider lines above and below. */
.mitff-col {
	padding-top: 14px;
	padding-bottom: 14px;
}

.mitff-row--header {
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #111;
	padding-top: 4px;
}

.mitff-row--header .mitff-col {
	padding-top: 0;
	padding-bottom: 8px;
	/* Overrides .mitff-col--type's flex-start (used for the dot+label in
	   event rows) so the header label and its filter triangle line up on
	   the same vertical center. Also the positioning anchor for the filter
	   dropdown panel, so it can align to the label's left edge below. */
	display: flex;
	align-items: center;
	position: relative;
}

.mitff-row--event.is-expandable {
	cursor: pointer;
	/* Fast by default — this is what governs the hover highlight. The
	   deliberate slow fade-to-grey on open is a separate, more specific
	   rule below (.is-visible) so it can keep its own longer duration
	   without also slowing down hover response. */
	background-color: #fff;
	transition: background-color 0.15s ease;
}

.mitff-row--event.is-expandable.is-visible {
	/* Starts white; JS adds .is-visible a frame after opening, same timing
	   as .mitff-row__detail, so the top (type/mode/time/title/venue) area
	   fades to grey together with the panel underneath rather than only
	   the panel doing it. */
	background-color: var(--mitff-detail-bg);
	transition: background-color 1.2s ease;
}

/* Skip the hover tint once open — otherwise hovering an open card briefly
   fights with the grey it just faded to. */
.mitff-row--event.is-expandable:hover:not(.is-visible) {
	background: #fafafa;
}

.mitff-row--event.is-expandable:focus-visible {
	outline: 2px solid var(--mitff-color-registration);
	outline-offset: -2px;
}

/* Event Type column */
.mitff-col--type {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.mitff-type-dot {
	margin-top: 0.3em;
}

.mitff-type-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: var(--mitff-color-default);
}

.mitff-type-dot--registration { background: var(--mitff-color-registration); }
.mitff-type-dot--panel { background: var(--mitff-color-panel); }
.mitff-type-dot--reception { background: var(--mitff-color-reception); }
.mitff-type-dot--installation { background: var(--mitff-color-installation); }
.mitff-type-dot--exhibition { background: var(--mitff-color-exhibition); }
/* Slugs below match sanitize_html_class( strtolower( $event_type ) ) in
   MITFF_Render::get_row_data() — spaces are stripped entirely (not turned
   into hyphens), e.g. "Walking Tour" -> "walkingtour". */
.mitff-type-dot--walkingtour { background: var(--mitff-color-walkingtour); }
.mitff-type-dot--symposium { background: var(--mitff-color-symposium); }
.mitff-type-dot--futurelab { background: var(--mitff-color-futurelab); }
.mitff-type-dot--experience { background: var(--mitff-color-experience); }
.mitff-type-dot--performance { background: var(--mitff-color-performance); }
.mitff-type-dot--celebration { background: var(--mitff-color-celebration); }

.mitff-type-label {
	font-weight: 600;
}

/* Mode column */
.mitff-mode {
	display: inline-flex;
	align-items: center;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding-left: 8px;
	border-left: 3px solid var(--mitff-color-default);
}

.mitff-mode--think { border-color: var(--mitff-color-think); color: var(--mitff-color-think); }
.mitff-mode--discover { border-color: var(--mitff-color-discover); color: var(--mitff-color-discover); }
.mitff-mode--move { border-color: var(--mitff-color-move); color: var(--mitff-color-move); }
.mitff-mode--play { border-color: var(--mitff-color-play); color: var(--mitff-color-play); }

/* Time column */
.mitff-col--time {
	font-weight: 600;
	/* Was white-space: nowrap, but CSS grid doesn't clip an overflowing
	   nowrap text node at its column edge — it just bleeds into the next
	   grid cell, which visibly overlapped the Event column whenever the
	   time text ran long (e.g. a merged drop-in row's "Wed–Sat
	   6pm–9:30pm" — see MITFF_Render::build_dropin_time_lines()). Wrapping
	   within the column keeps the text inside its own cell instead; the
	   column is 150px, comfortably wide enough that a normal single time
	   range ("3:30pm - 4:45pm") still renders on one line as before. */
	overflow-wrap: break-word;
}

/* A drop-in row can have more than one .mitff-time-line — e.g. an
   installation whose hours change partway through the run prints
   "Thu 12pm–7pm" and "Fri–Sat 12pm–6pm" as two stacked lines instead of
   one (see MITFF_Render::build_dropin_time_lines()). */
.mitff-time-line + .mitff-time-line {
	margin-top: 4px;
}

/* "Exhibitions, Installations and more" block */
.mitff-dropin__note {
	margin: 4px 0 0;
	font-size: 0.85em;
	color: var(--mitff-color-default);
}

/* Event column */
.mitff-col--event {
	border-left: 5px solid transparent;
	padding-left: 12px;
}

/* Keynote accent line (desktop) — swaps the transparent border above for
   purple; layout is unaffected since the border-left was already reserving
   the space. */
.mitff-col--event--keynote {
	border-left-color: var(--mitff-color-keynote);
}

.mitff-event-title-line {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.mitff-event-title {
	font-weight: 700;
}

.mitff-badge {
	display: inline-block;
	font-size: 0.65em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	color: #fff;
	white-space: nowrap;
}

.mitff-badge--vip { background: var(--mitff-color-vip); }
.mitff-badge--dropin { background: var(--mitff-color-dropin); }
/* Badge only — no accent line/border alongside it, by request. */
.mitff-badge--keynote { background: var(--mitff-color-keynote); }

.mitff-event-subtitle {
	margin-top: 4px;
	color: #666;
	font-size: 0.9em;
}

/* Venue column */
.mitff-venue-name {
	font-weight: 600;
}

.mitff-venue-address {
	color: #666;
	font-size: 0.9em;
}

.mitff-maps-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	vertical-align: -3px;
	color: #111;
	text-decoration: none;
}

.mitff-maps-link svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ==========================================================
   Header-row filters (Event Type / Mode / Venue & Address)
   ========================================================== */
.mitff-filter {
	/* No position:relative here — .mitff-row--header .mitff-col is the
	   positioned ancestor instead, so the panel below can anchor to the
	   column/label's left edge rather than the trigger icon's position. */
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
}

.mitff-filter__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: none;
	color: #111;
	cursor: pointer;
}

.mitff-filter__trigger svg {
	transition: transform 0.15s ease;
}

.mitff-filter.is-open .mitff-filter__trigger svg {
	transform: rotate(180deg);
}

.mitff-filter__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 50;
	min-width: 200px;
	max-width: 280px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	padding: 12px;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	font-size: 14px;
	color: #111;
}

.mitff-filter__options {
	display: block;
	max-height: 240px;
	overflow-y: auto;
}

.mitff-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
	font-weight: 400;
}

.mitff-filter__option input {
	margin: 0;
	flex: 0 0 auto;
}

.mitff-filter__actions {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid #eee;
	text-align: right;
}

.mitff-filter__clear {
	border: none;
	background: none;
	padding: 0;
	font-size: 0.85em;
	text-decoration: underline;
	color: #666;
	cursor: pointer;
}

.mitff-active-filters {
	margin-bottom: 20px;
	padding: 10px 14px;
	background: #f5f5f5;
	border-radius: 4px;
	font-size: 14px;
}

.mitff-active-filter-item {
	text-transform: uppercase;
}

.mitff-clear-all-filters {
	border: none;
	background: none;
	padding: 0;
	font-size: 0.9em;
	text-decoration: underline;
	color: #111;
	cursor: pointer;
	font-weight: 600;
}

.mitff-no-matches {
	color: #666;
	padding: 16px 8px;
	margin: 0;
	font-size: 0.85em;
}

/* Expanded detail */
.mitff-row__detail {
	grid-column: 1 / -1;
	/* Starts white; JS adds .is-visible a frame after opening so this
	   transitions to grey instead of just appearing already-grey. */
	background-color: #fff;
	transition: background-color 1.2s ease;
	/* Bottom 6px (not the full -14px row bleed) leaves 20px of white space
	   between the panel and the row's bottom divider line. */
	margin: 0 -8px 6px;
	padding: 24px;
}

.mitff-row__detail.is-visible {
	background-color: var(--mitff-detail-bg);
}

.mitff-row.is-loading .mitff-row__detail::before {
	content: '';
}

.mitff-detail {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
}

/* Only shown on mobile (see media query below) — desktop already shows the
   full address on the collapsed row, so this would just be a duplicate. */
.mitff-detail__venue-mobile {
	display: none;
}

.mitff-detail__col--side {
	border-right: 1px solid #ddd;
	padding-right: 24px;
}

.mitff-detail__col--side-empty {
	border-right-color: transparent;
}

.mitff-detail__heading {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 10px;
}

/* Sponsor block — sits above Featuring/Tags in the left column when a row
   has one. Its heading reuses .mitff-detail__heading (same rule, applied
   via the shared class in the template) so it matches "Featuring"/"Tags"
   without a separate style to keep in sync. */
.mitff-sponsor {
	margin-bottom: 24px;
}

.mitff-sponsor__logo-link {
	display: inline-block;
}

.mitff-sponsor__logo {
	display: block;
	max-width: 150px;
	height: auto;
}

.mitff-detail__heading--tags {
	margin-top: 20px;
}

.mitff-credit-person {
	margin: 0 0 4px;
	font-size: 0.85em;
	line-height: 1.3;
}

.mitff-credit-group-label {
	margin: 20px 0 4px;
	font-size: 1em;
}

.mitff-credit-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.mitff-credit-list li {
	margin-bottom: 2px;
	font-size: 0.85em;
	line-height: 1.3;
}

.mitff-person-link {
	cursor: pointer;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mitff-person-plain {
	font-weight: 400;
}

.mitff-person-role {
	display: block;
	color: #666;
	font-size: 0.85em;
}

.mitff-tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mitff-tag-list li {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	font-size: 0.85em;
	line-height: 1.3;
}

.mitff-detail__subtitle {
	color: #444;
	margin-top: 0;
}

.mitff-error {
	color: #b00020;
}

/* ==========================================================
   Fonts — text everywhere by default, display for headings
   ========================================================== */
.mitff-programme,
#mitffSpeakerModal {
	font-family: "neue-haas-grotesk-text", sans-serif;
}

.mitff-day__heading h2,
.mitff-event-title,
.mitff-detail__heading,
#mitffSpeakerModal #mitffModalName {
	font-family: "neue-haas-grotesk-display", sans-serif;
}

.mitff-person-link,
.mitff-person-plain,
.mitff-detail__col--main p,
.mitff-detail__subtitle {
	font-size: 16px;
}

/* ==========================================================
   Speaker modal — matches the live theme's #speakerModal styling
   (see modules.css: corner-clip-topleft, ribbon badge, square image via
   aspect-ratio, scrollable biog column) rather than a generic Bootstrap
   look. The z-index/colour/body-reparenting rules below are the one set
   of additions this plugin makes on top of that — they fix real problems
   specific to dropping this modal into an arbitrary page (the theme's own
   modal never has to deal with a white-on-white text colour clash or a
   GSAP-transformed ancestor trapping position:fixed, because it always
   lives in the same known page context; this one can't assume that).
   ========================================================== */
#mitffSpeakerModal {
	z-index: 10000;
	color: #111;
}

#mitffSpeakerModal .modal-dialog {
	max-width: 1000px;
}

#mitffSpeakerModal .modal-content {
	border: none;
	border-radius: 0;
	overflow: hidden;
	color: #111;
	background: #fff;
}

#mitffSpeakerModal .modal-body {
	position: relative;
}

#mitffSpeakerModal .btn-close {
	z-index: 10;
	background-color: #fff;
	border-radius: 0;
	opacity: 1;
	padding: 0.5rem;
}

#mitffSpeakerModal #mitffModalImage {
	display: block;
	width: 417px;
	height: 417px;
	object-fit: cover;
}

@media (max-width: 767px) {
	#mitffSpeakerModal #mitffModalImage {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

#mitffSpeakerModal #mitffModalTextCol {
	height: 417px;
	overflow: hidden;
}

#mitffSpeakerModal #mitffModalBiog {
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	padding-top: 20px;
}

#mitffSpeakerModal #mitffModalBiog::-webkit-scrollbar {
	width: 6px;
}

#mitffSpeakerModal #mitffModalBiog::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#mitffSpeakerModal #mitffModalBiog::-webkit-scrollbar-thumb {
	background: #000;
}

#mitffSpeakerModal .modalname {
	font-size: clamp(24px, 3.5vw, 40px);
	font-weight: 700;
	font-family: "neue-haas-grotesk-display", sans-serif;
	padding-bottom: 20px;
	color: #111;
}

#mitffSpeakerModal .modaltitle {
	padding-bottom: 20px;
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: 400;
	line-height: 125%;
	font-family: "neue-haas-grotesk-text", sans-serif;
	color: #111;
}

#mitffSpeakerModal #mitffModalIntro,
#mitffSpeakerModal #mitffModalBiogText {
	color: #111;
}

#mitffSpeakerModal .modalebadge {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 12px 50%);
	padding: 6px 20px 6px 40px;
	text-transform: uppercase;
	border-radius: 0;
	margin-top: 10px;
}

#mitffSpeakerModal #mitffModalURL {
	margin-top: 16px;
}

#mitffSpeakerModal .mitff-modal-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #111;
	text-decoration: none;
	font-weight: 700;
}

/* Bootstrap appends the backdrop as a sibling at the end of <body>, so it
   can only be targeted generically — kept just below the modal itself. */
.modal-backdrop {
	z-index: 9990;
}

@media (max-width: 767px) {
	#mitffSpeakerModal #mitffModalTextCol {
		height: auto;
		min-height: 0;
		max-height: 60vh;
	}
}

/* ==========================================================
   Mobile — card-style rows instead of the desktop grid table.
   ========================================================== */
@media (max-width: 782px) {

	.mitff-day {
		margin-bottom: 32px;
	}

	.mitff-day__heading {
		margin-bottom: 8px;
	}

	.mitff-day__table {
		border-top: none;
	}

	/* Compact filter toolbar: Time/Event have no filter, so their header
	   labels add nothing on mobile and are hidden. Event Type / Mode /
	   Venue keep their triangle triggers, just laid out inline. */
	.mitff-row--header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 20px;
		padding: 10px 8px;
		margin-bottom: 4px;
	}

	.mitff-row--header .mitff-col {
		padding: 0;
		flex: 0 0 auto;
	}

	.mitff-row--header .mitff-col--time,
	.mitff-row--header .mitff-col--event {
		display: none;
	}

	/* Mode is dropped entirely on mobile — both its header filter and the
	   badge on each card — and the Venue & Address filter is hidden too
	   (the venue name/address themselves still show on the card; just not
	   the filter dropdown for it).
	   .mitff-row--header .mitff-col--mode is listed separately (rather than
	   relying on the plain .mitff-col--mode rule below to cover it) because
	   .mitff-row--header .mitff-col earlier in this file sets
	   display:flex at the same two-class specificity — a plain one-class
	   .mitff-col--mode { display:none } loses that fight regardless of
	   source order, so it needs a selector of matching specificity here. */
	.mitff-row--header .mitff-col--mode,
	.mitff-row--header .mitff-col--venue,
	.mitff-col--mode {
		display: none;
	}

	/* Event Type's filter is replaced by the Category filter on mobile
	   (kept visible in the toolbar above — see the 767px block). The dot +
	   label on each card is untouched: .mitff-col--type is shared between
	   this header row (hidden here) and each event row (not hidden), so
	   scoping to .mitff-row--header keeps the per-event badge showing. */
	.mitff-row--header .mitff-col--type {
		display: none;
	}

	/* Each event becomes a bordered card instead of a table row divided
	   by a single grey line — reads more clearly at narrow widths. The
	   card itself carries no padding — .mitff-row__columns does — so
	   .mitff-row__detail (a sibling, not inside that padded box) can span
	   the full card width without needing negative-margin arithmetic. */
	.mitff-row--event {
		/* Overrides the base .mitff-row's display:grid (5 fixed-width
		   desktop columns) — without this the card falls back to that
		   grid and squeezes .mitff-row__columns into its first 140px
		   track instead of stacking properly. */
		display: block;
		background: #fff;
		border: 1px solid var(--mitff-border-color);
		margin: 0 0 12px;
	}

	.mitff-day__rows > .mitff-row--event:last-child {
		margin-bottom: 0;
	}

	/* Keynote accent line (mobile) — the desktop version lives on the Event
	   column's border, but that column loses its border-left in the card
	   layout below, so the line moves to the card's own left edge instead. */
	.mitff-row--event--keynote {
		border-left: 3px solid var(--mitff-color-keynote);
	}

	.mitff-row__columns {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 4px 12px;
		padding: 14px;
	}

	.mitff-col {
		padding: 0;
	}

	/* Type, Mode and Time share a compact top line; Event and Venue each
	   take the full card width on their own line below. */
	.mitff-col--type,
	.mitff-col--mode,
	.mitff-col--time {
		flex: 0 0 auto;
	}

	.mitff-col--event,
	.mitff-col--venue {
		flex: 0 0 100%;
	}

	.mitff-col--time {
		font-size: 0.9em;
		color: #666;
		margin-top: 1px;
		/* Pushes Time to the right end of its shared top line (Type is the
		   only other thing on that line now that Mode is hidden), so it
		   always sits top-right of the card regardless of how long the
		   Type label is. */
		margin-left: auto;
	}

	.mitff-col--event {
		border-left: none;
		padding-left: 0;
	}

	/* Venue name + address (and the maps pin) stay hidden on the collapsed
	   card until the event is opened — .mitff-detail__venue-mobile below
	   shows them again inside the panel. With both hidden there's nothing
	   left in this column, so the column itself is hidden too rather than
	   leaving an empty bordered strip at the bottom of the card. */
	.mitff-col--venue {
		display: none;
	}

	/* The name/address inside reuse .mitff-venue-name / .mitff-venue-address
	   directly (same classes/styling as the collapsed row normally shows),
	   so this wrapper only needs to handle spacing, not typography. */
	.mitff-detail__venue-mobile {
		display: block;
		margin-bottom: 16px;
	}

	.mitff-detail__venue-mobile .mitff-venue-name {
		margin-bottom: 2px;
	}

	.mitff-row__detail {
		margin: 8px 0 0;
	}

	.mitff-detail {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Description reads first on mobile; Featuring/Tags follow underneath
	   rather than pushing the description down below the fold. */
	.mitff-detail__col--main {
		order: 1;
	}

	.mitff-detail__col--side {
		order: 2;
		border-right: none;
		border-bottom: none;
		border-top: 1px solid #ddd;
		padding-right: 0;
		padding-top: 16px;
		margin-bottom: 0;
	}

	.mitff-detail__col--side-empty {
		border-top-color: transparent;
	}

	.mitff-filter__panel {
		max-width: calc(100vw - 32px);
	}
}