/**
 * Block 7 - DLS Home: Insights (DLS-142)
 *
 * Rules are the template's own (Homepage.html r61), generated and scoped under
 * `.dls-ins` (so the generic .card / .tag class names cannot leak).
 */

.dls-ins {
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dls-ins *, .dls-ins *::before, .dls-ins *::after { box-sizing: border-box; }
/* a card whose post has no image: keep the box, tinted, instead of a hole */
.dls-ins .card__img { background: var(--purple-soft); }


.dls-ins {
	background: var(--white);
	padding: var(--s-4xl) var(--pad);
}
.dls-ins .ins__in {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-xxl);
}
.dls-ins .ins__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-xl);
}
.dls-ins .ins__h2 {
	font-size: var(--fs-xxxl);
	line-height: var(--lh-xxxl);
	color: var(--heading-2);
	max-width: 694px;
}
.dls-ins .ins__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	color: var(--para);
	max-width: 768px;
	margin-top: var(--s-sm);
}
.dls-ins .ins__grid {
	display: flex;
	gap: var(--s-xl);
	align-items: stretch;
}
.dls-ins .card--big {
	width: 705px;
	flex: none;
	display: flex;
	flex-direction: column;
	overflow: clip;
	background: var(--grey-light);
	border-radius: 8px;
}
.dls-ins .card--big .card__img {
	height: 243px;
	overflow: clip;
}
.dls-ins .card--big .card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.dls-ins .card--big .card__body {
	padding: var(--s-lg);
	display: flex;
	flex-direction: column;
	gap: var(--s-xxs);
	flex: 1;
}
.dls-ins .ins__col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-lg);
}
.dls-ins .card--row {
	display: flex;
	align-items: stretch;
	background: var(--grey-light);
	overflow: clip;
	border-radius: 8px;
}
.dls-ins .card--row .card__img {
	width: 145px;
	height: 152px;
	flex: none;
	overflow: clip;
}
.dls-ins .card--row .card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.dls-ins .card--row .card__body {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--s-sm) var(--s-lg);
	display: flex;
	flex-direction: column;
	gap: var(--s-xs);
	justify-content: center;
}
.dls-ins .card {
	transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.dls-ins .card:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,.15);
	background: #f2edf7;
}
.dls-ins .card__meta {
	display: flex;
	align-items: center;
	gap: var(--s-xs);
}
.dls-ins .tag {
	border: 1px solid var(--border);
	border-radius: var(--r-full);
	padding: 0 var(--s-xs);
	font-size: var(--fs-xxs);
	line-height: var(--lh-xxs);
	font-weight: 600;
	color: var(--dark);
	white-space: nowrap;
}
.dls-ins .card__date {
	font-size: var(--fs-xxs);
	line-height: var(--lh-xxs);
	color: var(--para);
}
.dls-ins .card__ttl {
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	font-weight: 500;
	color: var(--heading-1);
	transition: color .25s var(--ease);
}
.dls-ins .card:hover .card__ttl {
	color: var(--discovery-purple);
}
.dls-ins .card__ex {
	font-size: var(--fs-md);
	line-height: var(--lh-md);
	color: var(--para);
}

@media (max-width:1500px) {
	.dls-ins .card--big {
		width: 52%;
	}
}

@media (max-width:1240px) {
	.dls-ins .card--big {
		width: 48%;
	}
	.dls-ins .card--big .card__ex {
		display: none;
	}
}

@media (max-width:1024px) {
	.dls-ins .ins__grid {
		flex-direction: column;
	}
	.dls-ins .card--big {
		width: 100%;
	}
	.dls-ins .card--big .card__ex {
		display: block;
	}
}

@media (max-width:900px) {
	.dls-ins {
		padding: var(--s-3xl) var(--pad);
	}
	.dls-ins .ins__top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-md);
	}
	.dls-ins .card--row .card__img {
		width: 110px;
		height: 130px;
	}
}

.dls-ins {
	padding-block: var(--s-xxl);
}

@media (max-width:900px) {
	.dls-ins {
		padding-block: var(--s-xl);
	}
}

@media (max-width:560px) {
	.dls-ins .card--row .card__img {
		display: none;
	}
	.dls-ins .card--row .card__body {
		padding: var(--s-lg);
	}
}

/* template r58: tablet (561-900px) section padding 30 -> 48 */
@media (min-width: 561px) and (max-width: 900px) {
	.dls-ins {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* Rich-text fields (heading, lead) */
.dls-ins .ins__h2 strong { font-weight: 700; }
.dls-ins .ins__h2 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-ins .ins__h2 a:hover { color: var(--orange); }
.dls-ins .ins__lead p { margin: 0; font: inherit; color: inherit; }
.dls-ins .ins__lead p + p { margin-top: 0.75em; }
.dls-ins .ins__lead strong, .dls-ins .ins__lead b { font-weight: 700; }
.dls-ins .ins__lead a { color: inherit; text-decoration: underline; }
.dls-ins .ins__lead a:hover { color: var(--orange); }

/* Placeholder (post without a featured image): the logo, centred and uncropped on the soft purple tile */
.dls-ins .card__img img.card__ph {
	object-fit: contain;
	padding: 20px;
}