/* === ЭТАП 2 ===
   Стили для single-production.php (кейс портфолио)
   Переиспользует токены/базовые классы из page-flexible-content.css
*/

.stl2sp-hero {
	background-size: cover; background-position: center; position: relative;
}
.stl2sp-hero::before {
	content: ''; position: absolute; inset: 0; background: rgba(26,26,26,.8); z-index: 0;
}
.stl2sp-hero .stl2-hero__inner { position: relative; z-index: 1; }

.stl2-hero__breadcrumb, .stl2-hero__breadcrumb a, .stl2-hero__breadcrumb span, .stl2-hero__breadcrumb div {
	color: rgba(255,255,255,.55) !important;
	text-decoration: none !important;
	font-size: 12px !important;
	display: inline !important;
}
.stl2-hero__breadcrumb a:hover, .stl2-hero__breadcrumb span:hover {
	color: var(--stl2-brand) !important;
}
.stl2-hero__breadcrumb-current {
	color: var(--stl2-brand) !important;
}
.stl2-hero__breadcrumb { display: block; margin-bottom: 20px; }
.stl2-hero__title { margin-top: 8px; margin-bottom: 20px; }

.stl2sp-main__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.stl2sp-gallery__main { background: var(--stl2-gray-bg); border-radius: 12px; overflow: hidden; height: 320px; margin-bottom: 10px; position: relative; }
.stl2sp-gallery__main-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.stl2sp-gallery__zoom {
	position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
	background: rgba(26,26,26,.55); color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 14px; pointer-events: none;
}

.stl2sp-lightbox {
	display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10,10,10,.92);
	align-items: center; justify-content: center;
}
.stl2sp-lightbox.active { display: flex; }
.stl2sp-lightbox__img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.stl2sp-lightbox__close {
	position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 18px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.stl2sp-lightbox__close:hover { background: rgba(255,255,255,.2); }
.stl2sp-lightbox__nav {
	position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
	background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 18px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.stl2sp-lightbox__nav:hover { background: rgba(255,255,255,.2); }
.stl2sp-lightbox__prev { left: 24px; }
.stl2sp-lightbox__next { right: 24px; }
@media (max-width: 600px) {
	.stl2sp-lightbox__nav { width: 40px; height: 40px; font-size: 15px; }
	.stl2sp-lightbox__prev { left: 8px; }
	.stl2sp-lightbox__next { right: 8px; }
}
.stl2sp-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stl2sp-gallery__thumb {
	padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; height: 56px;
	background: var(--stl2-gray-bg); cursor: pointer;
}
.stl2sp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stl2sp-gallery__thumb.active { border-color: var(--stl2-brand); }

.stl2sp-specs { font-size: 14px; color: #444; line-height: 2.1; font-family: Montserrat, sans-serif; }
.stl2sp-specs--boxed {
	background: #fff; border: 1px solid var(--stl2-border); border-radius: 14px; padding: 28px 24px;
}
.stl2sp-specs strong { color: var(--stl2-dark); font-weight: 700; }

/* ---------- ПРИМЕНЯЕМЫЕ ТЕХНОЛОГИИ / ТАКЖЕ СМОТРИТЕ ---------- */
.stl2sp-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stl2sp-tech-card { display: block; text-decoration: none; text-align: center; }
.stl2sp-tech-card__img {
	height: 100px; border-radius: 10px; background: var(--stl2-dark) center/cover no-repeat;
	margin-bottom: 8px; border: 1px solid var(--stl2-border);
}
.stl2sp-tech-card span { font-size: 13px; font-weight: 600; color: #444; font-family: Montserrat, sans-serif; }
.stl2sp-tech-card:hover span { color: var(--stl2-brand); }

/* ---------- CTA "Понравился дизайн?" ---------- */
.stl2sp-cta { background: var(--stl2-dark); padding: 40px 0; }
.stl2sp-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stl2sp-cta__inner strong { font-size: 20px; color: #fff; font-family: Montserrat, sans-serif; }
.stl2sp-cta__inner span { font-size: 13px; color: rgba(255,255,255,.85); font-family: Montserrat, sans-serif; margin-bottom: 10px; }
.stl2sp-cta__btn { background: #fff; color: var(--stl2-brand) !important; }
.stl2sp-cta__btn:hover { background: var(--stl2-brand); color: #fff !important; }

@media (max-width: 900px) {
	.stl2sp-main__grid { grid-template-columns: 1fr; }
	.stl2sp-tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.stl2sp-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
	.stl2sp-tech-grid { grid-template-columns: 1fr; }
}