/*
 * SiteQode Addon — frontend/css/widgets-dynamic.css
 * Service/Event card extras, carousels, team/testimonial slides.
 * Loaded alongside widgets.css — see class-elementor.php.
 */

/* Small utility classes shared by several widgets ------------------------ */

.sq-widget-view-all {
	text-align: center;
	margin-top: var(--sq-space-8);
}
.sq-widget-empty-notice {
	padding: var(--sq-space-4);
	border: 1px dashed var(--sq-color-border);
	border-radius: var(--sq-radius-sm);
	color: var(--sq-color-muted);
	font-size: var(--sq-text-base);
}
.sq-card-single {
	max-width: 420px;
}

/* Service card extras (icon shown alongside a real featured image) ------- */

.sq-card__icon {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--sq-radius-sm);
	background: var(--sq-color-ink-100);
	margin-bottom: var(--sq-space-2);
}
.sq-card__media-fallback--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sq-color-ink-100);
}

/** 
	Event card extras: meta row, past-event badge 
*/

	.sq-card__meta { display: flex; align-items: center; gap: var(--sq-space-2); font-size: var(--sq-text-base); 
		color: var(--sq-color-muted); margin: 0 0 var(--sq-space-2); 
	}

	.sq-card__badge { position: absolute; top: var(--sq-space-3); left: var(--sq-space-3); background: var(--sq-color-ink); 
		color: var(--sq-color-accent-white); font-weight: normal; padding: 0.4em 0.9em; border-radius: 10px; 
		font-size: clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem); 
	}

	.sq-card--event .sq-card__media { position: relative; }

	.sq-card--event { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 40%); align-items: stretch; }

	.sq-card--event .event-content-group { display: flex; flex-direction: column; padding: var(--sq-space-6); }

	.sq-card--event .event-title-date-group { display: flex; flex-direction: column; gap: var(--sq-space-2); }

	.sq-card--event .event-content-group .sq-card__excerpt { margin-top: var(--sq-space-4); }

	.sq-card--event .event-content-group .sq-card__link { margin-top: auto; }

	.sq-card--event .event-image-group,
	.sq-card--event .event-image-group .sq-card__media { display: block; border-radius: var(--sq-radius-md); overflow: hidden; }

	.sq-card--event .event-image-group .sq-card__media img,
	.sq-card--event .event-image-group .sq-card__media-fallback { display: block; width: 100%; height: 100%; 
		min-height: 256px; object-fit: cover; }

	@media (max-width: 700px) {
		.sq-card--event { grid-template-columns: 1fr; }
	}

/* Carousel shell (scroll-snap based — see frontend/js/carousel.js) ------- */

.sq-carousel {
	position: relative;
}
.sq-carousel__track {
	display: flex;
	gap: var(--sq-space-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--sq-space-2);
	/* Hide the scrollbar visually — the prev/next buttons + native swipe/keyboard remain the primary controls. */
	scrollbar-width: none;
}
.sq-carousel__track::-webkit-scrollbar {
	display: none;
}
.sq-carousel__slide {
	flex: 0 0 auto;
	width: min(280px, 80vw);
	scroll-snap-align: start;
}
.sq-carousel__controls {
	display: flex;
	justify-content: flex-end;
	gap: var(--sq-space-3);
	margin-top: var(--sq-space-5);
}
.sq-carousel__prev,
.sq-carousel__next {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--sq-color-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sq-transition), opacity var(--sq-transition);
}
.sq-carousel__prev {
	transform: scaleX(-1);
}
.sq-carousel__prev:hover:not(:disabled),
.sq-carousel__next:hover:not(:disabled) {
	background: var(--sq-color-ink-100);
}
.sq-carousel__prev:disabled,
.sq-carousel__next:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.sq-carousel__track {
		scroll-behavior: auto;
	}
}

