/* Home process timeline (patterns/home-process.php). Loaded only on pages with a block of class "hm-process".
   Steps are numbered by a CSS counter (add or remove a step group and the numbers follow). The spine fill and the lit
   steps come from assets/js/sections/hm-process.js; without it (and in the editor) every picture card shows in full. */
.hm-process{
  --hm-process-num:44px;
  --hm-process-rail:56px;
  --hm-process-spine:2px;
  --hm-process-vig-w:260px;
  --hm-process-vig-w-s:250px;
  --hm-process-img-h:54px;
  --hm-process-pin:22px;
  --hm-process-chk:14px;
  --hm-process-chk-i:9px;
  --hm-process-bar-h:8px;
  --hm-process-bar-dur:1.2s;
  --hm-process-dim:.35;
  --hm-process-line:1px;
  --hm-process-tree-gap:5px;
  --hm-process-chk-gap:7px;
  --hm-process-branch-y:.75em;
  --hm-process-z-num:1;
  --hm-process-z-under:-1;
}
.hm-process :is(.hm-process__tl,.hm-process__step,.hm-process__body,.hm-process__vig,.hm-process__img,.hm-process__score) > *{margin:0}

/* spine (::before) and its fill (::after, height set by the script) */
.hm-process__tl{--hm-process-fill:0%;position:relative;margin:0;display:grid;gap:var(--s-7);counter-reset:hm-process-step}
.hm-process__tl::before,.hm-process__tl::after{content:"";position:absolute;top:0;left:50%;width:var(--hm-process-spine);transform:translateX(-50%)}
.hm-process__tl::before{bottom:0;background:var(--rule)}
.hm-process__tl::after{height:var(--hm-process-fill);background:var(--accent-fill)}

.hm-process__step{display:grid;grid-template-columns:minmax(0,1fr) var(--hm-process-rail) minmax(0,1fr);align-items:center;gap:var(--s-5);counter-increment:hm-process-step}
.hm-process__step::before{content:counter(hm-process-step, decimal-leading-zero);position:relative;z-index:var(--hm-process-z-num);grid-column:2;grid-row:1;justify-self:center;display:grid;place-items:center;width:var(--hm-process-num);height:var(--hm-process-num);border:2px solid var(--rule);border-radius:50%;background:var(--paper);font:500 var(--t-s)/1 var(--font-mono);color:var(--ink-2);
  transition:border-color var(--dur-m) var(--ease-out),background-color var(--dur-m) var(--ease-out),color var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)}
.hm-process__step.is-lit::before{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent);transform:scale(1.08)}

.hm-process__body{display:grid;gap:var(--gap-text);grid-row:1}
.hm-process__body .mono{color:var(--accent)}
.hm-process__h{font-size:var(--t-xl)}
.hm-process__p{max-width:40ch;color:var(--ink-2)}
.hm-process__step:nth-child(odd) .hm-process__body{grid-column:1;text-align:right;justify-items:end}
.hm-process__step:nth-child(even) .hm-process__body{grid-column:3}

/* picture card next to each step */
.hm-process__vig{grid-row:1;display:grid;gap:var(--s-2);width:var(--hm-process-vig-w);max-width:100%;padding:var(--s-3) var(--s-4);transition:filter var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out)}
.hm-process__step:nth-child(odd) .hm-process__vig{grid-column:3;justify-self:start}
.hm-process__step:nth-child(even) .hm-process__vig{grid-column:1;justify-self:end}
.hm-process__tl.is-ready .hm-process__step:not(.is-lit) .hm-process__vig{filter:opacity(var(--hm-process-dim));transform:translateY(var(--s-2))} /* decoration (aria-hidden): no text contrast applies */
.hm-process__cap{font-size:var(--t-2xs);color:var(--ink-3)}
.hm-process :is(.hm-process__cal,.hm-process__handover,.hm-process__speed){--hm-process-vig-w:var(--hm-process-vig-w-s)}
.hm-process__vig .wp-block-list{margin:0;padding:0;list-style:none}
.hm-process__vig strong{font-weight:inherit}

