/**
 * SFFilm — TEC List View Card Styles
 *
 * Conditionally enqueued on event queries (see sffilm-tec-customizations.php).
 * All styles are scoped to .tribe-events-view--list .sffilm-list-card so they
 * only take effect on the list view, never on photo view or other views.
 *
 * Design tokens used:
 *   --wp--preset--color--accent-1      (#4F51F8 — brand indigo, chip bg)
 *   --wp--preset--color--base          (white — chip text)
 *   --wp--preset--font-family--instrument-sans  (body / titles)
 *   --wp--preset--font-family--fragment-mono    (meta / chips / buttons)
 *
 * Approach: desktop-first. Base styles render the desktop horizontal 3-column
 * card; tablet (≤1023px) and mobile (≤767px) breakpoints stack the card and
 * adjust font sizes (Task 7).
 */

/* ==========================================================================
   1. Card row container — borders, padding, base flex container
   ========================================================================== */

.tribe-events-view--list .sffilm-list-card {
	border-bottom: 1px solid #000;
	padding: 24px 0;
	list-style: none;
}

/* Override TEC's `.tribe-common--breakpoint-medium.tribe-events
   .tribe-events-calendar-list__event-row` rule (specificity 0,3,0) which adds
   negative horizontal margins (`var(--tec-grid-gutter-half-negative)`,
   Bootstrap-style gutter compensation) and vertical spacers. We use !important
   because TEC's selector specificity is higher than ours by design — the only
   reliable way to neutralize their library defaults is to mark our overrides
   as authoritative. The card relies on its own padding (24px 0) for vertical
   spacing, not TEC's spacers. */
.tribe-events-view--list .sffilm-list-card.tribe-events-calendar-list__event-row {
	margin: 0 !important;
}

.tribe-events-view--list .sffilm-list-card__inner {
	display: flex;
	flex-direction: row;
	gap: 24px;
	align-items: stretch;
}

/* Hide TEC's month separator items — the Figma list view does not group
   events by month and the rendered separators visually break the card flow.
   !important is needed because TEC's `.tribe-events
   .tribe-events-calendar-list__month-separator { display: flex }` selector
   has equal specificity to ours and loads in a way we can't control. */
.tribe-events-view--list .tribe-events-calendar-list__month-separator {
	display: none !important;
}

/* ==========================================================================
   2. Image column — fixed 300px on desktop, 3:2 aspect
   ========================================================================== */

.tribe-events-view--list .sffilm-list-card__image-link {
	flex: 0 0 300px;
	width: 300px;
	aspect-ratio: 3 / 2;
	background-color: #111827;
	overflow: hidden;
	display: block;
	text-decoration: none;
}

/* Compound selector to beat TEC's `.tribe-common img { height: auto }` global. */
.tribe-common .sffilm-list-card__image-link img.sffilm-list-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   3. Body column — title, description, film meta, date/venue meta
   Desktop order: title → description → film meta → date/venue
   Mobile order (source order): title → film meta → date/venue → description
   ========================================================================== */

.tribe-events-view--list .sffilm-list-card__body {
	flex: 1 1 0;
	min-width: 0; /* allow shrinking at intermediate desktop widths (1024–1300px) */
	max-width: 700px; /* matches Figma max-w-[700px] */
	display: flex;
	flex-direction: column;
}

.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__title       { order: 1; }
.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__description { order: 2; }
.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__film-meta   { order: 3; }
.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__meta        { order: 4; }

.tribe-events-view--list .sffilm-list-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 32px;
	line-height: 38px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.tribe-events-view--list .sffilm-list-card__title a {
	color: var(--wp--preset--color--contrast, #000);
	text-decoration: none;
}
.tribe-events-view--list .sffilm-list-card__title a:hover {
	text-decoration: underline;
}

.tribe-events-view--list .sffilm-list-card__description {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast, #000);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: 75px; /* 3 × 25px line-height */
}

.tribe-events-view--list .sffilm-list-card__film-meta {
	margin: 8px 0 0;
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 16px;
	line-height: 22px;
	color: rgba(0, 0, 0, 0.75);
}

.tribe-events-view--list .sffilm-list-card__meta {
	/* `margin-top: auto` pushes the meta to the bottom of the body flex column,
	   matching the Figma where the date/venue meta sits at the bottom of the
	   card row, aligned with the CTA button in the aside. */
	margin: auto 0 0;
	display: flex;
	flex-wrap: nowrap; /* one line at typical desktop widths; overridden to wrap on tablet */
	gap: 16px;
	align-items: center;
}

.tribe-events-view--list .sffilm-list-card__date,
.tribe-events-view--list .sffilm-list-card__venue {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #000);
}

.tribe-events-view--list .sffilm-list-card__date svg,
.tribe-events-view--list .sffilm-list-card__venue svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   4. Aside column — chips (top) + CTA button (bottom)
   ========================================================================== */

.tribe-events-view--list .sffilm-list-card__aside {
	flex: 0 0 auto; /* content-sized — claims its natural width so buttons/chips never clip */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
}

.tribe-events-view--list .sffilm-list-card__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}

