/* Boutik UI: loop carousels and "read more" text. Loaded by the Boutik Child theme. */

/* ---- Carousel: add the class bk-carousel to an Elementor Loop ---------------------------
   bk-carousel--single : one item per view
   bk-carousel--arrows : prev/next buttons (top right)
   bk-carousel--dots   : dots under the track + autoplay */

.bk-carousel { --bk-per: 3; position: relative; }
.bk-carousel.bk-carousel--single { --bk-per: 1; }

.bk-carousel .e-collection-loop-layout-base {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column !important;
	grid-auto-columns: calc(100% / var(--bk-per)) !important;
	grid-auto-rows: auto !important;
	gap: 0 !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.bk-carousel .e-collection-loop-layout-base::-webkit-scrollbar { display: none; }
.bk-carousel .e-collection-loop-layout-base > * { scroll-snap-align: start; min-width: 0; }

@media (max-width: 1024px) { .bk-carousel { --bk-per: 2; } }
@media (max-width: 767px)  { .bk-carousel { --bk-per: 1; } }

.bk-carousel__nav {
	position: absolute;
	right: 0;
	bottom: 100%;
	display: flex;
	z-index: 2;
}
.bk-carousel__btn {
	all: unset;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 0;
	cursor: pointer;
	transition: color .3s, background-color .3s;
}
.bk-carousel__btn + .bk-carousel__btn { border-left: 0; }
.bk-carousel__btn:hover,
.bk-carousel__btn:focus-visible { color: #fff; background-color: rgba(255, 255, 255, .06); }
.bk-carousel__btn[disabled] { opacity: .35; cursor: default; }
.bk-carousel__btn svg { width: 20px; height: 20px; }

.bk-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}
.bk-carousel__dot {
	all: unset;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background-color .3s;
}
.bk-carousel__dot[aria-current="true"],
.bk-carousel__dot:hover { background: rgba(255, 255, 255, .82); }
.bk-carousel__btn:focus-visible,
.bk-carousel__dot:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

/* ---- Read more: add the class bk-unfold to the text element ------------------------------ */

.bk-para { display: block; }
.bk-para + .bk-para { margin-top: .8em; }

.bk-unfold.is-clamped {
	max-height: 208px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.bk-unfold-btn {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: .8em;
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, .73);
	cursor: pointer;
	transition: color .3s;
}
.bk-unfold-btn[hidden] { display: none; }
.bk-unfold-btn:hover,
.bk-unfold-btn:focus-visible { color: #fff; }
.bk-unfold-btn:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.bk-unfold-btn svg { width: 10px; height: 10px; transition: transform .3s; }
.bk-unfold-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* A section with an empty loop (e.g. a project without a review) is hidden. */
body:not(.elementor-editor-active) .bk-hide-empty:not(:has(.e-collection-loop-layout-base > *)) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.bk-carousel .e-collection-loop-layout-base { scroll-behavior: auto; }
}

/* ---- Accessibility ----------------------------------------------------------------------- */

/* Case study fact labels (Client, Year, Services...): #737373 was just under 4.5:1 on black. */
body.single-cost-actions [data-elementor-type="wp-post"] h5.e-heading-base,
body.single-projects [data-elementor-type="wp-post"] h5.e-heading-base { color: #8c8c8c !important; }

/* Links inside page text (e.g. Legal) were the kit grey #5e5e5e on black. */
body.page [data-elementor-type="wp-page"] .e-paragraph-base a,
body.page main .e-paragraph-base a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .45);
}
body.page main .e-paragraph-base a:hover { text-decoration-color: #ffffff; }

#content:focus { outline: none; }