/* ==========================================================================
   AWCompany ApS — Modulhuse construction journey ("ModulBuildJourney")
   Interactive 6-stage crossfade component, see modulhuse.html #byggeproces
   and js/modul-build-journey.js. Namespaced under .modul-build-journey so
   it can never collide with unrelated site rules.
   ========================================================================== */

.modul-build-journey__hint{
  margin-top: 0.75rem;
  font-size: var(--fs-small);
  color: var(--c-ink-faint);
}

/* ---------- Media frame: two absolutely-stacked picture layers, true
   crossfade (opacity + subtle scale), never a naive src swap ---------- */
.modul-build-journey__stage-wrap{
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.modul-build-journey__frame{
  position: relative;
  aspect-ratio: 1536 / 340;
  overflow: hidden;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  cursor: pointer;
  touch-action: pan-y;
}
.modul-build-journey__image-layer{
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 780ms var(--ease-premium);
  will-change: opacity;
}
.modul-build-journey__image-layer.is-active{ opacity: 1; z-index: 2; }
.modul-build-journey__image-layer picture,
.modul-build-journey__image-layer img{
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.modul-build-journey__image-layer img{
  transform: scale(1);
  transition: transform 780ms var(--ease-premium);
}
.modul-build-journey__image-layer.is-active img{ transform: scale(1.015); }
@media (prefers-reduced-motion: reduce){
  .modul-build-journey__image-layer{ transition: opacity 1ms linear; }
  .modul-build-journey__image-layer img{ transition: none; transform: none !important; }
}

/* Instagram-story-style segmented progress, one segment per stage, filling
   in real time to match autoplay pacing. */
.modul-build-journey__progress{
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; gap: 4px;
  padding: 10px 10px 0;
}
.modul-build-journey__progress-seg{
  flex: 1 1 0;
  height: 3px;
  background: rgba(245,241,232,0.32);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.modul-build-journey__progress-seg-fill{
  display: block; height: 100%; width: 0%;
  background: var(--c-on-dark);
  border-radius: var(--radius-pill);
}
.modul-build-journey__progress-seg.is-complete .modul-build-journey__progress-seg-fill{ width: 100%; transition: none; }
.modul-build-journey__progress-seg.is-active .modul-build-journey__progress-seg-fill{
  transition: width linear;
}

/* Prev / next arrows, hidden on touch until the frame is focused/hovered
   isn't required — keep them always present but understated, same visual
   language as .text-link chevrons. */
.modul-build-journey__nav-btn{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(27,26,23,0.42);
  color: var(--c-on-dark);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-premium), background var(--dur-ui) var(--ease-premium);
}
.modul-build-journey__frame:hover .modul-build-journey__nav-btn,
.modul-build-journey__nav-btn:focus-visible{ opacity: 1; }
.modul-build-journey__nav-btn:hover{ background: rgba(27,26,23,0.68); }
.modul-build-journey__nav-btn svg{ width: 16px; height: 16px; }
.modul-build-journey__nav-btn--prev{ left: 12px; }
.modul-build-journey__nav-btn--next{ right: 12px; }

.modul-build-journey__stage-info{
  display: flex; flex-direction: column; gap: 0.4rem;
}
.modul-build-journey__stage-count{
  font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink-faint);
}
.modul-build-journey__stage-title{ font-size: var(--fs-h2); }
.modul-build-journey__stage-desc{
  color: var(--c-ink-faint); max-width: 68ch;
}
/* Crossfade the text block along with the image so the two never feel
   decoupled — same duration family as the image layers. */
.modul-build-journey__stage-info[data-fading="true"]{ opacity: 0; }
.modul-build-journey__stage-info{
  transition: opacity 320ms var(--ease-premium);
}

/* ---------- Timeline ---------- */
.modul-build-journey__timeline{
  margin-top: var(--sp-4);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.modul-build-journey__stage{ position: relative; }
.modul-build-journey__stage-btn{
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
  padding-top: 1.1rem;
  text-align: left;
}
/* Connecting line: a full-width track behind every stage, plus a fill that
   grows as the visitor progresses through the sequence. */
.modul-build-journey__stage-btn::before{
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c-line-strong);
}
.modul-build-journey__stage:first-child .modul-build-journey__stage-btn::before{ left: 50%; }
.modul-build-journey__stage:last-child .modul-build-journey__stage-btn::before{ right: 50%; }
.modul-build-journey__stage-fill{
  position: absolute; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--c-timber-dark);
  transition: width 420ms var(--ease-premium);
  z-index: 1;
}
.modul-build-journey__stage:first-child .modul-build-journey__stage-fill{ left: 50%; }

.modul-build-journey__stage-num{
  position: relative; z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 0.95rem;
  color: var(--c-ink-faint);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  margin-top: -16px;
  transition: color var(--dur-ui) var(--ease-premium), border-color var(--dur-ui) var(--ease-premium), background var(--dur-ui) var(--ease-premium), transform var(--dur-ui) var(--ease-premium);
}
.modul-build-journey__stage-label{ display: flex; flex-direction: column; gap: 0.15rem; padding-right: 0.75rem; }
.modul-build-journey__stage-label-title{
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-small);
  color: var(--c-ink); letter-spacing: 0.01em;
}
.modul-build-journey__stage-label-sub{
  font-size: 0.78rem; color: var(--c-ink-faint); line-height: 1.35;
}

.modul-build-journey__stage[data-state="done"] .modul-build-journey__stage-num,
.modul-build-journey__stage[data-state="active"] .modul-build-journey__stage-num{
  color: var(--c-on-dark); background: var(--c-ink); border-color: var(--c-ink);
}
.modul-build-journey__stage[data-state="active"] .modul-build-journey__stage-num{
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--c-line);
}
.modul-build-journey__stage[data-state="active"] .modul-build-journey__stage-label-title{ color: var(--c-timber-dark); }
.modul-build-journey__stage-btn:hover .modul-build-journey__stage-num{ border-color: var(--c-ink); }

/* ---------- CTAs ---------- */
.modul-build-journey__actions{
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.modul-build-journey__final-cta{
  margin-top: var(--sp-3);
  display: none;
  align-items: center; flex-wrap: wrap; gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
}
.modul-build-journey__final-cta[data-visible="true"]{ display: flex; }
.modul-build-journey__final-cta p{ margin: 0; font-weight: 600; color: var(--c-ink); flex: 1 1 220px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .modul-build-journey__timeline{ grid-template-columns: repeat(3, 1fr); row-gap: var(--sp-3); }
}
@media (max-width: 640px){
  .modul-build-journey__timeline{
    display: flex; overflow-x: auto; scroll-snap-type: x proximity;
    gap: var(--sp-3); padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .modul-build-journey__stage{ flex: 0 0 46%; scroll-snap-align: start; }
  .modul-build-journey__nav-btn{ width: 36px; height: 36px; }
  .modul-build-journey__stage-title{ font-size: 1.3rem; }
}