/*
 * Times and schedules: time lists ("8:00 · 9:00"), grey remarks, and the schedule tables
 * (Katechezy, Msze i nabożeństwa, Emaus): day | time | what (| who).
 * On phones each table row becomes a small block, so nothing hides in a table that
 * scrolls sideways.
 */

/* Times in the heading font, in red. Their digits come from Source Serif drawn about 200 weight
   units lighter (theme.json, font "Cinzel"), so weight 600 gives regular Serif digits (~400):
   lighter ones looked thin and blurred on normal screens (owner, 2026-10-26). Times contain no
   letters, so they need not match Cinzel's thin letters. The same weight is set for the time
   column of the tables and the Sunday Mass times (strona-glowna.css). */
.wiersz .msze-godziny,
.godziny {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/* Small grey remark next to a time or inside a table cell. */
.dopisek {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Schedule tables
 ---------------------------------------------------------------------------- */
.tabela-plan table {
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--base);
}

.tabela-plan td {
	padding: var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) var(--wp--preset--spacing--medium) 0;
	border: 0;
	border-top: 1px solid var(--wp--custom--color--divider);
	vertical-align: top;
}

/* The day may wrap ("Pierwsza niedziela miesiąca"), so it never runs into the time. */
.tabela-plan td:first-child {
	font-weight: 700;
}

.tabela-plan td:nth-child(2) {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	white-space: nowrap;
}

.tabela-plan td:last-child {
	color: var(--wp--custom--color--text-secondary);
}

/* Header row ("Dzień | Godzina | …"): read out by screen readers, so they can say which
   column a cell belongs to, but not shown (the layout already makes it clear).
   The row stays in the table with zero height, because it sets the column widths. */
.tabela-plan thead {
	border: 0;
}

.tabela-plan thead th {
	padding: 0;
	border: 0;
	line-height: 0;
	overflow: hidden;
	clip-path: inset(50%);
	color: transparent;
}

/* Four columns (Katechezy): day and time narrower, so "what" and "who" get the room. */
.tabela-plan:not(.tabela-nabozenstw) :is(th, td):first-child {
	width: 22%;
}

.tabela-plan:not(.tabela-nabozenstw) :is(th, td):nth-child(2) {
	width: 18%;
}

/* Variant for Msze i nabożeństwa: day | time | what (the last column in normal text,
   remarks inside it as small grey text). Its first column has the width of the labels in
   the rows above ("wiersz", karty.css), so all times on the page line up. */
.tabela-nabozenstw :is(th, td):first-child {
	width: 30%;
}

.tabela-nabozenstw :is(th, td):nth-child(2) {
	width: 16%;
}

.tabela-nabozenstw td:last-child {
	color: var(--wp--preset--color--text-body);
}

.tabela-nabozenstw tr:first-child td {
	border-top: 0;
}

/* Phones: day and time on one line, what (and who, smaller) below it. */
@media (max-width: 599px) {
	.tabela-plan table,
	.tabela-plan tbody,
	.tabela-plan tbody tr,
	.tabela-plan td {
		display: block;
		width: auto !important;
	}

	.tabela-plan tbody tr {
		padding-block: var(--wp--preset--spacing--small);
		border-top: 1px solid var(--wp--custom--color--divider);
	}

	.tabela-plan tbody tr:first-child {
		border-top: 0;
	}

	.tabela-plan td {
		padding: 0;
		border: 0;
	}

	.tabela-plan td:first-child,
	.tabela-plan td:nth-child(2) {
		display: inline;
		margin-right: var(--wp--preset--spacing--x-small);
	}

	/* Fourth column (Katechezy: who leads it) as a small grey line. */
	.tabela-plan td:nth-child(4) {
		font-size: var(--wp--preset--font-size--small);
	}

	/* A row without a day (second time on the same day) starts right with the time. */
	.tabela-plan td:empty {
		display: none;
	}

	/* Katechezy (day | time | what | who): the day is the heading of its group, every time of
	   that day sits below it (time left, what and who right), lines only between days.
	   So "19:45" right after "Wtorek 17:45" clearly still belongs to Tuesday.
	   The time column has the same width in every row (3.25rem fits "20:00"), so all
	   descriptions start at the same line; a range ("8:30 – 12:30") wraps onto two lines. */
	.tabela-plan:not(.tabela-nabozenstw) tbody tr {
		display: grid;
		grid-template-columns: 3.25rem 1fr;
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--small);
		row-gap: var(--wp--preset--spacing--xx-small);
	}

	.tabela-plan:not(.tabela-nabozenstw) td:first-child {
		grid-column: 1 / -1;
		display: block;
		margin: 0;
	}

	.tabela-plan:not(.tabela-nabozenstw) td:nth-child(2) {
		grid-column: 1;
		display: block;
		margin: 0;
		white-space: normal;
	}

	.tabela-plan:not(.tabela-nabozenstw) td:nth-child(n + 3) {
		grid-column: 2;
	}

	.tabela-plan:not(.tabela-nabozenstw) tbody tr:has(> td:first-child:empty) {
		padding-top: 0;
		border-top: 0;
	}
}