/* [cl-events-section] */

.cl-events-section {
	font-family: var(--cl-font-body);
}

/* ── Default grid (no sidebar) ──────────────────────── */
.cl-events-section__grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   28px;
}

@media (max-width: 1024px) {
	.cl-events-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cl-events-section__grid {
		grid-template-columns: 1fr;
	}
}

/* ════════════════════════════════════════════════════════
   SIDEBAR MODE
   ════════════════════════════════════════════════════════ */

/* ── Desktop: >1024px — sidebar in grid, 3-col results ── */
.cl-events-section--sidebar {
	display:               grid;
	grid-template-columns: 350px 1fr;
	gap:                   40px;
	align-items:           start;
}

.cl-events-sidebar {
	position: sticky;
	top:      100px;
}

.cl-events-section--sidebar .cl-events-section__grid {
	grid-template-columns: repeat(3, 1fr);
}

/* ── Sidebar blocks ─────────────────────────────────── */
.cl-sidebar-block {
	background:    #fff;
	border:        1px solid #e9ecef;
	border-radius: var(--cl-radius);
	padding:       20px;
	margin-bottom: 16px;
}

.cl-sidebar-block__title {
	font-family:    var(--cl-font-title);
	font-size:      1rem;
	font-weight:    normal;
	color:          var(--cl-text);
	margin:         0 0 14px;
	padding-bottom: 12px;
	border-bottom:  2px solid #f0f0f0;
}

/* Category list position overrides */
.cl-sidebar-cat-list {
	margin: 0 -20px;
}

.cl-sidebar-cat-list .cl-cat-item__inner {
	padding: 8px 20px 8px 44px;
}

.cl-sidebar-cat-list .cl-cat-item__inner::before {
	left: 20px;
}

.cl-sidebar-cat-list .cl-cat-item__inner::after {
	left: 26px;
}

/* ── Flatpickr inline calendar ──────────────────────── */
/*
 * Let zoom do the scaling uncontested — no width overrides on children.
 * overflow:hidden on the wrapper clips any sub-pixel excess.
 *
 * Desktop (350px sidebar, 20px padding × 2 = 310px content):
 *   zoom 0.97 → 307 × 0.97 ≈ 298px  ✓  fits with 12px to spare
 *
 * 1024px breakpoint (280px sidebar → 240px content):
 *   zoom 0.78 → 307 × 0.78 ≈ 239px  ✓
 *
 * Mobile offcanvas (320px panel, 16px body padding × 2, 20px block padding × 2 → 248px):
 *   zoom 0.80 → 307 × 0.80 ≈ 246px  ✓
 */
.cl-sidebar-fp {
	overflow: hidden;
}

.cl-sidebar-fp .flatpickr-calendar {
	zoom: 0.97;
}

/* Clear date button */
.cl-sidebar-fp-clear {
	display:       block;
	width:         100%;
	margin-top:    12px;
	padding:       7px 0;
	background:    transparent;
	border:        1px solid #dde1e7;
	border-radius: var(--cl-radius);
	font-family:   var(--cl-font-body);
	font-size:     0.82rem;
	color:         var(--cl-text-muted);
	cursor:        pointer;
	text-align:    center;
	transition:    border-color var(--cl-transition), color var(--cl-transition);
}

.cl-sidebar-fp-clear:hover {
	border-color: var(--cl-primary);
	color:        var(--cl-primary);
}

/* ── Hide mobile-only elements on desktop ───────────── */
.cl-offcanvas-header,
.cl-section-toolbar {
	display: none;
}

/* Backdrop: hidden on desktop/tablet */
.cl-offcanvas-backdrop {
	display:    none;
	position:   fixed;
	inset:      0;
	background: rgba(0, 0, 0, 0.45);
	z-index:    9998;
}
@media (max-width: 1260px) {
	.cl-events-section--sidebar .cl-events-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* ── Tablet: 768px – 1024px — narrower sidebar, 2-col ── */
@media (max-width: 1024px) {
	.cl-events-section--sidebar {
		grid-template-columns: 350px 1fr;
		gap:                   24px;
	}

	.cl-events-section--sidebar .cl-events-section__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cl-sidebar-fp .flatpickr-calendar {
		zoom: 0.78;
	}
}


/*between 768 and 980*/
@media screen and (min-width: 768px) and (max-width: 980px) {
	.cl-sidebar-block .flatpickr-calendar{
		scale: 0.84;
		transform: translateX(-8.5%);
	}
	.cl-events-section--sidebar {
        grid-template-columns: 300px 1fr;
        gap: 24px;
    }
}

/* ── Mobile: <768px — offcanvas ─────────────────────── */
@media (max-width: 767px) {

	.cl-events-section--sidebar {
		display: block;
	}

	.cl-section-toolbar {
		display:       flex;
		align-items:   center;
		margin-bottom: 24px;
	}

	.cl-btn-filters {
		display:       inline-flex;
		align-items:   center;
		gap:           8px;
		padding:       9px 22px;
		background:    var(--cl-primary);
		color:         #fff;
		border:        none;
		border-radius: var(--cl-radius);
		font-family:   var(--cl-font-body);
		font-size:     0.9rem;
		font-weight:   600;
		cursor:        pointer;
		transition:    background var(--cl-transition);
		line-height:   1.4;
	}

	.cl-btn-filters:hover {
		background: #007f89;
	}

	.cl-events-sidebar {
		position:       fixed;
		top:            0;
		left:           0;
		height:         100%;
		width:          380px;
		max-width:      90vw;
		background:     #fff;
		box-shadow:     4px 0 28px rgba(0, 0, 0, 0.14);
		z-index:        9999;
		overflow-y:     auto;
		transform:      translateX(-100%);
		transition:     transform 0.28s ease;
		display:        flex;
		flex-direction: column;
	}

	.cl-events-sidebar.open {
		transform: translateX(0);
	}

	.cl-offcanvas-header {
		display:         flex;
		align-items:     center;
		justify-content: space-between;
		padding:         16px 20px;
		border-bottom:   2px solid #f0f0f0;
		position:        sticky;
		top:             0;
		background:      #fff;
		z-index:         1;
		flex-shrink:     0;
	}

	.cl-offcanvas-title {
		font-family: var(--cl-font-title);
		font-size:   1.1rem;
		color:       var(--cl-text);
	}

	.cl-offcanvas-close {
		display:         inline-flex;
		align-items:     center;
		justify-content: center;
		width:           34px;
		height:          34px;
		background:      transparent;
		border:          none;
		border-radius:   6px;
		cursor:          pointer;
		color:           var(--cl-text-muted);
		transition:      background var(--cl-transition), color var(--cl-transition);
	}

	.cl-offcanvas-close:hover {
		background: #f0f0f0;
		color:      var(--cl-text);
	}

	.cl-offcanvas-body {
		padding: 16px;
		flex:    1;
	}

	.cl-offcanvas-backdrop.open {
		display: block;
	}

	.cl-events-section--sidebar .cl-events-section__grid {
		grid-template-columns: 1fr;
	}

	body.cl-offcanvas-open {
		overflow: hidden;
	}

	.cl-sidebar-fp .flatpickr-calendar {
		zoom: 0.80;
	}
}