/* =========================================
   Tribe Events Slider – Card Grid Layout
   ========================================= */

/* --- Variables --- */
:root {
	--tes-accent:        #7a1c2e;
	--tes-accent-light:  #9b2235;
	--tes-text:          #1a1a1a;
	--tes-text-muted:    #444;
	--tes-bg:            #fff;
	--tes-card-radius:   2px;
	--tes-gap:           20px;
	--tes-date-bg:       rgba(0, 0, 0, 0.62);
	--tes-date-color:    #fff;
	--tes-font:          inherit;
	--tes-nav-color:     #7a1c2e;
	--tes-transition:    400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   Outer wrapper
   ========================================= */
.tes-slider-wrapper {
	position:    relative;
	width:       100%;
	font-family: var(--tes-font);
	outline:     none;
}

/* =========================================
   Viewport – clips the card track
   ========================================= */
.tes-slider-viewport {
	overflow: hidden;
	width:    100%;
}

/* =========================================
   Track – holds ALL cards in a flex row
   ========================================= */
.tes-slider-track {
	display:    flex;
	gap:        var(--tes-gap);
	transition: transform var(--tes-transition);
	will-change: transform;
}

/* =========================================
   Individual card
   Each card = 1/4 of viewport minus gaps
   ========================================= */
.tes-card {
	flex:        0 0 calc(25% - (var(--tes-gap) * 3 / 4));
	min-width:   0;
	display:     flex;
	flex-direction: column;
}

.tes-card-link {
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	color:           var(--tes-text);
	height:          100%;
}

.tes-card-link:hover .tes-card-title {
	color: var(--tes-accent);
}

/* =========================================
   Card image area
   ========================================= */
.tes-card-image {
	position:     relative;
	width:        100%;
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	background:   #c8b0b5;
	border-radius: var(--tes-card-radius);
}

.tes-card-image img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform 400ms ease;
}

.tes-card-link:hover .tes-card-image img {
	transform: scale(1.04);
}

/* Date badge – top right corner */
.tes-card-date-badge {
	position:       absolute;
	top:            0;
	right:          0;
	background:     var(--tes-date-bg);
	color:          var(--tes-date-color);
	font-size:      0.72rem;
	font-weight:    400;
	letter-spacing: 0.03em;
	padding:        4px 8px;
	white-space:    nowrap;
	line-height:    1.4;
}

/* =========================================
   Card text content
   ========================================= */
.tes-card-body {
	padding:    10px 0 0 0;
	flex:       1;
}

.tes-card-title {
	font-size:   0.95rem;
	font-weight: 400;
	line-height: 1.35;
	color:       var(--tes-accent);
	margin:      0;
	transition:  color 200ms ease;
	/* clamp to 3 lines */
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* =========================================
   Navigation arrows
   Positioned beside the image area (vertically centered on image)
   ========================================= */
.tes-nav-btn {
	position:        absolute;
	top:             calc(var(--tes-image-height, 37%) / 2);  /* ~center of image */
	transform:       translateY(-50%);
	width:           36px;
	height:          36px;
	border-radius:   50%;
	border:          1px solid #ccc;
	background:      #fff;
	color:           var(--tes-nav-color);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         10;
	transition:      background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	box-shadow:      0 2px 8px rgba(0,0,0,0.12);
	padding:         0;
}

.tes-nav-btn:hover {
	background:   var(--tes-accent);
	border-color: var(--tes-accent);
	color:        #fff;
	box-shadow:   0 4px 14px rgba(122, 28, 46, 0.3);
}

.tes-nav-btn svg {
	width:  16px;
	height: 16px;
}

.tes-nav-btn--prev {
	left: -18px;
}

.tes-nav-btn--next {
	right: -18px;
}

/* hide when at boundary */
.tes-nav-btn[disabled] {
	opacity:        0.3;
	pointer-events: none;
}

/* =========================================
   Dots
   ========================================= */
.tes-dots {
	display:         flex;
	justify-content: center;
	gap:             6px;
	margin-top:      18px;
}

.tes-dot {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	border:        none;
	background:    #ccc;
	cursor:        pointer;
	padding:       0;
	transition:    background 200ms ease, width 200ms ease;
}

.tes-dot--active {
	background:    var(--tes-accent);
	width:         20px;
	border-radius: 3px;
}

/* =========================================
   Notice
   ========================================= */
.tes-notice {
	padding:   24px;
	color:     #666;
	font-size: 0.9rem;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 900px) {
	.tes-card {
		flex-basis: calc(50% - var(--tes-gap) / 2);
	}
}

@media (max-width: 540px) {
	.tes-card {
		flex-basis: 85%;
	}
	.tes-nav-btn--prev { left: 4px; }
	.tes-nav-btn--next { right: 4px; }
}

/* =========================================
   Editor Preview
   ========================================= */
.tes-editor-wrapper {
	padding: 0;
}

.tes-editor-preview {
	background:    #f5f5f7;
	border-radius: 6px;
	padding:       16px;
	border:        2px dashed #d0d0da;
}

.tes-editor-label {
	font-size:      0.75rem;
	font-weight:    600;
	color:          #666;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom:  14px;
}

.tes-editor-cards {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap:                   14px;
}

.tes-editor-card {
	display:        flex;
	flex-direction: column;
}

.tes-editor-card-img {
	position:      relative;
	aspect-ratio:  4 / 3;
	background:    #c8b0b5;
	overflow:      hidden;
	border-radius: 2px;
}

.tes-editor-card-img img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.tes-editor-card-badge {
	position:   absolute;
	top:        0;
	right:      0;
	background: rgba(0,0,0,0.62);
	color:      #fff;
	font-size:  0.65rem;
	padding:    3px 6px;
}

.tes-editor-card-body {
	padding: 7px 0 0;
}

.tes-editor-card-title {
	font-size:   0.82rem;
	color:       #7a1c2e;
	line-height: 1.3;
}