/* =========================================================
   MERIDIAN — SERVICES
   Page-specific stylesheet

   Sections:
   1. Services Hero
   2. Services Grid Section
   3. Services Grid
   4. Service Cards
   5. Tablet
   6. Mobile
   ========================================================= */


/* =========================================================
   1. SERVICES HERO
   ========================================================= */

.services-hero {
	padding-block:
		var(--meridian-space-80)
		var(--meridian-space-64);

	background:
		linear-gradient(
            90deg,
            rgb(0 94 168 / 16%),
            rgb(0 94 168 / 7%)
        );
}

.services-hero .meridian-container {
	max-width: 900px;

	margin-inline: auto;

	text-align: center;
}

.services-hero h1 {
	max-width: 820px;

	margin:
		0
		auto
		var(--meridian-space-24);

	color: var(--meridian-deep);

	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.services-hero-intro {
	max-width: 760px;

	margin:
		0
		0
		var(--meridian-space-40);

	padding:
		var(--meridian-space-16)
		var(--meridian-space-24);

	border-left: 4px solid var(--meridian-primary);

	background: var(--meridian-soft);

	color: var(--meridian-deep);

	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.65;

	text-align: left;
}


/* =========================================================
   2. SERVICES GRID SECTION
   ========================================================= */

.services-grid-section {
	padding-block: var(--meridian-space-80);

	background: var(--meridian-white);
}

.services-grid-section > .meridian-container > h2 {
	margin:
		0
		0
		var(--meridian-space-16);

	color: var(--meridian-deep);
}

.services-grid-section > .meridian-container > p {
	max-width: 760px;

	margin:
		0
		0
		var(--meridian-space-40);

	color: var(--meridian-secondary);

	font-size: 1.05rem;
	line-height: 1.7;
}


/* =========================================================
   3. SERVICES GRID
   ========================================================= */

.services-grid {
	display: grid !important;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: var(--meridian-space-24);

	align-items: stretch;
}

.services-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;

	min-width: 0;
	height: 100%;
}


/* =========================================================
   4. SERVICE CARDS
   ========================================================= */

.service-card {
	position: relative;

	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	overflow: hidden;

	border: 1px solid var(--meridian-border);
	border-radius: var(--meridian-radius-lg, 16px);

	background: var(--meridian-white);

	box-shadow:
		0 10px 28px rgb(11 46 79 / 10%);

	transition:
		transform 320ms ease,
		box-shadow 320ms ease,
		border-color 320ms ease;
}


/* ---------------------------------------------------------
   Animated content background
   --------------------------------------------------------- */

.service-card::after {
	content: "";

	position: absolute;
	z-index: 1;

	left: 0;
	right: 0;
	bottom: 0;

	/*
	 * Covers the title + paragraph area.
	 * Increase slightly if a taller text block needs coverage.
	 */
	height: 44%;

	background:
		linear-gradient(
			90deg,
			rgb(0 94 168 / 12%),
			rgb(0 94 168 / 5%)
		);

	transform: scaleX(0);
	transform-origin: left center;

	transition:
		transform 520ms cubic-bezier(0.22, 1, 0.36, 1);

	pointer-events: none;
}


/* Image */

.service-card .wp-block-image {
	position: relative;
	z-index: 2;

	margin: 0;
}

.service-card img {
	display: block;

	width: 100%;

	aspect-ratio: 4 / 3;

	object-fit: cover;
}


/* Title */

.service-card h3 {
	position: relative;
	z-index: 2;

	margin: 0;

	padding:
		var(--meridian-space-24)
		var(--meridian-space-24)
		var(--meridian-space-12);

	color: var(--meridian-deep);

	font-size: 1.2rem;
	line-height: 1.3;

	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}


/* Description */

.service-card p {
	position: relative;
	z-index: 2;

	margin: 0;

	padding:
		0
		var(--meridian-space-24)
		var(--meridian-space-24);

	color: var(--meridian-secondary);

	font-size: 0.95rem;
	line-height: 1.65;
}


/* ---------------------------------------------------------
   Hover interaction
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference)
	and (hover: hover)
	and (pointer: fine) {

	.service-card:hover {
		transform: translateY(-8px);

		border-color: rgb(0 94 168 / 28%);

		box-shadow:
			0 22px 44px rgb(11 46 79 / 18%),
			0 8px 18px rgb(11 46 79 / 10%);
	}

	.service-card:hover::after {
		transform: scaleX(1);
	}
}


/* =========================================================
   5. TABLET
   768px — 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

	.services-hero,
	.services-grid-section {
		padding-block: var(--meridian-space-64);
	}

	.services-hero .meridian-container {
		width: min(100% - 48px, 820px);
	}

	.services-hero h1 {
		font-size: clamp(2rem, 5vw, 2.6rem);
	}

	.services-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   6. MOBILE
   <= 767px
   ========================================================= */

@media (max-width: 767px) {

	.services-hero,
	.services-grid-section {
		padding-block: var(--meridian-space-48);
	}

	.services-hero .meridian-container {
		width: min(100% - 32px, 640px);
	}

	.services-hero h1 {
		max-width: none;

		margin-bottom: var(--meridian-space-16);

		font-size: clamp(1.75rem, 8vw, 2.2rem);
		line-height: 1.15;
	}

	.services-hero p {
		max-width: none;

		font-size: 1rem;
		line-height: 1.7;
	}

	.services-grid-section > .meridian-container > p {
		margin-bottom: var(--meridian-space-32);
	}

	.services-grid {
		grid-template-columns: 1fr;

		gap: 20px;
	}

	.service-card {
		height: auto;
		min-height: 0;
	}

	.service-card h3 {
		padding:
			20px
			20px
			var(--meridian-space-12);

		font-size: 1.15rem;
	}

	.service-card p {
		padding:
			0
			20px
			var(--meridian-space-24);
	}
}


/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.service-card,
	.service-card::after {
		transition: none !important;
	}

	.service-card:hover {
		transform: none !important;
	}
}


/* =========================================================
   SERVICES CTA
   ========================================================= */

.wp-block-group.services-cta {

	padding-block: var(--meridian-space-48);

	background:
		linear-gradient(
			135deg,
			var(--meridian-deep),
			#10456e
		);

	color: var(--meridian-white);

	text-align: center;
}


/* Heading */

.services-cta h3 {
	max-width: 760px;

	margin:
		0
		auto
		var(--meridian-space-16);

	color: var(--meridian-white);

	text-align: center;
}


/* Supporting copy */

.services-cta p {
	max-width: 700px;

	margin:
		0
		auto
		var(--meridian-space-24);

	color: rgb(255 255 255 / 82%);

	font-size: 1.05rem;
	line-height: 1.7;

	text-align: center;
}


/* Button */

.services-cta .wp-block-buttons {
	justify-content: center;

	gap: var(--meridian-space-12);
}

.wp-block-group.services-cta {
    margin-block-start: var(--meridian-space-48) !important;

	padding-block: var(--meridian-space-48);

	background:
		linear-gradient(
			135deg,
			var(--meridian-deep),
			#10456e
		);

	color: var(--meridian-white);

	text-align: center;
}