/* Only what theme.json can't do. Colours and fonts: theme.json presets. */

/* Links: a dotted underline, solid on hover. Text black, line blue (blue
   text fails contrast at body size); on colour areas the line takes the text
   colour: set --sbi-link-line there. Same specificity as core's link rule,
   which comes earlier; the resets further down win over it. */
a:where([href]:not(.wp-element-button)) {
	text-decoration: underline dotted var(--sbi-link-line, var(--wp--preset--color--blue));
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.22em;
}

a:where([href]:not(.wp-element-button)):is(:hover, :focus-visible) {
	text-decoration-style: solid;
}

/* Big mail addresses (data-sbi-mail, made into links by mail.js; contact,
   become a partner): no line, it fades in on hover. Mail addresses in the
   text look like any other link. */
.sbi-mail-big a:where([data-sbi-mail]) {
	text-decoration-style: solid;
	text-decoration-thickness: 0.07em;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.25s ease;
}

.sbi-mail-big a:where([data-sbi-mail]):is(:hover, :focus-visible) {
	text-decoration-color: var(--sbi-link-line, var(--wp--preset--color--blue));
}

@media (prefers-reduced-motion: reduce) {
	.sbi-mail-big a:where([data-sbi-mail]) {
		transition: none;
	}
}

/* Long German words in big headings ("Verbraucherstreitbeilegung") would be
   wider than a phone: hyphenate them (by the page's lang). */
