/*
 * Service page additions.
 *
 * Flatsome already provides Flickity, dragging, arrows and page dots. The
 * shared home.css already provides the image crop, radius and caption. These
 * rules only define the service image cell proportions and dot spacing.
 */

.swfc-service-carousel-wrap {
	padding-bottom: 30px;
}

/* Keep the conversational FAQ action flat against its unpanelled background. */
.swfc-faq__help .swfc-btn,
.swfc-faq__help .swfc-btn:hover {
	box-shadow: none;
}

.swfc-service-carousel:not(.flickity-enabled) {
	display: flex;
	overflow: hidden;
}

.swfc-service-carousel > figure.swfc-service-carousel__slide,
.swfc-service-carousel .flickity-slider > figure.swfc-service-carousel__slide {
	flex: 0 0 auto;
	width: 72% !important; /* Overrides Flatsome's full-width slider cell rule. */
	margin: 0 1.5%;
	aspect-ratio: 16 / 10;
	opacity: .58;
	transform: scale(.86);
	transition: opacity .3s ease, transform .3s ease;
}

.swfc-service-carousel .flickity-slider > figure.swfc-service-carousel__slide.is-selected {
	opacity: 1;
	transform: scale(1);
}

.swfc-service-carousel .swfc-service-carousel__slide:not(.is-selected) figcaption {
	opacity: 0;
}

/* The extraction machine sits at the foot of this portrait photo; crop from the bottom to keep it in frame. */
#extraction-doorway-photo .swfc-img {
	object-position: center bottom;
}

/* High-contrast controls remain visible over both light and dark photographs. */
.swfc-service-carousel .flickity-prev-next-button {
	opacity: 1 !important;
	color: var(--swfc-navy, #14204f);
}

.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button svg {
	background: transparent;
	border-color: var(--swfc-navy, #14204f);
	fill: var(--swfc-navy, #14204f) !important;
	box-shadow: none;
}

.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button .arrow {
	fill: var(--swfc-navy, #14204f) !important;
}

.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button:hover svg,
.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button:focus-visible svg {
	background: var(--swfc-navy, #14204f);
	border-color: var(--swfc-navy, #14204f);
	fill: #fff !important;
	box-shadow: 0 5px 16px rgba(20, 32, 79, .28);
}

.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.swfc-service-carousel.slider-nav-circle .flickity-prev-next-button:focus-visible .arrow {
	fill: #fff !important;
}

.swfc-service-carousel .flickity-page-dots {
	bottom: -32px;
}

/* Flatsome's dots are #111 at 20% opacity, invisible on the cream results band. Navy instead. */
.swfc-service-carousel .flickity-page-dots li.dot { background-color: var(--swfc-navy); opacity: .3; }
.swfc-service-carousel .flickity-page-dots li.dot.is-selected { background-color: var(--swfc-navy); }

@media (max-width: 700px) {
	.swfc-service-carousel > figure.swfc-service-carousel__slide,
	.swfc-service-carousel .flickity-slider > figure.swfc-service-carousel__slide {
		width: 82% !important;
		margin-inline: 1%;
		aspect-ratio: 4 / 3;
	}
}

/* The service hero promises run much longer than the home page's ("Grout
   cleaned, sealed or recoloured where it is past saving" against "Fixed
   written prices"), so at the shared 15px every one of them wrapped onto a
   second line on a phone. Sizing with the viewport holds roughly the same
   characters per line from a 320px phone up to the 900px breakpoint, where
   the shared size takes over again. Only the two longest promises still wrap
   — no readable size fits those on a phone, they need shorter copy. */
@media (max-width: 899.98px) {
	.swfc-service .swfc-hero__points {
		font-size: clamp(12.5px, 3.35vw, 15px);
	}
}