/* ==========================================================================
   LikeOn — фотовідгуки
   Палітра та ширина ті самі, що в решти сайту: #1a1a1a — текст, #6d7993 —
   акцент, --likeon-width — спільна ширина контейнера.
   ========================================================================== */

.lpr {
	/* У заголовка сторінки знизу лише 8 px: раніше проміжок добирала зведена
	   оцінка, яка йшла одразу під ним. Тепер під заголовком стоять вкладки,
	   і відступ тримає сам блок. */
	padding-top: clamp(20px, 3vw, 38px);

	--lpr-ink: #1a1a1a;
	--lpr-accent: #6d7993;
	--lpr-muted: #6f6a64;
	--lpr-line: #e6e1da;
	--lpr-cream: #f5f1eb;
	--lpr-ease: cubic-bezier(.2, .7, .2, 1);

	color: var(--lpr-ink);
	font-size: 16px;
	line-height: 1.6;
}
.lpr *,
.lpr *::before,
.lpr *::after { box-sizing: border-box; }

.lpr-wrap {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 15px;
}

/* --- перемикач ----------------------------------------------------------- */

.lpr-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.lpr .lpr-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	border: 1px solid var(--lpr-line);
	border-radius: 999px;
	background: #fff;
	color: var(--lpr-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .25s, background-color .25s, color .25s;
}
.lpr .lpr-tab:hover { border-color: var(--lpr-accent); color: var(--lpr-accent); }
.lpr .lpr-tab[aria-selected="true"] {
	border-color: var(--lpr-ink);
	background: var(--lpr-ink);
	color: #fff;
}
.lpr-tab__n {
	font-size: 12px;
	font-weight: 400;
	opacity: .6;
}

.lpr .lpr-note {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	color: var(--lpr-muted);
	font-size: 15px;
	text-align: center;
}

/* --- сітка --------------------------------------------------------------- */
/* Колонки, а не grid: у скріншотів різна висота, і кладка без порожнеч
   виходить саме колонками. Порядок читається згори вниз по колонці —
   для галереї це нормально, бо сенсу в послідовності немає. */

.lpr-grid {
	column-width: 220px;
	column-gap: 16px;
}
.lpr-cell {
	margin: 0 0 16px;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}
.lpr-cell.is-hidden { display: none; }

.lpr .lpr-card {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-align: inherit;
	text-transform: none;
	min-height: 0;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--lpr-line);
	border-radius: 12px;
	background: #fff;
	cursor: zoom-in;
	transition: border-color .25s, box-shadow .3s var(--lpr-ease), transform .3s var(--lpr-ease);
}
.lpr .lpr-card:hover,
.lpr .lpr-card:focus-visible {
	border-color: #d6cfc4;
	box-shadow: 0 10px 30px rgba(26, 26, 26, .12);
	transform: translateY(-2px);
}
.lpr .lpr-card__img {
	display: block;
	width: 100%;
	height: auto;
}

.lpr-card__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--lpr-ink);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s var(--lpr-ease);
}
.lpr .lpr-card:hover .lpr-card__zoom,
.lpr .lpr-card:focus-visible .lpr-card__zoom { opacity: 1; transform: none; }

/* --- «Показати ще» ------------------------------------------------------- */

