/*
 * Sundbåten's live parts (includes/class-live-parts.php), drawn to match the design's drawn versions:
 * the status strip and first screen, the pier boards, Rutetider's route sections.
 * Colours, sizes and spacing come from the theme's presets, so they follow the design system.
 */

/* The status: its colour follows the state. */
.sb-state--normal { background-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }
.sb-state--partial,
.sb-state--cancelled { background-color: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--base); }
.sb-state--stale { background-color: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--contrast); }

.sb-status-strip a,
.sb-status-hero a { color: inherit; }
.sb-status-strip a:hover,
.sb-status-hero a:hover { color: inherit; text-decoration-thickness: 2px; }
.sb-status-strip a:focus-visible,
.sb-status-hero a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.sb-strip__text { margin: 0; line-height: 1.5; }
.sb-strip__tel { font-weight: 700; }

.sb-hero { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); }
.sb-hero > * { margin: 0; }
.sb-hero__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.sb-hero__head > * { margin: 0; }
.sb-hero__date { font-weight: 600; line-height: 1.2; }
.sb-hero__status { line-height: 1.05; color: inherit; }
.sb-hero__note { max-width: 720px; line-height: 1.4; }
.sb-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); }
.sb-hero__meta > * { margin: 0; }
.sb-hero__updated { line-height: 1.5; }
.sb-state--partial .sb-hero__updated,
.sb-state--cancelled .sb-hero__updated { color: var(--wp--preset--color--accent-4); }
.sb-hero__call { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--wp--preset--spacing--20); }
.sb-hero__call p { margin: 0; font-weight: 700; line-height: 1.4; }
.sb-hero__icon { flex: none; width: 24px; height: 24px; }

/* The pier board. */
.sb-board { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); color: var(--wp--preset--color--contrast); }
.sb-board > * { margin: 0; }
.sb-board__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--accent-1);
	border-radius: 6px;
}
.sb-board__name > * { margin: 0; }
.sb-board__name h2,
.sb-board__name h3 { font-size: var(--wp--preset--font-size--x-large); line-height: 1.2; color: var(--wp--preset--color--base); }
.sb-board__name p { line-height: 1.5; color: var(--wp--preset--color--accent-4); }
.sb-board__message { font-weight: 600; line-height: 1.4; }
.sb-board__direction { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.sb-board__label { margin: 0; font-weight: 600; }
.sb-board__times { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.sb-board__foot { line-height: 1.5; color: var(--wp--preset--color--accent-5); }

.sb-time {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 6px;
	color: var(--wp--preset--color--base);
}
.sb-time__t { font-size: var(--wp--preset--font-size--large); font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sb-time__label { font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.5; }
.sb-time--next { background-color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); }
.sb-time--arrival { background-color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); }
.sb-time--gone,
.sb-time--arrival.sb-time--gone { background-color: var(--wp--preset--color--accent-4); border-color: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--accent-5); }

/* Rutetider: a route section, its heading and its four boards. */
.sb-route { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }
.sb-route > * { margin: 0; }
.sb-route__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }
.sb-route__head > * { margin: 0; }
.sb-route__head h2 { line-height: 1.1; }
.sb-route__now {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--accent-1);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	line-height: 1.5;
}
.sb-boards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
	gap: var(--wp--preset--spacing--60);
}