/* Spithurst What's On — front-end day grid styling.
   Editorial layout, brand colour as a left stripe and 12% tint only.
   No decoration beyond what helps scanning the grid. */

.swo-grid-root {
	--swo-time-col: 52px;
	--swo-col-min: 80px;
	--swo-row-height: 60px;
	--swo-border: #e8e6df;
	--swo-text: #1c1c1a;
	--swo-text-muted: #5b5b58;
	--swo-bg: #ffffff;
	--swo-alt-bg: #faf9f5;

	font-family: var(--swo-font-family, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
	color: var(--swo-text);
	background: var(--swo-bg);
	max-width: 100%;
	position: relative;
	box-sizing: border-box;
}

.swo-grid-root *,
.swo-grid-root *::before,
.swo-grid-root *::after {
	box-sizing: border-box;
}

.swo-grid-root .swo-bootstrap {
	display: none;
}

/* Defeat themes that override the HTML5 [hidden] attribute. */
.swo-grid-root [hidden],
.swo-grid-root .swo-modal-template {
	display: none !important;
}

.swo-grid-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-bottom: 1px solid var(--swo-border);
	margin: 0 0 16px;
	flex-wrap: wrap;
}

/* Defensively neutralise theme h2 styles cascading into the date label. */
.swo-grid-root .swo-grid-date {
	flex: 1 1 auto;
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--swo-text);
	font-family: inherit;
	font-style: normal;
	text-transform: none;
	text-align: left;
	text-shadow: none;
	border: 0;
	background: transparent;
	font-variant-numeric: tabular-nums;
	min-width: 200px;
}

.swo-grid-root .swo-grid-date::before,
.swo-grid-root .swo-grid-date::after {
	content: none;
	display: none;
}

/* Reset theme button styles that often leak through with !important rules. */
.swo-grid-root .swo-nav-button {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--swo-border);
	width: 36px;
	height: 36px;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var(--swo-text);
	font-family: inherit;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	transition: background 120ms ease;
	border-radius: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.swo-grid-root .swo-nav-button:hover,
.swo-grid-root .swo-nav-button:focus-visible {
	background: var(--swo-alt-bg);
	color: var(--swo-text);
	outline: none;
}

.swo-grid-jump {
	flex-shrink: 0;
	margin: 0;
}

.swo-grid-jump input {
	font-size: 13px;
	padding: 7px 8px;
	border: 1px solid var(--swo-border);
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
	background: #fff;
	color: var(--swo-text);
	font-family: inherit;
	line-height: 1.2;
}

.swo-grid-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.swo-grid {
	display: grid;
	grid-template-columns: var(--swo-time-col) repeat(var(--swo-cols), minmax(var(--swo-col-min), 1fr));
	width: 100%;
}

.swo-grid-head {
	display: contents;
}

.swo-grid-time-corner {
	border-bottom: 1px solid var(--swo-border);
	border-right: 1px solid var(--swo-border);
}

.swo-brand-col {
	border-bottom: 1px solid var(--swo-border);
	border-right: 1px solid var(--swo-border);
	padding: 12px 4px 10px;
	text-align: center;
	border-top: 3px solid var(--swo-brand-colour, transparent);
	min-width: 0;
}

.swo-brand-col:last-child {
	border-right: 0;
}

.swo-grid-root .swo-brand-link {
	text-decoration: none;
	color: var(--swo-text);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: inherit;
}

.swo-grid-root .swo-brand-link:hover,
.swo-grid-root .swo-brand-link:focus-visible {
	color: var(--swo-text);
	text-decoration: none;
}

.swo-grid-root .swo-brand-link:hover .swo-brand-name,
.swo-grid-root .swo-brand-link:focus-visible .swo-brand-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.swo-grid-root .swo-brand-logo {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	min-width: 0 !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	padding: 0;
	margin: 0;
}

/* Without an uploaded logo, fall back to a coloured circle in the brand's own
   colour — feels intentional rather than a "missing image" placeholder. */
.swo-brand-logo-placeholder {
	background: var(--swo-brand-colour, #1c1c1a);
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1;
}

.swo-brand-name {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--swo-text);
	text-transform: none;
}

.swo-grid-body {
	display: contents;
}

.swo-grid-row {
	display: contents;
}

.swo-grid-time {
	border-right: 1px solid var(--swo-border);
	border-bottom: 1px solid var(--swo-border);
	font-size: 11px;
	color: var(--swo-text-muted);
	padding: 6px 8px 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
	min-height: var(--swo-row-height);
}

