/*
 * Services page — hero + listing grid
 * (templates/template-services.php, template-parts/service/services-*.php).
 *
 * Self-contained on purpose. The first version of this page reused the Home
 * page's .home-our-expertise__card, whose colours and fonts come from custom
 * properties declared on the .home-our-expertise wrapper — absent here, so
 * every value fell through to `inherit` and the cards picked up Bootstrap's
 * link blue. Declaring the tokens locally means nothing on this page depends
 * on another section being present.
 *
 * Colours are the site's own: #030712 headings, #364153 body, #7FB04F green,
 * #FCECD8 cream, #F1F1F3 borders, and the #C0E4F7→#F1F9FE band gradient.
 */

.services-hero,
.services-listing {
	--sl-font:      "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sl-heading:   #030712;
	--sl-body:      #364153;
	--sl-green:     #7FB04F;
	--sl-green-ink: #5F8F3A;
	--sl-cream:     #FCECD8;
	--sl-border:    #F1F1F3;
	--sl-surface:   #FFFFFF;
	--sl-max:       1704px;
}

/* =============================================================================
   Hero
   ============================================================================= */

.services-hero {
	position: relative;
	/* Capped rather than full-bleed, matching every other banner on the site
	   (projects/service/reports/publications/people and the home hero). On a
	   wider screen this leaves an even sliver of page background down each
	   side; below 1880px it is inert, so narrow screens stay edge to edge. */
	max-width: 1880px;
	height: 400px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	background-color: #1B250E;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

/* No featured image: a designed wash rather than .about-hero's flat #1B250E,
   which read as a black slab on a page with no image set. */
.services-hero--plain {
	background-color: #FDF7EF;
	background-image: linear-gradient( 118deg, var( --sl-cream ) 0%, #FDF6EC 46%, #F1F9FE 100% );
}

.services-hero--plain .services-hero__title {
	color: var( --sl-heading );
}

.services-hero--plain .services-hero__lead {
	color: var( --sl-body );
}

/* Photo set: a scrim so the white type stays legible over any image. */
.services-hero--photo::before {
	content:    "";
	position:   absolute;
	inset:      0;
	background: linear-gradient( 180deg, rgba( 3, 7, 18, 0.30 ) 0%, rgba( 3, 7, 18, 0.62 ) 100% );
}

.services-hero--photo .services-hero__title,
.services-hero--photo .services-hero__lead {
	color: #FFFFFF;
}

/* Soft green wash, bottom right — the same decorative idiom as the 404 page,
   kept well clear of the text column. */
.services-hero__blob {
	position:       absolute;
	right:          -140px;
	bottom:         -220px;
	width:          520px;
	height:         480px;
	border-radius:  48% 52% 38% 62% / 54% 42% 58% 46%;
	background:     rgba( 127, 176, 79, 0.10 );
	pointer-events: none;
}

.services-hero__inner {
	position:  relative;
	z-index:   1;
	width:     100%;
	max-width: var( --sl-max );
	margin:    0 auto;
}

.services-hero__title {
	margin:         0;
	font-family:    var( --sl-font );
	font-size:      clamp( 34px, 4.4vw, 58px );
	font-weight:    600;
	line-height:    1.12;
	letter-spacing: -0.015em;
	color:          var( --sl-heading );
}

.services-hero__lead {
	max-width:   680px;
	margin:      18px 0 0;
	font-family: var( --sl-font );
	font-size:   clamp( 16px, 1.5vw, 19px );
	font-weight: 400;
	line-height: 1.65;
	color:       var( --sl-body );
}

/* =============================================================================
   Listing
   ============================================================================= */

.services-listing {
	max-width: var( --sl-max );
	margin:    0 auto;
	padding:   72px 24px 100px;
}

.services-listing__empty {
	margin:      0;
	font-family: var( --sl-font );
	font-size:   18px;
	color:       var( --sl-body );
}

/* Three per row, stated explicitly rather than left to auto-fill: in a
   1704px container auto-fill's 320px track floor fit four tracks, not the
   three intended. The count now steps down by breakpoint — 3 / 2 / 1.
   minmax( 0, 1fr ) rather than plain 1fr so a long unbroken word in a title
   cannot push a column wider than its share. */
.services-grid {
	display:               grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap:                   28px;
}

/* =============================================================================
   Card
   ============================================================================= */

.services-card {
	display: flex;
}

/* The whole card is one link. Every colour below is set explicitly — an
   unstyled <a> here inherits Bootstrap's #0d6efd, which is exactly what went
   wrong when this page borrowed another section's token-based styles. */
.services-card__link {
	display:         flex;
	flex-direction:  column;
	width:           100%;
	overflow:        hidden;
	border:          1px solid var( --sl-border );
	border-radius:   20px;
	background:      var( --sl-surface );
	color:           var( --sl-heading );
	text-decoration: none;
	transition:      transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.services-card__link:hover,
.services-card__link:focus-visible {
	transform:    translateY( -4px );
	border-color: #E4EBDA;
	box-shadow:   0 18px 36px rgba( 3, 7, 18, 0.10 );
	outline:      none;
}

.services-card__link:focus-visible {
	box-shadow: 0 0 0 3px rgba( 127, 176, 79, 0.35 );
}

.services-card__media {
	position:     relative;
	overflow:     hidden;
	/* Fixed ratio is what makes the row of cards line up: the source images
	   range from wide landscape to tall portrait, and letting each one set
	   its own height was why the old cards were all different sizes. */
	aspect-ratio: 16 / 10;
	background:   var( --sl-cream );
}

.services-card__image {
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.services-card__link:hover .services-card__image,
.services-card__link:focus-visible .services-card__image {
	transform: scale( 1.045 );
}

/* Service with no image yet — cream panel with the leaf mark, so the card
   keeps the same footprint as its neighbours instead of collapsing. */
.services-card__placeholder {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           rgba( 127, 176, 79, 0.42 );
}

.services-card__placeholder svg {
	display: block;
	width:   auto;
	height:  46%;
}

.services-card__body {
	display:        flex;
	flex-direction: column;
	/* Fills the card so the CTA below can be pushed to the bottom edge,
	   keeping it on one line across every card in the row. */
	flex:           1 1 auto;
	padding:        26px 26px 24px;
}

.services-card__title {
	margin:      0;
	font-family: var( --sl-font );
	font-size:   22px;
	font-weight: 600;
	line-height: 1.3;
	color:       var( --sl-heading );
	transition:  color 0.2s ease;
}

.services-card__link:hover .services-card__title,
.services-card__link:focus-visible .services-card__title {
	color: var( --sl-green-ink );
}

.services-card__excerpt {
	display:            -webkit-box;
	margin:             12px 0 0;
	font-family:        var( --sl-font );
	font-size:          16px;
	font-weight:        400;
	line-height:        1.65;
	color:              var( --sl-body );
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.services-card__cta {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	/* Bottom-aligns the CTA regardless of how long the title/excerpt run. */
	margin-top:  auto;
	padding-top: 22px;
	font-family: var( --sl-font );
	font-size:   16px;
	font-weight: 500;
	color:       var( --sl-green );
	transition:  gap 0.2s ease, color 0.2s ease;
}

.services-card__link:hover .services-card__cta,
.services-card__link:focus-visible .services-card__cta {
	gap:   12px;
	color: var( --sl-green-ink );
}

@media ( prefers-reduced-motion: reduce ) {
	.services-card__link,
	.services-card__image,
	.services-card__cta {
		transition: none;
	}

	.services-card__link:hover,
	.services-card__link:focus-visible {
		transform: none;
	}

	.services-card__link:hover .services-card__image,
	.services-card__link:focus-visible .services-card__image {
		transform: none;
	}
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1024px ) {
	.services-hero {
		min-height: 260px;
		padding:    56px 24px;
	}

	.services-listing {
		padding: 56px 24px 72px;
	}

	/* Two per row: a third column here would squeeze each card under ~300px,
	   at which point the 16/10 image and the three-line excerpt stop reading. */
	.services-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap:                   22px;
	}
}

@media ( max-width: 640px ) {
	.services-hero {
		min-height: 200px;
		padding:    44px 16px;
	}

	.services-listing {
		padding: 40px 16px 60px;
	}

	/* Below this the 320px track floor would start overflowing narrow
	   phones, so the grid is told explicitly to stay at one column. */
	.services-grid {
		grid-template-columns: 1fr;
		gap:                   18px;
	}

	.services-card__body {
		padding: 22px 20px 20px;
	}

	.services-card__title {
		font-size: 20px;
	}
}