/**
 * [service_cpt] — functional and structural rules only.
 *
 * The card's visual design (colours, typography, spacing, radii, shadows,
 * hover effects, image cropping, link and slider-button appearance,
 * icon positioning) is left to the site's builder / custom CSS, which
 * targets the class hooks in templates/frontend/services/shortcode/*.php.
 *
 * Kept here:
 * 1. Grid structure for view="grid" / view="all" (the columns attribute),
 *    same approach as [doctor_cpt]; override via --service-cpt-columns /
 *    --service-cpt-gap or by redefining .service-cpt-grid.
 * 2. Description line clamp (keeps long Short Details from stretching cards),
 *    and slider dots kept below the slides, not over them (see below).
 * 3. Detail Icon container: white circle, icon centred, aspect ratio kept.
 *
 * Every selector is scoped to service-cpt-* classes.
 */

/* 1. Grid (view="grid" and view="all") */
.service-cpt-grid {
	display: grid;
	grid-template-columns: repeat(var(--service-cpt-columns, 3), minmax(0, 1fr));
	gap: var(--service-cpt-gap, 30px);
}

.service-cpt-grid > .service-cpt-item {
	min-width: 0;
}

.service-cpt-columns-1 { --service-cpt-columns: 1; }
.service-cpt-columns-2 { --service-cpt-columns: 2; }
.service-cpt-columns-3 { --service-cpt-columns: 3; }
.service-cpt-columns-4 { --service-cpt-columns: 4; }
.service-cpt-columns-5 { --service-cpt-columns: 5; }
.service-cpt-columns-6 { --service-cpt-columns: 6; }

/* Tablet: at most 2 columns (1-column grids stay 1). */
@media (max-width: 980px) {
	.service-cpt-grid:not(.service-cpt-columns-1) {
		--service-cpt-columns: 2;
	}
}

/* Mobile: 1 column. */
@media (max-width: 767px) {
	.service-cpt-grid:not(.service-cpt-columns-1) {
		--service-cpt-columns: 1;
	}
}

/* 2. Description: at most 3 lines, then an ellipsis. */
.service-cpt-item .service-cpt-item-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* Slider dots: the theme's slick-theme.css positions the dots absolutely,
 * over the bottom of the slides, where they cover the lowest cards' Details
 * links. Keep them in normal flow below the slides instead; their look is
 * still up to the theme / site CSS. */
.hospital-tool-slider--service .slick-dots {
	position: static;
}

/* 3. Detail Icon: uploaded icon centred in a white circle. */
.service-cpt-item .service-cpt-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box;
}

.service-cpt-item .service-cpt-item-icon img {
	display: block;
	width: 60%;
	height: 60%;
	max-width: 60%;
	object-fit: contain;
}