/**
 * The Wicked — Work Grid (filter bar + editorial project grid from work.html #index).
 *
 * Card column-spans (WIDTHS) are driven by an INLINE custom property
 * (--tw-wg-span) set by render() and by widget-work-grid.js on filter. The var
 * applies in this Elementor editor (only *control-set* selector vars are
 * dropped), and because the JS sets the var — not `grid-column` — the responsive
 * media queries below can override the span cleanly. Card HEIGHT is UNIFORM: a
 * single fixed height on `.tw-wg__media` (see below), so filtering never changes
 * a card's height. The per-card --tw-wg-ar is still emitted but no longer sizes
 * the media (the explicit height overrides it). Control-driven values
 * (colours/gaps/typography) are set as REAL CSS properties by the style controls.
 */

/* ---- Filter bar ---- */
.tw-wg__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--tw-line);
}

.tw-wg__tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tw-wg__tab {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	font-family: var(--tw-font-body);
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--tw-muted);
	background: none;
	border: 1px solid var(--tw-line2);
	border-radius: 999px;
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease;
}

.tw-wg__tab:hover {
	color: var(--tw-tan-hi);
	border-color: var(--tw-tan);
}

.tw-wg__tab.is-active {
	color: var(--tw-tan);
	border-color: rgba(177, 128, 81, .5);
}

.tw-wg__count {
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tw-muted2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Grid ---- */
.tw-wg__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 72px 20px;              /* row-gap / column-gap controls override these */
	margin-top: 64px;
}

.tw-wg__card {
	grid-column: span var(--tw-wg-span, 6);
	min-width: 0;
	/* Hover brighten only. The filter-change cross-fade drives `opacity` via inline
	   styles + its own transitions in widget-work-grid.js — a fixed opacity
	   transition here would fight it, so keep this to `filter` alone. */
	transition: filter .3s ease;
}

.tw-wg__card:hover {
	filter: brightness(1.1);
}

/* ---- Media ----
   All card images render at the SAME scale and are only cropped differently.
   Instead of object-fit filling each (differently-sized) box — which scales the
   image by a different amount per card — every image is drawn at the FULL GRID
   WIDTH (the width of a span-12 card), whatever this card's own span is, then
   centred and cropped by the card's overflow:hidden. Full grid width is the
   least-zoomed uniform scale that still covers the widest card. It's computed
   relatively from the per-card --tw-wg-span (set inline by render()), so it
   tracks the real container width — no fixed px, no over-zoom in a narrow
   container. A smaller card simply shows a cropped window of the same-scale image. */
.tw-wg__media {
	position: relative;
	width: 100%;
	/* UNIFORM card height across the whole grid. Every media box is the SAME
	   height regardless of its column span, so filtering — which re-rhythms the
	   spans (widths) by visible position — never changes any card's height, and
	   side-by-side cards always line up. Widths still vary by span. Because both
	   `width` and `height` are definite here, the per-card `aspect-ratio`
	   (--tw-wg-ar, still emitted by render()/JS) is IGNORED for sizing — it's now
	   vestigial. This one clamp is the single knob for how tall all cards are:
	   min floor / fluid middle / max cap, so it tracks the viewport but never gets
	   extreme on tiny or ultra-wide screens. */
	height: clamp(220px, 28vw, 430px);
	overflow: hidden;
	background: var(--tw-panel-bg);
}

.tw-work-grid .tw-wg__img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% * 12 / var(--tw-wg-span, 12));
	height: auto;
	min-width: 100%;                   /* floor a scaled-down image (Image scale < 100%) to
	                                      the frame width so it always covers, cropped to
	                                      bounds — never collapses into a narrow band. */
	min-height: 100%;                  /* backstop: cover tall cards for very wide sources */
	max-width: none;                   /* beat Elementor's img{max-width:100%} */
	object-fit: cover;
	object-position: center;
	display: block;
}

.tw-wg__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(8, 8, 10, .94) 0%, rgba(8, 8, 10, .15) 52%, rgba(8, 8, 10, .5) 100%);
}

.tw-wg__index {
	position: absolute;
	top: 22px;
	left: 24px;
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.tw-wg__tc {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.tw-wg__play {
	position: absolute;
	bottom: 24px;
	left: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tw-tan);
	pointer-events: none;
}

/* CSS triangle "play" glyph (colour = accent via border-left-color control). */
.tw-wg__play-tri {
	width: 0;
	height: 0;
	border-left: 10px solid #08080a;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 3px;
}

/* ---- Caption ---- */
.tw-wg__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding-top: 18px;
}

.tw-wg__caption-main {
	min-width: 0;
}

.tw-wg__name {
	margin: 0;
	font-family: var(--tw-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.15;
	letter-spacing: -.015em;
	color: var(--tw-cream);
}

.tw-wg__client {
	margin: 4px 0 0;
	font-family: var(--tw-font-body);
	font-size: .875rem;
	color: var(--tw-muted);
}

.tw-wg__meta {
	font-family: var(--tw-font-body);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tw-muted2);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Hidden by the filter (JS). */
.tw-wg__card[hidden] {
	display: none;
}

/* ---- Responsive (override the span var; JS sets the var, not grid-column) ---- */
@media (max-width: 1000px) {
	.tw-wg__card {
		grid-column: span 6;
	}
	/* Cards are all equal-sized now (span 6, then span 12 at ≤600), so the minimum
	   uniform scale is just the card width — image as wide as its card, cropped
	   vertically. Least zoom for tablet/mobile. !important so a per-image "Image
	   scale" override (0,3,0, desktop-oriented) can't blow up mobile cards. */
	.tw-work-grid .tw-wg__img {
		width: 100% !important;
	}
}

@media (max-width: 600px) {
	.tw-wg__grid {
		gap: 48px 16px;
	}
	.tw-wg__card {
		grid-column: span 12;
	}
	.tw-wg__caption {
		flex-wrap: wrap;
		gap: 8px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-wg__card,
	.tw-wg__tab {
		transition-duration: .001ms;
	}
}