/**
 * TechBBQ Experience — last-year photo carousel.
 *
 * Figma refs in widget PHP (1440 / 1024 / 768 / 380).
 *
 * Breakpoints (mobile-first): 0–767 (base), 768–1023, 1024–1440, 1440+.
 */

.techbbq-experience {
	--techbbq-experience-section-gap: 48px;
	--techbbq-experience-slide-width: 306px;
	--techbbq-experience-slide-height: 172px;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-experience-section-gap);
	align-items: center;
	width: 100%;
	padding: var(--techbbq-space-2) 0 72px;
	color: var(--techbbq-content-primary);
	background-color: var(--techbbq-bg-main);
}

.techbbq-experience__header {
	display: flex;
	flex-direction: column;
	gap: var(--techbbq-section-eyebrow-title-gap);
	align-items: center;
	width: 100%;
	text-align: center;
}

.techbbq-experience__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	width: 100%;
}

.techbbq-experience__title {
	margin: 0;
}

.techbbq-experience__description {
	max-width: 660px;
	margin: 0;
	color: var(--techbbq-content-secondary);
}

.techbbq-experience__carousel {
	position: relative;
	width: 100%;
}

/* ── Pager (Figma pageControl) ───────────────────────────────── */

.techbbq-experience__pager {
	position: absolute;
	bottom: 4px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	padding: 4px 12px;
	border-radius: var(--techbbq-radius-pill);
	transform: translateX( -50% );
	pointer-events: none;
}

.techbbq-experience__pager-dot {
	display: block;
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--techbbq-radius-pill);
	background: var(--techbbq-color-grey-alpha-50-40);
	pointer-events: auto;
	cursor: pointer;
	transition:
		width 0.25s ease,
		background-color 0.25s ease;
}

.techbbq-experience__pager-dot.is-active {
	width: 18px;
	background: var(--techbbq-btn-primary-fill-default);
}

.techbbq-experience .techbbq-swiper .swiper-slide.techbbq-experience__slide {
	position: relative;
	width: var(--techbbq-experience-slide-width);
	height: var(--techbbq-experience-slide-height);
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	isolation: isolate;
	line-height: 0;
	font-size: 0;
}

.techbbq-experience__photo {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.techbbq-experience__footer {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (min-width: 768px) {
	.techbbq-experience {
		--techbbq-experience-section-gap: 72px;
		--techbbq-experience-slide-width: 568px;
		--techbbq-experience-slide-height: 319px;

		padding: var(--techbbq-section-space-small) 0 80px;
	}

	.techbbq-experience__pager {
		bottom: 12px;
	}
}

/* ── Desktop (1024–1440) ──────────────────────────────────────── */
@media (min-width: 1024px) {
	.techbbq-experience {
		--techbbq-experience-slide-width: 730px;
		--techbbq-experience-slide-height: 411px;

		padding-bottom: 88px;
	}
}

/* ── Large desktop (1440+) ──────────────────────────────────────── */
@media (min-width: 1440px) {
	.techbbq-experience {
		--techbbq-experience-section-gap: var(--techbbq-space-10);
		--techbbq-experience-slide-width: 876px;
		--techbbq-experience-slide-height: 493px;

		padding-bottom: var(--techbbq-section-space-large);
	}
}