/* Planning Center output.
   Everything here inherits the theme's design tokens, with fallbacks so the
   plugin still looks sane if it is ever used under a different theme. */

.h2o-pco-embed {
	position: relative;
	border-radius: var(--h2o-radius-lg, 18px);
	overflow: hidden;
	background: var(--h2o-surface, #fff);
	box-shadow: var(--h2o-shadow-md, 0 12px 40px -18px rgb(4 28 44 / 0.35));
}

.h2o-pco-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.h2o-pco-notice {
	padding: 0.85rem 1.1rem;
	border-radius: var(--h2o-radius-sm, 10px);
	background: color-mix(in srgb, var(--h2o-accent, #e0a458) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--h2o-accent, #e0a458) 45%, transparent);
	font-size: 0.925rem;
}

.h2o-pco-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.h2o-pco-empty {
	color: var(--h2o-text-soft, #56707f);
	font-style: italic;
}

/* ---- Event list ---- */

.h2o-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.h2o-event {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1.25rem;
	align-items: start;
	padding: 1.35rem 1.5rem;
	background: var(--h2o-surface, #fff);
	border: 1px solid var(--h2o-line, #dfeaf1);
	border-radius: var(--h2o-radius-md, 14px);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.h2o-event:hover {
	border-color: color-mix(in srgb, var(--h2o-blue, #1174b8) 45%, transparent);
	transform: translateY(-2px);
	box-shadow: var(--h2o-shadow-sm, 0 8px 24px -16px rgb(4 28 44 / 0.4));
}

.h2o-event__date {
	display: grid;
	place-items: center;
	gap: 0.1rem;
	padding: 0.6rem 0;
	border-radius: var(--h2o-radius-sm, 10px);
	background: linear-gradient(160deg, var(--h2o-deep, #0a3d62), var(--h2o-blue, #1174b8));
	color: #fff;
	line-height: 1;
}

.h2o-event__mon {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.h2o-event__day {
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.h2o-event__body {
	min-width: 0;
}

.h2o-event__title {
	margin: 0 0 0.2rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

.h2o-event__meta {
	margin: 0;
	font-size: 0.875rem;
	color: var(--h2o-text-soft, #56707f);
}

.h2o-event__summary {
	margin: 0.55rem 0 0.4rem;
	font-size: 0.95rem;
}

@media (max-width: 30rem) {
	.h2o-event {
		grid-template-columns: 3.5rem 1fr;
		gap: 0.9rem;
		padding: 1.1rem;
	}

	.h2o-event__day {
		font-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.h2o-event {
		transition: none;
	}

	.h2o-event:hover {
		transform: none;
	}
}