/**
 * Zensory Services widget styles.
 *
 * Every themeable value is a CSS custom property so that Elementor controls can
 * set them via `--var` selectors, and per-item repeater controls can override
 * them on a single card without extra specificity wars.
 */

.zsry-services {
	--zsry-center-w: 46%;
	--zsry-col-gap: 40px;
	--zsry-row-gap: 24px;

	--zsry-card-bg: #ffffff;
	--zsry-card-pad: 22px;
	--zsry-card-radius: 18px;

	--zsry-icon-gap: 16px;
	--zsry-badge-size: 52px;
	--zsry-badge-radius: 50%;
	--zsry-icon-size: 22px;
	--zsry-icon-color: #5b34d6;
	--zsry-icon-bg: #efeafe;

	--zsry-tag-color: #5b34d6;
	--zsry-tag-bg: #efeafe;
	--zsry-tag-pad: 5px 12px;
	--zsry-tag-radius: 999px;

	--zsry-conn-length: 44px;
	--zsry-conn-thickness: 2px;
	--zsry-conn-style: dotted;
	--zsry-conn-color: #c9bdf5;
	--zsry-conn-dot: 7px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--zsry-center-w)) minmax(0, 1fr);
	align-items: center;
	column-gap: var(--zsry-col-gap);
	row-gap: var(--zsry-row-gap);
}

.zsry-services__col {
	display: flex;
	flex-direction: column;
	row-gap: var(--zsry-row-gap);
	min-width: 0;
}

.zsry-services__col--left {
	grid-column: 1;
}

.zsry-services__media {
	grid-column: 2;
	width: 100%;
	min-width: 0;
	/* width + auto margins keep the image filling its grid area, and centred
	   once the Max Width control narrows it. Relying on `auto` margins alone
	   would make this shrink-to-fit to the image's intrinsic width. */
	margin-inline: auto;
}

.zsry-services__col--right {
	grid-column: 3;
}

.zsry-services__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- Card */

.zsry-card {
	position: relative;
	/* Two columns: the icon badge, then everything else. The title stays beside
	   the icon on row 1 while the description and tag span the full width
	   beneath both of them. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--zsry-icon-gap);
	padding: var(--zsry-card-pad);
	background-color: var(--zsry-card-bg);
	border-radius: var(--zsry-card-radius);
	color: inherit;
	text-decoration: none;
	transform: translateY(var(--zsry-lift, 0px));
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

a.zsry-card:hover,
a.zsry-card:focus {
	text-decoration: none;
	color: inherit;
}

/* The per-item horizontal nudge is a desktop-only flourish; on stacked
   layouts it would just break the grid alignment. */
@media (min-width: 1025px) {
	.zsry-card {
		transform: translateX(var(--zsry-offset, 0px)) translateY(var(--zsry-lift, 0px));
	}
}

.zsry-card__icon {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--zsry-badge-size);
	height: var(--zsry-badge-size);
	border-radius: var(--zsry-badge-radius);
	background-color: var(--zsry-icon-bg);
	color: var(--zsry-icon-color);
	font-size: var(--zsry-icon-size);
	line-height: 1;
}

.zsry-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.zsry-card__icon i {
	font-size: inherit;
	line-height: 1;
}

.zsry-card__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
}

/* With no icon there is no first column to sit next to. */
.zsry-card--no-icon {
	grid-template-columns: minmax(0, 1fr);
}

.zsry-card--no-icon .zsry-card__title {
	grid-column: 1 / -1;
}

.zsry-card__desc {
	grid-column: 1 / -1;
	/* Owns the gap under the header row: the title's own margin would be
	   swallowed whenever the icon badge is the taller of the two. */
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
}

.zsry-card__tag {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-block;
	margin-top: 14px;
	padding: var(--zsry-tag-pad);
	border-radius: var(--zsry-tag-radius);
	background-color: var(--zsry-tag-bg);
	color: var(--zsry-tag-color);
	font-size: 12px;
	line-height: 1.4;
	max-width: 100%;
}

/* ----------------------------------------------------------- Connectors */

.zsry-card__connector {
	position: absolute;
	top: 50%;
	width: var(--zsry-conn-length);
	height: 0;
	border-top: var(--zsry-conn-thickness) var(--zsry-conn-style) var(--zsry-conn-color);
	transform: translateY(-50%);
	pointer-events: none;
}

.zsry-services__col--left .zsry-card__connector {
	left: 100%;
}

.zsry-services__col--right .zsry-card__connector {
	right: 100%;
}

.zsry-card__connector--dots::before,
.zsry-card__connector--dots::after {
	content: "";
	position: absolute;
	top: calc(var(--zsry-conn-thickness) / -2);
	width: var(--zsry-conn-dot);
	height: var(--zsry-conn-dot);
	border-radius: 50%;
	background-color: var(--zsry-conn-color);
	transform: translate(-50%, -50%);
}

.zsry-card__connector--dots::before {
	left: 0;
}

.zsry-card__connector--dots::after {
	left: 100%;
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.zsry-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.zsry-services__col--left,
	.zsry-services__col--right {
		grid-column: auto;
	}

	.zsry-services__media {
		grid-column: 1 / -1;
		order: -1;
	}

	.zsry-card__connector {
		display: none;
	}
}

@media (max-width: 767px) {
	.zsry-services {
		grid-template-columns: minmax(0, 1fr);
	}
}