/* ==========================================================================
   Category Archive Page — Editorial style
   Scoped: .m2p-category
   ========================================================================== */

/* ---------- Tokens ---------- */



.m2p-category {
	--m2p-cat-xs: 0.5rem;
	--m2p-cat-sm: 1rem;
	--m2p-cat-md: 1.5rem;
	--m2p-cat-lg: 2rem;
	--m2p-cat-xl: 3rem;
	--m2p-cat-xxl: 5rem;

	--m2p-cat-surface: linear-gradient(180deg, #FFFFFF 0%, #FFECD2 100%);
	--m2p-cat-card-bg: #ffffff;
	--m2p-cat-text: #2D3748;
	--m2p-cat-heading: #1A202C;
	--m2p-cat-muted: #4A5568;
	--m2p-cat-faint: #718096;
	--m2p-cat-accent: #fb6b00;
	--m2p-cat-accent-hover: #c85600;
	--m2p-cat-peach: #FFF5EB;
	--m2p-cat-border: rgba(160, 174, 192, 0.35);
	--m2p-cat-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

	--m2p-cat-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--m2p-cat-font-display: "Georgia", "Times New Roman", serif;
	--m2p-cat-font-label: "Helvetica Neue", Arial, sans-serif;

	background: var(--m2p-cat-surface);
	font-family: var(--m2p-cat-font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--m2p-cat-text);
	box-sizing: border-box;
}

.m2p-category *,
.m2p-category *::before,
.m2p-category *::after {
	box-sizing: inherit;
}

/* ---------- Container ---------- */

.m2p-category__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: var(--m2p-cat-lg) 1.5rem var(--m2p-cat-sm);
}

/* ---------- Header — "Section Opener" ---------- */

.m2p-category__header {
	margin-bottom: var(--m2p-cat-xl);
}

.m2p-category__eyebrow {
	display: block;
	font-family: var(--m2p-cat-font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--m2p-cat-faint);
	margin: 0 0 16px;
}

.m2p-category__title {
	font-family: var(--m2p-cat-font-display) !important;
	font-size: clamp(28px, 3.8vw, 48px) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
	color: var(--m2p-cat-heading) !important;
	margin: 0 !important;
	text-align: left !important;
	text-wrap: balance;
}

.m2p-category__desc {
	margin: var(--m2p-cat-sm) 0 0;
	font-size: 15px;
	color: var(--m2p-cat-muted);
	max-width: 600px;
	line-height: 1.5;
}

/* ---------- Post list card ---------- */

.m2p-category__list {
	background: var(--m2p-cat-card-bg);
	border-radius: 1rem;
	box-shadow: var(--m2p-cat-shadow);
	padding: var(--m2p-cat-md) 0;
}

/* ---------- Single entry ---------- */

.m2p-cat-entry {
	position: relative;
}

.m2p-cat-entry + .m2p-cat-entry {
	border-top: 1px solid var(--m2p-cat-border);
}

.m2p-cat-entry:has(.m2p-cat-entry__link:hover),
.m2p-cat-entry:has(.m2p-cat-entry__link:focus-visible) {
	background: var(--m2p-cat-peach);
}

.m2p-cat-entry__link {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: var(--m2p-cat-md);
	align-items: stretch;
	text-decoration: none;
	color: inherit;
	padding: 10px var(--m2p-cat-lg);
	position: relative;
	transition: background-color 180ms ease;
}

/* ---- Left-edge accent rule (hover/focus reveal) ---- */

.m2p-cat-entry__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--m2p-cat-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	z-index: 2;
}

.m2p-cat-entry__link:hover::before,
.m2p-cat-entry__link:focus-visible::before {
	transform: scaleY(1);
}

/* ---- Focus-visible ---- */

.m2p-cat-entry__link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(251, 107, 0, 0.3);
}

/* ---- Media slot ---- */

