/**
 * Блок «Портфолио 360».
 */

.portfolio-360 {
	background:
		radial-gradient(circle at 78% 18%, rgb(var(--color-accent) / 0.11), transparent 30rem),
		rgb(var(--color-background));
	color: rgb(var(--color-primary));
}

.portfolio-360__header {
	max-width: 820px;
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.portfolio-360__eyebrow {
	margin: 0 0 0.65rem;
	color: rgb(var(--color-accent));
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.portfolio-360__title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 300;
	line-height: 1.05;
}

.portfolio-360__subtitle {
	max-width: 680px;
	margin: 1rem auto 0;
	color: rgb(var(--color-primary) / 0.72);
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	line-height: 1.6;
}

.portfolio-360__viewer {
	position: relative;
	overflow: hidden;
	border: 1px solid rgb(var(--color-line));
	border-radius: clamp(18px, 3vw, 28px);
	background: rgb(var(--color-surface));
	box-shadow: 0 28px 90px rgb(0 0 0 / 0.32);
}

.portfolio-360__viewer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

.portfolio-360__panorama {
	display: block;
	width: 100%;
	height: 560px;
	min-height: clamp(420px, 58vw, 640px);
	background: rgb(var(--color-surface));
}

.portfolio-360__hint {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 2;
	margin: 0;
	padding: 9px 14px;
	border: 1px solid rgb(255 255 255 / 0.18);
	border-radius: 999px;
	background: rgb(0 0 0 / 0.54);
	color: rgb(var(--color-light));
	font-size: 0.84rem;
	line-height: 1.35;
	text-align: center;
	transform: translateX(-50%);
	backdrop-filter: blur(12px);
	pointer-events: none;
}

.portfolio-360__viewer noscript img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.portfolio-360__panorama {
		min-height: 420px;
		height: 420px;
	}

	.portfolio-360__hint {
		right: 14px;
		left: 14px;
		bottom: 14px;
		font-size: 0.78rem;
		transform: none;
	}
}