/**
 * Sam4Tech — Services styles.
 *
 * Loaded on the Services index and on every service page, including AI
 * Solutions. All ten service pages render through one shared layout, so one
 * stylesheet covers them all.
 *
 * Uses the design tokens and shared marketing section primitives from
 * style.css (.s4t-home-section, .s4t-section-head, .s4t-steps, .s4t-cta,
 * .s4t-hl).
 *
 * CONTENTS
 *   1. Service grid (index)
 *   2. Service page hero
 *   3. Breadcrumbs
 *   4. Capability chips
 *   5. Positioning statement
 *   6. Capability cards
 *   7. Result callout & placeholder
 *   8. Other services
 *   9. Responsive
 */

/* ==========================================================================
   1. Service grid (index)
   ========================================================================== */

.s4t-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4t-space-5);
}

.s4t-svc-card {
	display: flex;
	flex-direction: column;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-card:hover {
	transform: translateY(-5px);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-lg);
}

/* Peach media panel with the icon centred, as in the reference. */
.s4t-svc-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--s4t-radius-md);
	background: linear-gradient(150deg, var(--s4t-brand-tint) 0%, var(--s4t-brand-pale) 100%);
	margin-block-end: var(--s4t-space-5);
	overflow: hidden;
}

.s4t-svc-card__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background: linear-gradient(150deg, var(--s4t-brand-light), var(--s4t-brand-strong));
	color: var(--s4t-white);
	box-shadow: 0 10px 22px -10px rgba(var(--s4t-brand-strong-rgb), 0.75);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-card:hover .s4t-svc-card__icon {
	transform: translateY(-3px) rotate(-4deg) scale(1.04);
}

.s4t-svc-card__title {
	font-size: var(--s4t-text-lg);
	font-weight: 700;
	margin-block-end: var(--s4t-space-2);
}

.s4t-svc-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-card:hover .s4t-svc-card__title a {
	color: var(--s4t-brand);
}

/* Short orange strapline under the title. */
.s4t-svc-card__kicker {
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 600;
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-3);
}

.s4t-svc-card__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
	margin-block-end: var(--s4t-space-5);
}

.s4t-svc-card__link {
	margin-block-start: auto;
}

/* ==========================================================================
   2. Service page hero
   ========================================================================== */

.s4t-svc-hero {
	position: relative;
	text-align: center;
	padding-block: clamp(2rem, 4vw, var(--s4t-space-7)) clamp(2rem, 4vw, var(--s4t-space-7));
}

.s4t-svc-hero__inner {
	max-width: 820px;
}

.s4t-svc-hero .s4t-eyebrow {
	margin-block-end: var(--s4t-space-5);
}

.s4t-svc-hero__icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--s4t-space-5);
	border-radius: 20px;
	background: linear-gradient(150deg, var(--s4t-brand-light), var(--s4t-brand-strong));
	color: var(--s4t-white);
	box-shadow: 0 12px 26px -12px rgba(var(--s4t-brand-strong-rgb), 0.8);
}

.s4t-svc-hero__title {
	font-size: clamp(2rem, 3.4vw + 1rem, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin-block-end: var(--s4t-space-3);
}

.s4t-svc-hero__kicker {
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-base);
	font-weight: 600;
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-4);
}

.s4t-svc-hero__text {
	max-width: 640px;
	margin-inline: auto;
	margin-block-end: var(--s4t-space-6);
}

.s4t-svc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s4t-space-3);
}

/* ==========================================================================
   3. Breadcrumbs
   ========================================================================== */

.s4t-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-block-end: var(--s4t-space-5);
	font-size: var(--s4t-text-sm);
	color: var(--s4t-muted);
}

.s4t-crumbs a {
	color: var(--s4t-body);
	text-decoration: none;
	transition: color var(--s4t-duration) var(--s4t-ease);
}

.s4t-crumbs a:hover,
.s4t-crumbs a:focus-visible {
	color: var(--s4t-brand);
}

.s4t-crumbs [aria-current="page"] {
	color: var(--s4t-ink);
	font-weight: 500;
}

/* ==========================================================================
   4. Capability chips
   ========================================================================== */

/* The chip row sits in its own tinted band under the hero. */
.s4t-chip-band {
	padding-block: var(--s4t-space-5);
	border-block: 1px solid var(--s4t-border);
	background: linear-gradient(180deg, #fffdfa, #fdfaf5);
}

.s4t-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s4t-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.s4t-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-pill);
	padding: 0.45rem 1rem;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	font-weight: 500;
	color: var(--s4t-ink);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-chip::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 50%;
	background: var(--s4t-brand);
}