/** 
	Team slide
*/

	.sq-team-slide { text-align: center; }
	.sq-team-swiper { width: 100%; overflow: hidden; }
	.sq-team-swiper .swiper-slide { height: auto; }
	.sq-team-swiper .swiper-button-prev,
	.sq-team-swiper .swiper-button-next { color: var(--sq-color-ink); }
	.sq-team-swiper .swiper-pagination { position: relative; margin-top: clamp(1.875rem, 0.3125rem + 5vw, 3.125rem); }


	.sq-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

	.sq-team-item { position: relative; display: grid; border-radius: var(--sq-radius-md); overflow: hidden; }
	.sq-team-item > div { grid-area: 1/-1; transition: var(--sq-transition); }

	.sq-team-item > div.sq-team-slide__photo { width: 100%; height: 100%; margin: 0; overflow: hidden; }
	.sq-team-item > div.sq-team-slide__photo img { width: 100%; height: 100%; object-fit: cover; transition: var(--sq-transition); }
	.sq-team-item > div.sq-team-slide__photo-fallback { display: block; width: 100%; height: 100%; background: var(--sq-color-ink-100); }

	.sq-team-item > div.sq-team-slide__content { padding: clamp(1.125rem, 0.9519rem + 0.7692vw, 1.875rem); text-align: left; 
		align-content: end; color: var(--sq-color-accent-white); }

	.sq-team-item > div.sq-team-slide__content:before { content: ""; position: absolute; inset: 0; 
		background: linear-gradient(180deg, rgba(0,0,0,0) 50%, var(--sq-color-ink) 110%); opacity: 0; transition: var(--sq-transition); }

	.sq-team-slide__name { margin: 0 0 var(--sq-space-1); font-size: clamp(1.25rem, 1.1346rem + 0.5128vw, 1.75rem); opacity: 0;
		position: relative; color: var(--sq-color-accent-white); transform: translateY(10px); transition: var(--sq-transition); }
	.sq-team-slide__role { font-size: clamp(1rem, 0.9423rem + 0.2564vw, 1.25rem); margin: 0; position: relative; 
		transform: translateY(10px); transition: var(--sq-transition); opacity: 0; }

	.sq-team-item:hover > div.sq-team-slide__content:before { opacity: 1; }
	.sq-team-item:hover > div.sq-team-slide__content .sq-team-slide__name { opacity: 1; transform: translateY(0); }
	.sq-team-item:hover > div.sq-team-slide__content .sq-team-slide__role { opacity: 1; transform: translateY(0); }

	/* Team Card */
	
	.sq-team--template-card .sq-team-item { position: relative; display: flex; border-radius: 0px; 
		overflow: hidden; flex-direction: column; }

	.sq-team--template-card .sq-team-item > div.sq-team-slide__photo { border-radius: 10px; margin-bottom: clamp(0rem, -0.1154rem + 0.5128vw, 0.5rem); }
	.sq-team--template-card .sq-team-item > div.sq-team-slide__photo img { transform: scale(1); transition: var(--sq-transition); }
	.sq-team--template-card .sq-team-item:hover > div.sq-team-slide__photo img { transform: scale(1.05); transition: var(--sq-transition); }
	
	.sq-team--template-card .sq-team-item > div.sq-team-slide__content { padding: 10px; padding-bottom: clamp(0rem, -0.1442rem + 0.641vw, 0.625rem); }
	.sq-team--template-card .sq-team-item > div.sq-team-slide__content:before { display: none; }

	.sq-team--template-card .sq-team-item .sq-team-slide__name { opacity: 1; color: var(--sq-color-ink); 
		font-size: 20px; transform: translateY(0px); }
	.sq-team--template-card .sq-team-item .sq-team-slide__role { opacity: 1; color: var(--sq-color-ink-soft); 
		font-size: 16px; transform: translateY(0px); }

/* Testimonial slide ------------------------------------------------------ */

.sq-testimonial-slide {
	background: #fafcff;
    border: 1px solid var(--sq-color-border);
    border-radius: var(--sq-radius-md);
    padding: clamp(1.25rem, 1.0855rem + 0.6579vw, 1.875rem);
    height: 100%;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sq-space-5);
    min-height: clamp(15.625rem, 14.227rem + 5.5921vw, 20.9375rem);
}
.sq-testimonial-swiper {
	width: 100%;
	overflow: hidden;
}
.sq-testimonial-swiper .swiper-slide {
	height: auto;
}
.sq-testimonial-swiper .swiper-button-prev,
.sq-testimonial-swiper .swiper-button-next {
	color: var(--sq-color-ink);
}
.sq-testimonial-swiper .swiper-pagination {
	position: relative;
	margin-top: var(--sq-space-5);
}
.sq-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sq-space-6);
}
.sq-testimonial-slide__quote {
	font-family: var(--sq-font-base);
    font-size: var(--sq-text-base);
    font-style: normal;
    color: var(--sq-color-base);
    margin: 0 0 clamp(1.875rem, 1.3816rem + 1.9737vw, 3.75rem);
}
.sq-testimonial-slide__attribution {
	display: flex;
    align-items: center;
    gap: 20px;
}
.sq-testimonial-slide__attribution img {
	align-items: center;
    aspect-ratio: 1 / 1;
    display: flex;
    flex: 0 0 auto;
    flex-flow: row;
    gap: 10px;
    height: auto;
    overflow: hidden;
    padding: 0px;
    position: relative;
    width: 60px;
    border-radius: 50%;
    border: 1px solid #0145f0;
}
.sq-testimonial-slide__name {
	font-size: clamp(1.25rem, 1.1943rem + 0.2548vw, 1.5rem);
    font-family: var(--sq-font-head);
    font-weight: 400;
    line-height: 1.4;
    color: var(--sq-color-accent-black);
    letter-spacing: -0.03em;
    text-transform: capitalize;
}
.sq-testimonial-slide__role {
	color: var(--sq-color-ink-soft);
    font-size: var(--sq-text-base);
    margin: 0;
    font-family: var(--sq-font-base);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-transform: capitalize;
}