/**
 * Latest from AJ1 Guides — четыре последние записи на хабе (ТЗ V4, п. 8.2).
 *
 * Макета в Figma нет: шапка — приём секции latest (светлый фон,
 * mono-надзаголовок, H2 display 52/30, ссылка справа внизу строки
 * заголовка); карточки — guide-cards.css.
 *
 * @package AJ1MOTO.COM
 */

.guide-latest {
	padding-top: var(--space-60);
	padding-bottom: var(--space-60);
	background: var(--color-light);
}

.guide-latest__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

.guide-latest__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-20);
}

.guide-latest__head-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.guide-latest__eyebrow {
	font-family: var(--font-mono);
	font-size: var(--fs-13);
	letter-spacing: calc(3 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
}

.guide-latest__title {
	font-family: var(--font-display);
	font-size: var(--fs-52);
	font-weight: var(--fw-display);
	line-height: var(--lh-100);
	letter-spacing: var(--ls-display);
	text-transform: uppercase;
	color: var(--color-dark);
}

.guide-latest__more {
	flex-shrink: 0;
	font-family: var(--font-condensed);
	font-size: var(--fs-17);
	font-weight: 600;
	letter-spacing: calc(1 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-accent);
	transition: color var(--transition-base);
}

.guide-latest__more:hover {
	color: var(--color-dark);
}

@media (max-width: 767px) {
	.guide-latest {
		padding-top: var(--space-40);
		padding-bottom: var(--space-40);
	}

	.guide-latest__inner {
		gap: var(--space-30);
	}

	.guide-latest__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-15);
	}

	.guide-latest__head-intro {
		gap: var(--space-15);
	}

	.guide-latest__eyebrow {
		font-size: var(--fs-10);
		letter-spacing: calc(2 / var(--vw-base) * 100vw);
	}

	.guide-latest__title {
		font-size: var(--fs-30);
	}

	.guide-latest__more {
		font-size: var(--fs-18);
	}
}