.s4t-chip:hover {
	transform: translateY(-2px);
	border-color: var(--s4t-brand);
	color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-md);
}

/* ==========================================================================
   5. Positioning statement
   ========================================================================== */

.s4t-ai-intro {
	max-width: 720px;
	margin-inline: auto;
	margin-block-end: clamp(2.5rem, 5vw, var(--s4t-space-8));
	text-align: center;
}

.s4t-ai-intro__title {
	font-size: var(--s4t-text-2xl);
	margin-block-end: var(--s4t-space-3);
}

.s4t-ai-intro__text {
	margin: 0;
}

.s4t-ai-subtitle {
	text-align: center;
	font-size: var(--s4t-text-xl);
	margin-block-end: var(--s4t-space-3);
}

.s4t-ai-subtext {
	max-width: 720px;
	margin-inline: auto;
	margin-block-end: var(--s4t-space-5);
	text-align: center;
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
}

/* Standalone line between blocks, e.g. "Align your technology with your
   purpose." Sits centred, a step up in weight from body copy. */
.s4t-svc-lead {
	max-width: 680px;
	margin-inline: auto;
	margin-block: clamp(2rem, 4vw, var(--s4t-space-7));
	text-align: center;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-lg);
	font-weight: 500;
	line-height: 1.6;
	color: var(--s4t-ink);
}

/* --- Outcome pillars ------------------------------------------------------
   Compact three-up cards for "what this lets you do" style lists. */

/* auto-fit so a group of three or four both sit on one row. */
.s4t-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--s4t-space-4);
	margin-block-end: clamp(1rem, 2vw, var(--s4t-space-5));
}

.s4t-pillar {
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-pillar:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-pillar__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--s4t-brand-soft);
	color: var(--s4t-brand);
	margin-block-end: var(--s4t-space-4);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-pillar:hover .s4t-pillar__icon {
	transform: translateY(-2px) scale(1.06);
}

.s4t-pillar__title {
	font-size: var(--s4t-text-base);
	font-weight: 700;
	margin-block-end: var(--s4t-space-2);
}

.s4t-pillar__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.7;
	margin: 0;
}

/* Same cards, used as a titled group after the services block. */
.s4t-advantages {
	margin-block-start: clamp(2.5rem, 5vw, var(--s4t-space-8));
}

.s4t-advantages .s4t-pillars {
	margin-block-end: 0;
}

/* ==========================================================================
   6. Capability cards
   Wide cards with the icon tile on the left, two per row.
   ========================================================================== */

.s4t-ai-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s4t-space-5);
}

/* An odd final card stretches across both columns so the grid stays balanced. */
.s4t-ai-card:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.s4t-ai-card {
	display: flex;
	align-items: flex-start;
	gap: var(--s4t-space-5);
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease);
}

.s4t-ai-card:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-border-strong);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-ai-card__icon {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	flex: none;
	border-radius: var(--s4t-radius-md);
	background: linear-gradient(150deg, var(--s4t-brand-tint) 0%, var(--s4t-brand-pale) 100%);
	color: var(--s4t-brand-strong);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-ai-card:hover .s4t-ai-card__icon {
	transform: translateY(-2px) rotate(-4deg);
}

.s4t-ai-card__body {
	min-width: 0;
}

.s4t-ai-card__title {
	font-size: var(--s4t-text-xl);
	margin-block-end: var(--s4t-space-2);
}

.s4t-ai-card__text {
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
	margin-block-end: var(--s4t-space-4);
}

/* ==========================================================================
   7. Result callout & placeholder
   ========================================================================== */

.s4t-ai-result {
	max-width: 760px;
	margin-inline: auto;
	margin-block: clamp(2rem, 4vw, var(--s4t-space-7)) 0;
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-left: 3px solid var(--s4t-brand);
	border-radius: var(--s4t-radius-md);
	padding: var(--s4t-space-4) var(--s4t-space-5);
	font-size: var(--s4t-text-sm);
	line-height: 1.75;
	box-shadow: var(--s4t-shadow-xs);
}

.s4t-ai-result strong {
	color: var(--s4t-brand);
	font-family: var(--s4t-font-display);
	font-weight: 700;
}

.s4t-ai-result strong::after {
	content: ": ";
	color: var(--s4t-body);
}

/* --- Grouped service columns ----------------------------------------------
   One card per group, each holding a checked list. */

.s4t-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4t-space-4);
}

.s4t-column {
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-5);
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-column:hover {
	transform: translateY(-4px);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-lg);
}

.s4t-column__head {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-3);
	padding-block-end: var(--s4t-space-4);
	margin-block-end: var(--s4t-space-4);
	border-block-end: 1px solid var(--s4t-border);
}

