/**
 * Events Grid styles
 *
 * Used by [sc_portal_home] (rendered by VenuesLive\SatelliteCatering\EventsGrid).
 *
 * Theme integration: uses --color-*, --font-*, --button-radius CSS custom
 * properties from the active theme, with sensible fallbacks so the plugin
 * still renders reasonably on themes that don't supply these tokens.
 */

/* ---- Page heading ---------------------------------------------------------
   Promoted to h1 since this view IS the front page — "Upcoming Events" is the
   page's primary heading, not a section heading. Class-specific selector beats
   theme.json's generic h1 styles without needing !important. */
.sc-portal-home__title {
	margin: 0 0 28px;
	font-family: var(--font-display);
	font-weight: normal; /* weight comes from markot-heavy itself, not weight axis */
	font-size: clamp(32px, 5vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

/* ---- Event grid ----------------------------------------------------------- */
.sc-portal-home .sc-events-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 12px;
}
@media (max-width: 980px) {
	.sc-portal-home .sc-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.sc-portal-home .sc-events-grid { grid-template-columns: 1fr; }
}

/* ---- Card ---------------------------------------------------------------- */
.sc-portal-home .sc-event-card {
	border: 1px solid var(--color-border, rgba(0,0,0,.08));
	border-radius: 12px;
	padding: 16px;
	background: var(--color-bg, #fff);
	box-shadow: 0 2px 10px rgba(0,0,0,.04);
	display: flex;
	flex-direction: column;
}
.sc-event-kicker {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--color-muted, #555);
	margin: 0 0 6px;
}
.sc-event-title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.25;
	color: var(--color-primary, #00a3ad);
}
.sc-badge-row {
	margin: 0 0 8px;
}
.sc-portal-home .sc-event-cta {
	margin-top: auto;
	padding-top: 20px;
}

/* ---- Booking link button ------------------------------------------------- */
.sc-portal-home .sc-booking-link {
	display: inline-block;
	padding: 12px 20px;
	border-radius: var(--button-radius, 9999px);
	background: var(--color-accent, #ffcc08);
	color: var(--color-primary-dark, #007a82);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	min-height: var(--button-min-height, 44px);
	box-sizing: border-box;
	transition: background .2s, color .2s;
}
.sc-portal-home .sc-booking-link:hover {
	background: var(--color-primary, #00a3ad);
	color: #fff;
}

/* ---- Badges -------------------------------------------------------------- */
.sc-close-badge {
	flex-shrink: 0;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0,98,128,.10);
	color: var(--color-primary, #00a3ad);
	white-space: nowrap;
	line-height: 1.2;
	margin-top: 2px;
	font-weight: 600;
}
.sc-close-badge.is-urgent {
	background: var(--color-error-bg, rgba(176,0,32,.12));
	color: var(--color-error, #b00020);
}

/* ---- Closed card --------------------------------------------------------- */
.sc-event-card--closed {
	opacity: 0.72;
}
.sc-event-card--closed .sc-event-title {
	color: var(--color-muted, #555);
}

/* ---- Status messages ----------------------------------------------------- */
.sc-booking-closed,
.sc-booking-not-open {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(0,0,0,.04);
	font-size: 14px;
	color: var(--color-muted, #555);
}
.sc-booking-closed a {
	color: var(--color-primary, #00a3ad);
	text-decoration: underline;
}