/*
 * Faiha homepage Services section (Checkpoint G).
 *
 * Content is ordinary block content on the Home page (core Group
 * "faiha-services": eyebrow, H2, intro, a grid of card Groups each with an
 * H3 link and an optional line, and a Buttons block). See
 * src/migrations/2026-09-27-checkpoint-g-homepage-services.php.
 *
 * Unlike the hero, this is a normal themed section: it uses the semantic
 * Checkpoint B tokens (--faiha-surface*, --faiha-text*), so it is light in
 * light mode and deliberately dark in dark mode, and follows the theme
 * toggle with the approved ~250ms transition.
 *
 * Each card has exactly one interactive element, the title link; its
 * ::after stretches over the card so the whole card is clickable while
 * the link's accessible name stays the service title.
 */

.faiha-services {
	--svc-bg: var(--faiha-surface-alt);
	--svc-card: var(--faiha-surface);
	--svc-border: rgba(4, 17, 26, 0.08);
	--svc-border-hover: rgba(217, 32, 50, 0.45);
	--svc-accent: var(--faiha-color-brand-strong); /* normal-size red text on light surfaces */
	--svc-shadow: 0 1px 2px rgba(4, 17, 26, 0.05), 0 10px 28px rgba(4, 17, 26, 0.08);
	--svc-shadow-hover: 0 2px 4px rgba(4, 17, 26, 0.05), 0 14px 32px rgba(4, 17, 26, 0.1);
	--svc-gap: var(--faiha-space-md);
}

:root[data-theme="dark"] .faiha-services {
	--svc-card: var(--faiha-navy-600); /* cards on an alt (#071824) section */
	--svc-border: rgba(255, 255, 255, 0.08);
	--svc-border-hover: rgba(242, 51, 67, 0.55);
	/* Brand red lifted slightly so normal-size red text stays >= 4.5:1 on the navy cards. */
	--svc-accent: color-mix(in srgb, var(--faiha-color-brand) 85%, #fff);
	--svc-shadow: none;
	--svc-shadow-hover: 0 14px 32px rgba(0, 0, 0, 0.28);
}

/* Section */

.faiha-services.wp-block-group {
	margin-block: 0;
	padding: var(--faiha-space-section) var(--faiha-container-padding);
	background-color: var(--svc-bg);
	color: var(--faiha-text);
	text-align: center;
	transition:
		background-color var(--faiha-duration-theme) var(--faiha-ease-standard),
		color var(--faiha-duration-theme) var(--faiha-ease-standard);
}

.faiha-services.wp-block-group > * {
	max-width: var(--faiha-container-max);
	margin-inline: auto;
}

/* Intro */

.faiha-services .faiha-services__eyebrow {
	margin-block: 0 var(--faiha-space-xs);
	color: var(--svc-accent);
	font-family: var(--faiha-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.faiha-services .faiha-services__title {
	margin-block: 0;
	color: var(--faiha-text);
	font-family: var(--faiha-font-heading);
	font-size: var(--faiha-text-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.faiha-services .faiha-services__text {
	max-width: 40rem;
	margin-block: var(--faiha-space-sm) 0;
	color: var(--faiha-text-secondary);
	font-family: var(--faiha-font-primary);
	font-size: clamp(1rem, calc(0.96rem + 0.2vw), 1.125rem);
	line-height: 1.6;
	text-wrap: pretty;
}

/* Grid: 4 / 2 / 1 columns; a short last row stays centred. */

.faiha-services .faiha-services__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--svc-gap);
	margin-block: var(--faiha-space-xl) 0;
	text-align: left;
}

.faiha-services .faiha-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 calc((100% - 3 * var(--svc-gap)) / 4);
	box-sizing: border-box;
	margin: 0;
	padding: 1.75rem var(--faiha-space-md) var(--faiha-space-md);
	overflow: hidden;
	border: 1px solid var(--svc-border);
	border-radius: var(--faiha-radius-card);
	background-color: var(--svc-card);
	box-shadow: var(--svc-shadow);
	transition:
		transform var(--faiha-duration-fast) var(--faiha-ease-standard),
		box-shadow var(--faiha-duration-fast) var(--faiha-ease-standard),
		border-color var(--faiha-duration-fast) var(--faiha-ease-standard),
		background-color var(--faiha-duration-theme) var(--faiha-ease-standard);
}

.faiha-services .faiha-services__text {
	transition: color var(--faiha-duration-theme) var(--faiha-ease-standard);
}

@media (max-width: 1023px) {
	.faiha-services .faiha-service-card {
		flex-basis: calc((100% - var(--svc-gap)) / 2);
	}
}

@media (max-width: 599px) {
	.faiha-services .faiha-service-card {
		flex-basis: 100%;
	}
}

/* Card content */

.faiha-services .faiha-service-card__title {
	margin: 0;
	color: var(--faiha-text);
	font-family: var(--faiha-font-heading);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Red top edge on hover/focus (visual only). */
.faiha-services .faiha-service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(to right, var(--faiha-color-brand), var(--faiha-color-brand-strong));
	opacity: 0;
	transition: opacity var(--faiha-duration-fast) var(--faiha-ease-standard);
}

.faiha-services .faiha-service-card:hover::before,
.faiha-services .faiha-service-card:focus-within::before {
	opacity: 1;
}

.faiha-services .faiha-service-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The one link covers the whole card. */
.faiha-services .faiha-service-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.faiha-services .faiha-service-card__text {
	margin: var(--faiha-space-2xs) 0 0;
	color: var(--faiha-text-secondary);
	font-family: var(--faiha-font-primary);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Visual cue only (empty alt text), so it is not read out on every card. */
.faiha-services .faiha-service-card::after {
	content: "View service \2192";
	content: "View service \2192" / "";
	margin-top: auto;
	padding-top: var(--faiha-space-sm);
	color: var(--svc-accent);
	font-family: var(--faiha-font-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Hover / focus */

.faiha-services .faiha-service-card:hover {
	transform: translateY(-3px);
	border-color: var(--svc-border-hover);
	box-shadow: var(--svc-shadow-hover);
}

.faiha-services .faiha-service-card__title a:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--svc-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Where supported, draw the focus ring around the whole card instead. */
@supports selector(:has(a)) {
	.faiha-services .faiha-service-card__title a:focus-visible {
		outline: none;
	}

	.faiha-services .faiha-service-card:has(a:focus-visible) {
		border-color: var(--svc-border-hover);
		outline-width: 2px;
		outline-style: solid;
		outline-color: var(--svc-accent);
		outline-offset: 3px;
	}
}

/* View All Services */

.faiha-services .faiha-services__actions {
	margin-block: var(--faiha-space-xl) 0;
}

.faiha-services .faiha-services__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: var(--faiha-radius-button);
	background-color: var(--faiha-color-brand-strong);
	color: var(--faiha-text-on-dark);
	font-family: var(--faiha-font-heading);
	font-size: 1rem;
	font-weight: var(--faiha-weight-button);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--faiha-duration-fast) var(--faiha-ease-standard);
}

.faiha-services .faiha-services__cta .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--faiha-color-brand-strong) 86%, #000);
	color: var(--faiha-text-on-dark);
}

.faiha-services .faiha-services__cta .wp-block-button__link:focus-visible {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--faiha-text);
	outline-offset: 3px;
}

