/**
 * David Loy — schedule rows (D17 "Paper & Ink")
 *
 * One event per row: date | title + place + type | Details button.
 * Applied to the "Event Row" Elementor loop item via Advanced → CSS Classes.
 *
 * Colours and type come from dl-tokens.css, which must be enqueued first and
 * named as a dependency:
 *
 *   wp_enqueue_style( 'dl-events',
 *     get_stylesheet_directory_uri() . '/assets/dl-events.css', [ 'dl-tokens' ],
 *     filemtime( get_stylesheet_directory() . '/assets/dl-events.css' ) );
 *
 * As with the cards: an Elementor CSS class lands on the widget WRAPPER, so
 * the inner .elementor-heading-title must be targeted too, or the text keeps
 * the widget's inherited font.
 */

/* --- the row ------------------------------------------------------------
 * Grid, not flex, and every widget is placed by hand.
 *
 * Flex cannot do this. Each loop item is its own container, so flex negotiates
 * widths per row and the columns drift from one event to the next. Fixed grid
 * tracks are identical in every row, which is what makes the list read as a
 * table.
 *
 * Expects exactly three children on .dl-event:
 *
 *   ┌──────────────┬────────────────────────────┬──────────────┐
 *   │              │  .dl-event__body           │              │
 *   │  __when      │    __title / __place       │  __btn       │
 *   │              │    / __type                │              │
 *   └──────────────┴────────────────────────────┴──────────────┘
 *
 * The button must be a direct child of .dl-event, NOT inside __body, or it
 * lands in the middle track and column 3 sits empty.
 *
 * Consequence: leave the Elementor width / grow / shrink controls alone on
 * every child. The grid decides, and a width set in the panel will fight it.
 *
 * Two selectors because a BOXED Elementor container wraps its children in
 * .e-con-inner, making that the real parent; a FULL WIDTH one does not.
 */

.dl-event:not(:has(> .e-con-inner)),
.dl-event > .e-con-inner {
	display: grid !important;
	/* !important on the tracks: Elementor's container layout controls emit
	 * grid-template-columns scoped to .elementor-element-{id}, which outranks
	 * a bare .dl-event and silently replaces these with its own column count.
	 * The symptom is a single 1fr track and everything hugging the left.
	 *
	 * All three tracks fixed or fractional — never 'auto'. An auto track is
	 * sized by its own row's content, so each event would compute a different
	 * button column and the list would lose its column alignment. Fixed tracks
	 * are what make twelve separate loop items read as one table. */
	grid-template-columns: 175px minmax(0, 1fr) 200px !important;
	grid-template-rows: auto auto auto !important;
	align-items: center;
	column-gap: 32px !important;
	row-gap: 2px !important;
	width: 100%;
}

/* --- the dark ground -----------------------------------------------------
 * Add .dl-schedule to the SECTION container that holds the Loop Grid, and set
 * the photograph on it in Elementor (Style -> Background -> Image, Size:
 * Cover, Position: Center). The ink fallback sits underneath, so a slow or
 * failed image never leaves text on white.
 *
 * The scrim is what makes an arbitrary photograph usable: it pulls the whole
 * field down and toward Forest, so the cards separate from it regardless of
 * what the image happens to be doing behind any given row.
 */

.dl-schedule {
	position: relative;
	background-color: var(--dl-ink) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

.dl-schedule::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(var(--dl-ink-rgb), 0.82) 0%,
			rgba(var(--dl-ink-rgb), 0.72) 45%,
			rgba(var(--dl-ink-rgb), 0.88) 100%
		);
	pointer-events: none;
	z-index: 0;
}

/* Everything the section holds sits above the scrim. */
.dl-schedule > .e-con-inner,
.dl-schedule > .elementor-element {
	position: relative;
	z-index: 1;
}

/* Breathing room between cards. Elementor's Loop Grid gap control also sets
 * this, so !important keeps the two from disagreeing. */
.dl-schedule .elementor-loop-container,
.dl-schedule .elementor-grid {
	row-gap: 26px !important;
}

/* --- the card ------------------------------------------------------------
 * 80% of the container, centred, with the ground visible either side.
 * max-width stops the row from becoming unreadably wide on a large monitor —
 * at much beyond 1120px the eye loses the line between date and title.
 *
 * Set the section container to FULL WIDTH in Elementor, not boxed. The 80%
 * here is what does the insetting; a boxed container would inset it twice.
 */

.dl-event {
	/* !important on width: Elementor containers resolve width from
	 * var(--width), set per-element to 100%. Equal specificity, and its
	 * stylesheet loads after this one, so a plain 80% is simply ignored. */
	width: 80% !important;
	max-width: 1120px !important;
	margin-inline: auto !important;

	/* White, matching the talk and article cards — --dl-surface is the same
	 * token those use, so the three card types can never drift apart. */
	background-color: var(--dl-surface) !important;
	border-bottom: none !important;
	border-radius: 2px;
	padding: 30px 40px !important;

	/* Same geometry as the talk and article cards, deeper alpha. A shadow
	 * tuned for cream all but disappears on a dark ground. */
	box-shadow: 0 6px 18px rgba(var(--dl-ink-rgb), 0.34);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dl-event:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(var(--dl-ink-rgb), 0.46);
}

@media (prefers-reduced-motion: reduce) {
	.dl-event { transition: none; }
	.dl-event:hover { transform: none; }
}

