/*
 * DLTS Events - front-end listings.
 *
 * One stylesheet for the sidebar widgets, the [dlts_events] shortcode, the
 * Elementor widget and the block. Replaces the two per-widget stylesheets
 * shipped up to 1.2.2; the class names those used (.dlts-events-upcoming,
 * .dlts-events-past, .dlts-item, .dlts-img, .dlts-empty) are all still emitted,
 * so custom CSS written against the old markup keeps working.
 *
 * Layout is driven by custom properties set inline on the grid, which is what
 * lets Elementor's responsive controls change columns per breakpoint without
 * this file knowing anything about Elementor.
 */

.dlts-events {
	--dlts-cols: 3;
	--dlts-cols-t: 2;
	--dlts-cols-m: 1;
	--dlts-gap: 20px;
	--dlts-min: 280px;
	--dlts-max: 340px;
	--dlts-aspect: 3 / 4;
	--dlts-radius: 12px;
	--dlts-ink: currentColor;
	--dlts-muted: rgba(0, 0, 0, 0.62);
	--dlts-badge-bg: rgba(0, 0, 0, 0.06);

	display: grid;
	gap: var(--dlts-gap);
	grid-template-columns: repeat(var(--dlts-cols), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	max-width: 100%;
	list-style: none;
}

.dlts-events *,
.dlts-events *::before,
.dlts-events *::after {
	box-sizing: border-box;
}

/*
 * Poster size presets.
 *
 * auto-fit decides how many tracks to create from the *maximum* track size, so
 * on a typical ~1200px content area these work out as:
 *
 *     small   340px wide, 3 across   (exactly what 1.x and 2.0.x looked like)
 *     medium  470px wide, 2 across
 *     large   600px wide, 1 across
 *
 * On a narrow screen all three collapse to one full-width column, because the
 * auto-fit rule below clamps the lower bound with min(..., 100%).
 */
.dlts-events--size-small {
	--dlts-min: 280px;
	--dlts-max: 340px;
}

.dlts-events--size-medium {
	--dlts-min: 360px;
	--dlts-max: 470px;
}

.dlts-events--size-large {
	--dlts-min: 460px;
	--dlts-max: 600px;
}

/*
 * Tablets sit awkwardly between the presets: a 460px minimum on a 768px screen
 * leaves one very large poster and a lot of empty space. Easing the minimum
 * back lets two fit where they comfortably can.
 */
@media (max-width: 900px) {
	.dlts-events--size-large {
		--dlts-min: 360px;
		--dlts-max: 520px;
	}

	.dlts-events--size-medium {
		--dlts-min: 300px;
		--dlts-max: 440px;
	}
}

/*
 * Poster shape comes from a class rather than an inline variable, so it still
 * works when a caller (the Elementor widget) suppresses inline styles.
 */
.dlts-events--aspect-1x1 {
	--dlts-aspect: 1 / 1;
}

.dlts-events--aspect-3x4 {
	--dlts-aspect: 3 / 4;
}

.dlts-events--aspect-4x5 {
	--dlts-aspect: 4 / 5;
}

.dlts-events--aspect-4x3 {
	--dlts-aspect: 4 / 3;
}

.dlts-events--aspect-16x9 {
	--dlts-aspect: 16 / 9;
}

.dlts-events--aspect-2x3 {
	--dlts-aspect: 2 / 3;
}

.dlts-events--aspect-3x2 {
	--dlts-aspect: 3 / 2;
}

/*
 * Auto-fit: the 1.x behaviour, and still the default.
 *
 * The min() is load-bearing. A bare minmax(280px, 340px) forces a 280px track
 * even inside a container narrower than that - a phone in a padded sidebar -
 * which pushed the whole page sideways and produced a horizontal scrollbar.
 * Clamping the lower bound to the available width fixes it at every size.
 */
.dlts-events[data-cols="auto"] {
	grid-template-columns: repeat(auto-fit, minmax(min(var(--dlts-min), 100%), var(--dlts-max)));
	justify-content: center;
}

@media (max-width: 1024px) {
	.dlts-events:not([data-cols="auto"]) {
		grid-template-columns: repeat(var(--dlts-cols-t), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dlts-events:not([data-cols="auto"]) {
		grid-template-columns: repeat(var(--dlts-cols-m), minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Card shell
 * ---------------------------------------------------------------------- */

.dlts-events .dlts-event {
	display: block;
	position: relative;
	min-width: 0;
	border: none;
	border-radius: var(--dlts-radius);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dlts-events .dlts-event:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.dlts-events--hover-lift .dlts-event:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -20px rgba(16, 24, 40, 0.45);
}

.dlts-events .dlts-event__media {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.04);
}

.dlts-events .dlts-event__media--empty {
	aspect-ratio: var(--dlts-aspect);
}

.dlts-events .dlts-img {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Natural: never crop the poster. This is the default and matches 1.x. */
.dlts-events--aspect-natural .dlts-img {
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* Any fixed ratio: fill the frame. */
.dlts-events:not(.dlts-events--aspect-natural) .dlts-event__media {
	aspect-ratio: var(--dlts-aspect);
}

.dlts-events:not(.dlts-events--aspect-natural) .dlts-img {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------------------------------
 * Card text
 * ---------------------------------------------------------------------- */

.dlts-events .dlts-event__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 2px 4px;
}

.dlts-events--card .dlts-event__body,
.dlts-events--list .dlts-event__body {
	padding: 14px;
}

.dlts-events .dlts-event__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.dlts-events .dlts-event__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--dlts-badge-bg);
	color: var(--dlts-muted);
	font-size: 0.74em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.dlts-events .dlts-event__badge--past {
	opacity: 0.75;
}

.dlts-events .dlts-event__title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dlts-ink);
	overflow-wrap: anywhere;
}

.dlts-events .dlts-event__meta {
	display: block;
	font-size: 0.87em;
	line-height: 1.45;
	color: var(--dlts-muted);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Card layout
 * ---------------------------------------------------------------------- */

.dlts-events--card .dlts-event {
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px -18px rgba(16, 24, 40, 0.3);
}

.dlts-events--card .dlts-event__media {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * List layout
 * ---------------------------------------------------------------------- */

.dlts-events--list {
	grid-template-columns: 1fr;
}

.dlts-events--list .dlts-event {
	display: grid;
	grid-template-columns: minmax(90px, 130px) 1fr;
	align-items: stretch;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 28px -20px rgba(16, 24, 40, 0.28);
}

.dlts-events--list .dlts-event__media {
	height: 100%;
	aspect-ratio: var(--dlts-aspect);
}

.dlts-events--list .dlts-img {
	height: 100%;
	object-fit: cover;
}

.dlts-events--list .dlts-event__body {
	justify-content: center;
}

@media (max-width: 480px) {
	.dlts-events--list .dlts-event {
		grid-template-columns: 84px 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Empty state
 * ---------------------------------------------------------------------- */

.dlts-events--empty {
	display: block;
	grid-template-columns: none;
}

.dlts-events .dlts-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: clamp(28px, 6vw, 48px) 20px;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: var(--dlts-radius);
	color: var(--dlts-muted);
	text-align: center;
	text-wrap: balance;
}

.dlts-events__empty-icon {
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.4;
}

.dlts-events .dlts-events__empty-title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
	color: inherit;
}

.dlts-events .dlts-events__empty-note {
	max-width: 34em;
	margin: 0;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.55;
	opacity: 0.8;
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.dlts-events .dlts-event,
	.dlts-events--hover-lift .dlts-event:hover {
		transition: none;
		transform: none;
	}
}