/*
 * Articles slider. Figma 1547:39863: 720 column, text/header (header/XL +
 * body/XS grey), 24, row of card/blogpost 272x333 (left border, 16 side
 * padding, photo 240x178 r20 with tags 16 from the top-left, header/2XS
 * title, date + read time + arrow at the bottom), 16 gap, clipped to the
 * column; 24, dots (8px, green active), one per page of cards (6 cards =
 * 3 dots at 720). Mobile 1242:17466: full-bleed swipe
 * with 20 gutters.
 */

.articles-slider__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: calc(720px + 2 * var(--gutter));
}

.articles-slider__inner > .section-head { align-self: stretch; }

.articles-slider__track { align-self: stretch; gap: 16px; }

.article-card {
	width: 272px;
	padding-inline: 16px;
	border-left: 1px solid var(--c-border-light);
}

.article-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	height: 333px;
	color: var(--c-text-dark);
}

.article-card__media {
	position: relative;
	flex: none;
	aspect-ratio: 240 / 178;
	border-radius: var(--r-l);
	overflow: hidden;
	background: var(--c-bg-grey);
}

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

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

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

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

.article-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	font: var(--f-header-2xs);
}

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

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

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

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

.article-card__arrow { --icon-size: 16px; margin-left: auto; }

.articles-slider__dots { display: flex; gap: 8px; }
.articles-slider__dots[hidden] { display: none; }

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

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

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

/* FAQ search, with or without results (Figma 1560:41893, 1248:20312,
   2001:58827): no article slider. faq_page sets the class on <html>. */
.faq-no-results .articles-slider,
:root:has(.faq-page[data-view="search"], .faq-page[data-view="empty"]) .articles-slider,
/* Playground only: the preview's section wrapper would keep an empty flex
   item (and a second section gap). In the theme the section is a direct child
   of <main>, so the rules above are enough. */
.faq-no-results .pg-block:has(> .articles-slider) { display: none; }