/*
 * Solution detail pages (/solutions/<slug>/).
 *
 * Every value is the literal equivalent of the Tailwind utility used in
 * frontend/src/components/solutions/SolutionDetail.js.
 *
 *   primary #0B1B3D   accent #2563EB   text #1A1A2E
 *   muted   #6B7280   light  #F5F6F8   border rgba(229,231,235,.8)
 */

/* ================================================================ shared == */

/* py-20 lg:py-28 */
.gvd-solution__section {
	position: relative;
	overflow: hidden;
	padding-block: 5rem;
}

@media (min-width: 1024px) {
	.gvd-solution__section { padding-block: 7rem; }
}

.gvd-solution__section--white { background: #fff; }
.gvd-solution__section--muted { background: rgba(249, 250, 251, 0.7); } /* bg-gray-50/70 */
.gvd-solution__section--dark  { background: #0b1b3d; }

.gvd-solution__section > .gvd-container { position: relative; z-index: 1; }

/* Reveal wrappers must stretch so `h-full` cards fill their grid row. */
.gvd-solution__cell { height: 100%; }

/* Eyebrow chip: border-accent/20 bg-accent/10 px-3.5 py-1.5 text-xs
   font-semibold uppercase tracking-wider text-accent */
.gvd-solution .gvd-eyebrow.gvd-solution__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(37, 99, 235, 0.2);
	border-radius: 9999px;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.gvd-solution .gvd-eyebrow.gvd-solution__eyebrow--dark {
	border-color: rgba(37, 99, 235, 0.25);
}

/* max-w-3xl, optionally centred */
.gvd-solution__head { max-width: 48rem; }

.gvd-solution__head--center {
	margin-inline: auto;
	text-align: center;
}

/*
 * Heads without an eyebrow chip: the title's top margin only existed to space
 * it from the chip, so take it back when there is nothing above it.
 */
.gvd-solution__head--nochip .gvd-solution__title { margin-top: 0; }

/* mt-5 text-3xl sm:text-4xl font-bold leading-[1.12] tracking-tight */
.gvd-solution__title {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #1a1a2e;
}

@media (min-width: 640px) {
	.gvd-solution__title { font-size: 2.25rem; }
}

.gvd-solution__head--dark .gvd-solution__title { color: #fff; }

.gvd-solution .gvd-accent { color: #2563eb; }

/* rounded-lg px-6 py-3 text-sm font-medium */
.gvd-solution .gvd-btn.gvd-solution__btn {
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
}

/* px-8 on the CTA pair */
.gvd-solution .gvd-btn.gvd-solution__btn--wide { padding-inline: 2rem; }

.gvd-solution .gvd-btn--ghost-light.gvd-solution__btn {
	border-color: rgba(255, 255, 255, 0.25);
}

.gvd-solution .gvd-btn--ghost-light.gvd-solution__btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.25);
}

/* mt-14 grids */
.gvd-solution__grid {
	display: grid;
	margin-top: 3.5rem;
	grid-template-columns: minmax(0, 1fr);
}

/* gap-5 sm:grid-cols-2 */
.gvd-solution__grid--challenges { gap: 1.25rem; }

@media (min-width: 640px) {
	.gvd-solution__grid--challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* gap-6 md:grid-cols-2 lg:grid-cols-3 */
.gvd-solution__grid--capabilities { gap: 1.5rem; }

@media (min-width: 768px) {
	.gvd-solution__grid--capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.gvd-solution__grid--capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* gap-6 md:grid-cols-3 */
.gvd-solution__grid--outcomes { gap: 1.5rem; }

@media (min-width: 768px) {
	.gvd-solution__grid--outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =================================================================== hero == */

/* relative overflow-hidden bg-[#0B1B3D] py-20 lg:py-28 */
.gvd-solution__hero {
	position: relative;
	overflow: hidden;
	padding-block: 5rem;
	background: #0b1b3d;
}

@media (min-width: 1024px) {
	.gvd-solution__hero { padding-block: 7rem; }
}

.gvd-solution__hero-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, #0b1b3d, #0e2a5e, #0b1b3d);
	pointer-events: none;
}

.gvd-solution__hero-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 30%, transparent 75%);
}

/* h-80 w-80 rounded-full bg-accent/20 blur-[130px], drifting on a 14s loop */
.gvd-solution__hero-orb {
	position: absolute;
	right: 0;
	top: 25%;
	width: 20rem;
	height: 20rem;
	border-radius: 9999px;
	background: rgba(37, 99, 235, 0.2);
	filter: blur(130px);
	pointer-events: none;
	animation: gvd-solution-drift 14s ease-in-out infinite;
}

@keyframes gvd-solution-drift {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(-30px, 20px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.gvd-solution__hero-orb { animation: none; }
}

.gvd-solution__hairline {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.6), transparent);
}

.gvd-solution__hero-inner { position: relative; z-index: 1; }

/* flex items-center gap-2 text-sm text-white/50 */
.gvd-solution__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(255, 255, 255, 0.5);
}

