/**
 * Latest from AJ1 — три поста соцсетей (ТЗ V4, п. 2.5 и 9.2).
 *
 * Макета в Figma нет: заголовок — приём секции advantages (светлый фон,
 * mono-надзаголовок, H2 display 52/30, ссылка справа внизу строки заголовка),
 * карточка — квадратное фото со скруглением 14 и подпись под ним.
 *
 * @package AJ1MOTO.COM
 */

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

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

/* ===== Заголовок ===== */

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

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

.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);
}

.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);
}

.latest__follow {
	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);
}

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

/* ===== Карточки ===== */

.latest__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-20);
}

/*
 * Карточка-пост (пакет правок №2, п. 2.4; прототип latest-from-aj1-посты.html):
 * белая, рамка 1 border-light, скругление 14, поля 16. Шапка поста — иконка
 * сети 34, имя аккаунта, название сети моно-шрифтом; фото со скруглением 10;
 * подпись и ссылка «View on …». Hover — рамка темнее, лёгкая тень, фото
 * чуть увеличивается.
 */
.latest__item {
	display: flex;
}

.latest__card {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-14);
	padding: var(--space-16);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-border-light);
	border-radius: var(--radius-14);
	color: var(--color-dark);
	background: var(--color-white);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.latest__card:hover {
	border-color: var(--color-grey-80);
	box-shadow: 0 var(--space-10) var(--space-30) var(--color-dark-08);
}

.latest__source {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.latest__source-icon {
	display: block;
	flex-shrink: 0;
	width: calc(34 / var(--vw-base) * 100vw);
	height: calc(34 / var(--vw-base) * 100vw);
}

.latest__source-text {
	display: flex;
	flex-direction: column;
	line-height: var(--lh-120);
}

.latest__source-name {
	font-family: var(--font-condensed);
	font-size: var(--fs-18);
	font-weight: 600;
	letter-spacing: calc(0.5 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-dark);
}

.latest__source-net {
	font-family: var(--font-mono);
	font-size: var(--fs-11);
	letter-spacing: calc(1.5 / var(--vw-base) * 100vw);
	text-transform: uppercase;
	color: var(--color-grey-45);
}

.latest__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius-10);
	background: var(--color-grey-95);
	overflow: hidden;
}

.latest__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.latest__card:hover .latest__image {
	transform: scale(1.04);
}

/* Видео: красная кнопка play 64 по центру фото и длительность в правом нижнем углу. */
.latest__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(64 / var(--vw-base) * 100vw);
	height: calc(64 / var(--vw-base) * 100vw);
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 var(--space-8) var(--space-24) var(--color-black-35);
	transform: translate(-50%, -50%);
	transition: transform var(--transition-base);
}

.latest__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: var(--space-11) 0 var(--space-11) var(--space-19);
	border-color: transparent transparent transparent var(--color-white);
	transform: translate(-40%, -50%);
}

.latest__card:hover .latest__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.latest__duration {
	position: absolute;
	right: var(--space-10);
	bottom: var(--space-10);
	padding: calc(3 / var(--vw-base) * 100vw) var(--space-7);
	border-radius: var(--radius-6);
	font-family: var(--font-mono);
	font-size: var(--fs-12);
	color: var(--color-white);
	background: var(--color-black-75);
}

.latest__caption {
	flex-grow: 1;
	font-size: var(--fs-16);
	line-height: var(--lh-150);
	color: var(--color-dark);
}

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

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

/* Точки слайдера — только на мобильном (компонент .slider-dots в base.css). */
.latest__dots {
	display: none;
}

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

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

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

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

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

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

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

	/* Слайдер со свайпом, как в Why AJ1: карточка 84% экрана, виден край следующей. */
	.latest__cards {
		display: flex;
		gap: var(--space-12);
		margin-left: calc(-1 * var(--container-gutter));
		margin-right: calc(-1 * var(--container-gutter));
		padding: 0 var(--container-gutter) var(--space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--container-gutter);
		scrollbar-width: none;
	}

	.latest__cards::-webkit-scrollbar {
		display: none;
	}

	.latest__item {
		flex: 0 0 84vw;
		scroll-snap-align: start;
	}

	.latest__card {
		gap: var(--space-12);
		padding: var(--space-14);
	}

	.latest__source-name {
		font-size: var(--fs-17);
	}

	.latest__dots {
		display: flex;
		margin-top: calc(-16 / var(--vw-base) * 100vw);
	}

	.latest__caption {
		font-size: var(--fs-15);
	}
}