/**
 * TechBBQ Blog index — /blog/.
 *
 * The hero, the orb and the card are article.css's; home.php puts `techbbq-article` on the root so
 * all of that applies unchanged. This file adds only what the index itself needs: the intro under
 * the headline, the card grid and the pagination.
 *
 * Mobile first, min-width only, per the theme's CSS rules.
 */

.techbbq-blog-index__intro {
	margin: 0;
	color: var(--techbbq-content-primary);
}

.techbbq-blog-index__intro p {
	margin: 0 0 var(--techbbq-space-3);
}

.techbbq-blog-index__intro p:last-child {
	margin-bottom: 0;
}

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

.techbbq-blog-index__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--techbbq-space-xl);
}

/* The card's title is an h2 here rather than the h3 of the article footer's row, because on an
   index it is the page's real second level. The size stays the card's, set in article.css. */

/* Titles run one to three lines, so without this the date sits at a different height in every
   card and the row reads as ragged. The card fills its grid row and the meta is pushed to the
   bottom, which lines every date in a row up on one baseline. */
.techbbq-blog-index__grid .techbbq-article-card {
	height: 100%;
}

.techbbq-blog-index__grid .techbbq-article-card__meta {
	margin-top: auto;
	padding-top: var(--techbbq-space-2);
}

.techbbq-blog-index__empty {
	margin: 0;
	color: var(--techbbq-content-secondary);
}

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

.techbbq-blog-index__pagination {
	margin-top: var(--techbbq-section-space-medium);
	padding-top: var(--techbbq-space-xl);
	border-top: 1px solid var(--techbbq-border-secondary);
}

.techbbq-blog-index__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--techbbq-space-2);
	align-items: center;
	justify-content: center;
}

.techbbq-blog-index__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--techbbq-space-3);
	border: 1px solid var(--techbbq-border-secondary);
	border-radius: var(--techbbq-radius-pill);
	font-family: var(--techbbq-font-family-heading);
	font-size: 16px;
	line-height: 1;
	color: var(--techbbq-content-primary);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.techbbq-blog-index__pagination a.page-numbers:hover,
.techbbq-blog-index__pagination a.page-numbers:focus-visible {
	border-color: var(--techbbq-content-accent-2);
	color: var(--techbbq-content-accent-2);
	text-decoration: none;
}

/* The current page is filled rather than tinted, so it reads at a glance and keeps full contrast
   instead of relying on a colour difference alone. */
.techbbq-blog-index__pagination .page-numbers.current {
	background-color: var(--techbbq-bg-surface);
	border-color: var(--techbbq-content-primary);
	font-weight: 600;
}

/* The ellipsis is not a control, so it drops the box and the 44px target. */
.techbbq-blog-index__pagination .page-numbers.dots {
	min-width: 0;
	min-height: 0;
	padding-inline: var(--techbbq-space-1);
	border-color: transparent;
	color: var(--techbbq-content-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.techbbq-blog-index__pagination .page-numbers {
		transition: none;
	}
}

/* ------------------------------------------------------------------ tablet up */

@media (min-width: 768px) {
	.techbbq-blog-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ----------------------------------------------------------------- desktop up */

@media (min-width: 1024px) {
	.techbbq-blog-index__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--techbbq-space-2xl) var(--techbbq-space-xl);
	}
}