.swo-grid-cell {
	border-right: 1px solid var(--swo-border);
	border-bottom: 1px solid var(--swo-border);
	min-height: var(--swo-row-height);
	padding: 3px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.swo-grid-cell:last-child {
	border-right: 0;
}

/* Alternating column shading to aid scanning */
.swo-grid-cell:nth-child(2n) {
	background: var(--swo-alt-bg);
}

.swo-session-card {
	all: unset;
	cursor: pointer;
	display: block;
	background: var(--swo-brand-tint, rgba(245, 245, 240, 1));
	border-left: 3px solid var(--swo-brand-colour, #888);
	padding: 5px 6px;
	font-size: 12px;
	line-height: 1.25;
	color: var(--swo-text);
	text-align: left;
	overflow: hidden;
	min-width: 0;
	transition: filter 120ms ease;
}

.swo-session-card:hover,
.swo-session-card:focus-visible {
	filter: brightness(0.97);
	outline: none;
}

.swo-session-card:focus-visible {
	outline: 2px solid var(--swo-brand-colour);
	outline-offset: 1px;
}

.swo-session-time {
	display: block;
	font-size: 10px;
	color: var(--swo-text-muted);
	font-variant-numeric: tabular-nums;
	margin-bottom: 1px;
}

.swo-session-title {
	display: block;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.swo-session-card.is-cancelled .swo-session-title {
	text-decoration: line-through;
	color: var(--swo-text-muted);
}

/* Desktop hides the brand-row elements; they only appear on mobile. */
.swo-session-dot,
.swo-session-brand {
	display: none;
}

.swo-session-body {
	display: contents;
}

.swo-grid-empty,
.swo-grid-empty-day {
	color: var(--swo-text-muted);
	font-size: 14px;
	padding: 32px 0;
	text-align: center;
}

.swo-grid-noscript-nav {
	display: flex;
	gap: 24px;
	margin-top: 16px;
	font-size: 14px;
}

/* Mobile time-ordered list view (matches the wireframe) */
@media (max-width: 767px) {
	.swo-grid-root {
		--swo-mobile-time-col: 56px;
	}

	.swo-grid-scroll {
		overflow: visible;
		padding: 0 16px;
	}

	.swo-grid {
		display: block;
		width: auto;
	}

	/* Hide the desktop column headers, the corner cell, the per-row time labels,
	   and the brand-column wrapper — we lay sessions out flat. */
	.swo-grid-head,
	.swo-grid-time-corner,
	.swo-grid-time,
	.swo-brand-col {
		display: none;
	}

	.swo-grid-body,
	.swo-grid-row,
	.swo-grid-cell {
		display: contents;
	}

	.swo-grid-cell {
		background: transparent;
	}

	.swo-session-card {
		all: unset;
		cursor: pointer;
		display: grid;
		grid-template-columns: var(--swo-mobile-time-col) 14px 1fr;
		align-items: center;
		column-gap: 12px;
		padding: 14px 0;
		border-bottom: 1px solid var(--swo-border);
		font-size: 14px;
		color: var(--swo-text);
		background: transparent;
		min-width: 0;
	}

	.swo-session-card:hover,
	.swo-session-card:focus-visible {
		filter: none;
		background: var(--swo-alt-bg);
		outline: none;
	}

	.swo-session-time {
		display: block;
		font-size: 15px;
		font-weight: 500;
		color: var(--swo-text);
		font-variant-numeric: tabular-nums;
		margin: 0;
		line-height: 1.2;
	}

	.swo-session-dot {
		display: block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--swo-brand-colour, #1c1c1a);
		flex-shrink: 0;
		justify-self: center;
	}

	.swo-session-body {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;
	}

	.swo-session-title {
		display: block;
		font-size: 15px;
		font-weight: 500;
		color: var(--swo-text);
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.swo-session-brand {
		display: block;
		font-size: 12px;
		color: var(--swo-text-muted);
		line-height: 1.25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.swo-session-card.is-cancelled .swo-session-title,
	.swo-session-card.is-cancelled .swo-session-brand {
		text-decoration: line-through;
		color: var(--swo-text-muted);
	}

	.swo-grid-nav {
		padding: 16px;
	}

	.swo-grid-empty-day {
		padding: 24px 16px;
	}
}

/* Modal */
.swo-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.swo-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 18, 0.5);
}

.swo-modal-panel {
	position: relative;
	background: #ffffff;
	max-width: 560px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 32px 32px 28px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
	color: var(--swo-text);
}

.swo-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 24px;
	color: var(--swo-text-muted);
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 1;
}

.swo-modal-close:hover,
.swo-modal-close:focus-visible {
	color: var(--swo-text);
	outline: none;
}

.swo-modal-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--swo-text-muted);
	margin-bottom: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.swo-modal-brand img {
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
}

.swo-modal-title {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.swo-modal-meta {
	color: var(--swo-text-muted);
	font-size: 13px;
	margin: 0 0 20px;
	font-variant-numeric: tabular-nums;
}

.swo-modal-meta-sep {
	margin: 0 6px;
}

.swo-modal-image {
	margin: 0 0 20px;
}

.swo-modal-image img {
	width: 100%;
	height: auto;
	display: block;
}

.swo-modal-description {
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.swo-modal-cancelled {
	background: #fef0ef;
	border-left: 3px solid #b32d2e;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 20px;
}

.swo-modal-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.swo-cta {
	text-decoration: none;
	padding: 11px 18px;
	font-size: 14px;
	font-weight: 500;
	display: inline-block;
	transition: filter 120ms ease;
}

.swo-cta-primary {
	background: #1c1c1a;
	color: #ffffff;
}

.swo-cta-primary:hover {
	filter: brightness(1.15);
}

.swo-cta-secondary {
	color: var(--swo-text);
	border-bottom: 1px solid var(--swo-text);
	padding-left: 0;
	padding-right: 0;
}

body.swo-modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.swo-session-card,
	.swo-nav-button,
	.swo-cta {
		transition: none;
	}
}