/**
 * Capstone Base — frontend overrides.
 *
 * Kept minimal: Twenty Twenty-Five's theme.json handles color/typography
 * tokens. These rules only cover structure the theme genuinely can't
 * express — the events archive, calendar grid, and event cards.
 */

/* List view stays narrow (the theme's normal content width) even when the
   block itself is aligned wide/full for the calendar's sake — see
   render_archive()'s $wrapper_class. */
.cb-events-archive--narrow {
	max-width: var(--wp--style--global--content-size, 800px);
	margin-inline: auto;
}

/* View tabs — active tab is inverted (solid fill, flipped text color) */
.cb-view-tabs {
	display: flex;
	gap: 0.5em;
	margin-bottom: 1.5em;
}
.cb-view-tab {
	padding: 0.4em 1em;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
}
.cb-view-tab--active {
	font-weight: 600;
	background: CanvasText;
	color: Canvas;
}

/* List view */
.cb-events-list {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}
.cb-events-empty {
	opacity: 0.75;
}

/* Shared event card */
.cb-event-card {
	display: flex;
	flex-direction: column;
	gap: 1em;
	border-left: 8px solid var(--cb-category-color, transparent);
	padding: 1em;
}
.cb-event-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0; /* allow text to wrap/truncate inside a flex row */
}
/* Full-width, 16:9 — an image that isn't already that shape is scaled to
   fit inside the box (object-fit: contain) rather than cropped, so the
   whole image stays visible with letterboxing on the empty sides. */
.cb-event-card-media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(127, 127, 127, 0.08);
	border-radius: 2px;
	overflow: hidden;
}
.cb-event-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cb-event-card-time {
	font-size: 0.85em;
	opacity: 0.75;
}
.cb-event-card-title {
	margin: 0;
}
.cb-event-card-excerpt {
	opacity: 0.85;
}
.cb-reg-link {
	display: inline-block;
	font-weight: 600;
}

/* Gold border for events currently inside their marketing runway — a real
   border rather than outline, since outline can get clipped by the
   popover card's `overflow: hidden` (see .cb-cal-popover .cb-cal-card
   below) when this card is rendered inside a calendar popover. Left side
   is skipped so it doesn't fight the category-color accent border-left
   above. */
.cb-event-card--featured {
	border-top: 2px solid #c9a227;
	border-right: 2px solid #c9a227;
	border-bottom: 2px solid #c9a227;
}

/* List view: minimal, theme "small" font size. Stacks (meta, then title +
   excerpt, then image) on mobile; on desktop becomes a 3-column row —
   meta | excerpt | image, image capped at 300px and right-aligned since
   it's the last column. */
.cb-event-card--list {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}
.cb-event-card--list .cb-event-card-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	opacity: 0.85;
}
@media (min-width: 641px) {
	.cb-event-card--list {
		display: grid;
		grid-template-columns: minmax(160px, 220px) 1fr;
		gap: 1.5em;
		align-items: start;
	}
	.cb-event-card--list.cb-event-card--has-image {
		grid-template-columns: minmax(160px, 220px) 1fr minmax(0, 300px);
	}
	.cb-event-card--list .cb-event-card-media {
		width: 100%;
	}
}


/* Location */
.cb-event-location {
	font-style: normal;
	opacity: 0.9;
}
.cb-event-location--hidden {
	opacity: 1;
}

/* Pagination */
.cb-pagination {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: 2em;
}

/* Calendar month featured image */
.cb-cal-month-image {
	margin-bottom: 1.5em;
}
.cb-cal-month-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 20em;
	object-fit: cover;
	border-radius: 2px;
}

/* Calendar nav */
.cb-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1em;
}
.cb-cal-title {
	font-weight: 600;
}

/* Calendar grid — 7 columns, month and week share the same structure.
   Desktop: fixed-size tiles (equal height/width); overflow scrolls inside
   the cell instead of growing it. Mobile: collapses to a single-column
   agenda list that can grow freely. */
.cb-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: currentColor;
}
.cb-cal-day {
	background: Canvas;
	color: CanvasText;
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}
.cb-cal-day--outside {
	opacity: 0.45;
}
.cb-cal-day--today .cb-cal-day-number {
	font-weight: 700;
	text-decoration: underline;
}
.cb-cal-day-number {
	font-size: 0.85em;
}

@media (min-width: 641px) {
	.cb-cal-day {
		height: 9em;
		overflow-y: auto;
	}
}

/* Event pills — colored via the category's set color, time + bold title,
   small font */
.cb-cal-pill {
	display: block;
	cursor: pointer;
	list-style: none;
	font-size: small;
	line-height: 1.3;
	padding: 0.15em 0.5em;
	margin-bottom: 0.15em;
	border-radius: 3px;
	background: var(--wp--preset--color--contrast, #333);
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cb-cal-pill::-webkit-details-marker {
	display: none;
}
.cb-cal-pill--featured {
	border: 2px solid #c9a227;
	padding: calc(0.15em - 2px) calc(0.5em - 2px);
}
.cb-cal-pill-time {
	opacity: 0.85;
}

/* Popover: native <details>/<summary> — hidden/shown is entirely native
   `open`-attribute behavior, no CSS needed for that part. JS (calendar.js)
   sets `open` on hover-intent and clears it on click-outside; clicking the
   pill still toggles it natively too.
   The card floats via `position: fixed` with top/left computed in JS
   (see positionCard() in calendar.js) rather than being positioned
   relative to the pill — the day cell needs `overflow: auto` for its
   fixed-size tiles (see .cb-cal-day above), which would otherwise clip an
   absolutely/relatively-positioned card.
   Width is a fixed, explicit value rather than min/max-width — a
   shrink-to-fit `width: auto` box is sized against whatever containing
   block it resolves to, which is exactly the ambiguity that was making
   the card render squeezed to the grid cell's width before JS had a
   chance to reposition it. An explicit width sidesteps that entirely. */
.cb-cal-popover .cb-cal-card {
	position: fixed;
	z-index: 9999;
	width: 20em;
	max-width: calc(100vw - 16px);
	padding: 0em;
	background: Canvas;
	color: CanvasText;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	font-size: medium;
	overflow: hidden;
}

/* Narrow viewports: collapse the grid to a per-day agenda list */
@media (max-width: 640px) {
	.cb-cal-grid {
		grid-template-columns: 1fr;
	}
}

/* Related events */
.cb-related-events {
	margin-top: 3em;
}
.cb-related-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 1.5em;
}

/* Event details (single view) */
.cb-event-details {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-block: 1.5em;
}