/* Hive Carousels — case studies carousel.
   Every class is uniquely namespaced (hivecar-cst / hivecar-cst__*) and every
   rule is scoped under the root class so theme and plugin CSS cannot collide
   with it. The handful of structural properties the JS engine depends on are
   marked !important so a stray theme rule cannot break the layout. */

.hivecar-cst,
.hivecar-cst *,
.hivecar-cst *::before,
.hivecar-cst *::after { box-sizing: border-box !important; }

.hivecar-cst { padding: 20px 0; position: relative; }

.hivecar-cst .hivecar-cst__label {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #888;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hivecar-cst .hivecar-cst__label::after { content: ""; flex: 1; height: 1px; background: #444; }

.hivecar-cst .hivecar-cst__frame { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 10px; }
.hivecar-cst .hivecar-cst__arrow--prev { order: 1; }
.hivecar-cst .hivecar-cst__arrow--next { order: 3; }

.hivecar-cst .hivecar-cst__stage {
	order: 2;
	flex: 1;
	position: relative !important;
	width: auto !important;
	height: 420px;
	overflow: hidden;
	margin: 0;
}

.hivecar-cst .hivecar-cst__slide {
	position: absolute !important;
	top: 50% !important;
	left: 0;
	float: none !important;
	max-width: none !important;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	transition: left .4s ease, width .4s ease, height .4s ease, margin-top .4s ease, opacity .4s ease;
	pointer-events: none;
}
.hivecar-cst .hivecar-cst__slide--focus { z-index: 3; opacity: 1; pointer-events: auto; }
.hivecar-cst .hivecar-cst__slide--peek  { z-index: 1; opacity: .55; }
.hivecar-cst .hivecar-cst__slide--park  { z-index: 0; opacity: 0; }

.hivecar-cst .hivecar-cst__bg {
	position: absolute !important;
	inset: 0 !important;
	background-size: cover;
	background-position: center;
}
.hivecar-cst .hivecar-cst__overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.52);
}
.hivecar-cst .hivecar-cst__content {
	position: absolute !important;
	inset: 0 !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px 32px;
	text-align: center;
}

.hivecar-cst .hivecar-cst__cat { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #e69600; margin: 0 0 6px; display: block; }
.hivecar-cst .hivecar-cst__heading { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #e69600; margin: 0 0 6px; }
.hivecar-cst .hivecar-cst__figure { font-size: 42px; font-weight: 700; color: #fff; margin: 0 0 14px; line-height: 1.1; }
.hivecar-cst .hivecar-cst__excerpt { font-size: 13px; color: rgba(255, 255, 255, 0.85); line-height: 1.65; margin: 0 0 20px; }
.hivecar-cst .hivecar-cst__link {
	font-size: 12px;
	font-weight: 600;
	color: #e69600;
	text-decoration: none;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 1px solid #e69600;
	padding: 7px 18px;
	border-radius: 4px;
	transition: background .2s, color .2s;
}
.hivecar-cst .hivecar-cst__link:hover { background: #e69600; color: #fff; }

.hivecar-cst .hivecar-cst__arrow {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	transition: border-color .15s, color .15s;
	padding: 0 0 2px 0;
	line-height: 40px;
	z-index: 10;
}
.hivecar-cst .hivecar-cst__arrow:hover { border-color: #e69600; color: #e69600; }
.hivecar-cst .hivecar-cst__arrow:disabled { opacity: .25; cursor: default; }

.hivecar-cst .hivecar-cst__dots { display: flex; order: 4; flex: 1 0 100%; justify-content: center; gap: 6px; margin: 0; }
.hivecar-cst .hivecar-cst__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background .2s, transform .2s;
}
.hivecar-cst .hivecar-cst__dot--active { background: #e69600; transform: scale(1.3); }

@media (max-width: 768px) {
	.hivecar-cst .hivecar-cst__figure { font-size: 32px; }

	/* Stage full width; arrows drop to either side of the dots. */
	.hivecar-cst .hivecar-cst__frame { justify-content: center; }
	.hivecar-cst .hivecar-cst__stage { height: 320px; order: 1; flex: 1 0 100%; }
	.hivecar-cst .hivecar-cst__arrow--prev { order: 2; }
	.hivecar-cst .hivecar-cst__dots { order: 3; flex: 0 1 auto; }
	.hivecar-cst .hivecar-cst__arrow--next { order: 4; }
}