/* =====================================================================
   asnu.html: rules that belong to this machine page only (loaded after system.css)
   ===================================================================== */

/* tap targets: the breadcrumb links and the two phone numbers of the facts bar are at least 44px tall */
.crumbs{padding-block:0 18px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.fact-tel a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:640px){.crumbs{padding-block:0 4px}}

/* the first screen: a wider plate so the name, the buttons, the place and the hours all land on it (and the facts bar right below) */
@media (min-width:900px){
  .eq-hero{padding-bottom:clamp(28px,3vw,44px)}
  .eq-plate .plate{aspect-ratio:1.5/1}
}
@media (min-width:641px) and (max-width:899px){
  .eq-plate .plate{aspect-ratio:2/1}
}
@media (max-width:640px){
  .eq-plate{padding-top:20px}
  .eq-dim-h{top:2px}
  .eq-plate .plate{aspect-ratio:1.7/1}
  .eq-copy .hrs-mini{gap:4px 12px}
  .eq-copy .hrs-mini > .ic{display:none}
  .eq-copy .hrs-mini .tm{font-size:16px}
}

/* «شنو يسوي جهاز ASNU؟»: with two columns the third card takes the whole row (the hairline grid never shows an empty grey cell) */
@media (min-width:621px) and (max-width:1000px){
  .feat.feat-3 > .feat-i:last-child:nth-child(odd){grid-column:1/-1}
}

/* the rail of all seven machines: the resting thumbnails are lit enough to recognise; on a tablet all seven fit, on a phone the next one peeks in */
.eq-stations .plate.mini{filter:grayscale(.4) brightness(.85)}
@media (max-width:899px){
  .eq-stations a .lat{white-space:normal;text-align:center;line-height:1.35;letter-spacing:.06em}
}
@media (min-width:621px) and (max-width:899px){
  .eq-stations a{flex:1 0 88px}
}