/* =============================================================
   arthrografia.css — Blog archive article list
   Figma node 3:145 — white bg, vertically stacked articles
   ============================================================= */

/* ── List container ── */

.arthrografia-list {
	background-color: var(--color-white);
}

.arthrografia-list__inner {
	padding-top: var(--section-py);
	padding-bottom: var(--section-py);
}

.arthrografia-list__empty {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	color: var(--color-text-secondary);
	line-height: var(--lh-body);
}

/* ── Article list item ── */

.article-list-item {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xl);
}

.article-list-item + .article-list-item {
	margin-top: var(--gap-xxl);
}

.article-list-item__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap-sm);
	align-items: flex-start;
}

.article-list-item__title {
	font-family: var(--font-primary);
	font-size: var(--text-h2);
	font-weight: var(--weight-medium);
	color: var(--color-primary);
	line-height: var(--lh-heading);
}

.article-list-item__excerpt {
	font-family: var(--font-primary);
	font-size: var(--text-body);
	font-weight: var(--weight-regular);
	color: var(--color-text-secondary);
	line-height: var(--lh-body);
	text-align: left;
}

/* "Διαβάστε →" outline button — Figma: 2px solid #7a2723, px 24px, py 8px */
.article-list-item .btn--outline {
	padding: 0.5rem 1.5rem;
}

/* Horizontal rule separator */
.article-list-item__separator {
	width: 100%;
	height: 0;
	border-bottom: 1px solid var(--color-border);
}

/* Hide separator on last article */
.article-list-item:last-child .article-list-item__separator {
	display: none;
}

/* ── Responsive ── */

@media (max-width: 768px) {
	.article-list-item + .article-list-item {
		margin-top: var(--gap-xl);
	}

	.article-list-item {
		gap: var(--gap-lg);
	}
}