/* ==========================================================================
   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)}
}

/* --- Awning band: a full-bleed strip of the shop's actual sign, run above
   the gallery heading. Breaks out of .wrap with the standard full-bleed
   trick (works regardless of the wrap's own max-width/padding), capped to a
   short strip height and cropped with object-fit, gold hairlines top and
   bottom, caption in the same mono label style as the gallery captions. --- */
.awning{
  position:relative;
  left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;
  width:100vw;max-width:100vw;
  margin-bottom:var(--s6);
  border-top:1px solid rgba(233,196,74,.55);
  border-bottom:1px solid rgba(233,196,74,.55);
  background:var(--ink);
}
.awning img{display:block;width:100%;height:110px;object-fit:cover}
@media (min-width:768px){
  .awning img{height:200px}
}
.awning figcaption{
  padding:10px var(--gutter);
  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;
}