.gvd-solution__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gvd-solution__crumbs a:hover { color: #fff; }
.gvd-solution__crumb-current { color: #fff; }

/* mt-8 max-w-3xl */
.gvd-solution__hero-copy {
	margin-top: 2rem;
	max-width: 48rem;
}

/* h-14 w-14 rounded-2xl bg-accent/15 ring-1 ring-accent/30 */
.gvd-solution__hero-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 1rem;
	background: rgba(37, 99, 235, 0.15);
	box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
	color: #2563eb;
}

/* mt-6 text-4xl sm:text-5xl font-bold leading-[1.08] tracking-tight */
.gvd-solution__hero-title {
	margin: 1.5rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #fff;
}

@media (min-width: 640px) {
	.gvd-solution__hero-title { font-size: 3rem; }
}

/* mt-5 text-lg leading-relaxed text-white/65 */
.gvd-solution__hero-tagline {
	margin: 1.25rem 0 0;
	font-size: 1.125rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.65);
}

.gvd-solution__hero-action { margin-top: 2rem; }

/* =============================================================== overview == */

/* mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8 */
.gvd-solution__narrow {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
	padding-inline: 1rem;
	text-align: center;
}

@media (min-width: 640px) {
	.gvd-solution__narrow { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.gvd-solution__narrow { padding-inline: 2rem; }
}

/* mt-6 text-xl sm:text-2xl leading-relaxed text-text */
.gvd-solution__overview {
	margin: 1.5rem 0 0;
	font-size: 1.25rem;
	line-height: 1.625;
	color: #1a1a2e;
}

@media (min-width: 640px) {
	.gvd-solution__overview { font-size: 1.5rem; }
}

/* ============================================================= challenges == */

/* flex h-full items-start gap-4 rounded-2xl border-gray-100 bg-white p-6 shadow-sm */
.gvd-solution__challenge {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.5rem;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* h-10 w-10 rounded-xl bg-red-50 */
.gvd-solution__challenge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: #fef2f2;
	color: #ef4444;
}

/* text-base font-semibold */
.gvd-solution__challenge-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: #1a1a2e;
}

/* mt-1.5 text-sm leading-relaxed text-text-muted */
.gvd-solution__challenge-text {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: #6b7280;
}

/* =========================================================== capabilities == */

/* h-full rounded-2xl border-gray-100 bg-white p-7 shadow-sm
   hover:-translate-y-1 hover:border-accent/30 hover:shadow-lg */
.gvd-solution__capability {
	height: 100%;
	padding: 1.75rem;
	border: 1px solid #f3f4f6;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gvd-solution__capability:hover {
	transform: translateY(-0.25rem);
	border-color: rgba(37, 99, 235, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* h-12 w-12 rounded-xl bg-accent/10, accent/20 on card hover */
.gvd-solution__capability-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: rgba(37, 99, 235, 0.1);
	color: #2563eb;
	transition: background-color 0.3s ease;
}

.gvd-solution__capability:hover .gvd-solution__capability-icon {
	background: rgba(37, 99, 235, 0.2);
}

/* mt-5 text-lg font-semibold */
.gvd-solution__capability-title {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #1a1a2e;
}

/* mt-2 text-sm leading-relaxed */
.gvd-solution__capability-text {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: #6b7280;
}

/* =============================================================== outcomes == */

/* opacity-60 grid overlay, masked from the top edge */
.gvd-solution__outcome-grid {
	position: absolute;
	inset: 0;
	opacity: 0.6;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%);
}

/* h-full rounded-2xl border-white/10 bg-white/[0.05] p-7 backdrop-blur-md */
.gvd-solution__outcome {
	height: 100%;
	padding: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* flex items-center gap-2 text-accent */
.gvd-solution__outcome-metric {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #2563eb;
}

/* font-heading text-2xl font-bold text-white */
.gvd-solution__outcome-metric span {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2rem;
	color: #fff;
}

/* mt-4 text-lg font-semibold text-white */
.gvd-solution__outcome-title {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
}

/* mt-2 text-sm leading-relaxed text-white/55 */
.gvd-solution__outcome-text {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* =========================================================== environments == */

/* mt-12 flex flex-wrap justify-center gap-3 */
.gvd-solution__envs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 3rem;
}

/* rounded-full border-gray-100 bg-gray-50/60 px-5 py-2.5 text-sm font-medium */
.gvd-solution__env {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid #f3f4f6;
	border-radius: 9999px;
	background: rgba(249, 250, 251, 0.6);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	color: #1a1a2e;
}

.gvd-solution__env .gvd-svg { color: #2563eb; }

/* ==================================================================== cta == */

.gvd-solution__cta { background: #0b1b3d; }

.gvd-solution__cta-gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom right, #0b1b3d, #0f2652, #1a3a6e);
}

.gvd-solution__cta-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at bottom, rgba(37, 99, 235, 0.25) 0%, transparent 55%);
}

/* relative mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8 */
.gvd-solution__cta-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	padding-inline: 1rem;
	text-align: center;
}

@media (min-width: 640px) {
	.gvd-solution__cta-inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
	.gvd-solution__cta-inner { padding-inline: 2rem; }
}

/* text-3xl sm:text-4xl lg:text-5xl font-bold leading-[1.1] tracking-tight */
.gvd-solution__cta-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: #fff;
}

@media (min-width: 640px) {
	.gvd-solution__cta-title { font-size: 2.25rem; }
}

@media (min-width: 1024px) {
	.gvd-solution__cta-title { font-size: 3rem; }
}

/* mx-auto mt-6 max-w-xl text-lg text-white/65 */
.gvd-solution__cta-text {
	max-width: 36rem;
	margin: 1.5rem auto 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: rgba(255, 255, 255, 0.65);
}

/* mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row */
.gvd-solution__cta-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

@media (min-width: 640px) {
	.gvd-solution__cta-actions { flex-direction: row; }
}