.m2p-cat-entry__media {
	width: 12rem;
	min-height: 10rem;
	height: 100%;
	overflow: hidden;
	border-radius: 0.5rem;
	background: var(--m2p-cat-peach);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.m2p-cat-entry__media--no-thumb {
	border: 1px solid var(--m2p-cat-border);
}

.m2p-cat-entry__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-cat-entry__link:hover .m2p-cat-entry__image {
	transform: scale(1.05);
}

.m2p-cat-entry__index {
	font-family: var(--m2p-cat-font-display);
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 700;
	color: var(--m2p-cat-accent);
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-cat-entry__link:hover .m2p-cat-entry__index {
	transform: translateX(-2px);
}

/* ---- Body ---- */

.m2p-cat-entry__body {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	min-width: 0;
	padding-top: 0.125rem;
}

/* ---- Meta row ---- */

.m2p-cat-entry__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.6875rem;
	color: var(--m2p-cat-muted);
}

.m2p-cat-entry__cat {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-family: var(--m2p-cat-font-label);
	color: var(--m2p-cat-accent);
}

.m2p-cat-entry__sep {
	opacity: 0.5;
}

.m2p-cat-entry__meta time {
	white-space: nowrap;
}

/* ---- Title ---- */

.m2p-cat-entry__title {
	font-family: var(--m2p-cat-font-body) !important;
	font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--m2p-cat-heading) !important;
	margin: 0 !important;
	text-align: left !important;

	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-cat-entry__link:hover .m2p-cat-entry__title,
.m2p-cat-entry__link:focus-visible .m2p-cat-entry__title {
	color: var(--m2p-cat-accent) !important;
	text-decoration-color: var(--m2p-cat-accent);
}

/* ---- Excerpt ---- */

.m2p-cat-entry__excerpt {
	font-size: 15px;
	line-height: 1.5;
	color: var(--m2p-cat-muted);
	margin: 0;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- Footer (stars + CTA) ---- */

.m2p-cat-entry__footer {
	display: flex;
	align-items: center;
	gap: var(--m2p-cat-sm);
	margin-top: 0.25rem;
}

/* Stars — hidden */

.m2p-cat-entry__rating {
	display: none;
}

/* CTA "Read" link ($M2P_MESSAGES['cat_read_link']) — inline, editorial, orange */

.m2p-cat-entry__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--m2p-cat-font-label);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--m2p-cat-accent);
	margin-left: auto;
	transition: color 180ms ease;

	/* Bug 2: keep the CTA from forcing horizontal overflow on narrow cards.
	   min-width:0 lets it shrink below its content size inside the flex footer;
	   overflow-wrap allows the label to break instead of pushing past the card
	   edge. (Above 767px the label is visible; at/below 767px it is collapsed
	   to the arrow icon via the rule in the tablet media query.) */
	min-width: 0;
	overflow-wrap: anywhere;
}

.m2p-cat-entry__link:hover .m2p-cat-entry__cta {
	color: var(--m2p-cat-accent-hover);
}

.m2p-cat-entry__cta svg {
	transition: transform 180ms ease;
}

.m2p-cat-entry__link:hover .m2p-cat-entry__cta svg {
	transform: translateX(3px);
}

/* ---------- Pagination ---------- */

.m2p-category__pagination {
	margin-top: var(--m2p-cat-xl);
	text-align: center;
}

.m2p-category__pagination:empty,
.m2p-category__pagination:not(:has(*)) {
	margin: 0;
	display: none;
}

body main.m2p-category {
	flex: 0 0 auto;
	min-height: 0;
	padding-bottom: 5rem;
}

.m2p-category__pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.m2p-category__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	font-family: var(--m2p-cat-font-label);
	font-size: 14px;
	font-weight: 500;
	color: var(--m2p-cat-muted);
	text-decoration: none;
	background: var(--m2p-cat-card-bg);
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.m2p-category__pagination .page-numbers:hover {
	background: var(--m2p-cat-peach);
	color: var(--m2p-cat-accent);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.m2p-category__pagination .page-numbers.current {
	background: var(--m2p-cat-accent);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(251, 107, 0, 0.25);
}

.m2p-category__pagination .page-numbers.dots {
	background: transparent;
	box-shadow: none;
	color: var(--m2p-cat-faint);
	pointer-events: none;
}

.m2p-category__pagination .prev.page-numbers,
.m2p-category__pagination .next.page-numbers {
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--m2p-cat-accent);
	background: transparent;
	box-shadow: none;
}

.m2p-category__pagination .prev.page-numbers:hover,
.m2p-category__pagination .next.page-numbers:hover {
	background: var(--m2p-cat-peach);
}

/* ---- Empty state ---- */

.m2p-category__empty {
	text-align: center;
	font-size: 17px;
	color: var(--m2p-cat-muted);
	padding: var(--m2p-cat-xxl) var(--m2p-cat-lg);
	background: var(--m2p-cat-card-bg);
	border-radius: 1rem;
	box-shadow: var(--m2p-cat-shadow);
}

