/*
 * Atlas Arcadia — blog index and archives (plan 2026-10-08-001, U6).
 *
 * The page is Elementor Pro template 25041 (wp/build-blog-archive-template.php):
 * Archive Title, dek, [aa_blog_pills], and a Loop Grid of AA Post Cards. The card
 * look is template.css (U5); this file is the page around it: the head, the pill
 * row, the grid, the featured first card, pagination and the empty state.
 * Tokens come from aa-design-system (--aa-*), each with its literal fallback.
 * Selectors sit two or three classes deep: The7 and Elementor style bare
 * h1/p/a/ul under their own classes, and one class loses to them.
 *
 * Loaded on the index and the category, tag and date archives only (inc/archive.php).
 */

.aa-blog-index {
	--b-orange: var(--aa-orange, #db680b);
	--b-brown: var(--aa-brown, #6a3306);
	--b-muted: var(--aa-muted, #7d6f5a);
	--b-cream: var(--aa-cream, #fdf6e8);
	--b-rule: var(--aa-rule, #e2ded4);
	--b-display: var(--aa-display, 'Cartridge', ui-sans-serif, system-ui, sans-serif);
	--b-text: var(--aa-text, 'Poppins', ui-sans-serif, system-ui, sans-serif);
	--b-stripes: linear-gradient(90deg, var(--aa-stripe-1, #e8c68a) 0 20%, var(--aa-stripe-2, #f5a623) 20% 40%, var(--aa-stripe-3, #ef7f2c) 40% 60%, var(--aa-stripe-4, #e8542a) 60% 80%, var(--aa-stripe-5, #8a4c1a) 80% 100%);

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 0 16px 80px;
	font-family: var(--b-text);
	color: var(--b-brown);
}

.aa-blog-index *,
.aa-blog-index *::before,
.aa-blog-index *::after {
	box-sizing: border-box;
}

.aa-blog-index .elementor-widget {
	margin: 0;
}

.aa-blog-index .elementor-widget-container {
	padding: 0;
}

/* --- head: title, dek, stripe, pills ---------------------------------------- */

.aa-blog-index .aa-blog-head {
	align-items: center;
	max-width: 1040px;
	margin: 0 auto;
	padding: 56px 0 0;
	text-align: center;
}

.aa-blog-index .aa-blog-title {
	order: 1;
	width: 100%;
}

.aa-blog-index .aa-blog-title .elementor-heading-title {
	margin: 0;
	font-family: var(--b-display);
	font-size: clamp(2.2rem, 5.4vw, 3.6rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	color: var(--b-brown);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.aa-blog-index .aa-blog-dek {
	order: 2;
	width: 100%;
	max-width: 640px;
}

.aa-blog-index .aa-blog-dek .aa-blog-dek__text {
	margin: 14px 0 0;
	font-family: var(--b-text);
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--b-muted);
	text-wrap: pretty;
}

.aa-blog-index .aa-blog-head::after {
	content: '';
	order: 3;
	display: block;
	width: 120px;
	height: 6px;
	margin: 26px 0 0;
	border-radius: 3px;
	background: var(--b-stripes);
}

.aa-blog-index .aa-blog-pills-wrap {
	order: 4;
	width: 100%;
	margin-top: 26px;
}

/* --- category pills: plain links, work with no JS ---------------------------- */

.aa-blog-index .aa-pills__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aa-blog-index .aa-pills__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* outlined brown for the rest; the current one takes the site's orange pill (.aa-points__cta) */
.aa-blog-index .aa-pills .aa-pill {
	display: inline-block;
	padding: .5em 1.15em;
	border: 2px solid var(--b-brown);
	border-radius: 999px;
	background: transparent;
	color: var(--b-brown);
	font-family: var(--b-display);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.aa-blog-index .aa-pills .aa-pill:hover,
.aa-blog-index .aa-pills .aa-pill:focus-visible {
	background: var(--b-brown);
	border-color: var(--b-brown);
	color: #fff;
}

.aa-blog-index .aa-pills .aa-pill:focus-visible {
	outline: 3px solid var(--b-orange);
	outline-offset: 2px;
}

/* current: filled (and underlined) so it reads without colour */
.aa-blog-index .aa-pills .aa-pill.is-current,
.aa-blog-index .aa-pills .aa-pill[aria-current='page'] {
	background: var(--b-orange);
	border-color: var(--b-orange);
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.aa-blog-index .aa-pills .aa-pill.is-current:hover,
.aa-blog-index .aa-pills .aa-pill.is-current:focus-visible {
	background: var(--b-brown);
	border-color: var(--b-brown);
}

/* --- the grid ------------------------------------------------------------------ */

.aa-blog-index .aa-blog-main {
	width: 100%;
	max-width: 1040px;
	margin: 40px auto 0;
}

.aa-blog-index .aa-blog-grid {
	width: 100%;
}

.aa-blog-index .aa-blog-grid .elementor-loop-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.aa-blog-index .aa-blog-grid .e-loop-item {
	min-width: 0;
	margin: 0;
}

/* featured: the first card of the index is double width (template.css: image beside the text) */
.aa-blog-index .aa-blog-grid .e-loop-item:has(.aa-post-card--featured) {
	grid-column: span 2;
}

.aa-blog-index .e-loop-item .aa-post-card--featured.e-con {
	--flex-direction: row;
	--container-widget-width: initial;
	flex-direction: row;
	flex-wrap: nowrap;
}

.aa-blog-index .aa-post-card--featured .aa-post-card__media {
	flex: 0 0 44%;
}

.aa-blog-index .aa-post-card--featured .aa-post-card__body {
	flex: 1 1 50%;
	min-width: 0;
}

.aa-blog-index .aa-post-card--featured .aa-post-card__kicker .elementor-icon-list-text,
.aa-blog-index .aa-post-card--featured .aa-post-card__kicker .elementor-post-info__terms-list-item {
	font-size: .78rem;
}

.aa-blog-index .aa-post-card--featured .aa-post-card__dek .elementor-widget-container {
	font-size: 1rem;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* The featured card has the height for a long title: interview titles run to
   five lines at this width, and a 3-line clamp cut them mid-name. */
.aa-blog-index .aa-post-card--featured .aa-post-card__title .elementor-heading-title {
	font-size: 1.55rem;
	-webkit-line-clamp: 5;
	line-clamp: 5;
}

/* --- pagination ------------------------------------------------------------------ */

.aa-blog-index .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
	font-family: var(--b-display);
	text-align: center;
}

.aa-blog-index .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	margin: 0;
	padding: 0 14px;
	border: 2px solid var(--b-brown);
	border-radius: 999px;
	background: transparent;
	color: var(--b-brown);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.aa-blog-index .elementor-pagination a.page-numbers:hover,
.aa-blog-index .elementor-pagination a.page-numbers:focus-visible {
	background: var(--b-brown);
	color: #fff;
}

.aa-blog-index .elementor-pagination .page-numbers.current {
	background: var(--b-orange);
	border-color: var(--b-orange);
	color: #fff;
}

.aa-blog-index .elementor-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
}

/* --- empty state --------------------------------------------------------------------- */

.aa-blog-index .e-loop-nothing-found-message,
.aa-blog-index .elementor-nothing-found,
.aa-blog-index .aa-blog-grid > .elementor-widget-container > p {
	max-width: 560px;
	margin: 8px auto 0;
	padding: 36px 28px;
	background: #fff;
	border: 2px dashed var(--b-rule);
	border-radius: 14px;
	font-family: var(--b-text);
	font-size: 1.05rem;
	line-height: 1.6;
	text-align: center;
	color: var(--b-muted);
}

/* --- tablet and phone ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aa-blog-index .aa-blog-grid .elementor-loop-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.aa-blog-index {
		padding-bottom: 56px;
	}

	.aa-blog-index .aa-blog-head {
		padding-top: 32px;
	}

	.aa-blog-index .aa-blog-dek .aa-blog-dek__text {
		font-size: 1.02rem;
	}

	.aa-blog-index .aa-blog-main {
		margin-top: 28px;
	}

	.aa-blog-index .aa-blog-grid .elementor-loop-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.aa-blog-index .aa-blog-grid .e-loop-item:has(.aa-post-card--featured) {
		grid-column: auto;
	}

	/* the featured card stacks like the others: image on top */
	.aa-blog-index .e-loop-item .aa-post-card--featured.e-con {
		--flex-direction: column;
		flex-direction: column;
	}

	.aa-blog-index .aa-post-card--featured .aa-post-card__media {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.aa-blog-index .aa-post-card--featured .aa-post-card__body {
		width: 100%;
		padding: 16px 18px 18px;
	}

	.aa-blog-index .aa-post-card--featured .aa-post-card__title .elementor-heading-title {
		font-size: 1.35rem;
	}

	/* pills: one row that scrolls sideways, fading out at the right edge */
	.aa-blog-index .aa-blog-pills-wrap {
		margin: 22px -16px 0;
		width: calc(100% + 32px);
	}

	.aa-blog-index .aa-pills {
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 36px), transparent 100%);
	}

	.aa-blog-index .aa-pills__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		padding: 4px 36px 6px 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.aa-blog-index .aa-pills__list::-webkit-scrollbar {
		display: none;
	}
}