/*
 * Розробка чат-ботів.
 *
 * Built from the same pieces as the other service pages. The one thing of its
 * own is the screenshot row: three phone screenshots are tall and narrow, and
 * the site's usual card grid would either crop their tops off or leave two
 * columns of white space beside them.
 */

.sx-bots__title {
	margin: 0;
	font-size: var( --sx-title-page );
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.sx-bots__lead {
	margin: 14px 0 0;
	max-width: 68ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --sx-text-secondary );
}

.sx-bots__h2 {
	margin: var( --wp--preset--spacing--60 ) 0 var( --wp--preset--spacing--30 );
	font-size: var( --sx-title-section );
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* ---- Банер ---- */

.sx-bots__banner {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	border-radius: var( --sx-radius-lg );
	overflow: hidden;
	line-height: 0;
}

.sx-bots__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Чому бот ---- */

.sx-bots__why {
	margin-top: var( --wp--preset--spacing--60 );
	padding: 26px 32px;
	background: var( --sx-surface );
	border-radius: var( --sx-radius-lg );
	border-left: 3px solid var( --sx-brand );
}

.sx-bots__why .sx-bots__h2 {
	margin-top: 0;
}

.sx-bots__why p {
	margin: 0 0 10px;
	max-width: 68ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

.sx-bots__free {
	margin: 14px 0 0 !important;
	font-weight: 700;
	color: var( --sx-text ) !important;
}

/* ---- Що вміє ---- */

.sx-bots__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 20px;
}

.sx-bots__card {
	min-width: 0;
	padding: 24px 26px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-bots__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: var( --sx-radius-md );
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

.sx-bots__icon svg {
	width: 22px;
	height: 22px;
}

.sx-bots__card h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.sx-bots__card p {
	margin: 0;
	color: var( --sx-text-muted );
	font-size: 0.95rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.sx-bots__more {
	margin: 18px 0 0;
	max-width: 68ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

/* ---- Знімки ----
   Phone screenshots: tall, narrow and of wildly different heights. Capped by
   height rather than width, so three of them line up on one baseline instead
   of one being twice the size of its neighbour. */

.sx-bots__note {
	margin: 0 0 18px;
	max-width: 68ch;
	color: var( --sx-text-secondary );
	line-height: 1.6;
}

.sx-bots__shots {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.sx-bots__shot {
	display: block;
	flex: 0 1 auto;
	max-width: 100%;
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
	overflow: hidden;
	line-height: 0;
	background: var( --sx-white );
	transition:
		border-color var( --sx-transition-base ) var( --sx-ease ),
		box-shadow var( --sx-transition-base ) var( --sx-ease );
}

.sx-bots__shot img {
	display: block;
	width: auto;
	height: 460px;
	max-width: 100%;
	object-fit: contain;
}

@media ( hover: hover ) {
	.sx-bots__shot:hover {
		border-color: var( --sx-brand );
		box-shadow: 0 12px 28px color-mix( in srgb, var( --sx-text ) 10%, transparent );
	}
}

.sx-bots__shot:focus-visible {
	outline: 3px solid var( --sx-brand );
	outline-offset: 3px;
}

/* ---- Етапи ---- */

.sx-bots__stages {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.sx-bots__stages li {
	display: grid;
	grid-template-columns: 3rem minmax( 0, 1fr );
	gap: 8px;
	align-items: start;
	padding: 22px 26px;
	background: var( --sx-white );
	border: 1px solid var( --sx-border );
	border-radius: var( --sx-radius-lg );
}

.sx-bots__stage-num {
	font-family: var( --wp--preset--font-family--manrope, inherit );
	font-size: 1.15rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var( --sx-brand-200 );
	line-height: 1.4;
}

.sx-bots__stages h3 {
	margin: 0 0 6px;
	font-size: 1.05rem;
	line-height: 1.3;
}

.sx-bots__stages p {
	margin: 0;
	color: var( --sx-text-secondary );
	font-size: 0.95rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}

@media ( max-width: 780px ) {
	.sx-bots__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-bots__why {
		padding: 22px 20px;
	}

	.sx-bots__shot img {
		height: 380px;
	}
}

@media ( max-width: 480px ) {
	/* One at a time, full width — 380px tall thumbnails side by side on a
	   phone are two slivers. */
	.sx-bots__shots {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-bots__shot img {
		width: 100%;
		height: auto;
	}

	.sx-bots__stages li {
		grid-template-columns: minmax( 0, 1fr );
		gap: 4px;
		padding: 20px;
	}
}