.tribe-events-view--list .sffilm-list-card__chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 0;
	white-space: nowrap;
}

.tribe-events-view--list .sffilm-list-card__chip--default {
	background-color: var(--wp--preset--color--accent-1, #4F51F8);
	color: var(--wp--preset--color--base, #fff);
}

.tribe-events-view--list .sffilm-list-card__chip--status {
	background-color: #BBBAB8;
	color: #404040;
}

/* CTA button styling — targets the existing sffilm-event__btn--* classes that
   sffilm_tec_render_ticket_button() outputs. NOTE: 3 of 5 button states emit a
   <span> (Sold Out, Date Passed, Status fallback — non-clickable) and 2 emit
   an <a> (Agile, Custom link — clickable). The CSS targets BOTH. The wrapping
   .sffilm-list-card__cta div is only emitted by the template when sales_status
   is non-empty (PHP-side conditional, more reliable than CSS :empty). */
.tribe-events-view--list .sffilm-list-card__cta a,
.tribe-events-view--list .sffilm-list-card__cta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid #000;
	background: transparent;
	font-family: var(--wp--preset--font-family--fragment-mono);
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #000;
	text-decoration: none;
}

.tribe-events-view--list .sffilm-list-card__cta a {
	cursor: pointer;
}

.tribe-events-view--list .sffilm-list-card__cta a:hover {
	background: #000;
	color: #fff;
}

/* Span variants are inherently non-clickable; no pointer-events override needed. */

/* ==========================================================================
   5. Tablet (≤1023px) — 2-column grid: image (300px) + content
   Per Figma (node 11615:2675), the tablet card keeps a 2-column layout with
   image left and ALL content (body + chips + CTA) in the right column.
   The aside merges visually into the body column using CSS Grid placement.
   Font sizes and body content order stay the same as desktop.
   ========================================================================== */

@media (max-width: 1023px) {

	.tribe-events-view--list .sffilm-list-card__inner {
		display: grid;
		grid-template-columns: 300px 1fr;
		gap: 24px;
	}

	/* Image: column 1, spans all rows, anchored to top. */
	.tribe-events-view--list .sffilm-list-card__image-link {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		width: auto;
	}

	/* Body: column 2, auto row (row 1). */
	.tribe-events-view--list .sffilm-list-card__body {
		grid-column: 2;
		max-width: none;
	}

	/* Reset desktop bottom-pinning on meta — in the grid layout the body
	   height is determined by content, not stretched to match the image. */
	.tribe-events-view--list .sffilm-list-card__meta {
		margin: 8px 0 0;
		flex-wrap: wrap;
	}

	/* Aside: column 2, auto row (row 2, below body). Chips wrap horizontally,
	   CTA button left-aligned — all in the same column as the body. */
	.tribe-events-view--list .sffilm-list-card__aside {
		grid-column: 2;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		gap: 16px;
	}

	.tribe-events-view--list .sffilm-list-card__chips {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
   6. Mobile (≤767px) — Single-column vertical stack
   Image becomes full-width, everything stacks vertically. Body content order
   resets to mobile Figma (title → film meta → meta → description). Font
   sizes shrink for the narrow viewport.
   ========================================================================== */

@media (max-width: 767px) {

	.tribe-events-view--list .sffilm-list-card {
		padding: 16px 0;
	}

	.tribe-events-view--list .sffilm-list-card__inner {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Image: single column, auto row, full-width. */
	.tribe-events-view--list .sffilm-list-card__image-link {
		grid-column: 1;
		grid-row: auto;
		width: 100%;
	}

	/* Body + aside: single column. */
	.tribe-events-view--list .sffilm-list-card__body {
		grid-column: 1;
	}
	.tribe-events-view--list .sffilm-list-card__aside {
		grid-column: 1;
	}

	/* Reset body content order to mobile Figma: title → film meta → meta → description. */
	.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__title       { order: 0; }
	.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__film-meta   { order: 0; }
	.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__meta        { order: 0; }
	.tribe-events-view--list .sffilm-list-card__body .sffilm-list-card__description { order: 0; }

	/* Mobile font sizes. */
	.tribe-events-view--list .sffilm-list-card__title {
		font-size: 24px;
		line-height: 30px;
		letter-spacing: 0;
	}

	.tribe-events-view--list .sffilm-list-card__film-meta {
		font-size: 14px;
		line-height: 20px;
	}

	.tribe-events-view--list .sffilm-list-card__date,
	.tribe-events-view--list .sffilm-list-card__venue {
		font-size: 14px;
		line-height: 20px;
	}

	.tribe-events-view--list .sffilm-list-card__description {
		font-size: 16px;
		line-height: 22px;
		-webkit-line-clamp: 4;
		max-height: 88px; /* 4 × 22px */
	}
}