/* ── Clinicelanka Widgets — Features Grid ──────────────────────────────── */

/* Base grid — no default column count here; column classes below handle it */
.clw-features-grid {
	display: grid;
	column-gap: 40px;
	row-gap: 40px;
}

/* ── Desktop columns (> 1024 px) ──────────────────────────────────────── */
/* These classes are the sole source of truth for desktop layout.          */
/* No Elementor `selectors` are used for columns, which means Elementor    */
/* never generates overriding high-specificity inline CSS for this prop.   */
.clw-col-d-1 { grid-template-columns: repeat(1, 1fr); }
.clw-col-d-2 { grid-template-columns: repeat(2, 1fr); }
.clw-col-d-3 { grid-template-columns: repeat(3, 1fr); }
.clw-col-d-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tablet columns (≤ 1024 px) ───────────────────────────────────────── */
/* Scoped to this media query only — completely independent of desktop.    */
@media (max-width: 1024px) {
	.clw-col-t-1 { grid-template-columns: repeat(1, 1fr); }
	.clw-col-t-2 { grid-template-columns: repeat(2, 1fr); }
	.clw-col-t-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile columns (≤ 767 px) ────────────────────────────────────────── */
/* Scoped to this media query only — completely independent of tablet.     */
@media (max-width: 767px) {
	.clw-col-m-1 { grid-template-columns: repeat(1, 1fr); }
	.clw-col-m-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Item ─────────────────────────────────────────────────────────────── */
.clw-feature-item {
	display: flex;
	flex-direction: column;
}

/* ── Icon ─────────────────────────────────────────────────────────────── */
.clw-feature-icon-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.clw-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #ffffff;
	line-height: 1;
	flex-shrink: 0;
}

.clw-feature-icon svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

/* ── Title ────────────────────────────────────────────────────────────── */
.clw-feature-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 10px;
	line-height: 1.3;
}

/* ── Description ──────────────────────────────────────────────────────── */
.clw-feature-description {
	font-size: 0.95rem;
	color: #a0a0a0;
	line-height: 1.6;
	margin: 0;
}

/* ── Entrance Animation ───────────────────────────────────────────────── */

/* Hidden before animation triggers — uses visibility so layout is preserved */
.clw-feature-item.clw-invisible {
	visibility: hidden;
}

/* animate.css requires animation-fill-mode: both so the element stays    */
/* in its final state after the animation completes.                       */
.clw-feature-item.animated {
	visibility: visible;
	animation-fill-mode: both;
}