/*
 * Policies landing page (templates/template-policies.php,
 * template-parts/policy/policies-*.php).
 *
 * The hero is the shared .about-hero (assets/css/about.css, enqueued
 * alongside this file) — only the no-image fallback and the lead paragraph
 * are added here. The card grid below is this page's own: the policies are
 * documents rather than services, so they get a flatter, more editorial card
 * than the photo-led one on the Services page.
 *
 * Colours are the site's own: #030712 headings, #364153 body, #7FB04F green,
 * #FCECD8 cream, #F1F1F3 borders.
 */

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

/* =============================================================================
   Hero — additions to .about-hero only
   ============================================================================= */

/* No featured image: .about-hero's own fallback is a flat #1B250E, which on a
   page with no image reads as a black slab. Same light wash used for the Blog
   details hero, so the two behave alike. */
.policies-hero--gradient {
	background-color: #FDF7EF;
	background-image: linear-gradient( 118deg, var( --pl-cream ) 0%, #FDF6EC 46%, #F1F9FE 100% );
}

/* The scrim and white type exist to hold text over a photo; over the light
   wash they do the opposite. */
.policies-hero--gradient .about-hero__overlay {
	display: none;
}

.policies-hero--gradient .about-hero__title,
.policies-hero--gradient .policies-hero__lead {
	color: var( --pl-heading );
}

.policies-hero--gradient .policies-hero__lead {
	color: var( --pl-body );
}

.policies-hero__lead {
	max-width:   680px;
	margin:      16px 0 0;
	font-family: var( --pl-font );
	font-size:   clamp( 16px, 1.5vw, 19px );
	font-weight: 400;
	line-height: 1.65;
	color:       rgba( 255, 255, 255, 0.92 );
}

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

.policies-listing {
	max-width: var( --pl-max );
	margin:    0 auto;
	padding:   64px 24px 100px;
}

/* Three across at desktop, stated explicitly rather than left to auto-fill,
   which in a container this wide would fit four tracks. minmax( 0, 1fr ) so a
   long policy title cannot push a column past its share. */
.policies-grid {
	display:               grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap:                   28px;
}

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

.policies-card {
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	border:         1px solid var( --pl-border );
	border-radius:  20px;
	background:     var( --pl-surface );
	transition:     transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.policies-card:hover,
.policies-card:focus-within {
	transform:    translateY( -4px );
	border-color: #E4EBDA;
	box-shadow:   0 18px 36px rgba( 3, 7, 18, 0.10 );
}

/* Every colour is set explicitly: an unstyled <a> inherits Bootstrap's
   #0d6efd, which is what leaks through whenever it is left to chance. */
.policies-card__link {
	display:         flex;
	flex-direction:  column;
	flex:            1 1 auto;
	color:           var( --pl-heading );
	text-decoration: none;
}

.policies-card__link:focus-visible {
	outline:        2px solid var( --pl-green );
	outline-offset: -2px;
}

/* Shallower than a photo card's 16/10 — the image is a header band here, not
   the subject, so it takes less of the card than the text does. */
.policies-card__media {
	position:     relative;
	/* flex: none so the card's column layout can neither grow nor shrink this
	   band — without it the band is a flex item whose base size comes from its
	   content, and a tall source photo stretched one card's image well past
	   its neighbours'. */
	flex:         none;
	aspect-ratio: 16 / 7;
	overflow:     hidden;
	background:   var( --pl-cream );
}

/*
 * Absolutely positioned, so the photo's own proportions can never set this
 * band's height — the aspect-ratio above is the only thing that does, which is
 * what keeps every card's image identical. An in-flow img with height: 100%
 * resolves that height against an indefinite parent, falls back to auto, and
 * renders at the file's intrinsic height instead. Same fix and same reason as
 * .home-our-expertise__map-image in assets/css/home/our-expertise.css.
 */
.policies-card__image {
	position:   absolute;
	inset:      0;
	display:    block;
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.policies-card:hover .policies-card__image {
	transform: scale( 1.045 );
}

/* Overhangs upward from the top of the body, so it sits over the image band's
   lower edge and reads against either the photo or, with no image, the plain
   cream. It lives in the body rather than in the band because the band now
   clips its contents (to contain the hover zoom), which would cut it in half. */
.policies-card__badge {
	position:        absolute;
	left:            26px;
	top:             -24px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	border-radius:   14px;
	background:      var( --pl-surface );
	box-shadow:      0 6px 18px rgba( 3, 7, 18, 0.12 );
	color:           var( --pl-green );
}

.policies-card__badge svg {
	display: block;
	width:   24px;
	height:  24px;
}

.policies-card__body {
	position:       relative; /* Anchors the badge overhanging its top edge. */
	display:        flex;
	flex-direction: column;
	/* Fills the card so the CTA can sit on the bottom edge, level across
	   every card in the row whatever the excerpt length. */
	flex:           1 1 auto;
	/* Top padding clears the badge overhanging the media band. */
	padding:        40px 26px 24px;
}

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

.policies-card:hover .policies-card__title {
	color: var( --pl-green-ink );
}

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

.policies-card__cta {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	margin-top:  auto;
	padding-top: 22px;
	font-family: var( --pl-font );
	font-size:   16px;
	font-weight: 500;
	color:       var( --pl-green );
	transition:  gap 0.2s ease, color 0.2s ease;
}

.policies-card:hover .policies-card__cta {
	gap:   12px;
	color: var( --pl-green-ink );
}

/* Only rendered when that policy has a policy_link set. Outside the card
   link (nested anchors are invalid), so it carries its own styling. */
.policies-card__doc {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	margin:          0 26px 24px;
	padding-top:     16px;
	border-top:      1px solid var( --pl-border );
	font-family:     var( --pl-font );
	font-size:       15px;
	font-weight:     500;
	color:           var( --pl-muted );
	text-decoration: none;
	transition:      color 0.2s ease;
}

.policies-card__doc:hover,
.policies-card__doc:focus-visible {
	color:   var( --pl-green-ink );
	outline: none;
}

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

	.policies-card:hover,
	.policies-card:focus-within {
		transform: none;
	}

	.policies-card:hover .policies-card__image {
		transform: none;
	}
}

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

@media ( max-width: 1024px ) {
	.policies-listing {
		padding: 48px 24px 72px;
	}

	/* Two across: a third column here squeezes each card under ~300px, where
	   the band and the four-line excerpt stop reading. */
	.policies-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap:                   22px;
	}
}

@media ( max-width: 640px ) {
	.policies-listing {
		padding: 36px 16px 60px;
	}

	.policies-grid {
		grid-template-columns: 1fr;
		gap:                   18px;
	}

	.policies-card__body {
		padding: 38px 20px 20px;
	}

	.policies-card__title {
		font-size: 19px;
	}

	.policies-card__doc {
		margin: 0 20px 20px;
	}
}

/* =============================================================================
   Hero height
   =============================================================================
   Shorter than the shared .about-hero's 400/320/260/200px ladder — this is a
   landing strip above a card grid, not a full-height page hero. Each step gets
   its own media query rather than one flat rule, because about.css declares
   those heights inside breakpoints of its own and sits earlier in the cascade:
   a single unscoped height here would win everywhere and flatten the banner to
   one size on phone and desktop alike. */

.policies-hero {
	height: 260px;
}

@media ( max-width: 1400px ) {
	.policies-hero {
		height: 230px;
	}
}

@media ( max-width: 1024px ) {
	.policies-hero {
		height: 190px;
	}
}

@media ( max-width: 640px ) {
	.policies-hero {
		height: 150px;
	}
}