/* ============================================================
   Карточки работ на главной (блок «Мы делаем»)
   Файл: css/extra-works.css  (подключается после style.css и header.css)
   Палитра сайта: тёмный #1d2126, акцент #7e332f,
   песочный #ebe6b1, зелёный #2f865c

   Раскладка:
     > 1180px     — 5 карточек в ряд
     1180–1024px  — 4
     1024–900px   — 3
     ≤ 900px      — галерея-слайдшоу: видно 2 карточки, стрелки по бокам,
                    буллеты снизу, свайп пальцем, без автопрокрутки
     ≤ 640px      — в галерее видно 1 карточку
   Скрипт галереи: js/works-slider.js
   ============================================================ */

.works {
	padding:40px 20px 80px;
	background:#fff;
}
.works-inner {
	max-width:1366px;
	margin:0 auto;
}

/* --- Общая обвязка: в сетке стрелок и буллетов не видно --- */
.works-row {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.works-viewport {
	flex:1 1 auto;
	min-width:0;
}
.works-track {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:24px;
}
.works-arrow,
.works-bullets {
	display:none;
}

/* --- Карточка --- */
.work {
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #e8e8e8;
	border-radius:10px;
	overflow:hidden;
	-webkit-transition:box-shadow 240ms ease-in-out, transform 240ms ease-in-out, border-color 240ms ease-in-out;
	transition:box-shadow 240ms ease-in-out, transform 240ms ease-in-out, border-color 240ms ease-in-out;
}
.work:hover {
	border-color:#ebe6b1;
	box-shadow:0 14px 34px rgba(29, 33, 38, 0.10);
	-webkit-transform:translateY(-4px);
	transform:translateY(-4px);
}

/* Картинка: пропорции держит контейнер, поэтому подмена файла
   на другой размер не сдвигает вёрстку (нет скачков CLS). */
.work-media {
	position:relative;
	aspect-ratio:3 / 2;
	background:#f3f0e2;
}
.work-media img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-o-object-fit:cover;
	object-fit:cover;
	display:block;
}

.work-body {
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	padding:18px 18px 20px;
}
.work-title {
	font-family:"Mulish", sans-serif;
	font-weight:700;
	font-size:18px;
	line-height:130%;
	color:#1d2126;
	margin-bottom:8px;
}
.work-desc {
	font-size:14px;
	line-height:145%;
	color:#6b6b6b;
}
.work-price {
	margin-top:auto;
	padding-top:14px;
	font-family:"Mulish", sans-serif;
	font-weight:700;
	font-size:20px;
	color:#1d2126;
	white-space:nowrap;
}
.work-price .from {
	font-weight:400;
	font-size:14px;
	color:#8a8a8a;
	margin-right:6px;
}
.work-price .unit {
	font-weight:400;
	font-size:14px;
	color:#6b6b6b;
	margin-left:4px;
}
.work-badge {
	display:inline-block;
	vertical-align:middle;
	background:#2f865c;
	color:#fff;
	font-weight:500;
	font-size:12px;
	line-height:1;
	letter-spacing:0.06em;
	text-transform:uppercase;
	padding:6px 12px;
	border-radius:30px;
	margin-left:10px;
}

/* Карточка без картинки (если такую добавят) */
.work--no-media {
	border-style:dashed;
}
.work--no-media .work-body {
	padding-top:22px;
}

/* --- Фолбэк для браузеров без aspect-ratio --- */
@supports not (aspect-ratio: 1 / 1) {
	.work-media {
		height:200px;
	}
}

/* ============================================================
   Сетка: 5 → 4 → 3 карточки в ряд.
   Держим карточку не шире ~300px, чтобы фото 300px не мылились.
   ============================================================ */
@media screen and (max-width: 1180px) {
	.works-track {
		grid-template-columns:repeat(4, 1fr);
	}
}
@media screen and (max-width: 1024px) {
	.works-track {
		grid-template-columns:repeat(3, 1fr);
	}
}

/* ============================================================
   Галерея-слайдшоу: ≤ 900px.
   Стрелки стоят по бокам снаружи, поэтому видимая область
   ограничена 624px = 2 карточки по 300px + зазор 24px.
   ============================================================ */
@media screen and (max-width: 900px) {
	.works-viewport {
		flex:0 1 624px;
		max-width:624px;
		overflow:hidden;
		padding:8px 0;   /* чтобы тень при наведении не обрезалась сверху и снизу */
	}
	.works-track {
		display:flex;
		gap:24px;
		-webkit-transition:transform 400ms ease-in-out;
		transition:transform 400ms ease-in-out;
		will-change:transform;
	}
	.work {
		flex:0 0 calc((100% - 24px) / 2);
	}
	.works-arrow {
		display:flex;
		align-items:center;
		justify-content:center;
		flex:0 0 auto;
		width:56px;
		height:56px;
		padding:0;
		border:0;
		border-radius:50%;
		background:#1d2126;
		color:#fff;
		cursor:pointer;
		z-index:2;
		-webkit-transition:background 240ms ease-in-out, opacity 240ms ease-in-out;
		transition:background 240ms ease-in-out, opacity 240ms ease-in-out;
	}
	.works-arrow:hover {
		background:#7e332f;
		color:#fff;
	}
	.works-arrow.is-disabled {
		opacity:0.3;
		pointer-events:none;
	}
	.works-bullets {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		gap:10px;
		margin-top:28px;
	}
	.works-bullet {
		width:10px;
		height:10px;
		padding:0;
		border:0;
		border-radius:50%;
		background:#dcd8c8;
		cursor:pointer;
		-webkit-transition:background 240ms ease-in-out, transform 240ms ease-in-out;
		transition:background 240ms ease-in-out, transform 240ms ease-in-out;
	}
	.works-bullet:hover {
		background:#7e332f;
	}
	.works-bullet.is-active {
		background:#7e332f;
		-webkit-transform:scale(1.4);
		transform:scale(1.4);
	}
}

/* --- Узкие экраны: одна карточка, стрелки уходят к заголовку «Мы делаем» --- */
@media screen and (max-width: 640px) {
	/* Стрелки позиционируются относительно .works-section — обёртки,
	   внутри которой и заголовок, и сама галерея (см. index.php) */
	.works-section {
		position:relative;
	}
	.head-line {
		border-top:2px dashed #ccc;
		padding-top:40px;
	}
	.head-line:before {
		display:none;   /* черту у заголовка убираем */
	}
	.head-line h2 {
		color:#7e332f;
		font-size:25px;
		padding:14px 20px;
		line-height:48px;   /* строка = высоте стрелки, поэтому центры совпадут */
		
	}
	.works-arrow {
		position:absolute;
		top:60px;
		width:48px;
		height:48px;
		z-index:110;   /* выше заголовка, у которого z-index:100 */
	}
	.works-arrow--prev {
		right:76px;
	}
	.works-arrow--next {
		right:20px;
	}
	.works-viewport {
		flex:0 1 300px;
		max-width:300px;
		margin:0 auto;
	}
	.work {
		flex:0 0 100%;
	}
}

/* --- Телефоны: отступы блока --- */
@media screen and (max-width: 760px) {
	.works {
		padding:30px 20px 60px;
	}
}