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

/* hero photo: the frame follows the photo (4:3, like the file), so nothing is stretched, blurred or padded; it is 680px wide and the column is never wider
   than that on a laptop. It sits in the middle of the copy column, the place / coordinates caption right under it. */
.c-hero-grid{align-items:center}
.site{align-self:center;grid-template-rows:auto auto}
.site-box{min-height:0;aspect-ratio:4/3;background:#0c0e0f}
.site-box img.site-main{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tb .nw{white-space:nowrap}
/* one column (tablet / phone): the photo never grows past its own 680px */
@media (max-width:900px){.site{max-width:680px;justify-self:center}}

/* short laptop screens: the three tap targets, the social row, the hours line and the place line still fit on the first screen */
@media (min-width:901px) and (max-height:760px){
  .c-hero{padding-top:calc(var(--hdr) + 10px);padding-bottom:28px}
  .c-copy{gap:10px}
  .c-copy h1{line-height:1.15}
  .tap{min-height:58px}
  .tap-t b{font-size:clamp(22px,2.1vw,28px)}
  .tap-t small{line-height:1.3}
  .soc-row a{min-height:50px;padding-block:4px}
}

/* the drawn map: the credit link and the slider are real tap targets (44px) */
.rt-attr{right:0;bottom:0;padding:24px 10px 6px}
.rt-scrub input{height:44px}

/* the live Google frame: on a touch screen it does not capture the page scroll (the button under it opens the full map) */
@media (pointer:coarse),(max-width:640px){
  .gm-box iframe{pointer-events:none}
}

/* the lead is one short sentence: two even lines on a phone, never a lonely «يرد عليك.» */
.c-copy .lead{text-wrap:balance}

/* route sheet: the garage tag is as wide as its own brand name («JMS Performance» is 98px at 12.5px; the old 31% width cut the «J» on every phone).
   It hangs from the lead line (its right edge is at 36.27% of the sheet), so it never grows past that edge. On the narrowest sheets (a 320px phone)
   the name breaks over two lines instead of running out of the drawing, the tag sits a little higher so it stays clear of the tag below it, and
   the tags lose their icons. */
.rt-sheet .rt-tag.g{width:max-content;max-width:calc(36.27cqw - 4px)}
@container (max-width:350px){
  .rt-sheet .rt-tag.g{padding-inline:6px}
}
@container (max-width:320px){
  .rt-sheet .rt-tag.g .nw{white-space:normal}
  .rt-sheet .rt-tag{font-size:12px}
  .rt-sheet .rt-tag.g{top:24%!important}
}
@container (max-width:300px){
  .rt-sheet .rt-tag .ic{display:none}
  .rt-sheet .rt-tag{padding-inline:7px}
}

/* DETAIL A: on a phone the garage tag stays clear of stop 5 (its name breaks over two lines when the frame is narrow); on the narrow desktop
   column (about 450px: a 1024px laptop) the right-hand tag hangs from the right edge instead of running past it */
@media (max-width:640px){
  .ins .rt-tag.g .nw{white-space:normal}
  .ins .rt-tag.g{max-width:calc(35.2cqw - 13px)}
}
@container (max-width:520px){
  .ins .rt-tag.r{left:auto!important;right:1.5%;transform:translate(0,-50%)}
}
@container (max-width:320px){
  .ins .rt-tag.r{top:72%!important}
}
@container (max-width:300px){
  .ins .rt-tag.g{top:50%!important}
}

/* the scrub slider: stops 2, 3 and 4 sit within 60px of each other at the end of the road, so they are small dots and show their number only while the
   car is at them; the start (1) and the arrival (5) always carry their number */
.rt-scrub-t i:nth-child(n+2):nth-child(-n+4){width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--mute);color:transparent;overflow:hidden}
.rt-scrub-t i:nth-child(n+2):nth-child(-n+4).now{width:auto;height:auto;margin-top:0;border-radius:0;background:none;color:var(--cyan);overflow:visible}