/* gba-rev2.css */
/*
 * ReV2 rules the native site needs that the imported stylesheet cannot carry.
 * Installed by configure-rev2-native-pages as a site stylesheet on all pages,
 * after the imported styles. Declarations are ReV2's (styles.css @ c38f87b)
 * unless a comment says otherwise. scripts/verify-css-coverage.mjs checks that
 * every ReV2 rule reaches the published CSS, here or in the imported styles.
 */

/*
 * Site Import keeps only rules whose classes appear in the imported HTML.
 * ReV2 set these classes from app.js; gba-native.js sets them now.
 */

/* New-car photos are zoomed in their cards. Photo fallbacks are never public. */
.vehicle-card__media--nuevo img:not(.is-fallback) {
  transform: scale(1.28);
}

.vehicle-card:hover .vehicle-card__media--nuevo img:not(.is-fallback) {
  transform: scale(1.31);
}

/* Active filter chips in the inventory results header. */
.filter-chip {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  color: #353d3b;
  background: #e6ecea;
  font-size: 0.73rem;
  font-weight: 700;
}

/* The vehicle a visitor came from, on /contacto?vehicle=<id>. */
.contact-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid rgb(10 120 153 / 24%);
  border-radius: var(--radius-card);
  background: rgb(10 120 153 / 7%);
}

.contact-context h2 {
  margin-bottom: 6px;
  font-size: 1.35rem;
}

.contact-context p {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 48rem) {
  .contact-context {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*
 * Brand pages alternate the photo side of each branch
 * (.branch-section--reverse on every second branch in ReV2). The branches are
 * siblings in the brand template's loop, so position does it without script.
 */
.branch-list .branch-section:nth-child(even) .branch-section__media {
  order: 2;
}

@media (max-width: 61.99rem) {
  .branch-list .branch-section:nth-child(even) .branch-section__media {
    order: initial;
  }
}

/*
 * Brand pages use ReV2's light header (.site-header--light). The header is the
 * site-wide template here, so the page is identified by its <main data-page>
 * (the template owns <body>); :has() avoids a dark-to-light flash.
 */
body:has(main[data-page="brand"]) .site-header {
  border-bottom-color: var(--border);
  background: rgb(255 255 255 / 96%);
}

body:has(main[data-page="brand"]) .site-header .site-header__link {
  color: var(--ink-soft);
}

body:has(main[data-page="brand"]) .site-header .site-header__link:hover {
  color: var(--ink);
}

body:has(main[data-page="brand"]) .site-header .site-header__link.is-active {
  color: var(--ink);
}

body:has(main[data-page="brand"]) .site-header .menu-button {
  border-color: var(--border);
  color: var(--ink);
}

body:has(main[data-page="brand"]) .site-header .button--pill-outline:hover {
  color: white;
}

@media (max-width: 61.99rem) {
  body:has(main[data-page="brand"]) .site-header .site-header__nav {
    background: white;
  }
}

/*
 * Not ReV2: Instatic paints a BlurHash colour behind every lazy JPEG (inline
 * style, hence !important). ReV2's vehicle photo frames are contain-fit, so
 * that colour stayed visible beside portrait photos; ReV2 shows the frame.
 */
.vehicle-card__media img,
.new-vehicle-stage__image,
.used-gallery__thumbnail img,
.used-gallery__main > img,
.related-vehicle__media img {
  background-image: none !important;
}