/* 1 · call slot picker: the bold day and time are the chosen ones */
.hm-process__cal{padding:var(--s-3)}
.hm-process__days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-1);text-align:center}
.hm-process__days li{padding:var(--s-1) 0;border:1px solid var(--rule);border-radius:var(--r);font-size:var(--t-2xs)}
.hm-process__days li:has(> strong){border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.hm-process__times{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.hm-process__times li{padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--paper-2);font:500 var(--t-2xs)/1.2 var(--font-mono)}
.hm-process__times li:has(> strong){outline:1px solid var(--accent-fill);background:var(--accent-tint);color:var(--accent)}

/* 2 · site map (the kit's List › Tree style redrawn small; selectors outrank the kit's): italic words become tags */
.hm-process .hm-process__tree.is-style-tree{padding:0;border:0;font-size:var(--t-2xs)}
.hm-process .hm-process__tree.is-style-tree > li{padding:0;font-size:var(--t-xs);font-weight:600}
.hm-process .hm-process__tree.is-style-tree ul{display:grid;gap:var(--hm-process-tree-gap);margin:var(--hm-process-tree-gap) 0 0;padding:0 0 0 var(--s-4);border-left:1px solid var(--rule);list-style:none;font-size:var(--t-2xs);font-weight:400}
.hm-process .hm-process__tree.is-style-tree ul li{position:relative;display:flex;justify-content:space-between;gap:var(--s-2);padding:0}
.hm-process__tree ul li::before{content:"";position:absolute;top:var(--hm-process-branch-y);left:calc(var(--s-4) * -1);width:var(--s-3);height:var(--hm-process-line);background:var(--rule)}
.hm-process__tree em{padding:0 var(--s-1);border-radius:var(--r);background:var(--accent-tint);font-style:normal;font-family:var(--font-mono);color:var(--accent)}

/* 3 · draft page with a comment pin */
.hm-process__draft{position:relative;padding:var(--s-3)}
.hm-process__url{max-width:100%;overflow:hidden;padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--paper-2);font:500 var(--t-2xs)/1 var(--font-mono);white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.hm-process__draft-h{font:700 var(--t-s)/1.2 var(--font-display);color:var(--ink)}
.hm-process__img{position:relative;height:var(--hm-process-img-h);border-radius:var(--r);background:repeating-linear-gradient(135deg, var(--paper-3) 0 var(--s-2), var(--paper-2) var(--s-2) var(--s-4))}
.hm-process__draft-p{font-size:var(--t-2xs);color:var(--ink-3)}
.hm-process .hm-process__pin{position:absolute;top:var(--s-2);right:calc(var(--s-4) * -1);padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--ink);font-size:var(--t-2xs);white-space:nowrap;color:var(--paper)}
/* the bold number is the pin: a teardrop drawn behind it */
.hm-process__pin strong{position:absolute;top:0;right:calc(100% + var(--s-2));isolation:isolate;display:grid;place-items:center;width:var(--hm-process-pin);height:var(--hm-process-pin);font:600 var(--t-2xs)/1 var(--font-body);color:var(--on-accent)}
.hm-process__pin strong::before{content:"";position:absolute;inset:0;z-index:var(--hm-process-z-under);border-radius:50% 50% 50% 0;background:var(--accent-fill);transform:rotate(-45deg)}

/* 4 · handover slip (the kit's List › Checklist style with Digotech's round tick) */
.hm-process .hm-process__checks.is-style-checklist{display:grid;gap:var(--hm-process-chk-gap)}
.hm-process .hm-process__checks.is-style-checklist > li{position:relative;align-items:center;gap:var(--s-2)}
.hm-process .hm-process__checks.is-style-checklist > li::before{content:"";width:var(--hm-process-chk);height:var(--hm-process-chk);border-radius:50%;background:var(--accent-fill)}
.hm-process__checks li::after{content:"";position:absolute;top:50%;left:0;width:var(--hm-process-chk);height:var(--hm-process-chk);background:var(--on-accent);transform:translateY(-50%);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / var(--hm-process-chk-i) no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / var(--hm-process-chk-i) no-repeat}

/* 5 · speed score: track (::before) and rounded fill (::after) sized to the "x / y" score read by the script (full without it) */
.hm-process__score{--hm-process-score:100%;position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) 0}
.hm-process__score::before,.hm-process__score::after{content:"";height:var(--hm-process-bar-h);border-radius:var(--hm-process-bar-h)}
.hm-process__score::before{flex:0 0 100%;background:var(--paper-3)}
.hm-process__score::after{position:absolute;top:0;left:0;width:var(--hm-process-score);background:var(--accent-fill);transition:width var(--hm-process-bar-dur) var(--ease-out)}
.hm-process__tl.is-ready .hm-process__step:not(.is-lit) .hm-process__score::after{width:0}


@media (max-width: 767px){
  .hm-process__tl::before,.hm-process__tl::after{left:calc(var(--hm-process-num) / 2)}
  .hm-process__step{grid-template-columns:var(--hm-process-num) minmax(0,1fr);gap:var(--s-3) var(--s-4);align-items:start}
  .hm-process__step::before{grid-column:1}
  .hm-process__step:nth-child(n) .hm-process__body{grid-column:2;grid-row:1;text-align:left;justify-items:start}
  .hm-process__step:nth-child(n) .hm-process__vig{grid-column:2;grid-row:2;justify-self:start}
  .hm-process .hm-process__pin{right:var(--s-2)}
}
@media (prefers-reduced-motion: reduce){
  .hm-process__step::before,.hm-process__vig,.hm-process__score::after{transition:none}
}