/*
 * Relevant insights. Figma 2329:57926 desktop: 3 cards of 391 (24 gap) in a
 * slider, dots, square prev/next (40, radius 8) on the right, button/M 284
 * centred. card/blogpost 1613:49600: left border, 16 inset, photo 375x290 r20
 * with pills, title header/XS (3 lines), date + read time.
 * Mobile 1674:31972: 272px cards (photo 240x178), full-bleed swipe, no arrows.
 */

.insights__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.insights__inner > .section-head { align-self: stretch; max-width: none; }

.insights__track {
	align-self: stretch;
	gap: 24px;
}

.insight {
	width: calc((100% - 48px) / 3);
	min-width: 280px;
	border-left: 1px solid var(--c-border-light);
	padding-left: 16px;
}

.insight__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	color: var(--c-text-dark);
}

.insight__media {
	position: relative;
	aspect-ratio: 375 / 290;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-bg-grey);
}

.insight__media img { transition: transform .3s ease; }
.insight__link:hover .insight__media img { transform: scale(1.04); }

.insight__tags {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.insight__tag {
	padding: 4px 10px 6px;
	border-radius: var(--r-pill);
	font: var(--f-subtitle-s);
	white-space: nowrap;
}

.insight__tag--type { background: var(--c-primary); color: var(--c-text-white); }
.insight__tag--content { background: var(--c-secondary); color: var(--c-text-dark); }

.insight__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font: var(--f-header-xs);
}

.insight__link:hover .insight__title { color: var(--c-primary); }

.insight__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font: var(--f-subtitle-m);
	white-space: nowrap;
}

.insight__date { color: var(--c-text-dark); }
.insight__read { color: var(--c-text-grey); }

.insight__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-border-light);
}

.insight__arrow { --icon-size: 16px; display: none; margin-left: auto; }

/* Dots + pagination (hidden when the cards fit: .is-static from init) */
.insights.is-static .insights__dots,
.insights.is-static .insights__pagination { display: none; }

.insights__dots { display: flex; gap: 8px; }

.insights__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-border-light);
}

.insights__dot[aria-current="true"] { background: var(--c-secondary); }

.insights__pagination {
	display: flex;
	justify-content: flex-end;
	gap: 16px;
	align-self: stretch;
}

.insights__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.insights__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.insights__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

.insights__button { min-width: 284px; }

@media (max-width: 767px) {
	.insights .insights__track {  /* beats ul[role=list] { padding: 0 } */
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter);
		gap: 16px;
	}

	.insight { width: 272px; min-width: 0; padding-inline: 16px; }
	.insight__media { aspect-ratio: 240 / 178; }
	.insight__title { -webkit-line-clamp: 5; line-clamp: 5; font: var(--f-header-2xs); }
	.insight__arrow { display: inline-block; }

	.insights__pagination { display: none; }
	.insights__button { min-width: 0; }
}