/**
 * tw-cue-sheet — a ruled index of films.
 *
 * ⛔ WHAT IS DELIBERATELY NOT IN THIS FILE, so nobody adds it back:
 *   · no `grid-template-columns` control — the tracks are here, on purpose. A control composing a
 *     SHAPE compiles at (0,4,0) and beats every media query below it, silently (§6a).
 *   · NO `:hover` COLOUR RULES. `name_color` is a control, so a `:hover` colour here would be dead
 *     on arrival — the hover colour is `name_color_hover`, also a control, at (0,5,0).
 *   · no `transition:` shorthand anywhere. A shorthand in a later block silently cancels the
 *     reduced-motion rule (§6b). Longhands only, and the reduced-motion block is LAST in the file
 *     and prefixed with the widget root.
 *   · no `border` shorthand. §6b: one built from an unresolved var() computes to `none` and the
 *     whole rule vanishes. Width and style are literal here; only the COLOUR is a control.
 */

.tw-cs {
	display: block;
	width: 100%;          /* §6b: a widget is a flex item and resolves against max-content otherwise */
	min-width: 0;
}

/* ── heading row ─────────────────────────────────────────────────────────────────────────────── */

.tw-cs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 18px;
}

.tw-cs__title,
.tw-cs__hint {
	font-family: var(--tw-font-body, 'Inter', sans-serif);
	font-size: 11px;
	line-height: 1.2;
	text-transform: uppercase;
}

