/* ==========================================================================
   Items (post grid) (flexible_layouts: items)
   ========================================================================== */

/* Gap layer: transparent, owns only the space ABOVE the section (see
   wriggle_space_above_style()). The background lives on .items-section__band
   below, so the band's top edge is separated from whatever precedes it
   instead of butting straight up against it. */
.items-section {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-above, clamp(40px, 28.34px + 2.99vw, 80px)) 0 0;

	color: var(--white);

	/* Card title / link colours. On the dark variant the design uses a white
	   title with a green link; the light variant needs dark-on-white instead.
	   Override with --accent-blue / --accent-green on the section. */
	--items-title: var(--white);
	--items-accent: var(--green);
}

/* Band layer: carries the background, the gutters and its own symmetric
   inside padding - a different number from the gap above it.
   Design: 80px top/bottom at 1728 (bg 2137 -> heading 2217), 40px at 390.
   Design runs #04202A at the TOP down to #010C0F. */
.items-section__band {
	padding: clamp(40px, 28.34px + 2.99vw, 80px) 25px;
	background: linear-gradient(180deg, #04202A 0%, #010C0F 100%);
	overflow: hidden;
}

.items-section--light {
	color: var(--black);

	--items-title: var(--black);
	--items-accent: var(--blue);
}

.items-section--light .items-section__band {
	background: var(--white);
}

/* Explicit accent overrides, independent of the background toggle. */
.items-section--accent-blue  { --items-accent: var(--blue); }
.items-section--accent-green { --items-accent: var(--green); }
.items-section--accent-white { --items-accent: var(--white); }

.items-section--light .items-heading,
.items-section--light .items-header__text p {
	color: var(--black);
}

.items-container {
	/* Design content column is 1528px (100px gutters in a 1728 frame). */
	max-width: 1528px;
	margin: 0 auto;
}

/* ---------- Header ---------- */

.items-header {
	display: grid;
	/* Design has two equal 734px columns with a 60px gap (100->834, 894->1628). */
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
	margin-bottom: 56px;
	opacity: 0;
	transform: translateY(24px);
	animation: itemsFadeUp .9s cubic-bezier(.22, 1, .36, 1) .05s both;
}

.items-heading {
/* 	line-height: 1.25; */
	/* Design: 30px SemiBold at 1728, 22px at 390. */
	font-size: clamp(22px, 19.67px + 0.60vw, 30px);
	font-weight: 600;
	margin: 0;
	color: var(--white);
}

.items-heading .highlight {
	color: var(--green);
}

.items-header__text p {
	/* Design: 16px at 1728, 15px at 390 - same body scale as the rest. */
	font-size: clamp(15px, 14.709px + 0.0747vw, 16px);

	color: #fff;
	margin: 0 0 16px;
	padding: 0;
}

.items-header__text p:last-child {
	margin-bottom: 0;
}

/* ---------- Grid ---------- */

.items-grid {
	display: flex;
/* 	flex-wrap: wrap; */
	gap: 20px;
}

.items-card {
	flex: 1 1 calc(33.33% - 20px);
	min-width: 260px;
	display: block;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	transform: translateY(34px);
	animation: itemsFadeUp .8s cubic-bezier(.22, 1, .36, 1) both;
	animation-delay: calc(0.18s + var(--i, 0) * 0.14s);
}

@keyframes itemsFadeUp {
	from { opacity: 0; transform: translateY(34px); }
	to { opacity: 1; transform: translateY(0); }
}

.items-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 496 / 377;

	background: #0b2530;
	isolation: isolate;
}

.items-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 32, 42, 0) 35%, rgba(4, 32, 42, 0.65) 100%);
	opacity: 0;
	transition: opacity .45s ease;
	z-index: 1;
}

.items-card__media::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 40%, rgba(28, 254, 175, 0.14) 50%, transparent 60%);
	transform: translateX(-120%);
	z-index: 2;
	pointer-events: none;
	transition: transform .7s ease;
}

.items-card__content {
	padding: 0 20px;
	box-sizing: border-box;
}

.items-card img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
	
	
}

.items-section:not(.items-section--light) .items-card .items-card__excerpt {
	color: var(--white);
}

.items-card .items-card__excerpt:first-of-type {
	padding-top: 0px;
}

.items-card:hover .items-card__media::after {
	opacity: 1;
}

.items-card:hover .items-card__media::before {
	transform: translateX(120%);
}

.items-card:hover img {
	transform: scale(1.08);
}

/* Card link on a card that cannot itself be an anchor (it holds quick links):
   an invisible overlay across the image, plus the title as a real link. */
.items-card__media-link {
	position: absolute;
	inset: 0;
	/* Above the media's ::after tint (1) and ::before sheen (2). */
	z-index: 3;
}

.items-card__title-link {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}

.items-card__title-link:hover,
.items-card__title-link:focus-visible {
	color: var(--items-accent);
}

.items-card__title {
	line-height: 1.22;
	/* Size comes from the .subtitle2818 wrapper's sitewide scale
	   (28px @1920 -> 18px @600) - don't override it here. */
	font-weight: 600;
	margin: 0;
	color: var(--items-title);
}

.items-card .subtitle2818 {
	/* Design: 20px between image and title at 390, 30px at 1728; and 10.6px
	   below the title at 390, 15px at 1728. The old flat 8px bottom was what
	   made it sit tight against the link. */
	margin: clamp(20px, 17.086px + 0.7474vw, 30px) 0 clamp(10px, 8.543px + 0.3737vw, 15px);
}

.items-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	/* Design leaves 20px above the link at 1728 and 15px at 390. */
	margin-top: clamp(15px, 13.54px + 0.37vw, 20px);
}

.items-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	/* Design: green on the dark variant (#0FCF8C), blue on light. */
	color: var(--items-accent);
	text-decoration: none;
	/* The gap to the title above is the title wrapper's own margin-bottom -
	   15px at 1728. Adding one here as well doubled it to 35. */
	margin-top: 10px;
	transition: opacity .3s ease;
}

.items-card__links .items-card__link {
	margin-top: 0;
}

a.items-card__link:hover {
	opacity: .75;
}

.items-card__link .arrow {
	display: inline-flex;
	align-items: center;
	/* The drawn arrow is 11 x 9, not the 16px the icon font defaults to. */
	font-size: 11px;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* When the whole card is one link the arrow follows the card's hover. A card
   with a quick-links row has several links and is a plain div, so card hover
   nudged every arrow at once - there, only the hovered link's arrow moves. */
a.items-card:hover .items-card__link .arrow,
.items-card__links .items-card__link:hover .arrow,
.items-card__links .items-card__link:focus-visible .arrow {
	transform: translateX(5px);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.items-header {
		grid-template-columns: 1fr;
		gap: 0px;
	}

	.items-grid {
		flex-direction: column;
	}

	.items-card {
		flex: 1 1 auto;
	}

	.items-card__media {
		/* 340 x 240 once the cards stack. */
		aspect-ratio: 340 / 240;
	}
	
	.items-card__content {
		padding: 0;
	}
	
	.items-grid {
		/* 30px between one stacked card's link and the next card's image. */
		gap: 30px;
	}
}

@media (max-width: 480px) {
	.items-section {
/* 		padding: 56px 16px; */
	}

}

@media (prefers-reduced-motion: reduce) {
	.items-header,
	.items-card {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.items-card__media::before {
		display: none;
	}

	.items-card img,
	.items-card__media::after,
	.items-card__title,
	.items-card__link .arrow {
		transition: none;
	}
}