/**
 * Event pages — the hub /sundmused/ (page-sundmused.php) and each event under
 * it (page-sundmus.php, the "Event page" template). Bead kdb.12.
 *
 * Enqueued by the per-page map in inc/assets.php ahead of 'static', so this
 * sheet stands alone: static.css does NOT load with it, and the few rules the
 * pages share with it are repeated here rather than assumed.
 *
 * The final design (owner, 2026-10-15, bead spo): the title on the page band,
 * the prose on the page ground, repeated items as hairline frames —
 * transparent, var(--cc-border), square — so the band stays the page's one
 * coloured surface. Every value is a token. Mobile first.
 *
 * @package CreativeCanvas
 */

/* ---------------------------------------------------------------------------
 * Band and prose (shared with static.css, repeated — see above)
 * ------------------------------------------------------------------------ */

.cc-page__head {
	margin-block-end: var(--cc-space-8);
}

.cc-event__eyebrow {
	margin-block-end: var(--cc-space-3);
}

.cc-event__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.cc-event__eyebrow a:hover {
	color: var(--cc-color-ink);
	text-decoration: underline;
}

.cc-events__intro {
	margin-block-start: var(--cc-space-4);
	font-size: var(--cc-text-lg);
	line-height: var(--cc-leading-ui);
	color: var(--cc-color-text);
}

/* The opening line of an event's copy, as About's lead. */
.cc-prose .cc-lead {
	font-size: var(--cc-text-lg);
	line-height: var(--cc-leading-ui);
	color: var(--cc-color-ink);
}

/* Steps in "how to order" carry their own number. */
.cc-event__body ol {
	padding-inline-start: var(--cc-space-6);
}

.cc-event__body li::marker {
	font-family: var(--cc-font-display);
	color: var(--cc-color-action);
}

/* ---------------------------------------------------------------------------
 * Sections after the copy: products, group order, other occasions
 * ------------------------------------------------------------------------ */

.cc-event__products,
.cc-event-cta,
.cc-event__others {
	margin-block-start: var(--cc-space-13);
}

.cc-events__list + .cc-event-cta {
	margin-block-start: var(--cc-space-13);
}

/* Section titles a step under the page title, as the home page's smaller
 * section heads; Estonian sentence case (no transform). */
.cc-event__heading,
.cc-event-cta__title {
	font-size: var(--cc-text-xxl);
	line-height: var(--cc-leading-snug);
}

.cc-event__others .cc-event__heading {
	margin-block-end: var(--cc-space-5);
}

/* ---------------------------------------------------------------------------
 * The group-order block: one hairline frame, copy then buttons
 * ------------------------------------------------------------------------ */

.cc-event-cta {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-6);
	padding: var(--cc-space-6) var(--cc-space-5);
	background-color: transparent;
	border: var(--cc-border);
	border-radius: 0;
}

.cc-event-cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	max-width: var(--cc-prose-max);
}

.cc-event-cta__text,
.cc-event-cta__offer {
	font-size: var(--cc-text-body);
	line-height: var(--cc-leading-body);
	color: var(--cc-color-text);
}

.cc-event-cta__offer {
	color: var(--cc-color-ink);
}

.cc-event-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cc-space-3);
}

@media (min-width: 64rem) {
	.cc-event-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--cc-space-8) var(--cc-space-10);
	}

	.cc-event-cta__actions {
		flex-shrink: 0;
		justify-content: flex-end;
		max-width: 50%;
	}
}

/* ---------------------------------------------------------------------------
 * Hub: one hairline frame per event
 * ------------------------------------------------------------------------ */

.cc-events__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-block-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.cc-events__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.cc-events__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cc-event-card {
	display: flex;
	flex-direction: column;
	gap: var(--cc-space-3);
	height: 100%;
	padding: var(--cc-space-6) var(--cc-space-5);
	background-color: transparent;
	border: var(--cc-border);
	border-radius: 0;
	color: var(--cc-color-text);
	text-decoration: none;
	transition: border-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-event-card:hover {
	color: var(--cc-color-text);
	border-color: var(--cc-color-action);
}

.cc-event-card:focus-visible {
	outline: var(--cc-focus-width) solid var(--cc-focus-color);
	outline-offset: var(--cc-focus-offset);
}

.cc-event-card__title {
	font-size: var(--cc-text-xxl);
	line-height: var(--cc-leading-snug);
}

.cc-event-card__text {
	font-size: var(--cc-text-small);
	line-height: var(--cc-leading-body);
}

/* The card's action: Inter, the action colour, a trailing arrow — pushed to
 * the foot so the row of cards lines up whatever the text length. */
.cc-event-card__more {
	margin-block-start: auto;
	padding-block-start: var(--cc-space-2);
	font-size: var(--cc-text-small);
	font-weight: var(--cc-weight-medium);
	color: var(--cc-color-action);
}

.cc-event-card__more::after {
	content: " \2192";
	transition: margin var(--cc-duration-fast) var(--cc-ease);
}

.cc-event-card:hover .cc-event-card__more::after {
	margin-inline-start: 2px;
}

/* ---------------------------------------------------------------------------
 * Other occasions: a row of hairline-framed links
 * ------------------------------------------------------------------------ */

.cc-event-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cc-block-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.cc-event-links {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.cc-event-links {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cc-event-links__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-3);
	min-height: 2.75rem;
	height: 100%;
	padding: var(--cc-space-4) var(--cc-space-5);
	border: var(--cc-border);
	border-radius: 0;
	font-family: var(--cc-font-display);
	font-size: var(--cc-text-lg);
	font-weight: var(--cc-weight-medium);
	line-height: var(--cc-leading-snug);
	color: var(--cc-color-ink);
	text-decoration: none;
	transition: border-color var(--cc-duration-fast) var(--cc-ease);
}

.cc-event-links__item::after {
	content: "\2192";
	font-family: var(--cc-font-body);
	color: var(--cc-color-action);
}

.cc-event-links__item:hover {
	color: var(--cc-color-ink);
	border-color: var(--cc-color-action);
}