/* «В чем отличие толщины тротуарной плитки?» — 3 карточки с фото-фоном.
   Макет (обновлён 2026-08-13): десктоп 1640 — 3 карточки 533×520 r30 в ряд,
   gap 20, padding 20/30/30/30; планшет 852 — карточки 852×400 r30 В КОЛОНКУ,
   gap 20, padding 20/30. Текст поверх фото — белый, затемнение градиентом.
   Списки нагрузок в новом макете скрыты (вернутся — возможно, по наведению). */

/* между секциями — 100 по макету (gap родителя в Figma) */
.pr-ptolsh { display: flex; flex-direction: column; gap: 30px; margin: var(--gap-section) 0; }

.pr-ptolsh__title {
	margin: 0; font-size: 32px; font-weight: 600; line-height: 1.2;
	color: var(--newdark);
}

.pr-ptolsh__row { display: flex; gap: 20px; }

.pr-ptolsh__card {
	position: relative; flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
	min-height: 520px; padding: 20px 30px 30px;
	border-radius: 30px; overflow: hidden;
	background: var(--lightborder) 50% 50% / cover no-repeat;
}
/* затемнение под белый текст — снизу плотнее, сверху легче */
.pr-ptolsh__card::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .25) 35%, rgba(0, 0, 0, .65) 100%);
}
.pr-ptolsh__top,
.pr-ptolsh__bottom { position: relative; }

.pr-ptolsh__label { display: block; font-size: 18px; font-weight: 400; color: #fff; }
.pr-ptolsh__mm { display: block; font-size: 32px; font-weight: 600; line-height: 1.2; color: #fff; }

/* Список нагрузок: в обновлённом макете скрыт совсем (решение Pavel 2026-08-13,
   возможно вернётся по наведению) — разметка и стили остаются на будущее */
.pr-ptolsh__list {
	list-style: none; margin: 10px 0 0; padding: 0;
	display: none; flex-direction: column; gap: 10px;
}
.pr-ptolsh__list li { display: flex; align-items: center; gap: 20px; }
.pr-ptolsh__list span { font-size: 18px; font-weight: 600; color: #fff; }
/* маркер 25×25 r6 — светлая плашка (Frame 73 в макете) */
.pr-ptolsh__mark {
	flex: none; width: 25px; height: 25px; border-radius: var(--r-btn);
	background: var(--lightborder);
}

.pr-ptolsh__bottom { display: flex; flex-direction: column; gap: 0; }
.pr-ptolsh__text { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.35; color: #fff; }

/* #106: пока кнопка скрыта, она не занимает места — текст стоит внизу карточки.
   При наведении строка раскрывается (0fr → 1fr), текст уезжает вверх,
   а ссылка проявляется в освободившемся месте. */
.pr-ptolsh__morewrap {
	display: grid; grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease, margin-top .3s ease;
	margin-top: 0;
}
.pr-ptolsh__card:hover .pr-ptolsh__morewrap,
.pr-ptolsh__card:focus-within .pr-ptolsh__morewrap {
	grid-template-rows: 1fr; margin-top: 30px;
}
.pr-ptolsh__more {
	font-size: 18px; font-weight: 600; color: #fff !important; text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .5); justify-self: flex-start;
	min-height: 0; overflow: hidden;
	opacity: 0; transform: translateY(10px); pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, border-color .15s ease;
}
.pr-ptolsh__card:hover .pr-ptolsh__more,
.pr-ptolsh__card:focus-within .pr-ptolsh__more {
	opacity: 1; transform: translateY(0); pointer-events: auto;
}
.pr-ptolsh__more:hover { border-bottom-color: #fff; }

/* тач-устройства ховера не имеют — там ссылка видна всегда */
@media (hover: none) {
	.pr-ptolsh__morewrap { grid-template-rows: 1fr; margin-top: 30px; }
	.pr-ptolsh__more { opacity: 1; transform: none; pointer-events: auto; }
}

/* ── Планшет: заголовок 24, карточки 852×400 В КОЛОНКУ (обновлённый макет) ── */
@media (max-width: 991px) {
	.pr-ptolsh { margin: var(--gap-section) 0; }
	.pr-ptolsh__title { font-size: 24px; }
	.pr-ptolsh__row { flex-direction: column; gap: 20px; }
	.pr-ptolsh__card { flex: 0 0 auto; min-height: 400px; padding: 20px 30px; gap: 30px; }
}

/* ── Мобила: карточки в колонку, высота по контенту ── */
@media (max-width: 575px) {
	.pr-ptolsh { gap: 20px; margin: 50px 0 30px; }
	.pr-ptolsh__title { font-size: 20px; }
	.pr-ptolsh__row { flex-direction: column; gap: 10px; }
	/* в колонке flex-basis:0 схлопывал карточку по высоте — растём по контенту */
	.pr-ptolsh__card { flex: 0 0 auto; min-height: 0; padding: 20px; gap: 20px; }
	/* отступ даёт .pr-ptolsh__morewrap при раскрытии, здесь он был бы лишним */
	.pr-ptolsh__bottom { gap: 0; }
	.pr-ptolsh__card:hover .pr-ptolsh__morewrap,
	.pr-ptolsh__card:focus-within .pr-ptolsh__morewrap { margin-top: 20px; }
	.pr-ptolsh__label,
	.pr-ptolsh__list span,
	.pr-ptolsh__text,
	.pr-ptolsh__more { font-size: 16px; }
	.pr-ptolsh__mm { font-size: 28px; }
}

/* тач-мобила: раскрыто всегда, отступ по мобильному ритму */
@media (hover: none) and (max-width: 575px) {
	.pr-ptolsh__morewrap { margin-top: 20px; }
}