/*
 * Event rows — hairline-separated listing rows, on the grid.
 *
 * The list always sits in a cell spanning global columns 5–16, i.e.
 * twelve columns of the page grid. Each row is therefore a nested
 * 12-column grid with the same 20px gutter, so its lines coincide with
 * the page's: date on global 5–8, the venue (work variant) or the work
 * (calendar variant) starting exactly on the column-9 axis, and the
 * place on global 13–16. Rows: 1px black bottom border, 10px vertical
 * padding. Cells stack on phones.
 */

.tek-event-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tek-event-rows__row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--foreground);
}

.tek-event-rows__row > span {
	min-width: 0;
}

/* Work variant: date | venue | place. */
.tek-event-rows__date {
	grid-column: 1 / 5;
}

.tek-event-rows--work .tek-event-rows__venue {
	grid-column: 5 / 9; /* global col 9 — the axis */
}

.tek-event-rows--work .tek-event-rows__where {
	grid-column: 9 / 13;
}

/* Calendar variant: date | work/title | venue-over-place. */
.tek-event-rows__what {
	grid-column: 5 / 9; /* global col 9 */
}

.tek-event-rows__place {
	grid-column: 9 / 13;
}

.tek-event-rows__place .tek-event-rows__venue,
.tek-event-rows__place .tek-event-rows__where {
	display: block;
}

.tek-event-rows a {
	color: var(--wp--preset--color--foreground);
}

.tek-event-rows a:hover,
.tek-event-rows a:focus {
	color: var(--tek-hover);
}

@media (max-width: 767px) {
	.tek-event-rows__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.tek-event-rows__row > span,
	.tek-event-rows__date,
	.tek-event-rows--work .tek-event-rows__venue,
	.tek-event-rows--work .tek-event-rows__where,
	.tek-event-rows__what,
	.tek-event-rows__place {
		grid-column: auto;
	}
}