/* =====================================================================
   page-dpf.css: the DPF Cleaning Station page only. Tokens and parts come from system.css; nothing here is used by another page.
   1 hero: the name as brand token + descriptor       2 the filter face: a drawing sheet with a scan line (before / after)
   ===================================================================== */

/* 1. hero: «DPF» is the big token, «Cleaning Station» sits under it, one step down */
.eq-name .l1{display:block}
.eq-name .l2{display:block;font-size:.42em;font-weight:400;color:var(--soft);line-height:1.25;margin-top:.16em;letter-spacing:.005em}
/* the studio shot is portrait: give the plate a squarer proportion so the machine is not a small island in a wide sheet */
.eq-dpf .eq-plate .plate{aspect-ratio:1.12/1}
@media (max-width:899px){.eq-dpf .eq-plate .plate{aspect-ratio:1.36/1}}
/* phones (390 x 844): machine, name, line, button, the place line and the hours line all sit on the first screen. The plate is a little shorter and the rhythm a little tighter to make room for the hours. */
@media (max-width:640px){
  .eq-dpf .eq-plate{padding-top:16px}
  .eq-dpf .eq-plate .plate{aspect-ratio:1.1/1}
  .eq-dpf .eq-plate .plate:not(.plate-crop) img{max-width:calc(100% - 40px);max-height:calc(100% - 36px)}
  .eq-dpf .eq-name .l2{font-size:.4em}
  .eq-dpf .eq-line{line-height:1.65}
  .eq-dpf .eq-hero{gap:12px}
  .eq-dpf .eq-copy{gap:9px}
  .eq-dpf .pb-foot{gap:4px 14px}
}
.eq-dpf .eq-line{text-wrap:balance}
/* the folio row never breaks: «02 / 07» stays whole and the category shrinks first (320 px) */
.eq-dpf .eq-idx .n{flex:none;white-space:nowrap}
.eq-dpf .eq-idx .t{min-width:0}
.eq-dpf .eq-idx .dl{flex:0 1 48px;min-width:14px}
/* prev / next on a phone: the device names are a little smaller so «LIQUI MOLY» / «ENGINE FLUSH» stay on one line */
@media (max-width:640px){.eq-dpf .eq-pn a b{font-size:clamp(16px,4.7vw,24px);gap:8px}.eq-dpf .eq-pn a .ic{width:20px;height:20px}}