.s4t-column__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--s4t-brand-soft);
	color: var(--s4t-brand);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-column:hover .s4t-column__icon {
	transform: translateY(-2px) scale(1.06);
}

.s4t-column__title {
	font-size: var(--s4t-text-base);
	font-weight: 700;
	margin: 0;
}

.s4t-column__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s4t-space-3);
}

.s4t-column__list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: var(--s4t-text-sm);
	line-height: 1.6;
}

/* Small orange tick in place of a bullet. */
.s4t-column__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--s4t-brand);
	border-bottom: 2px solid var(--s4t-brand);
	transform: rotate(-45deg);
}

/* --- Promo panel ----------------------------------------------------------
   A highlighted sub-offer inside a service page. Warmer than the closing CTA
   so the two never read as the same block. */

.s4t-promo {
	max-width: 820px;
	margin-inline: auto;
	margin-block-start: clamp(2rem, 4vw, var(--s4t-space-7));
	background: linear-gradient(150deg, var(--s4t-brand-tint) 0%, var(--s4t-brand-pale) 100%);
	border: 1px solid var(--s4t-border-strong);
	border-radius: var(--s4t-radius-xl);
	padding: clamp(1.75rem, 4vw, var(--s4t-space-7)) clamp(1.5rem, 4vw, var(--s4t-space-8));
	text-align: center;
}

.s4t-promo__title {
	font-size: var(--s4t-text-2xl);
	margin-block-end: var(--s4t-space-3);
}

.s4t-promo__text {
	max-width: 620px;
	margin-inline: auto;
	margin-block: 0;
	color: var(--s4t-ink);
	opacity: 0.8;
}

/* Shown while a page is still waiting on its copy. */
.s4t-svc-placeholder {
	max-width: 640px;
	margin-inline: auto;
	margin-block: 0;
	padding: var(--s4t-space-5);
	border: 1px dashed var(--s4t-border-strong);
	border-radius: var(--s4t-radius-md);
	background: var(--s4t-white);
	color: var(--s4t-muted);
	font-size: var(--s4t-text-sm);
	text-align: center;
}

/* ==========================================================================
   8. Other services
   ========================================================================== */

.s4t-svc-related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s4t-space-4);
}

.s4t-svc-mini {
	display: flex;
	align-items: center;
	gap: var(--s4t-space-3);
	background: var(--s4t-white);
	border: 1px solid var(--s4t-border);
	border-radius: var(--s4t-radius-lg);
	padding: var(--s4t-space-4);
	color: var(--s4t-ink);
	text-decoration: none;
	box-shadow: var(--s4t-shadow-xs);
	transition: transform var(--s4t-duration) var(--s4t-ease),
		border-color var(--s4t-duration) var(--s4t-ease),
		box-shadow var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-mini:hover {
	transform: translateY(-3px);
	border-color: var(--s4t-brand);
	box-shadow: var(--s4t-shadow-lg);
	color: var(--s4t-ink);
}

.s4t-svc-mini__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	background: var(--s4t-brand-soft);
	color: var(--s4t-brand);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-mini:hover .s4t-svc-mini__icon {
	transform: translateY(-2px) scale(1.06);
}

.s4t-svc-mini__body {
	flex: 1;
	min-width: 0;
}

.s4t-svc-mini__body strong {
	display: block;
	font-family: var(--s4t-font-display);
	font-size: var(--s4t-text-sm);
	line-height: 1.35;
}

.s4t-svc-mini__body em {
	display: block;
	font-style: normal;
	font-size: var(--s4t-text-xs);
	color: var(--s4t-muted);
	line-height: 1.4;
}

.s4t-svc-mini > .s4t-icon {
	flex: none;
	color: var(--s4t-brand);
	transition: transform var(--s4t-duration) var(--s4t-ease);
}

.s4t-svc-mini:hover > .s4t-icon {
	transform: translateX(3px);
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1080px) {
	.s4t-svc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablet — wide icon-left cards take the full row from here down. */
@media (max-width: 960px) {
	.s4t-ai-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.s4t-svc-related,
	.s4t-pillars,
	.s4t-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile */
@media (max-width: 640px) {
	.s4t-svc-grid,
	.s4t-svc-related,
	.s4t-pillars,
	.s4t-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.s4t-svc-hero__actions .s4t-btn {
		flex: 1 1 auto;
	}

	.s4t-crumbs {
		font-size: var(--s4t-text-xs);
	}

	/* Icon stacks above the text once the card gets narrow. */
	.s4t-ai-card {
		flex-direction: column;
		gap: var(--s4t-space-4);
	}

	.s4t-ai-card__icon {
		width: 68px;
		height: 68px;
	}
}