/* ── Modeling direction — дополнения к print-content ── */

.modeling-page {
  --portfolio-surface: #ffffff;
  --portfolio-surface-border: #e0e0e0;
}

/* Плавное появление секций */
@keyframes modeling-section-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modeling-page.service-detail__panel--active .print-section {
  animation: modeling-section-enter 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modeling-page.service-detail__panel--active .print-section:nth-of-type(1) { animation-delay: 0.04s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(2) { animation-delay: 0.1s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(3) { animation-delay: 0.16s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(4) { animation-delay: 0.22s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(5) { animation-delay: 0.28s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(6) { animation-delay: 0.34s; }
.modeling-page.service-detail__panel--active .print-section:nth-of-type(7) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .modeling-page.service-detail__panel--active .print-section {
    animation: none;
  }
}

/* Hero — плавная смена фото */
.model-hero-fade {
  width: 70%;
  margin-left: auto;
}

.model-hero-fade__stage {
  position: relative;
  height: 382px;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.model-hero-fade__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: opacity;
}

.model-hero-fade__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.model-hero-fade__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .model-hero-fade__slide {
    transition: none;
  }
}

/* Mobile hero/showcase/tech → css/mobile/modeling.css */

/* Process flow */
.print-process {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.print-process .print-step {
  flex: 1;
  min-width: 0;
}

.print-process__arrow {
  flex-shrink: 0;
  align-self: center;
  font-family: var(--font-heading);
  font-size: 18px;
  color: #d0d0d0;
  line-height: 1;
  user-select: none;
}

/* Portfolio showcase — слайдер */
.modeling-page .print-section--portfolio {
  border-top: none;
  padding-top: 40px;
}

.model-showcase {
  width: 100%;
}

.model-showcase__stage {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--portfolio-surface);
}

.model-showcase__stage--clickable {
  cursor: zoom-in;
}

.model-showcase__stage--clickable:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.model-showcase__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.85s ease;
  will-change: opacity;
  background: var(--portfolio-surface);
  pointer-events: none;
}

.model-showcase__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.model-showcase__slide.is-exit {
  opacity: 0;
  z-index: 1;
}

.model-showcase__slide.is-enter {
  opacity: 1;
  z-index: 2;
}

.model-showcase__slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.model-showcase__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 80%;
  margin: 14px auto 0;
  min-height: 20px;
}

.model-showcase__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
}

.model-showcase__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d0d0d0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.model-showcase__dot:hover {
  background: #a8a8a8;
}

.model-showcase__dot.is-active {
  background: var(--text);
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .model-showcase__slide {
    transition: none;
  }
}

/* Mobile showcase width → css/mobile/modeling.css */

/* Equipment */
.model-tech {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.model-tech__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.model-tech__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.model-tech__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.model-tech__card .print-card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.model-tech__card .print-card__title {
  margin-bottom: 0;
}

.print-equipment__photo--placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, #e8e8e8 0%, #f5f5f5 50%, #e0e0e0 100%);
  border: 1px solid var(--border);
}

.model-tech__photo {
  width: 100%;
}

/* Checklist with checkmarks */
.print-checklist--checked li::before {
  content: '';
  border: 1px solid var(--text-muted);
  background: #fafafa;
  box-shadow: none;
}

.print-checklist--checked li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.55em;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg) translateY(-2px);
}

/* CTA in split column */
.model-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 4px;
}

.model-cta .print-section__title {
  margin-bottom: 0;
}

/* ── Responsive (desktop / tablet) ── */
@media (max-width: 1100px) {
  .print-process {
    flex-wrap: wrap;
  }

  .print-process__arrow {
    display: none;
  }

  .print-process .print-step {
    flex: 1 1 calc(33.333% - 12px);
    min-width: 180px;
  }
}

@media (max-width: 600px) {
  .print-process .print-step {
    flex: 1 1 100%;
  }
}