/* =====================================================================
   index.html: the few rules that belong to the home page only (loaded after system.css)
   ===================================================================== */

/* facts bar: the two phone numbers are real tap targets (44px), not 24px text links */
.fact-tel a{display:inline-flex;align-items:center;min-height:44px}

/* the static SVG dial (JS off, or system.js never started): the dial is small on phones and tablets, so its decorative numerals
   (they would come out under 12px) are left off there; the ticks and the needle still draw the instrument */
@media (max-width:899px){.dial-static .nm{display:none}}
/* if system.js failed to load, the plain SVG dial is shown again (the inline script at the end of the page sets .sys-fail after 4.5s) */
html.js.sys-fail .dial-static{display:block}

/* phones: the first screen shows the booking button and the hours. The hours row is compact (both shifts on two short lines, the Friday chip beside them),
   and the tach shrinks with the screen height. A phone browser shows about 660px of the page (Safari on an iPhone), so on screens up to 780px tall the
   copy is tightened too and the tach may get down to a small gauge (56px radius: the logo and «جاهز» stay readable). */
@media (max-width:899px){
  .dial{--R:min(40cqw,200px)}
  @supports (height:100svh){
    .dial{--R:min(40cqw,200px,max(92px,calc((100svh - 600px) / 1.8)))}
  }
  .fact{padding:10px 16px}
  .fact:nth-child(2){padding-block:8px}
  .fact:nth-child(2) .fact-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px}
}
@media (max-width:400px){.fact-hr{font-size:17px!important}}
@media (max-width:899px) and (max-height:780px){
  .hero{padding-top:calc(var(--hdr) + 2px)}
  @supports (height:100svh){
    .dial{--R:min(40cqw,200px,max(56px,calc((100svh - 545px) / 1.8)))}
  }
  .hero-copy .eyebrow{margin-bottom:8px}
  .hero-h1{font-size:clamp(31px,9vw,36px);line-height:1.25}
  .lead{margin:10px 0 14px;font-size:16px;line-height:1.75}
  .cta-row .btn{min-height:46px}
  .hero > .facts{margin-top:10px}
}

/* reduced motion: the equipment names wrap inside the strip instead of running off both sides of it */
@media (prefers-reduced-motion:reduce){
  .tape-set{flex:0 1 auto;max-width:100%}
  .tape-set li{flex:0 1 auto}
}

/* the photo contact sheet on phones: every print keeps its own proportions (no cropping); two rows, each row one height */
@media (max-width:760px){
  .gal{display:flex;flex-wrap:wrap;gap:10px}
  .gal-i{--sum:1.3117;flex:0 0 calc((100% - 11px) * var(--ar) / var(--sum));aspect-ratio:var(--ar)}
  .gal-i:nth-child(n+3){--sum:2.0823}
}

/* the equipment rail on tablets and phones: seven equal tiles; the two long names wrap instead of stretching their own tile */
@media (max-width:900px){
  .rail-tabs button{grid-template-columns:minmax(0,1fr)}
  .rail-tabs button .lat{white-space:normal;text-align:center;line-height:1.35;letter-spacing:.06em}
}
@media (min-width:621px) and (max-width:900px){
  .rail-tabs button{flex:1 0 88px}
}

/* the closing band: the home page already has its hero photograph in the cache, so it reuses it (the other pages load the small grey copies, see system.css) */
html:not(.js) .cta-bg::before,.cta.has-bg .cta-bg::before{background-image:url("assets/hero-drag-m.jpg")}
@media (min-width:900px){html:not(.js) .cta-bg::before,.cta.has-bg .cta-bg::before{background-image:url("assets/hero-drag.jpg")}}

/* the six-ways tiles: the photo is a dim backdrop that belongs to its tile (services: ASNU, equipment: Liqui Moly, packages / contact / gallery: the workshop
   itself, about: the hero car), framed on the part that reads. Every source is at least as wide as a tile on a phone or a laptop. */
.way:nth-child(3) .way-ph img{object-position:50% 40%}
.way:nth-child(5) .way-ph img{object-position:50% 56%}
.way:nth-child(6) .way-ph img{object-position:50% 52%}

/* the machine bench (tabs): the outlined ghost numeral stays in the empty corner beside the words (it is sized to the free width; where the free width is
   too small it is left out), and «كل المعدات» stays a visible link under the stage
   (system.css hides that link once the tabs take over, which left this section with no link to equipment.html) */
.bench.is-tabs .stn-ghost{font-size:clamp(96px,11.8vw,172px)}
@media (max-width:1150px){.bench.is-tabs .stn-ghost{display:none}}
.bench.is-tabs .bench-all{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:clamp(24px,3vw,40px);padding:0 22px;gap:12px;border:1px solid var(--line-c);font-size:var(--fs-3)}
.bench.is-tabs .bench-all .ic{width:20px;height:20px}