/*
 * Insights list. Figma desktop/insights/1 1595:44877: grey top area under the
 * transparent header (title block 64px below the bar, 32 bottom padding):
 * header/2XL + body/M grey on the left, searchbox 264x44 bottom-right.
 * 44px down: segmented control 720 centred, 24, "Project Types" header/XS +
 * tag/medium pills (8 gap, one row, scrolls), 24, list: featured
 * list/blogpost (photo 805x374 r20 + 391 text column, header/M title, body/XS
 * excerpt, divider 24 below) then container/grid3 rows of 391x426 cards (24
 * column gap, 32 row gap), pagination 226 wide bottom-right.
 * Search modal sheet 1620:22896: 720 wide, r20, grey, content 480 centred.
 * Mobile 1222:23740: header/L + 32px search icon, segmented full width, pills
 * scroll, cards 350 wide stacked (photo 260 high, header/2XS, arrow in meta).
 */

.insights-list {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

/* ---------- Top area ---------- */
.insights-list__top {
	padding: calc(var(--header-h) + 64px) 0 32px;
	background: var(--c-bg-grey);
}

.insights-list__hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.insights-list__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.insights-list__title { font: var(--f-header-2xl); color: var(--c-text-dark); }
.insights-list__lead { font: var(--f-body-m); color: var(--c-text-grey); }

/* searchbox (macOS search field): white pill, 44 high */
.insights-list__search {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	width: 264px;
	max-width: 100%;
	height: 44px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-pill);
	background: var(--c-bg-white);
	transition: border-color .15s ease;
}

.insights-list__search:hover,
.insights-list__search:focus-within { border-color: var(--c-primary); }

.insights-list__search-open {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 100%;
	padding: 0 16px;
	text-align: left;
	border-radius: inherit;
}

.insights-list__search-icon { --icon-size: 16px; color: var(--c-text-dark); }

.insights-list__search-text {
	overflow: hidden;
	font: var(--f-subtitle-l);
	color: var(--c-text-grey);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.insights-list__search.has-query .insights-list__search-text { color: var(--c-text-dark); }

.insights-list__search-clear {
	--icon-size: 16px;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100%;
	color: var(--c-text-dark);
}

.insights-list__search-clear[hidden] { display: none; }

/* ---------- Filters ---------- */
.insights-list__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.insights-list__filters {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.insights-list__filters[hidden] { display: none; }

.insights-list__tabs {
	width: 720px;
	max-width: 100%;
}

/* Four equal segments: the white active pill fills its quarter (Figma 1595:44885). */
.insights-list__tabs .segmented__item { flex: 1 1 0; min-width: 0; }

.insights-list__types {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	min-width: 0;
}

.insights-list__label { font: var(--f-header-xs); color: var(--c-text-dark); }

.insights-list__pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.insights-list__pills::-webkit-scrollbar { display: none; }
.insights-list__pills .pill { flex: none; padding-inline: 16px; }
.insights-list__check { display: none; }
.insights-list__pills .pill[aria-pressed="true"] .insights-list__check { display: inline-block; }

.insights-list__count { font: var(--f-header-xs); color: var(--c-text-dark); }
.insights-list__count[hidden] { display: none; }

/* ---------- Cards (list/blogpost 1598:46156) ---------- */
.insights-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px 24px;
}

.post-card { min-width: 0; }
.post-card[hidden] { display: none; }

.post-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 100%;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--c-border-light);
	color: var(--c-text-dark);
}

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

.post-card__media img { transition: transform .3s ease; }
.post-card__link:hover .post-card__media img { transform: scale(1.04); }

.post-card__tags {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

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

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 16px;
}

.post-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	min-height: 69px;      /* 3 lines of header/XS: cards line up */
	overflow: hidden;
	font: var(--f-header-xs);
}

.post-card__link:hover .post-card__title { color: var(--c-primary); }

.post-card__excerpt { display: none; }

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

.post-card__read { color: var(--c-text-grey); }

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

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

/* Featured: first card of the page, full row. */
@media (min-width: 768px) {
	.post-card--featured { grid-column: 1 / -1; }

	.post-card--featured .post-card__link {
		display: grid;
		grid-template-columns: minmax(0, 805fr) minmax(0, 391fr);
		align-items: center;
		gap: 24px;
		padding-bottom: 24px;
	}

	.post-card--featured .post-card__media { aspect-ratio: 805 / 374; }
	.post-card--featured .post-card__tags { left: 20px; bottom: 20px; }
	.post-card--featured .post-card__body { flex: none; }

	.post-card--featured .post-card__title {
		display: block;
		min-height: 0;
		font: var(--f-header-m);
	}

	.post-card--featured .post-card__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 7;
		line-clamp: 7;
		overflow: hidden;
		font: var(--f-body-xs);
		color: var(--c-text-grey);
	}

	.post-card--featured .post-card__meta { margin-top: 0; }
}

