/* ==========================================================================
   GR Auto Center Inc — v2 delta stylesheet
   Loaded ONLY on the v2 build, after styles.css. Contains nothing but the
   v2-specific overrides: the landscape hero crop on phones, the three-tile
   gallery, and the new awning-sign band. Do not duplicate rules that already
   live in styles.css — this file should stay small.
   ========================================================================== */

/* --- Hero: the new hero photo (hero-shop) is landscape, about 1.40:1, not
   the old storefront photo's portrait crop. On phones the base stylesheet
   locks the poster to aspect-ratio:1/1 with object-position:center top,
   framed for a tall photo; a landscape shot needs a shorter box and a lower
   focal point so the technicians and the car stay in frame. --- */
@media (max-width:719px){
  .hero__media{aspect-ratio:4/3}
  .hero__media img{object-position:center 55%}
}

/* --- Gallery: three tiles instead of four. A 2-column masonry leaves an
   awkward lone tile on the second row, so v2 runs all three across in one
   row on desktop; the mobile snap-scroll strip needs no change. --- */
@media (min-width:768px){
  .gal{grid-template-columns:repeat(3,1fr)}
}

/* --- The awning sign, in "Come by the garage" -----------------------------
   This is a photograph of the actual sign a driver is looking for, so it
   belongs beside the directions, directly above the schematic that tells them
   to look for the red awning — not at the top of the gallery, which is a
   section explicitly about the INSIDE of the shop.

   It used to be a full-bleed strip cropped hard with object-fit, and that
   crop cut the sign: it started mid-word and clipped the address off the
   right-hand end. The derivative is now cropped to the red band itself, whole,
   so nothing here crops it further — height:auto, and the whole sign is read.
   The crop deliberately stops short of the cream panel above it, which still
   carries the shop's retired phone number in foot-high digits. --- */
.awning{
  margin:0 0 var(--s4);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink);
  border:1px solid rgba(233,196,74,.5);
}
.awning img{display:block;width:100%;height:auto}
.awning figcaption{
  padding:10px 14px;
  background:var(--ink);color:var(--bone);
  font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;text-align:center;
}