/* Serie B module — classifica, calendario, marcatori.
   Self-contained on purpose: the markup these rules style is rendered by
   inc/serie-b.php, and the bundle copied from the original build has nothing
   for it (its match-centre markup came from a third-party script).
   Colours resolve against the brand variables in palette.css. */

.h19-sb {
	--h19-navy: var(--gzn-primary, #173f7c);
	--h19-gold: var(--gzn-accent, #f5be41);
	--h19-line: #e2e6ee;
	--h19-ink: #10182b;
	--h19-mute: #6a7386;

	font-size: 14px;
	line-height: 1.35;
	color: var(--h19-ink);
	width: 100%;
}

.h19-sb * {
	box-sizing: border-box;
}

/* The pages render this inside `.prose`, whose typography rules give images a
   2em vertical margin and tables their own spacing — enough to triple a table
   row's height. The wrappers already carry `not-prose`; these resets are the
   belt to that braces, and also cover the sidebar rails. */
.h19-sb table,
.h19-sb img,
.h19-sb p,
.h19-sb ul,
.h19-sb ol,
.h19-sb li {
	margin: 0;
	padding: 0;
}

.h19-sb img {
	display: inline-block;
	vertical-align: middle;
}

.h19-sb a {
	text-decoration: none;
}

.h19-sb .h19-sb__empty {
	margin: 0;
	padding: 18px 14px;
	border: 1px dashed var(--h19-line);
	border-radius: 10px;
	color: var(--h19-mute);
	font-size: 14px;
	text-align: center;
}

.h19-sb__crest {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* ---------- Classifica ---------- */

.h19-sb__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.h19-sb__table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.h19-sb__table thead th {
	background: var(--h19-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 8px 6px;
	text-align: center;
	white-space: nowrap;
}

.h19-sb__table thead th.h19-sb__team,
.h19-sb__table thead th.h19-sb__num {
	text-align: left;
}

.h19-sb__table tbody td {
	padding: 7px 6px;
	text-align: center;
	border-bottom: 1px solid var(--h19-line);
	white-space: nowrap;
}

.h19-sb__table tbody tr:nth-child(even) {
	background: #f7f9fc;
}

.h19-sb__table tbody tr.is-us {
	background: color-mix(in srgb, var(--h19-gold) 26%, #fff);
	font-weight: 700;
}

.h19-sb__table td.h19-sb__num {
	width: 2.2em;
	text-align: left;
	color: var(--h19-mute);
	font-weight: 700;
}

.h19-sb__table td.h19-sb__team {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 9em;
}

.h19-sb__table td.h19-sb__team span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.h19-sb__table td.h19-sb__pts {
	font-weight: 800;
	color: var(--h19-navy);
}

/* ---------- Fixture lists ---------- */

.h19-sb__matches {
	list-style: none;
	margin: 0;
	padding: 0;
}

.h19-sb__round-sep {
	margin-top: 10px;
	padding: 4px 0 3px;
	color: var(--h19-navy);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 2px solid var(--h19-navy);
}

.h19-sb__round-sep:first-child {
	margin-top: 0;
}

/* On Hellas Verona's own calendar every match involves us, so the row
   highlight carries no information — it would just tint the whole page. */
.h19-sb--team .h19-sb__match.is-us:not(.is-next) {
	background: none;
}

/* The next match is the one worth pointing at instead. */
.h19-sb .h19-sb__match.is-next {
	background: color-mix(in srgb, var(--h19-gold) 26%, #fff);
	font-weight: 700;
}

.h19-sb__match {
	display: grid;
	grid-template-columns: 5.6em 1fr 4.2em 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 9px 6px;
	border-bottom: 1px solid var(--h19-line);
}

.h19-sb__match.is-us {
	background: color-mix(in srgb, var(--h19-gold) 20%, #fff);
}

.h19-sb__date {
	font-size: 11px;
	color: var(--h19-mute);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}

.h19-sb__side {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.h19-sb__side--home {
	justify-content: flex-end;
	text-align: right;
}

.h19-sb__side--away {
	justify-content: flex-start;
}

.h19-sb__side .h19-sb__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.h19-sb__score {
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--h19-mute);
	white-space: nowrap;
}

.h19-sb__score strong {
	font-size: 16px;
	font-weight: 800;
	color: var(--h19-ink);
}

.h19-sb__score i {
	font-style: normal;
	margin: 0 3px;
	color: var(--h19-mute);
}

.h19-sb__match.is-live .h19-sb__score strong {
	color: #c0121c;
}

.h19-sb__live {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	color: #fff;
	background: #c0121c;
	border-radius: 4px;
	padding: 2px 5px;
}

/* ---------- Round navigation ---------- */

.h19-sb__rounds {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--h19-navy);
	color: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	margin-bottom: 10px;
}

.h19-sb__round-label {
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.h19-sb__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
}

.h19-sb__step:hover {
	background: var(--h19-gold);
	color: var(--h19-navy);
}

.h19-sb__step.is-off {
	opacity: .3;
}

.h19-sb__jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--h19-line);
	font-size: 12px;
	color: var(--h19-mute);
}

.h19-sb__jump > span:first-child {
	margin-right: 4px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.h19-sb__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 5px;
	border: 1px solid var(--h19-line);
	border-radius: 6px;
	color: var(--h19-navy);
	font-weight: 700;
	text-decoration: none;
}

.h19-sb__chip:hover {
	border-color: var(--h19-navy);
	background: var(--h19-navy);
	color: #fff;
}

.h19-sb__chip.is-on {
	background: var(--h19-gold);
	border-color: var(--h19-gold);
	color: var(--h19-navy);
}

/* ---------- Marcatori ---------- */

.h19-sb__scorers {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.h19-sb__scorer {
	display: grid;
	grid-template-columns: 1.8em 32px 1fr auto;
	align-items: center;
	gap: 9px;
	padding: 8px 4px;
	border-bottom: 1px solid var(--h19-line);
}

.h19-sb__scorer.is-us {
	background: color-mix(in srgb, var(--h19-gold) 20%, #fff);
}

.h19-sb__scorer .h19-sb__num {
	color: var(--h19-mute);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.h19-sb__face {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef1f6;
}

.h19-sb__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.h19-sb__who .h19-sb__name {
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.h19-sb__club {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--h19-mute);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.h19-sb__club .h19-sb__crest {
	width: 16px;
	height: 16px;
}

.h19-sb__goals {
	font-size: 17px;
	font-weight: 800;
	color: var(--h19-navy);
	font-variant-numeric: tabular-nums;
}

/* ---------- Sidebar variant ---------- */

.h19-sb--compact {
	font-size: 13px;
}

.h19-sb--compact .h19-sb__table tbody td,
.h19-sb--compact .h19-sb__table thead th {
	padding: 6px 4px;
}

.h19-sb--compact .h19-sb__match {
	grid-template-columns: 1fr 3.6em 1fr;
	grid-template-areas: "date date date" "home score away";
	row-gap: 2px;
	padding: 8px 4px;
}

.h19-sb--compact .h19-sb__date {
	grid-area: date;
}

.h19-sb--compact .h19-sb__side--home {
	grid-area: home;
}

.h19-sb--compact .h19-sb__score {
	grid-area: score;
}

.h19-sb--compact .h19-sb__side--away {
	grid-area: away;
}

.h19-sb--compact .h19-sb__crest {
	width: 18px;
	height: 18px;
}

.h19-sb__more {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 700;
}

.h19-sb__more a {
	color: var(--gzn-primary, #173f7c);
	text-decoration: underline;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 560px) {
	.h19-sb__match {
		grid-template-columns: 1fr 3.6em 1fr;
		grid-template-areas: "date date date" "home score away";
		row-gap: 2px;
	}

	.h19-sb__date {
		grid-area: date;
	}

	.h19-sb__side--home {
		grid-area: home;
	}

	.h19-sb__score {
		grid-area: score;
	}

	.h19-sb__side--away {
		grid-area: away;
	}

	.h19-sb__live {
		display: none;
	}

	.h19-sb__table td.h19-sb__team {
		min-width: 7.5em;
	}
}