/**
 * Lista- és archívumoldalak — Figma "Média" (183:1432) alapján.
 *
 * A rács a tervben 3 x 373px oszlop, 20px köz; a kártya képe 211px magas,
 * alatta 15px köz és a cím. A narancs kategória-jelvény a képen ül, a kártya
 * bal szélétől 19px-re, a kép aljától 17px-re.
 *
 * Ugyanez a szerkezet szolgálja ki a Programok és a Segédanyagok listát is.
 */

.page-hero {
	padding: 45px 0 0;                /* 159.14 - 114 */
	text-align: center;
}

.page-hero__title {
	margin: 0;
	font-size: 50px;
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	color: var(--color-teal-dark);
}

.page-hero__lead {
	max-width: 700px;
	margin: 14px auto 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--color-teal);
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 373px);
	gap: 45px 20px;
	justify-content: center;
	margin: 60px auto 0;              /* 272.28 - 159.14 - címsor */
	padding-inline: var(--gutter);
}

.archive-card { display: block; text-decoration: none; }

.archive-card__figure {
	position: relative;
	height: 211px;
	margin: 0;
	overflow: hidden;
	background: var(--color-surface);
}

.archive-card__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.archive-card:hover .archive-card__figure img { transform: scale(1.04); }

/* Kategória-jelvény: a tervben 104x27, a kép alján, 19px-re a bal széltől. */
.archive-card__badge {
	position: absolute;
	left: 19px;
	bottom: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	height: 27px;
	padding: 0 10px;
	font-size: 16.251px;
	font-weight: var(--weight-bold);
	letter-spacing: .325px;
	text-transform: uppercase;
	color: #fff;
	background: var(--color-orange);
}

.archive-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 15px;                 /* Figma: gap-[15px] */
	font-size: 22px;
	font-weight: 600;                 /* DemiBold */
	line-height: 1.15;
	letter-spacing: .44px;
	color: var(--color-teal);
}

.archive-card__meta {
	margin-top: 8px;
	font-size: 16px;
	color: var(--color-text-muted);
}

/* -- Lapozó (Figma 183:1499) -- */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 70px 0 90px;
}

.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 38.25px;
	height: 38.25px;
	padding: 0 6px;
	font-size: 20.178px;
	font-weight: var(--weight-bold);
	letter-spacing: .4036px;
	color: #fff;
	background: #a0a0a0;              /* Figma: inaktív */
	text-decoration: none;
	transition: background-color .15s ease;
}

.pagination .page-numbers.current { background: var(--color-teal); }
.pagination a.page-numbers:hover { background: var(--color-teal-dark); }

.pagination .page-numbers.dots { background: transparent; color: var(--color-text-muted); }

.pagination .next,
.pagination .prev {
	min-width: 38px;
	background: transparent;
	background-image: url("../../images/icon-page-next.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-size: 0;
}

.pagination .prev { transform: rotate(180deg); }

@media (max-width: 1230px) {
	.archive-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 1100px;
	}
	.archive-card__title { font-size: 20px; }
	.archive-card__figure { height: 180px; }
	.page-hero__title { font-size: 40px; }
}

@media (max-width: 860px) {
	.archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
	.page-hero__title { font-size: 32px; }
}

@media (max-width: 560px) {
	.archive-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}