:where(h1, h2, h3, h4, h5, h6) {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Source Sans 3 has no Bold here: emphasis is Semibold. */
:where(b, strong) {
	font-weight: 600;
}

/* Block style "Schnee" (styles/blocks/snow.json): theme.json can't point a
   style variation at a theme file. Cropped by cover, never stretched or tiled. */
.is-style-snow {
	background-image: url(../brand/sbi27-schnee.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Page frame: header, main, footer without gaps; the footer stays at the
   bottom of short pages. */
.wp-site-blocks {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

body .wp-site-blocks > * {
	margin-block: 0;
}

.wp-site-blocks > main {
	flex: 1;
}

/* Anchors land below the sticky header. Pale, line and muted are the
   design guide website's own tints (site.css): surfaces, hairlines and small
   captions only, not in the editor palette. */
:root {
	--sbi-header-height: 4.5rem;
	--sbi-pale: #eef5fc;
	--sbi-line: #d5dee7;
	--sbi-muted: #5f6b77;
}

html {
	scroll-padding-top: calc(var(--sbi-header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Header (patterns/header.php): sticky, white, slightly transparent over the snow. */
.sbi-header-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgb(255 255 255 / 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--sbi-line);
}

.sbi-header {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: var(--sbi-header-height);
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.sbi-header__logo {
	flex-shrink: 0;
	text-decoration: none;
}

.sbi-header__logo img {
	display: block;
	width: auto;
	height: 3.5rem;
}

/* Site menu (blocks/site-nav). Colour only on League Gothic at 24 px and up
   (contrast): spectators red, teams blue, the rest black. */
.sbi-nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	--sbi-link-line: currentColor;
}

.sbi-nav a,
.sbi-nav button {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--wp--preset--color--black);
	white-space: nowrap;
}

.sbi-nav a:not(:hover, :focus-visible) {
	text-decoration: none;
}

.sbi-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.sbi-nav__group--spectators a {
	color: var(--wp--preset--color--red);
}

.sbi-nav__group--teams a {
	color: var(--wp--preset--color--blue);
}

.sbi-nav__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sbi-nav__toggle,
.sbi-nav__close {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.25em 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sbi-nav__lang {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	white-space: nowrap;
}

.sbi-nav__lang img {
	width: auto;
	height: 0.6em;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15);
}

/* Three groups in one row need about 1160 px (English); below, the menu
   button. */
@media (min-width: 1180px) {
	.sbi-nav__toggle,
	.sbi-nav__close {
		display: none;
	}

	/* The popover is the plain menu here: undo its overlay styles. */
	.sbi-nav__menu[popover] {
		position: static;
		inset: auto;
		display: flex;
		align-items: flex-end;
		gap: clamp(1.5rem, 2.5vw, 2.5rem);
		width: auto;
		height: auto;
		margin: 0;
		padding: 0;
		border: 0;
		overflow: visible;
		background: none;
		color: inherit;
	}

	.sbi-nav ul {
		gap: 0 clamp(0.75rem, 1.2vw, 1.25rem);
	}

	.sbi-nav__lang {
		margin-left: auto;
	}
}

/* Below 1180 px: a menu button; the menu opens over the page, on snow. */
@media (max-width: 1179.98px) {
	.sbi-nav {
		justify-content: flex-end;
	}

	.sbi-nav__toggle {
		order: 2;
	}

	.sbi-nav__menu:popover-open {
		box-sizing: border-box;
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0.75rem var(--wp--style--root--padding-right) 3rem var(--wp--style--root--padding-left);
		border: 0;
		overflow-y: auto;
		background: var(--wp--preset--color--ice) url(../brand/sbi27-schnee.webp) center / cover no-repeat;
		color: var(--wp--preset--color--black);
	}

	.sbi-nav__close {
		align-self: flex-end;
	}

	.sbi-nav__menu ul {
		flex-direction: column;
		gap: 0.25rem;
		margin-top: 0.5rem;
	}

	.sbi-nav__menu a {
		font-size: 2.5rem;
	}

	body:has(.sbi-nav__menu:popover-open) {
		overflow: hidden;
	}
}

/* Title of pages, updates and lists: on a snow strip under the header. */
.sbi-title-strip {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.sbi-title-strip > * {
	margin-block: 0;
}

.sbi-title-strip > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sbi-content {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* List of updates (patterns/updates-list.php) */
.sbi-updates > li + li {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sbi-updates .wp-block-post-title {
	margin-block: 0.1em 0.3em;
}

/* Info line (blocks/infozeile): date red | venue blue. The parts wrap as
   a whole on narrow screens. */
.sbi-infozeile {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
}

:where(.sbi-infozeile) {
	font-size: var(--wp--preset--font-size--large);
}

.sbi-infozeile > span {
	white-space: nowrap;
}

.sbi-infozeile__date {
	color: var(--wp--preset--color--red);
}

.sbi-infozeile__venue {
	color: var(--wp--preset--color--blue);
}

.sbi-infozeile__pipe {
	margin: 0 0.22em;
	color: var(--wp--preset--color--black);
}

.sbi-infozeile.is-stacked > span {
	display: block;
}

.sbi-infozeile.is-stacked .sbi-infozeile__pipe {
	display: none;
}

/* Partner logos (blocks/partners): sponsors left, federations right. */
.sbi-partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem 3rem;
}

.sbi-partners__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbi-partners__group--federations {
	margin-left: auto;
}

.sbi-partners {
	--sbi-logo-height: 4.5rem;
}

/* --sbi-logo-scale comes from render.php: wide logos lower, tall ones higher. */
.sbi-partners img {
	display: block;
	width: auto;
	height: calc(var(--sbi-logo-height) * var(--sbi-logo-scale, 1));
}

.sbi-partners .sbi-partners__group--federations:only-child {
	margin-left: 0;
}

.sbi-partners a {
	text-decoration: none;
}

/* Stand-in while a logo file is missing. */
.sbi-partners__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	line-height: 1.1;
}

/* Footer (patterns/footer.php): the wave, only white on it. The wave keeps
   its proportions (cover, anchored bottom left: the dark end carries the
   text). The text starts below the curve: the padding is about 40 % of the
   height, so the footer must not grow past its min-height; keep it short.
   Wide screens: about as tall as the image at full width. */
.sbi-footer {
	box-sizing: border-box;
	min-height: 27rem;
	margin-top: var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1rem;
	padding: 10.5rem var(--wp--style--root--padding-right) 1.25rem var(--wp--style--root--padding-left);
	background: url(../brand/sbi27-welle.webp) left bottom / cover no-repeat;
	color: var(--wp--preset--color--white);
	--sbi-link-line: currentColor;
}

/* Stacked (narrow screens): logos centred in the blue; the text too up to
   840 px. Wider, the middle of the wave is too light for the small legal
   line (white below 4.5:1), so the text stays on the darker left. */
@media (max-width: 1099.98px) {
	.sbi-footer .sbi-partners,
	.sbi-footer .sbi-partners__group {
		justify-content: center;
	}
}

@media (max-width: 839.98px) {
	.sbi-footer {
		text-align: center;
	}
}

@media (min-width: 1100px) {
	.sbi-footer {
		/* A little taller than the image at full width: cover crops the right end. */
		min-height: calc(100vw * 542 / 2400 * 1.15);
		/* The row centred in the solid blue where it is narrowest: at the
		   dip of the curve it starts 273 of the image's 542 px down (above
		   are the light stripes). Cover scales the image to this height. */
		padding-top: calc(100vw * 273 / 2400 * 1.15);
		padding-bottom: 0;
		/* Side by side: date, venue and legal links on the dark left end
		   (white text needs it: 4.5:1 only on the left half), the partner
		   logos spread to the right. */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 4rem;
	}

	.sbi-footer__info {
		order: -1;
		flex: none;
	}

	/* The logos as one block on the right, with the same gaps as stacked. */
	.sbi-footer .sbi-partners {
		flex: 0 1 auto;
		justify-content: flex-end;
	}

	.sbi-footer .sbi-partners__group {
		justify-content: flex-end;
	}
}

.sbi-footer a,
.sbi-footer .sbi-infozeile span {
	color: inherit;
}

.sbi-footer__info > * {
	margin: 0;
}

.sbi-footer__info > * + * {
	margin-top: 0.5rem;
}

.sbi-footer__legal {
	font-size: var(--wp--preset--font-size--small);
}

.sbi-footer__legal span {
	white-space: nowrap;
}

.sbi-footer .sbi-partners {
	--sbi-logo-height: 3rem;
}

.sbi-footer .sbi-partners__group--federations {
	margin-left: 0;
}

/* Coming-soon page (patterns/coming-soon.php) */
.sbi-coming-soon {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	/* Snow: cropped by cover, never stretched or tiled. */
	background: var(--wp--preset--color--ice) url(../brand/sbi27-schnee.webp) center / cover no-repeat;
}

.sbi-coming-soon__main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1rem, 4vh, 3rem);
	padding: clamp(2rem, 6vh, 5rem) 8px;
}

.sbi-coming-soon__main .sbi-coming-soon__logo {
	display: block;
	width: 100%;
	height: auto;
	/* Leave room for the title and the wave on short screens. */
	max-width: calc(46vh * 2250 / 1050);
	margin: 0 auto;
}

.sbi-coming-soon__title {
	margin: 0;
	font-size: clamp(3.5rem, 13vw, 9.5rem);
	line-height: 0.95;
}

.sbi-coming-soon__title em {
	font-style: italic;
	color: var(--wp--preset--color--red);
}

/* The wave as the footer, about a quarter of the screen; only white on it. */
.sbi-coming-soon__wave {
	/* As tall as the wave image, so its top is never cut off; at least
	   1100 px wide (cut off on the right on phones). Not aspect-ratio: that
	   turns the min-height into a 1100 px min-width on phones. */
	min-height: max(calc(1100px * 542 / 2400), calc(100vw * 542 / 2400));
	/* The top of the image is transparent: let it reach up over the snow. */
	margin-top: -8%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0 clamp(16px, 5vw, 4rem) clamp(1.25rem, 4vh, 2.5rem);
	/* Anchored bottom left: the dark end of the wave carries the text. */
	background: url(../brand/sbi27-welle.webp) left bottom / max(100%, 1100px) auto no-repeat;
	color: var(--wp--preset--color--white);
	--sbi-link-line: currentColor;
}

.sbi-coming-soon__wave p {
	margin: 0;
}

.sbi-coming-soon__wave a {
	color: inherit;
}

.sbi-coming-soon__mail {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 6.6vw, 3rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

/* The mail address (line on hover only, see the link rules) in black. */
.sbi-coming-soon__mail {
	--sbi-link-line: currentColor;
}

.sbi-coming-soon__legal {
	font-size: 0.875rem;
}

/* Icons from skate_berlin_icon(): text size and colour, on the baseline. */
.sbi-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	flex-shrink: 0;
}

/* Sections of the front page (patterns/*.php, category "SBI"): white and
   pale in turn, like the design guide's website. */
/* At most 80 px above the title (owner), more below the last block. */
.sbi-section {
	padding-block: clamp(3.5rem, 8vw, 5rem) clamp(3.5rem, 8vw, 6.875rem);
}

/* White and pale in turn. Sections with their own look don't count: the
   teams section (a snow band, then white) and snow sections; the ones after
   them carry on the rhythm. */
.sbi-section:nth-child(even of .sbi-section:not(.sbi-teams, .is-style-snow)) {
	background-color: var(--sbi-pale);
}

/* No gap between sections: the backgrounds meet. */
main .is-layout-constrained > .sbi-section,
main .is-layout-constrained > .sbi-hero {
	margin-block: 0;
}

.sbi-section h2 {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Hero (patterns/hero.php): the logo beside the photo. */
.sbi-hero {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.sbi-hero__columns {
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.sbi-hero__logo {
	margin: 0;
}

/* The logo's largest width; bigger on wide screens, where it looked lost. */
.sbi-hero {
	--sbi-hero-logo: 48rem;
}

@media (min-width: 1300px) {
	.sbi-hero {
		--sbi-hero-logo: 58rem;
	}
}

.sbi-hero__logo img {
	display: block;
	width: 100%;
	max-width: var(--sbi-hero-logo);
	height: auto;
}

/* Side by side, the logo gets the larger share and the photo the smaller
   (selectors as specific as core's equal-width rule for columns). */
@media (min-width: 782px) {
	.wp-block-columns.sbi-hero__columns > .wp-block-column.sbi-hero__text {
		flex-grow: 3;
	}

	.wp-block-columns.sbi-hero__columns > .wp-block-column.sbi-hero__media {
		flex-grow: 2;
	}

	/* A tall cut-out skater (--wide) stands beside the logo: her column as
	   wide as she is, the pair centred. */
	.wp-block-columns.sbi-hero__columns:has(.sbi-hero__photo--wide) {
		justify-content: center;
	}

	.wp-block-columns.sbi-hero__columns:has(.sbi-hero__photo--wide) > .wp-block-column.sbi-hero__text {
		flex: 0 1 var(--sbi-hero-logo);
	}

	.wp-block-columns.sbi-hero__columns > .wp-block-column.sbi-hero__media:has(.sbi-hero__photo--wide) {
		flex: 0 0 auto;
	}

	.sbi-hero__photo--narrow {
		display: none;
	}

	/* Logo and photo centred on each other: the logo's black rule sits in
	   the middle of its picture, so the two pictures share a centre line.
	   The photo credit hangs below and doesn't count. */
	.wp-block-columns.sbi-hero__columns > .wp-block-column {
		align-self: center;
	}

	.sbi-hero__photo {
		position: relative;
	}

	.sbi-hero__photo figcaption {
		position: absolute;
		top: 100%;
		left: 0;
	}
}

.sbi-hero__photo {
	margin: 0;
}

.sbi-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: cover;
}

/* Cut-outs on the snow: whole, no crop and no round corners. --wide is
   the tall one beside the logo, --narrow the wide one below it on phones;
   only one of them shows. Their credit is in the Impressum. */
.wp-block-image:is(.sbi-hero__photo--wide, .sbi-hero__photo--narrow) img {
	max-height: none;
	object-fit: contain;
	border-radius: 0;
}

.sbi-hero__photo--wide img {
	width: auto;
	height: clamp(20rem, 38vw, 32rem);
}

/* Grows with the bigger logo, so she still stands taller than it. */
@media (min-width: 1300px) {
	.sbi-hero__photo--wide img {
		height: 35rem;
	}
}

/* Phones: the pair under the logo, narrower than it and close to it. */
@media (max-width: 781px) {
	.sbi-hero__photo--wide {
		display: none;
	}

	.sbi-hero:has(.sbi-hero__photo--narrow) {
		padding-block-end: 32px;
	}

	.wp-block-columns.sbi-hero__columns:has(.sbi-hero__photo--narrow) {
		row-gap: 10px;
	}

	.sbi-hero__photo--narrow {
		padding-inline: 75px;
	}
}

/* No photo chosen yet: the logo column takes the width. */
.sbi-hero__media:not(:has(img)) {
	display: none;
}

/* Countdown (blocks/countdown): the number big and red, the label small caps. */
.sbi-countdown {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
	margin-block: var(--wp--preset--spacing--30) 0;
}

.sbi-countdown[hidden] {
	display: none;
}

/* Thank-you mode: one line instead of the number. */
.sbi-countdown--thanks {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.05;
	color: var(--wp--preset--color--red);
}

.sbi-countdown__number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.9;
	color: var(--wp--preset--color--red);
}

.sbi-countdown__label,
.sbi-ticket__reduced {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sbi-actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Event link (blocks/event-link): a button, an outline button or a text link. */
.sbi-event-link {
	margin-block-end: 0;
}

.sbi-event-link .is-outline {
	background: transparent;
	color: var(--wp--preset--color--black);
	box-shadow: inset 0 0 0 2px currentColor;
}

.sbi-event-link .is-outline:hover,
.sbi-event-link .is-outline:focus {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

/* Centred under the wide ticket cards, so as wide as they are. */
.sbi-section .sbi-big-button {
	max-width: var(--wp--style--global--wide-size);
	margin-block-start: var(--wp--preset--spacing--40);
	text-align: center;
}

.sbi-big-button .wp-element-button {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Right after the ticket cards, a little more room than the cards' gap. */
.sbi-section .sbi-cards + .sbi-big-button {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* A photo after the big button (tickets: the SBI26 exhibition). */
.sbi-big-button + .wp-block-image {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sbi-event-link__link {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.sbi-event-link__link .sbi-icon {
	margin-left: 0.2em;
}

/* Welcome (patterns/welcome.php): the skater as a large cut-off graphic,
   only where there is room beside the text. */
.sbi-welcome {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

@media (min-width: 1300px) {
	.sbi-welcome::after {
		content: "";
		position: absolute;
		z-index: -1;
		top: 8%;
		right: -5rem;
		width: 24rem;
		height: 110%;
		background: url(../brand/sbi27-skater.svg) left top / contain no-repeat;
		pointer-events: none;
	}
}

/* A black rule across the page above the big parts (teams, updates). */
.sbi-section.sbi-divider {
	border-top: 4px solid var(--wp--preset--color--black);
}

/* Cards in a grid (tickets, schedule, tips). */
.sbi-cards {
	margin-block: var(--wp--preset--spacing--40);
}

.sbi-cards h3 {
	margin-block-end: 0.3em;
}

.sbi-ticket__price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	color: var(--wp--preset--color--blue);
}

.sbi-ticket__reduced {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--black);
}

/* Schedule (patterns/schedule.php): day black, date red italic; segment
   blue, class black, discipline red (inline colours from the editor). */
.sbi-day__date {
	display: block;
	color: var(--wp--preset--color--red);
}

.sbi-program {
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.15;
}

.sbi-program li + li {
	margin-top: 0.6em;
}

/* The discipline (red, first in the line) small on its own line above the
   segment, slightly indented. */
.sbi-program li > mark.has-red-color:first-child {
	display: block;
	padding-left: 0.6rem;
	font-size: 1.125rem;
	line-height: 1.1;
}

/* The exhibition pops: white League Gothic in a red box (white on red only
   at >= 24 px, 4.4:1). Sized so "Schaulaufen" fits the narrowest day box
   (about 150 px); the time wraps above it there. */
.sbi-program li.sbi-program__highlight {
	margin-top: 1em;
	padding: 0.35em 0.45em 0.3em;
	border-radius: 12px;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	font-size: 1.75rem;
	line-height: 1;
	hyphens: auto;
}

/* Live streams (blocks/stream-links) */
/* Thank-you mode: the recordings, two side by side from 782 px. */
.sbi-recordings {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.sbi-recordings {
		grid-template-columns: 1fr 1fr;
	}
}

.sbi-recordings .sbi-video {
	margin: 0;
}

.sbi-streams:is(ul) {
	padding: 0;
	list-style: none;
}

.sbi-streams li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--sbi-line);
}

.sbi-streams__day {
	min-width: 11rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	line-height: 1.2;
}

/* Recordings (blocks/video): a 16:9 placeholder on snow, the player only
   after a click. The skater only where the box is wide enough for it to stay
   clear of the title (a container query, so it works in grids too). */
.sbi-video {
	margin-inline: 0;
	container-type: inline-size;
}

.sbi-video__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
	aspect-ratio: 16 / 9;
	padding: var(--wp--preset--spacing--30);
	background: url(../brand/sbi27-schnee.webp) center / cover no-repeat;
	text-align: center;
}

@container (min-width: 560px) {
	.sbi-video__frame {
		background:
			url(../brand/sbi27-skater.svg) left 4% center / auto 55% no-repeat,
			url(../brand/sbi27-schnee.webp) center / cover no-repeat;
	}
}

.sbi-video__frame:has(iframe) {
	padding: 0;
	background: var(--wp--preset--color--black);
}

.sbi-video__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.sbi-video__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.1;
}

.sbi-video__load {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.sbi-video__load[hidden] {
	display: none;
}

.sbi-video__note {
	margin-block-start: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Lists with an icon per item: class sbi-i-<icon> on the item (block
   "List item" → Advanced → CSS class). Icons blue, red in the spectators'
   part: non-text, 3:1 is enough. */
.sbi-icon-list,
.sbi-link-list {
	padding: 0;
	list-style: none;
}

.sbi-icon-list li {
	position: relative;
	padding-left: 2.1em;
}

.sbi-icon-list li + li,
.sbi-link-list li + li {
	margin-top: 0.6em;
}

.sbi-icon-list li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.4em;
	height: 1.4em;
	background: var(--sbi-part, var(--wp--preset--color--blue));
	-webkit-mask: var(--sbi-i) center / contain no-repeat;
	mask: var(--sbi-i) center / contain no-repeat;
}

.sbi-i-tram {
	--sbi-i: url(../icons/tram.svg);
}

.sbi-i-train {
	--sbi-i: url(../icons/train.svg);
}

.sbi-i-airplane-tilt {
	--sbi-i: url(../icons/airplane-tilt.svg);
}

.sbi-i-car {
	--sbi-i: url(../icons/car.svg);
}

.sbi-i-ticket {
	--sbi-i: url(../icons/ticket.svg);
}

.sbi-i-fork-knife {
	--sbi-i: url(../icons/fork-knife.svg);
}

.sbi-i-wheelchair {
	--sbi-i: url(../icons/wheelchair.svg);
}

.sbi-i-file-pdf {
	--sbi-i: url(../icons/file-pdf.svg);
}

.sbi-i-file-doc {
	--sbi-i: url(../icons/file-doc.svg);
}

.sbi-i-envelope-simple {
	--sbi-i: url(../icons/envelope-simple.svg);
}

.sbi-i-bed {
	--sbi-i: url(../icons/bed.svg);
}

/* Teams part (patterns/teams.php): starts with a snow band, headings blue. */
.sbi-teams {
	padding-top: 0;
}

.sbi-part-intro {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

.sbi-part-intro h2 {
	margin-block: 0.1em var(--wp--preset--spacing--30);
}

/* A cut-out pair beside the title and lead (below them on phones, where the
   columns stack). */
.sbi-part-intro__columns {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-block: 0;
}

@media (min-width: 782px) {
	.wp-block-columns.sbi-part-intro__columns > .wp-block-column.sbi-part-intro__text {
		flex: 0 1 720px;
	}

	.wp-block-columns.sbi-part-intro__columns > .wp-block-column.sbi-part-intro__media {
		flex: 1 1 0;
	}
}

.sbi-part-intro__photo {
	margin: 0;
}

.wp-block-image.sbi-part-intro__photo img {
	display: block;
	width: 100%;
	max-width: 32rem;
	height: auto;
	margin-inline: auto;
	border-radius: 0;
}

/* A cut-out skater to the right of a section's content (patterns/updates.php),
   only side by side; where the columns stack he is left out. */
.sbi-cutout__columns {
	gap: var(--wp--preset--spacing--50);
	margin-block: 0;
}

@media (min-width: 782px) {
	.wp-block-columns.sbi-cutout__columns > .wp-block-column.sbi-cutout__text {
		flex: 0 1 720px;
	}

	/* The rest of the width, at least as wide as the picture at its height
	   (below), which is centred in it. */
	.wp-block-columns.sbi-cutout__columns > .wp-block-column.sbi-cutout__media {
		flex: 1 1 0;
		min-width: min-content;
	}
}

@media (max-width: 781px) {
	.wp-block-columns.sbi-cutout__columns > .wp-block-column.sbi-cutout__media {
		display: none;
	}
}

.sbi-cutout__photo {
	margin: 0;
}

/* Sized by its height only, so the column knows its width. */
.wp-block-image.sbi-cutout__photo img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(18rem, 30vw, 26rem);
	margin-inline: auto;
	border-radius: 0;
}

.sbi-section h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sbi-section :is(.is-style-ice-box, .is-style-card, .is-style-callout) h3,
.sbi-cards h3 {
	margin-block-start: 0;
}

/* Table of deadlines: rows as blocks on narrow screens. */
.sbi-table table {
	width: 100%;
	border-collapse: collapse;
}

.sbi-table th,
.sbi-table td {
	padding: 0.6em 0.75em 0.6em 0;
	border: 0;
	border-bottom: 1px solid var(--sbi-line);
	text-align: left;
	vertical-align: top;
}

.sbi-table th {
	font-weight: 600;
}

@media (min-width: 600px) {
	.sbi-table td:nth-child(2) {
		white-space: nowrap;
	}
}

@media (max-width: 599.98px) {
	.sbi-table thead {
		display: none;
	}

	.sbi-table tr {
		display: block;
		padding-block: 0.6em;
		border-bottom: 1px solid var(--sbi-line);
	}

	.sbi-table td {
		display: block;
		padding: 0;
		border: 0;
	}

	.sbi-table td:nth-child(2) {
		font-weight: 600;
	}
}

/* Updates on the front page */
.sbi-updates-grid .wp-block-post-title {
	margin-block: 0.15em 0.3em;
}

.sbi-updates-grid > li > * {
	margin-block: 0;
}

/* A mail address as a big League Gothic line (contact, become a partner). */
.sbi-mail-big {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 6vw, 2.5rem);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.sbi-become-partner {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* The look of the design guide's website (site.css): titles black, cards
   and callouts with round corners, black rules over subsections, dashes as
   list bullets. */

/* Text left-aligned on the wide grid instead of centred. */
main .is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
	margin-right: auto !important;
}

/* The two parts of the front page, as a hint of colour (class on the
   section): spectators red, teams blue, the shared sections black. Used by
   the title's underline, the start of the rules, the callout bar, the
   list dashes and the list icons. */
.sbi-part-spectators {
	--sbi-part: var(--wp--preset--color--red);
}

.sbi-part-teams {
	--sbi-part: var(--wp--preset--color--blue);
}

/* Buttons in the part's colour: red for spectators (the default), blue for
   teams. White on blue is 3.6:1, enough for League Gothic at button size. */
.sbi-part-teams .wp-element-button:not(.is-outline, .is-style-outline *) {
	background-color: var(--sbi-part);
}

.sbi-part-teams .wp-element-button.is-outline,
.sbi-part-teams .is-style-outline .wp-element-button {
	color: var(--sbi-part);
}

.sbi-part-teams .wp-element-button:is(:hover, :focus) {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Core's outline button keeps a transparent background on hover (its rule is
   more specific), so white text would vanish; fill it black like ours. */
.wp-block-button.is-style-outline > .wp-element-button:is(:hover, :focus) {
	border-color: var(--wp--preset--color--black);
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Section titles underlined in the part's colour. */
.sbi-section h2 {
	text-decoration: underline;
	text-decoration-color: var(--sbi-part, var(--wp--preset--color--black));
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.14em;
	text-decoration-skip-ink: none;
}

/* Cards (styles/blocks/card.json) are white; on a white section a hairline
   frames them. The schedule's day boxes stay on ice. */
.sbi-section:not(:nth-child(even of .sbi-section:not(.sbi-teams, .is-style-snow)), .is-style-snow) :is(.is-style-card, .is-style-callout),
.sbi-content :is(.is-style-card, .is-style-callout) {
	box-shadow: 0 0 0 1px var(--sbi-line);
}

.is-style-card > :first-child,
.is-style-callout > :first-child,
.is-style-ice-box > :first-child {
	margin-block-start: 0;
}

.is-style-card > :last-child,
.is-style-callout > :last-child,
.is-style-ice-box > :last-child {
	margin-block-end: 0;
}

.is-style-callout {
	max-width: 56rem;
	border-left-color: var(--sbi-part, var(--wp--preset--color--blue)) !important;
}

/* A rule over each subsection title (--sbi-rule below). */
.sbi-section > h3,
.sbi-section .wp-block-column > h3,
.sbi-content > h2,
.sbi-content > h3 {
	padding-top: 0.75rem;
	background: var(--sbi-rule);
}

/* Rules: black, the first 3 rem thicker and in the part's colour. */
.sbi-section > h3,
.sbi-section .wp-block-column > h3,
.sbi-content > h2,
.sbi-content > h3 {
	--sbi-rule:
		linear-gradient(var(--sbi-part, var(--wp--preset--color--black)) 0 0) left top / 3rem 4px no-repeat,
		linear-gradient(var(--wp--preset--color--black) 0 0) left 1px / 100% 2px no-repeat;
}

/* Plain lists: a short dash as bullet, red and blue in turn (see below for the two parts). */
:is(.sbi-section, .sbi-content) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) {
	padding-left: 0;
	list-style: none;
}

:is(.sbi-section, .sbi-content) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) > li {
	position: relative;
	padding-left: 1.6rem;
}

:is(.sbi-section, .sbi-content) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) > li + li {
	margin-top: 0.5rem;
}

:is(.sbi-section, .sbi-content) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) > li::before {
	content: "";
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 0.8rem;
	height: 3px;
	background: var(--wp--preset--color--red);
}

:is(.sbi-section, .sbi-content) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) > li:nth-child(even)::before {
	background: var(--wp--preset--color--blue);
}

/* In the spectators' and the teams' part, all dashes in the part's colour. */
:is(.sbi-part-spectators, .sbi-part-teams) ul.wp-block-list:not(.sbi-icon-list, .sbi-link-list, .sbi-program) > li::before {
	background: var(--sbi-part);
}

/* Pictures with round corners: photos, the map, the video placeholder. */
.wp-block-image img,
.sbi-video__frame {
	border-radius: 20px;
}

.sbi-video__frame {
	overflow: hidden;
}

.sbi-map img {
	box-shadow: 0 0 0 1px var(--sbi-line);
}

/* Captions as small labels (the guide's figcaption); black on snow, where
   the grey would be too light. */
.wp-element-caption {
	margin-top: 0.75rem;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sbi-muted);
}

.is-style-snow .wp-element-caption {
	color: var(--wp--preset--color--black);
}

/* Updates on the front page as cards. */
.sbi-updates-grid > li {
	padding: 1.625rem 1.75rem;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
}

.sbi-section:not(:nth-child(even of .sbi-section:not(.sbi-teams, .is-style-snow)), .is-style-snow) .sbi-updates-grid > li {
	box-shadow: 0 0 0 1px var(--sbi-line);
}