.lpr-more-wrap {
	margin: clamp(18px, 2.4vw, 30px) 0 0;
	text-align: center;
}
.lpr .lpr-more {
	padding: 13px 30px;
	border: 1px solid var(--lpr-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--lpr-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s, color .25s;
}
.lpr .lpr-more:hover { background: var(--lpr-ink); color: #fff; }

/* Відступ від підвалу. Вкладку з текстами не чіпаємо: стрічка відгуків має
   власний відступ знизу, і тут він склався б удвічі. */
.lpr-panel[data-lpr-panel="screens"],
.lpr-panel[data-lpr-panel="photos"] { padding-bottom: clamp(48px, 6vw, 88px); }

/* ==========================================================================
   Стрічка на головній — продовження кремової зони відгуків
   ========================================================================== */

/* Секція самостійна і стоїть там, де раніше були текстові відгуки, —
   кремове тло тримає чергування смуг на головній. */
.lh-shots { background: var(--lh-cream); }

.lh .lh-shots__strip {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.lh .lh-shots__strip::-webkit-scrollbar { display: none; }

.lh.lh-shots .lh-shots__strip > li {
	flex: 0 0 calc((100% - 5 * 16px) / 6);
	min-width: 0;
	scroll-snap-align: start;
}
.lh.lh-shots .lh-shots__strip > li:last-child { scroll-snap-align: end; }
.lh.lh-shots .lh-shots__strip > li.lh-strip__nosnap { scroll-snap-align: none; }

/* Картка-скріншот: висота фіксована, видно верхню частину листування —
   цього досить, щоб упізнати месенджер, а решту показує перегляд. */
.lh .lpr-card--shot {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-align: inherit;
	text-transform: none;
	min-height: 0;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--lh-line, #e6e1da);
	border-radius: 14px;
	background: #fff;
	cursor: zoom-in;
	transition: border-color .25s, box-shadow .3s var(--lh-ease), transform .3s var(--lh-ease);
}
.lh .lpr-card--shot::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92));
	pointer-events: none;
}
.lh .lpr-card--shot:hover,
.lh .lpr-card--shot:focus-visible {
	border-color: #d6cfc4;
	box-shadow: 0 14px 34px rgba(26, 26, 26, .14);
	transform: translateY(-3px);
}
.lh .lpr-card--shot .lpr-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	object-position: top center;
}
.lh .lpr-card--shot .lpr-card__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: #1a1a1a;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s var(--lh-ease);
}
.lh .lpr-card--shot:hover .lpr-card__zoom,
.lh .lpr-card--shot:focus-visible .lpr-card__zoom { opacity: 1; transform: none; }

/* ==========================================================================
   Перегляд на весь екран
   ========================================================================== */

.lpr-box {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(18, 18, 20, .92);
	opacity: 0;
	transition: opacity .25s;
}
.lpr-box.is-open { opacity: 1; }
.lpr-box[hidden] { display: none; }

.lpr-box__img {
	max-width: min(100%, 560px);
	max-height: calc(100vh - 132px);
	border-radius: 10px;
	background: #fff;
	object-fit: contain;
}

.lpr-box__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}
.lpr-box__btn:hover { background: rgba(255, 255, 255, .28); }
.lpr-box__btn:disabled { opacity: .3; cursor: default; }
.lpr-box__close { top: 14px; right: 14px; }
.lpr-box__prev { top: 50%; left: 14px; transform: translateY(-50%); }
.lpr-box__next { top: 50%; right: 14px; transform: translateY(-50%); }

.lpr-box__bar {
	position: absolute;
	right: 0;
	bottom: 14px;
	left: 0;
	padding-inline: 70px;
	color: rgba(255, 255, 255, .8);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.lpr-box__count { display: block; margin-top: 4px; opacity: .65; }

/* ==========================================================================
   Вузькі екрани
   ========================================================================== */

@media (max-width: 1099px) {
	.lh.lh-shots .lh-shots__strip > li { flex-basis: calc((100% - 3 * 16px) / 4); }
}

@media (max-width: 849px) {
	.lh.lh-shots .lh-shots__strip > li { flex-basis: calc((100% - 2 * 16px) / 3); }
	.lpr-grid { column-width: 180px; column-gap: 12px; }
	.lpr-cell { margin-bottom: 12px; }
}

@media (max-width: 549px) {
	.lh.lh-shots .lh-shots__strip > li { flex-basis: 62%; }
	.lpr-grid { column-width: 150px; }
	.lpr .lpr-tab { padding: 9px 15px; font-size: 13px; }
	.lpr-box { padding: 8px; }
	.lpr-box__img { max-height: calc(100vh - 118px); }
	.lpr-box__prev { left: 6px; }
	.lpr-box__next { right: 6px; }
	.lpr-box__bar { padding-inline: 58px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.lpr .lpr-card,
	.lh .lpr-card--shot,
	.lpr-card__zoom,
	.lpr-box { transition: none; }
	.lpr .lpr-card:hover,
	.lh .lpr-card--shot:hover { transform: none; }
}