/* Reveal (added by services.js only for cards below the fold; never without JS). */

.faiha-services .faiha-service-card.is-reveal-pending {
	opacity: 0;
	transform: translateY(1rem);
}

.faiha-services .faiha-service-card.is-revealing {
	transition:
		opacity 600ms var(--faiha-ease-standard),
		transform 600ms var(--faiha-ease-standard);
}

@media (prefers-reduced-motion: reduce) {
	.faiha-services.wp-block-group,
	.faiha-services .faiha-service-card,
	.faiha-services .faiha-services__cta .wp-block-button__link {
		transition: none;
	}

	.faiha-services .faiha-service-card:hover {
		transform: none;
	}
}

/*
 * Service icon badge above each title (shared Faiha icon set, icons.css;
 * the icon is chosen by the card's approved URL). Decorative: the title
 * link is the accessible name. Only where :has() is supported, so no card
 * ever shows an empty/solid badge.
 */
@supports selector(:has(a)) {
	.faiha-services {
		--svc-icon-bg: rgba(217, 32, 50, 0.08);
	}

	:root[data-theme="dark"] .faiha-services {
		--svc-icon-bg: rgba(242, 51, 67, 0.14);
	}

	/*
	 * The title stays un-positioned: the card (position: relative) must remain
	 * the containing block for the stretched title-link overlay that makes the
	 * whole card clickable. The badge is placed against the card instead.
	 */
	.faiha-services .faiha-service-card__title {
		padding-top: 3.75rem;
	}

	.faiha-services .faiha-service-card__title::before,
	.faiha-services .faiha-service-card__title::after {
		content: "";
		position: absolute;
		top: 1.75rem; /* card padding-top */
		left: var(--faiha-space-md); /* card padding-left */
		transition:
			background-color var(--faiha-duration-fast) var(--faiha-ease-standard);
	}

	.faiha-services .faiha-service-card__title::before {
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 0.75rem;
		background-color: var(--svc-icon-bg);
	}

	.faiha-services .faiha-service-card__title::after {
		top: calc(1.75rem + 0.6875rem);
		left: calc(var(--faiha-space-md) + 0.6875rem);
		width: 1.375rem;
		height: 1.375rem;
		background-color: var(--svc-accent);
		-webkit-mask: var(--faiha-icon) center / contain no-repeat;
		mask: var(--faiha-icon) center / contain no-repeat;
	}

	.faiha-services .faiha-service-card:hover .faiha-service-card__title::before,
	.faiha-services .faiha-service-card:focus-within .faiha-service-card__title::before {
		background-color: var(--faiha-color-brand-strong);
	}

	.faiha-services .faiha-service-card:hover .faiha-service-card__title::after,
	.faiha-services .faiha-service-card:focus-within .faiha-service-card__title::after {
		background-color: var(--faiha-text-on-dark);
	}
}

@media (prefers-reduced-motion: reduce) {
	.faiha-services .faiha-service-card__title::before,
	.faiha-services .faiha-service-card__title::after {
		transition: none;
	}
}