/* ==========================================================================
   Responsive: Tablet (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
	.m2p-category__inner {
		/* Match the tight top spacing used on single posts (.content-area
		   sets padding-top: 0). Previously --m2p-cat-xl (3rem) left a large
		   empty band above the breadcrumb on mobile archive/tag pages. */
		padding: var(--m2p-cat-sm) 1rem var(--m2p-cat-lg);
	}

	.m2p-category__title {
		font-size: clamp(24px, 6vw, 36px) !important;
	}

	.m2p-cat-entry__link {
		grid-template-columns: 10rem 1fr;
		gap: var(--m2p-cat-sm);
		padding: 0 var(--m2p-cat-md) 0 0;
	}

	.m2p-cat-entry__media {
		width: 10rem;
		min-height: 0;
		background: transparent;
		border-radius: 0;
	}

	.m2p-cat-entry__image {
		object-fit: cover;
	}

	.m2p-cat-entry__index {
		font-size: 1.75rem;
	}

	.m2p-cat-entry__title {
		font-size: 1rem !important;
	}

	.m2p-cat-entry__excerpt {
		font-size: 14px;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.m2p-cat-entry__cta {
		font-size: 0;
		letter-spacing: 0;
	}

	.m2p-cat-entry__cta svg {
		width: 18px;
		height: 18px;
	}

	/* Bug 1 (date wraps to wrong row): the body column is narrow on mobile, so
	   the long category label (e.g. "Тестирование AI-приложений") fills the
	   line and pushes "· 25.05.2026" to wrap. With flex-wrap on .__meta the
	   date dropped to its own line and left the "·" separator stranded at the
	   end of the category line. Hiding the separator across the whole mobile
	   range removes the dangling middot — category and date wrap to two clean
	   lines, or sit on one when they fit. The numeric date itself never breaks
	   (it already has white-space: nowrap). */
	.m2p-cat-entry__sep {
		display: none;
	}
}

/* ==========================================================================
   Responsive: Small mobile (< 480px)
   ========================================================================== */

@media (max-width: 479px) {
	.m2p-cat-entry__link {
		grid-template-columns: 6rem 1fr;
	}

	.m2p-cat-entry__media {
		width: 6rem;
		border-radius: 0;
	}

	.m2p-cat-entry__image {
		object-fit: contain;
	}

	.m2p-cat-entry__excerpt {
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.m2p-cat-entry__footer {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.m2p-cat-entry__link,
	.m2p-cat-entry__link::before,
	.m2p-cat-entry__image,
	.m2p-cat-entry__index,
	.m2p-cat-entry__title,
	.m2p-cat-entry__cta svg {
		transition: none;
	}
}

/* ==========================================================================
   Alumni archive — credential register
   Scoped: .m2p-category--alumni
   --------------------------------------------------------------------------
   Reuses the .m2p-category page chrome (background, header, pagination) and
   adds a row-based credential vocabulary: numbered index on the left, name
   + issue date in the middle, primary download CTA on the right. The whole
   row is one card; the entire row links to the single diploma page, while
   the orange Download button is a secondary direct-PDF link nested inside.
   ========================================================================== */

.m2p-category--alumni .m2p-category__inner {
	max-width: 920px;
}

/* ---- Counter strip ("12 credentials issued") ---- */

.m2p-alumni-meta {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 1rem;
	padding: 0 0.25rem;
}

.m2p-alumni-meta__count {
	font-family: var(--m2p-cat-font-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--m2p-cat-faint);
}

/* ---- The list shell — same card vocabulary as .m2p-category__list ---- */

.m2p-alumni-list {
	background: var(--m2p-cat-card-bg);
	border-radius: 1rem;
	box-shadow: var(--m2p-cat-shadow);
	padding: 0.5rem 0;
	overflow: hidden;
}

/* ---- Single row ---- */

.m2p-alumni-row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: var(--m2p-cat-md);
	padding: 0 var(--m2p-cat-lg);
	transition: background-color 200ms ease;
}

.m2p-alumni-row + .m2p-alumni-row {
	border-top: 1px solid var(--m2p-cat-border);
}

.m2p-alumni-row:hover {
	background: var(--m2p-cat-peach);
}

/* Left-edge accent rule on hover/focus — matches .m2p-cat-entry vocabulary */
.m2p-alumni-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--m2p-cat-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-alumni-row:hover::before,
.m2p-alumni-row:focus-within::before {
	transform: scaleY(1);
}

/* ---- Row link (entire row except the download button) ---- */

.m2p-alumni-row__link {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--m2p-cat-md);
	align-items: center;
	padding: 1.125rem 0;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.m2p-alumni-row__link:hover,
.m2p-alumni-row__link:focus-visible {
	text-decoration: none;
	color: inherit;
}

.m2p-alumni-row__link:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(251, 107, 0, 0.3);
	border-radius: 0.25rem;
}

