/* Image Cards with Text & Columns — multi-card grid, each card its own image */

.image-cards {
	background: #f5f5f5;
	padding-top:    var( --ic-pt, 3rem );
	padding-bottom: var( --ic-pb, 3rem );
	margin-top:     var( --ic-mt, 0rem );
	margin-bottom:  var( --ic-mb, 0rem );
}

.image-cards__inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 5rem;
}

.image-cards__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	margin-bottom: 3.5rem;
}
.image-cards__eyebrow {
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 1rem; font-weight: 500; letter-spacing: 0.25rem;
	text-transform: uppercase; line-height: 1.35; color: rgba( 0, 13, 38, 0.7 ); margin: 0;
}
.image-cards__heading {
	font-family: 'Quincy', Georgia, serif;
	font-size: clamp( 2.5rem, 5vw, 3.5rem );
	font-weight: 400; line-height: clamp( 2.875rem, 5.75vw, 4.025rem ); color: #000d26; margin: 0;
}

.image-cards__grid {
	display: grid;
	grid-template-columns: repeat( var( --ic-cols, 2 ), minmax( 0, 1fr ) );
	gap: 4.875rem;
}

.image-cards__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.25rem;
}
.image-cards__media { width: 100%; }
.image-cards__img {
	display: block; width: 100%;
	aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1rem;
}
.image-cards.is-imgh-short .image-cards__img { aspect-ratio: 16 / 9; }
.image-cards.is-imgh-tall  .image-cards__img { aspect-ratio: 4 / 5; }
.image-cards--image-left .image-cards__grid > .image-cards__col:first-child { order: 2; }
.image-cards--image-left .image-cards__grid > .image-cards__col:last-child  { order: 1; }
.image-cards__text {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: center;
}
.image-cards__title {
	font-family: 'Quincy', Georgia, serif;
	font-size: 2.25rem;
	font-weight: 400; line-height: 2.8125rem; color: #000d26; margin: 0;
}
.image-cards__subhead {
	font-family: 'Quincy', Georgia, serif;
	font-size: 1.75rem; font-weight: 400; line-height: 1.25;
	color: #000d26; margin: 1.75rem 0 0.25rem;
}
.image-cards__subhead:first-child { margin-top: 0; }
.image-cards__body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem; line-height: 1.55; color: #0a1628; margin: 0;
}
.image-cards__body-list {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem; line-height: 1.55; color: #0a1628;
	margin: 0; padding: 0; list-style: none;
	/* align-self:center only centers the list AS A BLOCK if it has a
	   width narrower than the column -- without a width constraint it
	   just fills the column, so text-align:left reads flush against the
	   left edge directly under a centered title above it. width:fit-content
	   lets the block shrink to its longest line so centering is visible,
	   while list-item text stays left-to-right readable inside it. */
	width: fit-content;
	max-width: 100%;
	align-self: center;
	text-align: left;
}
.image-cards__body-list li {
	position: relative; padding-left: 1.125rem;
}
.image-cards__body-list li + li { margin-top: 0.375rem; }
.image-cards__body-list li::before {
	content: ''; position: absolute; left: 0; top: 0.65em;
	width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #0b5cff;
}

.image-cards--align-left .image-cards__head { align-items: flex-start; text-align: left; }
.image-cards--align-left .image-cards__col { align-items: flex-start; }
.image-cards--align-left .image-cards__text { text-align: left; }
.image-cards--align-left .image-cards__body-list { align-self: flex-start; }
.image-cards--align-left .image-cards__body-list li { text-align: left; }
.image-cards__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #0b5cff;
	color: #fff;
	padding: 1rem 1.6875rem;
	border-radius: 0.5rem;
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	margin-top: 0.5rem;
	transition: filter 0.15s, transform 0.05s;
}
.image-cards__cta:hover { filter: brightness( 0.95 ); color: #fff; }
.image-cards__cta:active { transform: translateY( 1px ); }

@media (max-width: 1200px) {
	.image-cards__inner { padding: 0 3rem; }
	.image-cards__grid { gap: 3rem; }
}
@media (max-width: 900px) {
	.image-cards__inner { padding: 0 1.5rem; }
	.image-cards__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 2.5rem 2rem; }
}
@media (max-width: 600px) {
	.image-cards {
		padding-top:    var( --ic-pt-m, var( --ic-pt, 3rem ) );
		padding-bottom: var( --ic-pb-m, var( --ic-pb, 3rem ) );
		margin-top:     var( --ic-mt-m, var( --ic-mt, 0rem ) );
		margin-bottom:  var( --ic-mb-m, var( --ic-mb, 0rem ) );
	}
	.image-cards__inner { padding: 0 1rem; }
	.image-cards__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.image-cards__head { margin-bottom: 2.5rem; }
}