/* Mansard - sekcja "Cięcie i malowanie pod jednym dachem" (cięcie laserowe + malowanie proszkowe).
   Film z hali (4 ujęcia: cięcie, zdejmowanie detali, natrysk, gotowy element) pod dachem dwuspadowym 3D.
   Film ładuje się dopiero na ekranie; oś etapów pod spodem wypełnia się z czasem filmu (JS w sekcji). */
.jd { display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center; }
@media (max-width:1023px) { .jd { grid-template-columns:1fr;gap:36px; } }
.jd-lead { font-size:1.12rem;color:#4b5563;line-height:1.7;margin:0; }
.jd-chips { list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px; }
.jd-chips li { display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;font-size:14px;font-weight:600;color:#111827;
  box-shadow:0 4px 14px rgba(17,24,39,.05); }
.jd-chips li::before { content:"";width:8px;height:8px;border-radius:50%;background:#dc2626; }
.jd-link { display:inline-flex;align-items:center;gap:6px;margin-top:26px;font-size:14px;font-weight:700;color:#dc2626;transition:color .2s ease; }
.jd-link:hover { color:#111827; }
.jd-link:focus-visible { outline:2px solid #dc2626;outline-offset:3px;border-radius:2px; }
.jd-link span { display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.jd-link:hover span { transform:translateX(4px); }

/* film pod dachem: kadr przycięty w szczyt (0 18%, 50% 0, 100% 18%), dach 3D jako SVG nad nim */
.jd-house { position:relative;margin-top:26px; }
.jd-roof { position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;
  filter:drop-shadow(0 10px 14px rgba(17,24,39,.35)) drop-shadow(0 2px 3px rgba(17,24,39,.3)); }
.jd-frame { position:relative;aspect-ratio:16/10.5;border-radius:0 0 20px 20px;overflow:hidden;
  clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%);background:#0c111b url('/assets/img/laser/jeden-dach-reel-poster.jpg') center/cover; }
.jd-frame video { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.jd-shade { position:absolute;inset:0;background:linear-gradient(to top,rgba(12,17,27,.5),rgba(12,17,27,0) 35%); }
.jd-badge { position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(17,24,39,.72);
  backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em; }
.jd-badge span { width:7px;height:7px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.25); }
.jd-steps { list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:4fr 2.2fr 2.36fr;gap:10px; }
.jd-steps i { display:block;height:3px;border-radius:2px;background:#e5e7eb;overflow:hidden; }
.jd-steps b { display:block;height:100%;background:#dc2626;transform-origin:left;transform:scaleX(0); }
.jd-steps span { display:block;margin-top:8px;font-size:13px;font-weight:700;color:#9ca3af;transition:color .3s ease; }
.jd-steps li.is-on span { color:#111827; }
@media (max-width:560px) {
  .jd-house { margin-top:18px; }
  .jd-steps span { font-size:12px;line-height:1.3; }
}
@media (prefers-reduced-motion:reduce) { .jd-link span,.jd-steps span { transition:none; } }