/* ---- Numbered index (01, 02, ...) — credential register feel ---- */

.m2p-alumni-row__index {
	font-family: "SFMono-Regular", "Menlo", "Consolas", ui-monospace, monospace;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--m2p-cat-faint);
	text-align: left;
	font-variant-numeric: tabular-nums;
	transition: color 180ms ease;
}

.m2p-alumni-row:hover .m2p-alumni-row__index {
	color: var(--m2p-cat-accent);
}

/* ---- Body (name + meta) ---- */

.m2p-alumni-row__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.m2p-alumni-row__name {
	font-family: var(--m2p-cat-font-display) !important;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.005em !important;
	color: var(--m2p-cat-heading) !important;
	margin: 0 !important;
	text-align: left !important;
	text-wrap: balance;

	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-alumni-row__link:hover .m2p-alumni-row__name,
.m2p-alumni-row__link:focus-visible .m2p-alumni-row__name {
	color: var(--m2p-cat-accent) !important;
	text-decoration-color: var(--m2p-cat-accent);
}

.m2p-alumni-row__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.75rem;
	color: var(--m2p-cat-faint);
}

.m2p-alumni-row__date {
	font-family: var(--m2p-cat-font-label);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* ---- Primary Download CTA (orange fill, matches the single-diploma page) ---- */

.m2p-alumni-row__download {
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	background: var(--m2p-cat-accent);
	color: #fff;
	font-family: var(--m2p-cat-font-label);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 0.5rem;
	box-shadow:
		0 2px 8px rgba(251, 107, 0, 0.22),
		0 1px 2px rgba(0, 0, 0, 0.04);
	transition:
		background-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
	white-space: nowrap;
}

.m2p-alumni-row__download:hover,
.m2p-alumni-row__download:focus-visible {
	background: var(--m2p-cat-accent-hover);
	color: #fff;
	text-decoration: none;
	box-shadow:
		0 6px 18px rgba(200, 86, 0, 0.28),
		0 2px 4px rgba(0, 0, 0, 0.06);
	transform: translateY(-1px);
}

.m2p-alumni-row__download:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 6px var(--m2p-cat-accent),
		0 6px 18px rgba(200, 86, 0, 0.28);
}

.m2p-alumni-row__download:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(200, 86, 0, 0.2);
}

.m2p-alumni-row__download-arrow {
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.m2p-alumni-row__download:hover .m2p-alumni-row__download-arrow,
.m2p-alumni-row__download:focus-visible .m2p-alumni-row__download-arrow {
	transform: translateY(2px);
}

/* Row variant: no PDF available — collapse the empty CTA cell */
.m2p-alumni-row--no-pdf {
	grid-template-columns: 1fr;
}

/* ==========================================================================
   Alumni — Tablet (< 768px)
   ========================================================================== */

@media (max-width: 767px) {
	.m2p-alumni-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 0 var(--m2p-cat-md);
	}

	.m2p-alumni-row__link {
		grid-template-columns: 2.25rem 1fr;
		gap: 0.875rem;
		padding: 0.875rem 0 0.5rem;
	}

	.m2p-alumni-row__index {
		font-size: 0.6875rem;
	}

	.m2p-alumni-row__name {
		font-size: 1rem !important;
	}

	.m2p-alumni-row__download {
		justify-self: stretch;
		justify-content: center;
		margin: 0 0 0.875rem 3.125rem; /* indent under the body, past the index column */
		padding: 0.5rem 1rem;
		font-size: 0.8125rem;
	}

	.m2p-alumni-row--no-pdf .m2p-alumni-row__link {
		padding-bottom: 0.875rem;
	}

	.m2p-alumni-meta {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Alumni — Small mobile (< 480px)
   ========================================================================== */

@media (max-width: 479px) {
	.m2p-alumni-row__link {
		grid-template-columns: 1.875rem 1fr;
		gap: 0.625rem;
	}

	.m2p-alumni-row__download {
		margin-left: 2.5rem;
	}
}

/* ==========================================================================
   Alumni — Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.m2p-alumni-row,
	.m2p-alumni-row::before,
	.m2p-alumni-row__name,
	.m2p-alumni-row__index,
	.m2p-alumni-row__download,
	.m2p-alumni-row__download-arrow {
		transition: none;
	}
}