/* tap targets: the two phone numbers in the facts bar get a 44 px box (side by side with a wide gap; stacked, 44 px apart, when the bar is narrow); the breadcrumb links get a 44 px hit area with no change in layout */
.eq-dpf .fact-tel{gap:0 22px}
.eq-dpf .fact-tel a{display:inline-flex;align-items:center;min-height:44px}
.eq-dpf .crumbs a{padding-block:10px;margin-block:-10px}
/* the facts bar is one column at 900 px and below: the hero above it already says where we are, so the place cell steps aside */
@media (max-width:900px){
  .eq-dpf .facts .fact:first-child{display:none}
  .eq-dpf .facts .fact:nth-child(2){border-top:0}
}
/* from 900 px up the hero corner already gives the place and the hours, so the facts bar carries only what is not there: the two labelled numbers (nothing is said twice on one screen) */
@media (min-width:900px){
  .eq-dpf .facts .fact:nth-child(-n+2){display:none}
  .eq-dpf .facts .fact:nth-child(3){border-inline-start:0;border-top:0}
}
@media (min-width:901px){.eq-dpf .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the two numbers are labelled («واتساب · اتصال» / «هاتف الكراج»): the label is the small line, the number is the thing you read and tap */
.eq-dpf .fact-t .fact-b b{font-size:var(--fs-3);font-weight:600;color:var(--soft)}
.eq-dpf .fact-t .fact-tel a{font-size:var(--fs-5);letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){.eq-dpf .up,html.js .eq-dpf .eq-rule .rail-car{animation:none}}

/* 2. the filter face */
.dpf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
.dpf-fig{min-width:0}
.dpf-sheet{--p:.5;position:relative;aspect-ratio:1.1/1;overflow:hidden;border:1px solid var(--line-2);border-bottom:0;cursor:default;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  --bc:rgba(79,200,232,.85);--bs:16px;
  background:
    linear-gradient(rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg,rgba(79,200,232,.07) 1px,transparent 1px) 0 0/24px 24px,
    radial-gradient(58% 62% at 50% 50%,#22323a 0%,#121a1e 58%,#0b0f11 100%)}
.dpf-layer{position:absolute;inset:0}
.dpf-layer svg{display:block;width:100%;height:100%}
/* cleaned = everything left of the line (the «after» chip is on the left, «before» on the right, like the valve slider) */
.dpf-clean{clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.dpf-line{position:absolute;z-index:3;top:0;bottom:0;left:calc(var(--p) * 100%);width:2px;margin-left:-1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),#fff 14%,#fff 86%,rgba(255,255,255,.35));box-shadow:0 0 14px rgba(79,200,232,.85),0 0 2px rgba(0,0,0,.6)}
.dpf-line::before{content:'';position:absolute;top:0;bottom:0;right:2px;width:min(130px,22%);background:linear-gradient(270deg,rgba(79,200,232,.28),transparent)}
.dpf-knob{display:none;position:absolute;z-index:4;top:50%;left:clamp(27px,calc(var(--p) * 100%),calc(100% - 27px));width:54px;height:54px;margin:-27px 0 0 -27px;place-items:center;color:var(--cyan);
  background:rgba(13,13,13,.82);border:1.5px solid var(--cyan);border-radius:50%;pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.55)}
.dpf-knob::before{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(79,200,232,.45)}
.dpf-knob .ic{width:24px;height:24px}
/* the drag handle, the cursor and the range control exist only once page-dpf.js is running (html.dpf-on); without it the sheet is a still 50 / 50 picture */
.dpf-on .dpf-sheet{cursor:ew-resize}
.dpf-on .dpf-knob{display:grid}
.dpf-on .dpf-sheet.is-drag{cursor:grabbing}
.dpf-sheet.is-drag .dpf-knob{transform:scale(.94)}
.dpf-sheet .ba-chip{top:34px}
/* it is a drawing, not a result: the sheet says so itself (the title block below says it again) */
.dpf-ill{position:absolute;z-index:3;right:12px;bottom:12px;padding:1px 12px 2px;background:rgba(13,13,13,.78);border:1px solid var(--line-2);color:var(--soft);font-weight:600;font-size:13px;line-height:1.7;pointer-events:none;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.dpf-sheet.hide-b .ba-chip-b,.dpf-sheet.hide-a .ba-chip-a{opacity:0;transform:translateY(-6px)}
.dpf-sheet .zn{color:rgba(214,244,255,.5)}
/* with the line at the left edge the round knob sits over the zone letters (A B C): they step aside while the line is that close (the script sets .lo) */
.dpf-sheet .zn-l{transition:opacity .25s}
.dpf-sheet.lo .zn-l{opacity:0}

/* the range input mirrors the drag on the sheet: keyboard, screen readers, and a bigger target than the line. Shown only when the script runs. */
.dpf-ctl{display:none;border:1px solid var(--line-2);border-bottom:0;padding:8px 18px 8px}
.dpf-on .dpf-ctl{display:grid;gap:6px}
.dpf-r{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:ew-resize;touch-action:pan-y}
.dpf-r:focus{outline:none}
.dpf-r:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dpf-r::-webkit-slider-runnable-track{height:22px;background:
  linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 10%) 0 50%/100% 12px no-repeat}
.dpf-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-2px;border-radius:50%;background:var(--cyan);border:3px solid #0d0d0d;box-shadow:0 0 0 1.5px var(--cyan)}
.dpf-r::-moz-range-track{height:22px;background:
  linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 10%) 0 50%/100% 12px no-repeat}
.dpf-r::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--cyan);border:3px solid #0d0d0d;box-shadow:0 0 0 1.5px var(--cyan)}
.dpf-hint{padding-bottom:4px}
.dpf-fig .tb{border-top:1px solid var(--line-2)}

/* the copy column: four actions as hairline cells, the approved sentence, the honest note */
.dpf-copy{display:grid;gap:24px;align-content:start;align-self:center;min-width:0}
.dpf-do .feat-i{padding:clamp(18px,2vw,26px);gap:8px}
.dpf-do .dpf-w{display:block;font-size:var(--fs-6);font-weight:700;line-height:1.35}
.dpf-say{color:#e6eaec;font-size:var(--fs-5);line-height:1.9;font-weight:400}
@media (max-width:899px){.dpf-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .dpf-sheet .ba-chip-a{left:32px}.dpf-sheet .ba-chip-b{right:14px}
  /* the filter face is drawn a little smaller so the «قبل» / «بعد» chips and the «رسم توضيحي» tag sit beside it, never on its rim */
  .dpf-layer{inset:22px 0 30px}
  .dpf-ill{bottom:6px;right:10px;font-size:12.5px;line-height:1.55}
}
@media (max-width:620px){.dpf-do.feat.feat-2{grid-template-columns:repeat(2,minmax(0,1fr))}.dpf-do .feat-ic{width:46px;height:46px}.dpf-do .feat-ic .ic{width:24px;height:24px}}