/*
 * patterns/events-single.css — "Events Single"
 * Markup: wp-content/themes/fcs/patterns/events-single.php
 * Root:   .fcs-events-single
 *
 * The body of an event's own page (Figma 10492:8982): the event on the left,
 * Event Details, Register and Add to my calendar on the right. Used by
 * templates/single-fcs_event.html, never inserted into a page.
 *
 * The column frame is News Single's (news-single.css), restated under this
 * root rather than shared, because a pattern's CSS only targets its own root.
 * The contents of __content and __details are written by
 * fcs-core/inc/events-single.php.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large; the editor owns
 * those. Small is pinned in layout/spacing.css, on the root (vertical) and on
 * __inner (the 20px gutter). See CLAUDE.md § "Section padding".
 */

/* Columns ------------------------------------------------------------- */

/*
 * DERIVED — there is no mobile or tablet design for the event page.
 *
 *   Small   one column: the event, then its details under it
 *   Medium  the same, for News Single's reason: a 448px sidebar beside a
 *           readable body needs more than 768px
 *   Large   Figma: 712px + 448px with an 80px gap in the 1240px container
 *
 * Stacked, the details card follows the description. That is also the markup
 * order, so screen-reader and visual order agree.
 */
.fcs-events-single .fcs-events-single__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	row-gap: 40px;
}

.fcs-events-single .fcs-events-single__inner > * {
	margin-block: 0;
}

@media ( min-width: 1024px ) {
	.fcs-events-single .fcs-events-single__inner {
		grid-template-columns: minmax( 0, 712fr ) minmax( 0, 448fr );
		column-gap: 80px;
		align-items: start;
	}
}

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

/* Title → 40px → image → 40px → description (Figma "Content", gap 40). */
.fcs-events-single .fcs-events-single__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.fcs-events-single .fcs-events-single__main > * {
	margin-block: 0;
}

/*
 * The 4:3 ratio and the 12px radius are block attributes on the featured image,
 * as in Upcoming Events. This only makes it fill the column. An event without an
 * image renders nothing here, and the gap closes up behind it.
 */
.fcs-events-single .fcs-events-single__media {
	width: 100%;
}

.fcs-events-single .fcs-events-single__media img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/*
 * The description is the event's WYSIWYG field, not blocks, so there is no block
 * gap to space it. Its paragraphs, lists and headings are given Figma's 24px
 * here instead.
 */
.fcs-events-single .fcs-events-single__content > * {
	margin-block: 0;
}

.fcs-events-single .fcs-events-single__content > * + * {
	margin-block-start: 24px;
}

/* Sidebar ------------------------------------------------------------- */

/*
 * The "Event Card" (Figma 10588:10572). The surface background and the 12px
 * radius are block attributes. This sets the inside: 32px padding, and
 * "Event Details" → 20px → each row → 20px.
 *
 * DERIVED: 24px padding at Small, so the rows keep their width on a 375px
 * phone; Figma's 32px from Medium up. Stacked under the event, the card is its
 * own boundary, so it needs no rule above it the way News Single's list does.
 *
 * `.wp-block-group` is in the selector to beat core's has-background padding.
 */
.fcs-events-single .wp-block-group.fcs-events-single__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}

@media ( min-width: 768px ) {
	.fcs-events-single .wp-block-group.fcs-events-single__aside {
		padding: 32px;
	}
}

.fcs-events-single .fcs-events-single__aside > * {
	margin-block: 0;
}

/*
 * The details group is a flow container. The rows sit 20px under the heading,
 * as the aside's gap gives; Register is 32px under the last row (Figma 10588:10599).
 */
.fcs-events-single .fcs-events-single__details {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.fcs-events-single .fcs-events-single__details > * {
	margin-block: 0;
}

/* Cancelled: the calendar pop-up's badge, so a cancelled event looks the same in both. */
.fcs-events-single .fcs-events-single__badge {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var( --wp--preset--border-radius--pill );
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--on-primary );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

/* Details list -------------------------------------------------------- */

/*
 * Figma: rows 20px apart. A 40px white circle holding a 20px icon, 16px, then
 * the value in the H5 style (18/28 bold, -0.2px). The size is the h5 preset;
 * the weight, line height and tracking repeat theme.json's h5 element, because
 * a <dl> is not a heading. The icon is centred on the text, so it sits in the
 * middle of a two-line location.
 *
 * Each row's <dt> ("Date", "Time", "Location") is visually hidden. The icon
 * says it on screen, and a screen reader still hears a labelled list.
 */
.fcs-events-single .fcs-events-single__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	font-size: var( --wp--preset--font-size--h-5 );
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: -0.2px;
}

.fcs-events-single .fcs-events-single__row dd {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.fcs-events-single .fcs-events-single__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var( --wp--preset--color--background );
}

/* Calendar.svg is drawn at 24px; the same glyph is 20px in this card. */
.fcs-events-single .fcs-events-single__icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* Venue, then address: separate lines, 2px apart (Figma 10588:10591). */
.fcs-events-single .fcs-events-single__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * Register is a core button with the primary block style, so it needs nothing
 * here. The group only resets the flex gap that wp-block-buttons brings.
 */
.fcs-events-single .fcs-events-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Add to my calendar -------------------------------------------------- */

/*
 * DERIVED: not in the design. This is the calendar pop-up's footer, kept
 * quiet under a rule because Register is the page's action. The label is a
 * small uppercase caption, the links sweep like every standalone link, and the
 * note says plainly that the copy will not update.
 */
.fcs-events-single .fcs-events-single__add {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block-start: 20px;
	border-block-start: 1px solid var( --wp--preset--color--stroke );
}

.fcs-events-single .fcs-events-single__add > * {
	margin: 0;
}

.fcs-events-single .fcs-events-single__add-title {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--muted );
}

.fcs-events-single .fcs-events-single__add-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.5;
}

.fcs-events-single .fcs-events-single__add-links a {
	color: var( --wp--preset--color--link );
	font-weight: 700;
}

.fcs-events-single .fcs-events-single__add-note {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4286;
	color: var( --wp--preset--color--muted );
}