.tw-cs__title {
	letter-spacing: .24em;
	color: var(--tw-tan, #B18051);
}

.tw-cs__hint {
	letter-spacing: .2em;
	color: var(--tw-muted2, #86837c);
	text-align: right;
}

/* ── the list ────────────────────────────────────────────────────────────────────────────────── */

.tw-cs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.tw-cs__item {
	margin: 0;
	/* Colour is a control (`rule_color`); width and style stay literal — see the header. */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: var(--tw-line, rgba(255, 255, 255, .09));
}

.tw-cs__row {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	width: 100%;
	padding: 16px 0;
	text-decoration: none;
	background: none;
	border: 0;
	text-align: left;
	color: inherit;
}

/* A row with no film page is not a link and must not pretend to be one. */
.tw-cs__row--static {
	cursor: default;
}

a.tw-cs__row {
	cursor: pointer;
}

.tw-cs__row:focus-visible {
	outline: 2px solid var(--tw-tan, #B18051);
	outline-offset: 2px;
}

/* ── cells ───────────────────────────────────────────────────────────────────────────────────── */

.tw-cs__tc {
	font-family: var(--tw-font-body, 'Inter', sans-serif);
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;   /* the column must not shimmer between rows */
	color: var(--tw-muted2, #86837c);
	white-space: nowrap;
}

.tw-cs__body {
	min-width: 0;   /* without this the grid track refuses to shrink and the row overflows */
}

.tw-cs__name {
	display: block;
	font-family: var(--tw-font-display, 'Cormorant Garamond', serif);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--tw-cream, #e9e6df);
	transition-property: color;
	transition-duration: .3s;
	transition-timing-function: ease;
}

.tw-cs__client {
	display: block;
	margin-top: 4px;
	font-family: var(--tw-font-body, 'Inter', sans-serif);
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--tw-muted, #9d9a92);
}

/* ⛔ WITH NO CLIENT, THE RESERVED LINE IS SPLIT ABOVE AND BELOW THE NAME INSTEAD OF ALL BELOW.
 * Reserving the height (see the `:empty` rule further down) fixed the ragged row but left the name
 * sitting high in it, with a blank line underneath — Hares, 2026-08-18: *"If the text does not have
 * a Client name to it, I would like it to be vertically centered."* Half the line above the name and
 * half below adds up to the same total, so the row height is untouched and the name lands centred.
 *
 * ⚠️ `--tw-cs-client-line` IS DERIVED FROM THE THREE DECLARATIONS DIRECTLY ABOVE — the client's top
 * margin plus its line box. It sits next to them on purpose: change one, change this. It is safe as
 * a `var()` because the STYLESHEET sets it, not a control (§6a is about control-set vars, which the
 * editor drops).
 * ⛔ A MODIFIER CLASS, NOT `:has()`. The widget already knows whether the field is empty, so PHP
 * says so; `:has(> .tw-cs__client:empty)` would work but makes the rule depend on the markup order
 * of two elements rather than on the fact itself. */
.tw-cs {
	--tw-cs-client-line: calc(4px + .8125rem * 1.4);
}

.tw-cs__body--noclient .tw-cs__name {
	margin-top: calc(var(--tw-cs-client-line) / 2);
}

.tw-cs__body--noclient .tw-cs__client {
	margin-top: 0;
	height: calc(var(--tw-cs-client-line) / 2);
}

/* ⛔ AN EMPTY CLIENT LINE STILL TAKES A LINE'S HEIGHT, so rows do not go ragged when one film has
 * no client (the Showreel row has none by definition; Rugpass has none in the data). An empty
 * INLINE-BLOCK is what establishes the line box — an empty plain inline creates none, per CSS2.1
 * §10.8.1, so `display: inline-block` here is load-bearing, not decoration. `content: ""` puts
 * nothing in the accessibility tree, which a zero-width space would not manage.
 * ⚠️ Height comes from `.tw-cs__client`'s own line-height rather than a pixel number, so THIS rule
 * needs no maintenance. ⛔ `--tw-cs-client-line` above is the opposite case and the comment here
 * used to blur the two: it is a hand-kept restatement of the three declarations it sits under, and
 * it does NOT track anything by itself. (branch-auditor, 2026-08-18.) Neither tracks a control —
 * the client line has a colour control and no typography one, which is exactly why a literal is
 * safe here at all. */
/* ⚠️ The category gets the same treatment, and it is NOT the same fix twice. At desktop the cat is
 * an `auto` grid track and an empty one costs nothing either way — this earns its place at ≤767,
 * where the cat drops to its own grid ROW. Without a line box the reel row (and Estélle, which has
 * no category) loses that whole row and goes short on a phone exactly as it did on desktop. */
.tw-cs__client:empty::after,
.tw-cs__cat:empty::after {
	content: "";
	display: inline-block;
}

.tw-cs__cat {
	font-family: var(--tw-font-body, 'Inter', sans-serif);
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tw-muted2, #86837c);
	white-space: nowrap;
}

.tw-cs__row {
	transition-property: background-color;
	transition-duration: .3s;
	transition-timing-function: ease;
}

/* ── phone ───────────────────────────────────────────────────────────────────────────────────── */
/* The category drops under the name rather than fighting for a third track at 390px. The timecode
 * keeps its own column so the left edge stays a rule, which is the whole look. */

@media (max-width: 767px) {

	.tw-cs__row {
		grid-template-columns: 62px minmax(0, 1fr);
		grid-template-areas:
			'tc body'
			'.  cat';
		row-gap: 6px;
	}

	.tw-cs__tc   { grid-area: tc; }
	.tw-cs__body { grid-area: body; }
	.tw-cs__cat  { grid-area: cat; }

	.tw-cs__name { font-size: 1.25rem; }

	.tw-cs__head {
		gap: 14px;
		padding-bottom: 14px;
	}

	.tw-cs__hint {
		letter-spacing: .16em;
	}
}

/* ── reduced motion ──────────────────────────────────────────────────────────────────────────── */
/* ⛔ LAST IN THE FILE AND PREFIXED WITH THE WIDGET ROOT (§6b). Anything after this that sets a
 * transition — including a `transition:` shorthand — silently cancels it. */

@media (prefers-reduced-motion: reduce) {

	.tw-cs .tw-cs__row,
	.tw-cs .tw-cs__name {
		transition-duration: 0s !important;
	}
}