/* Mobile containment fix for the press-and-hold process preview.
   Keeps the technical viewer fully inside the real mobile viewport without changing desktop. */

@media (max-width:640px){
  .process-preview-overlay{
    padding:16px;
    overflow:hidden;
    box-sizing:border-box;
  }

  .process-preview-frame{
    width:calc(100vw - 32px);
    max-width:520px;
    max-height:60vh;
    max-height:60dvh;
    margin-inline:auto;
    box-sizing:border-box;
    border-radius:18px;
  }

  .process-preview-image{
    width:100%;
    max-width:100%;
    max-height:56vh;
    max-height:56dvh;
    object-fit:contain;
    box-sizing:border-box;
  }

  .process-preview-placeholder{
    width:100%;
    min-height:48vh;
    min-height:48dvh;
    max-height:56vh;
    max-height:56dvh;
    padding:24px;
    box-sizing:border-box;
  }

  .process-preview-meta{
    left:10px;
    right:10px;
    bottom:10px;
    max-width:calc(100% - 20px);
    min-width:0;
    gap:10px;
    padding:12px 13px;
    box-sizing:border-box;
  }

  .process-preview-step{
    flex:0 0 auto;
    font-size:20px;
  }

  .process-preview-title{
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    font-size:clamp(18px,5.5vw,22px);
    line-height:.96;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .process-preview-state{
    display:none;
  }
}

@media (max-width:380px){
  .process-preview-overlay{padding:14px}
  .process-preview-frame{
    width:calc(100vw - 28px);
    border-radius:16px;
  }
  .process-preview-meta{
    left:8px;
    right:8px;
    bottom:8px;
    max-width:calc(100% - 16px);
    padding:11px 12px;
  }
  .process-preview-step{font-size:18px}
  .process-preview-title{font-size:18px}
}

/* Current RHD process references uploaded to assets/process.
   The accent is intentionally minimal: it signals that a visual is available
   without turning the 01–09 sequence into a photo gallery. */
.service-page .process-line--flow .process-step:nth-child(2),
.service-page .process-line--flow .process-step:nth-child(3),
.service-page .process-line--flow .process-step:nth-child(4),
.service-page .process-line--flow .process-step:nth-child(5),
.service-page .process-line--flow .process-step:nth-child(6),
.service-page .process-line--flow .process-step:nth-child(8){
  box-shadow:inset 0 -2px 0 rgba(197,19,25,.42);
}

/* Reference images use a neutral technical surface and contain-fit so vertical,
   square and horizontal photos remain fully readable instead of being cropped. */
.process-preview-frame{
  background:#f4f4f1;
}
.process-preview-image{
  object-fit:contain;
  object-position:center;
  background:#f4f4f1;
}