/*
 * BS360 Events — Frontend Shortcode Styles
 *
 * Provides grid layout and structural styles only.
 * Visual design (colors, typography, card style) is
 * intentionally left to the theme stylesheet.
 *
 * Class map (old theme class → new class):
 *   .show-events       → .bs360-events-grid
 *   li                 → .bs360-events-item
 *   .events-category   → .bs360-events-item__category
 *   .events-title h2   → .bs360-events-item__title
 *   .events-date       → .bs360-events-item__date
 *
 * @package BS360_Events
 * @since   1.0.0
 */

/* ── Grid container ─────────────────────────────────── */

.bs360-events-grid {
	display: grid;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs360-events-grid--cols-1 {
	grid-template-columns: 1fr;
}

.bs360-events-grid--cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.bs360-events-grid--cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

/* ── Item ───────────────────────────────────────────── */

.bs360-events-item {
	display: flex;
	flex-direction: column;
}

.bs360-events-item__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.bs360-events-item__link:hover,
.bs360-events-item__link:focus {
	text-decoration: underline;
}

/* ── Image ──────────────────────────────────────────── */

.bs360-events-item__image-wrap {
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.bs360-events-item__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Text elements ──────────────────────────────────── */

.bs360-events-item__category {
	display: block;
	margin-top: 12px;
}

.bs360-events-item__title {
	margin: 8px 0 4px;
}

.bs360-events-item__date {
	margin: 0;
}

/* ── Empty state ─────────────────────────────────────── */

.bs360-events-empty {
	text-align: center;
	padding: 32px 16px;
}

.bs360-events-empty p {
	margin: 0;
}

/* ── Responsive ─────────────────────────────────────── */

@media ( max-width: 900px ) {
	.bs360-events-grid--cols-3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.bs360-events-grid--cols-2,
	.bs360-events-grid--cols-3 {
		grid-template-columns: 1fr;
	}
}