/* ---------------------------------------------------------------------
   Simple Events - Frontend Styles
--------------------------------------------------------------------- */

.se-events-grid,
.se-events-grid *,
.se-popup-overlay,
.se-popup-overlay * {
	box-sizing: border-box;
}

.se-archive-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.se-archive-title {
	margin-bottom: 30px;
}

/* Grid */
.se-events-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	width: 100%;
}

.se-events-grid.se-columns-1 { grid-template-columns: repeat(1, 1fr); }
.se-events-grid.se-columns-2 { grid-template-columns: repeat(2, 1fr); }
.se-events-grid.se-columns-3 { grid-template-columns: repeat(3, 1fr); }
.se-events-grid.se-columns-4 { grid-template-columns: repeat(4, 1fr); }

.se-no-events {
	grid-column: 1 / -1;
	text-align: center;
	color: #666;
	padding: 40px 0;
}

/* Card */
.se-event-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	outline: none;
	/* Grid items default to min-width: auto, which lets them refuse to
	   shrink below the intrinsic (native) width of the image inside them.
	   That's what causes the image to overflow its column and get
	   unevenly clipped instead of scaling down to fit. Force it to 0 so
	   the card — and the image inside it — actually respects the column
	   width. */
	min-width: 0;
	width: 100%;
}

.se-event-card:hover,
.se-event-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.se-event-card-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: #f1f1f1;
	width: 100%;
	min-width: 0;
}


/* WordPress prints width/height attributes on <img>, which can make the
   image render at its native size and spill out of this box before CSS
   applies. Taking the image out of normal flow with absolute positioning
   guarantees it can never influence the size of its box. object-fit:
   contain (rather than cover) means the whole image is always visible —
   letterboxed on the shorter axis instead of being cropped. */
.se-event-card-image img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: contain;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.se-event-card:hover .se-event-card-image img {
	transform: scale(1.08);
}

.se-event-card-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.se-event-card-body {
	padding: 16px 18px 20px;
}

.se-event-card-title {
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.se-event-card-date,
.se-popup-date {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #555;
	font-size: 14px;
}

.se-icon-calendar {
	font-size: 14px;
}

/* Pagination */
.se-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.se-pagination ul.page-numbers {
	display: flex;
	list-style: none;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.se-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
	background: #f2f2f2;
	color: #333;
	text-decoration: none;
	font-size: 14px;
}

.se-pagination .page-numbers.current {
	background: #2563eb;
	color: #fff;
}

.se-pagination a.page-numbers:hover {
	background: #dbeafe;
}

/* Popup / Modal */
.se-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.se-popup-overlay.se-is-open {
	display: flex;
	opacity: 1;
}

.se-popup {
	background: transparent;
	border-radius: 16px;
	max-width: 90vw;
	width: auto;
	max-height: 90vh;
	overflow: visible;
	position: relative;
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: flex;
}

.se-popup-overlay.se-is-open .se-popup {
	transform: translateY(0);
	opacity: 1;
}

/* Slide animation variant */
.se-popup-overlay.se-anim-slide .se-popup {
	transform: translateY(60px);
}
.se-popup-overlay.se-anim-slide.se-is-open .se-popup {
	transform: translateY(0);
}

/* No animation variant */
.se-popup-overlay.se-anim-none,
.se-popup-overlay.se-anim-none .se-popup {
	transition: none;
}

.se-popup-close {
	position: absolute;
	top: -16px;
	right: -16px;
	background: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	color: #333;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.se-popup-close:hover {
	background: #f2f2f2;
}

/* Image-only popup: the box sizes itself to the image (up to the viewport
   limits below) and object-fit: contain guarantees the whole photo is
   always visible — nothing is ever cropped. */
.se-popup-image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 90vh;
	background: #111;
	border-radius: 12px;
	overflow: hidden;
	min-width: 200px;
	min-height: 150px;
}

.se-popup-image-wrap img {
	display: block;
	width: auto;
	height: auto;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 12px;
}

.se-popup-error {
	color: #fff;
	padding: 24px;
	margin: 0;
}

.se-popup-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	min-width: 200px;
	background: #111;
	border-radius: 12px;
}

.se-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid #e5e7eb;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: se-spin 0.8s linear infinite;
}

@keyframes se-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

/* Tablet: 2 columns */
@media (max-width: 992px) {
	.se-events-grid,
	.se-events-grid.se-columns-3,
	.se-events-grid.se-columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column */
@media (max-width: 600px) {
	.se-events-grid,
	.se-events-grid.se-columns-2,
	.se-events-grid.se-columns-3,
	.se-events-grid.se-columns-4 {
		grid-template-columns: repeat(1, 1fr);
	}
}