/* ---------- No results ---------- */
.insights-list__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding-block: 40px;
	text-align: center;
}

.insights-list__empty[hidden] { display: none; }
.insights-list__empty-img { width: 200px; height: 164px; }
.insights-list__empty-text { max-width: 350px; font: var(--f-header-m); font-weight: 600; color: var(--c-text-dark); }
.insights-list__empty-text strong { font-weight: 800; }

/* ---------- Pagination ---------- */
.insights-list__pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 64px;
	margin-top: 8px;
}

.insights-list__pagination[hidden] { display: none; }

.insights-list__page { font: var(--f-subtitle-m); color: var(--c-text-grey); white-space: nowrap; }
.insights-list__page-current { color: var(--c-primary); }

.insights-list__arrows { display: flex; gap: 16px; }

.insights-list__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-list__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

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

/* ---------- Search modal sheet (1620:22896) ---------- */
.search-sheet {
	width: min(720px, calc(100% - 2 * var(--gutter)));
	max-width: none;
	max-height: calc(100% - 2 * var(--gutter));
	padding: 0;
	border: 0;
	border-radius: var(--r-l);
	background: var(--c-bg-grey);
	color: var(--c-text-dark);
	box-shadow: 0 0 100px 0 rgba(0, 0, 0, .05);
}

.search-sheet::backdrop {
	background: rgba(9, 3, 19, .35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.search-sheet__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(480px, 100%);
	min-height: 461px;
	margin-inline: auto;
	padding: 24px 0 48px;
}

.search-sheet__close {
	--icon-size: 32px;
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 1;
	color: var(--c-text-dark);
}

.search-sheet__head { display: flex; flex-direction: column; gap: 8px; padding-right: 56px; }
.search-sheet__title { font: var(--f-header-l); }
.search-sheet__text { font: var(--f-body-xs); color: var(--c-text-grey); }

.search-sheet__field {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-pill);
	background: var(--c-bg-white);
	cursor: text;
}

.search-sheet__field:focus-within { border-color: var(--c-primary); }
.search-sheet__icon { --icon-size: 16px; }

.search-sheet__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: var(--f-subtitle-l);
	outline: none;
}

.search-sheet__input::placeholder { color: var(--c-text-grey); }
.search-sheet__input::-webkit-search-cancel-button { display: none; }
.search-sheet__clear { --icon-size: 16px; display: inline-flex; color: var(--c-text-dark); }

.search-sheet__popular {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 48px;
}

.search-sheet__subtitle { font: var(--f-header-2xs); }

.search-sheet__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 24px;
	font: var(--f-body-s);
}

.search-sheet__list a:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.insights-list { gap: 16px; }

	.insights-list__top { padding: calc(var(--header-h) + 16px) 0 20px; }

	.insights-list__hero { flex-wrap: wrap; align-items: center; gap: 16px; }
	.insights-list__head { flex: 1; }
	.insights-list__title { font: var(--f-header-l); }
	.insights-list__lead { font: var(--f-body-xs); }

	/* No search yet: just the 32px search icon next to the title. */
	.insights-list__search:not(.has-query) {
		width: 32px;
		height: 32px;
		border: 0;
		background: none;
	}

	.insights-list__search:not(.has-query) .insights-list__search-open { justify-content: center; padding: 0; }
	.insights-list__search:not(.has-query) .insights-list__search-icon { --icon-size: 32px; }
	.insights-list__search:not(.has-query) .insights-list__search-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.insights-list__search.has-query { width: 100%; }

	.insights-list__tabs { width: 100%; }
	/* Figma 1222:23728: each tab as wide as its label ("Case Studies" is the widest), the spare room shared out. */
	.insights-list__tabs .segmented__item { flex: 1 1 auto; min-width: max-content; padding: 0 8px; font: var(--f-body-xs); }
	.insights-list__tabs .segmented__item[aria-selected="true"] { font: var(--f-subtitle-m); }

	.insights-list__pills {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
	}

	.insights-list__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.post-card__media { aspect-ratio: 350 / 260; }
	.post-card__title { min-height: 0; font: var(--f-header-2xs); }
	.post-card__arrow { display: inline-block; }

	.insights-list__pagination { justify-content: space-between; gap: 16px; }

	/* mobile/search/1 1224:25995: the site header stays on top, the sheet fills the rest. */
	.search-sheet {
		width: 100%;
		height: calc(100% - var(--header-h));
		max-height: none;
		margin: var(--header-h) 0 0;
		border-radius: 0;
		background: var(--c-bg-white);
		box-shadow: none;
	}

	.search-sheet::backdrop {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.search-sheet__inner {
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 16px var(--gutter) 32px;
	}

	.search-sheet__close { top: 20px; right: var(--gutter); }
	.search-sheet__popular { margin-top: 16px; }
	.search-sheet__subtitle { font: var(--f-subtitle-l); font-weight: 800; }
}