.dl-event > .e-con-inner { padding: 0 !important; }

/* Three children of .dl-event, three tracks — no explicit placement needed.
 * The title stack lives in its own .dl-event__body container, which is a
 * single grid item in column 2 and lays its own children out in a column. */

.dl-event__btn { justify-self: start; align-self: center; }

/* The stack. Without an explicit column direction it inherits the row and
 * the three lines run together — which is what put title, place and type on
 * one line earlier. */
.dl-event__body,
.dl-event__body > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 3px !important;
	padding: 0 !important;
	width: 100% !important;
	min-width: 0;
}

/* Nothing in the row carries its own width or margin — the tracks do it. */
.dl-event__when,
.dl-event__body,
.dl-event__title,
.dl-event__place,
.dl-event__type,
.dl-event__btn {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	text-align: left;
}
.dl-event__body { width: 100% !important; }

/* --- date ---------------------------------------------------------------- */

.dl-event__when,
.dl-event__when .elementor-heading-title {
	font-family: var(--dl-ui) !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.5 !important;
	text-transform: uppercase;
	color: var(--dl-gold) !important;
}

/* --- title --------------------------------------------------------------- */

.dl-event__title,
.dl-event__title .elementor-heading-title,
.dl-event__title a {
	font-family: var(--dl-display) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--dl-ink) !important;
	text-decoration: none;
}
.dl-event__title { margin: 0 !important; }
.dl-event__title a:hover { color: var(--dl-forest) !important; }

/* --- location ------------------------------------------------------------ */

.dl-event__place,
.dl-event__place .elementor-heading-title {
	font-family: var(--dl-body) !important;
	font-style: italic;
	font-size: 0.92rem !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(var(--dl-ink-rgb), 0.7) !important;
}

/* --- type ---------------------------------------------------------------- */

.dl-event__type,
.dl-event__type .elementor-heading-title {
	font-family: var(--dl-ui) !important;
	font-size: 0.64rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--dl-moss) !important;
}

/* --- button -------------------------------------------------------------- */

.dl-event__btn { width: 100% !important; }

.dl-event__btn .elementor-button {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--dl-ui) !important;
	font-size: 0.66rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--dl-forest) !important;
	background: transparent !important;
	border: 1px solid var(--dl-rule) !important;
	border-radius: 0 !important;
	padding: 11px 24px !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dl-event__btn .elementor-button:hover {
	background: var(--dl-forest) !important;
	border-color: var(--dl-forest) !important;
	color: var(--dl-cream) !important;
}

/* --- mobile --------------------------------------------------------------
 * The three-part row becomes a stack. The date keeps its 180px basis on
 * desktop only, or it strands a narrow column on a phone.
 */

/* --- tablet -------------------------------------------------------------
 * The row survives here because the page container is boxed at 800px, so the
 * width available does not follow the viewport down. Tracks tighten rather
 * than stack: 165 + 185 + 48 of gaps leaves ~400px for the title, which is
 * enough for everything except the ICEM conference name.
 */

@media (max-width: 1024px) and (min-width: 768px) {
	.dl-event:not(:has(> .e-con-inner)),
	.dl-event > .e-con-inner {
		grid-template-columns: 165px minmax(0, 1fr) 185px !important;
		column-gap: 24px !important;
	}
	.dl-event__btn .elementor-button {
		font-size: 0.62rem !important;
		padding: 10px 14px !important;
		letter-spacing: 0.1em !important;
	}
}

/* --- phone --------------------------------------------------------------
 * Below the boxed width there is no room for three tracks, so everything
 * stacks in source order.
 */

@media (max-width: 767px) {
	.dl-event:not(:has(> .e-con-inner)),
	.dl-event > .e-con-inner {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		row-gap: 4px !important;
	}
	/* Centred, not left-aligned: at 80% width on a phone the card is narrow
	 * enough that a ragged left edge under a centred date reads as a mistake.
	 * justify-items handles the grid children; text-align handles the text
	 * inside each of them, and both are needed. */
	.dl-event:not(:has(> .e-con-inner)),
	.dl-event > .e-con-inner { justify-items: center !important; }

	.dl-event__when,
	.dl-event__body,
	.dl-event__btn { justify-self: center !important; }

	/* Blanket rather than per-widget. Elementor emits its own text-align for
	 * heading widgets and the exact selector shape varies by version; naming
	 * each class was losing to it. The descendant sweep cannot lose, and
	 * nothing inside a card wants left alignment at this width. */
	.dl-event,
	.dl-event * {
		text-align: center !important;
	}

	/* The title stack is a flex column; its own cross-axis alignment has to
	 * change too, or the three lines stay left within a centred block. */
	.dl-event__body,
	.dl-event__body > .e-con-inner {
		align-items: center !important;
		text-align: center !important;
	}

	.dl-event {
		width: 80% !important;
		max-width: 340px !important;
		padding: 24px 18px !important;
	}
	.dl-event:hover { transform: none; }
	.dl-event__when { margin-bottom: 8px !important; }

	/* The full-width button belongs to the fixed track on desktop. Stacked,
	 * it should size to its label. */
	.dl-event__btn {
		width: auto !important;
		margin-top: 14px !important;
	}
	.dl-event__btn .elementor-button {
		display: inline-block;
		width: auto;
	}
	.dl-event__title,
	.dl-event__title .elementor-heading-title { font-size: 1.12rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	.dl-event__btn .elementor-button { transition: none; }
}