/* Knowledge base (/knowledge-base/): search, topic chips, cards; article with video, downloads and related articles. */

/* Search (pill field, as the newsletter) and topics */
.kb__tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); margin-bottom: var(--spacing-grid-gutter-2x); }
.kb-search {
	display: flex;
	align-items: center;
	gap: var(--spacing-1-5, 12px);
	width: min(560px, 100%);
	height: var(--sizing-button-large);
	padding: 0 var(--spacing-4);
	border-radius: var(--radius-3xlarge);
	background: var(--grey-neutral-8);
	transition: box-shadow 0.2s;
}
.kb-search:focus-within { box-shadow: inset 0 0 0 1px var(--grey-neutral-32); }
.kb-search__icon { flex: none; width: 20px; height: 20px; color: var(--grey-basic); }
.kb-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	font-size: 15.58px;
	color: var(--brand-headlines);
}
.kb-search__input::placeholder { color: var(--grey-basic); opacity: 1; }
.kb-search__input:focus { outline: 0; }
.kb-search__input::-webkit-search-cancel-button { cursor: pointer; }

/* Cards */
.kb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-grid-gutter-3x) var(--spacing-grid-gutter-2x); }
.kb-card[hidden] { display: none; }
.kb-card__link { display: flex; flex-direction: column; gap: var(--spacing-2); }
.kb-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin-bottom: var(--spacing-1);
	border-radius: var(--radius-xlarge);
	background: rgba(136, 136, 137, 0.067);
	overflow: hidden;
}
.kb-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.kb-card__link:hover .kb-card__image { transform: scale(1.04); }
.kb-card__tile { display: inline-flex; color: var(--grey-lighter); transition: transform 0.6s var(--ease-out); }
.kb-card__tile .icon { width: 56px; height: 56px; }
.kb-card__link:hover .kb-card__tile { transform: scale(1.08); }
.kb-card__play { position: relative; z-index: 1; }
.kb-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--grey-basic); font-size: 14.4px; font-weight: var(--font-weight-medium); }
.kb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px 3px 9px;
	border-radius: var(--radius-large);
	background: var(--grey-neutral-16);
	color: var(--black-lighter);
	font-size: 13.68px;
	font-weight: var(--font-weight-medium);
	line-height: 20px;
}
.kb-badge__icon { width: 14px; height: 14px; }
.kb-card__title {
	font-family: var(--font-familiy-title);
	font-variation-settings: "opsz" 14;
	font-size: 24.6px;
	font-weight: var(--font-weight-medium);
	line-height: 1.2;
	letter-spacing: -0.03em;
	color: var(--brand-headlines);
	text-wrap: balance;
}
.kb-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--black-lighter);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.kb__empty { padding-block: var(--spacing-grid-gutter-2x); }

/* Article */
.kb-article__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-1); }
.kb-article__lead { max-width: 640px; font-size: 19.2px; line-height: 1.55; color: var(--black-lighter); }
.kb-article .article__meta { align-items: center; flex-wrap: wrap; }
.kb-article__video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	margin-bottom: var(--space-section);
	border-radius: var(--radius-xlarge);
	background: rgba(136, 136, 137, 0.067);
	overflow: hidden;
}
.kb-article__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kb-article__play { position: relative; z-index: 1; width: 88px; height: 88px; }
.kb-article__play .icon { width: 30px; height: 30px; }

/* Downloads */
.kb-files { margin-top: var(--spacing-grid-gutter-2x); }
.kb-files:first-child { margin-top: 0; }
.kb-files__title { margin-bottom: var(--spacing-3); }
.kb-files__list { display: grid; gap: var(--spacing-1); margin: 0; padding: 0; list-style: none; }
.kb-file {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: 14px 14px 14px 16px;
	border: 1px solid var(--grey-neutral-32);
	border-radius: var(--radius-large);
	transition: background-color 0.2s, border-color 0.2s;
}
.kb-file:hover { border-color: var(--grey-neutral-48); background: var(--grey-neutral-8); }
.kb-file__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--grey-neutral-8); color: var(--brand-headlines); }
.kb-file__icon .icon { width: 20px; height: 20px; }
.kb-file__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.kb-file__name { font-size: 16.32px; font-weight: var(--font-weight-medium); color: var(--brand-headlines); overflow-wrap: anywhere; }
.kb-file__meta { font-size: 13.68px; color: var(--grey-basic); }
.kb-file__action {
	flex: none;
	padding: 8px 18px;
	border-radius: var(--radius-3xlarge);
	background: var(--brand-primary);
	color: var(--white-basic);
	font-family: var(--font-familiy-title);
	font-variation-settings: "opsz" 14;
	font-size: 14.4px;
	font-weight: var(--font-weight-medium);
	transition: background-color 0.3s var(--ease-out);
}
.kb-file:hover .kb-file__action { background: #6e7c6a; }

/* Related */
.kb--related { padding-top: 0; }
.kb__related-title { margin-bottom: var(--spacing-grid-gutter-2x); }

@media (max-width: 1023px) {
	.kb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.kb__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-grid-gutter-2x); }
	.kb-card__title { font-size: 21px; }
	.kb__topics { flex-wrap: nowrap; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
	.kb__topics .chip { flex: none; }
	.kb-file__action { display: none; }
	.kb-article__play { width: 64px; height: 64px; }
}