/* Generated CSS bundle: home. */

/* Source: css/inquiry-form.css */
/* Shared inquiry components, outside page-specific typography. */
.contact-section [hidden]{display:none!important}
.inner-page main section.contact-section{scroll-margin-top:0}
.inner-page .contact-section .contact-visual h2{font-size:clamp(40px,4vw,60px);line-height:1.05;letter-spacing:-.05em}
.inner-page .contact-section .contact-panel .eyebrow{font-size:14px;letter-spacing:.18em}
.contact-section .inquiry-context{margin:20px 0 5px;padding:10px 12px;border-left:2px solid var(--red);background:#fff;color:var(--red);font-size:14px;line-height:1.65}
.contact-section .form-note{max-width:500px;margin-top:16px;font-size:14px;line-height:1.65}
@media(max-width:640px){.inner-page .contact-section .contact-visual h2{font-size:43px}}

/* Browsing pages reuse the homepage's compact CTA; the homepage stays hidden. */
.inner-page main .footer-cta h2{font-size:clamp(32px,3.5vw,48px);font-weight:700;line-height:1.17;letter-spacing:-.025em}
.inner-page main section.footer-cta{scroll-margin-top:0}
@media(max-width:640px){.inner-page main .footer-cta h2{font-size:30px;line-height:1.2;letter-spacing:-.03em}.inner-page .footer-cta p br{display:initial}}


/* Source: css/product-media.css */
/* One product-image display contract across Home, catalogues and details.
   Original assets and customer-sheet crop coordinates remain unchanged. */
:root { --product-media-ratio: 4 / 3; }

/* Homepage showroom and the two photographic product entrances. */
.showroom .model-image {
  height: auto;
  aspect-ratio: var(--product-media-ratio);
}
#products .vehicle-entry {
  min-height: 0;
  aspect-ratio: var(--product-media-ratio);
  container-type: inline-size;
}
#products .vehicle-entry-copy {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* Vehicle catalogue, parts entrance, main gallery and related products. */
.product-design-page .vehicle-card-photo,
.product-design-page .detail-main-photo,
.product-design-page .detail-thumbnails > button,
.product-design-page .related-product-photo {
  height: auto;
  aspect-ratio: var(--product-media-ratio);
}
.product-design-page .product-parts-photo {
  align-self: center;
  min-height: 0;
  height: auto;
  aspect-ratio: var(--product-media-ratio);
}
.product-design-page .detail-photo-story > img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--product-media-ratio);
  object-fit: cover;
}

/* Parts/modifications: preserve the approved main-gallery and card treatment. */
.component-page .component-card-photo > a,
.component-detail .component-main-media,
.component-detail .component-thumbnails > button {
  aspect-ratio: var(--product-media-ratio);
}
.component-product-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--product-media-ratio);
  container-type: inline-size;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}
.component-product-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}
.component-product-frame > .component-image-window {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  border: 0;
  width: max(100%, calc(var(--crop-ratio) * 75cqw));
}
.component-product-frame[data-fit="contain"] > .component-image-window {
  width: min(100%, calc(var(--crop-ratio) * 75cqw));
}

/* Large-image viewers also have a 4:3 display frame, with complete images.
   Limit the dialog width by available height so the frame fits short screens. */
.product-design-page .vehicle-gallery-dialog,
.component-detail .component-lightbox {
  width: min(1120px, calc(100% - 32px), calc((100dvh - 190px) * 4 / 3));
  max-height: calc(100dvh - 24px);
}
.product-design-page .gallery-dialog-stage,
.component-detail .component-lightbox-stage {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  aspect-ratio: var(--product-media-ratio);
  container-type: inline-size;
  overflow: hidden;
}
.product-design-page .gallery-dialog-stage > img,
.component-detail .component-lightbox-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.component-detail .component-lightbox-stage > .component-image-window {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(100%, calc(var(--crop-ratio) * 75cqw));
  margin: 0;
}

@media (min-width: 641px) and (max-width: 900px) {
  #products .vehicle-entry-copy { padding: 20px; }
  #products .vehicle-entry h4 {
    font-size: 28px;
    margin: 10px 0 18px;
  }
}

@media (max-width: 640px) {
  #products .vehicle-entry-copy { padding: 20px; }
  #products .vehicle-entry h4 {
    font-size: 29px;
    margin: 10px 0 20px;
  }
}


/* Source: css/news-dates.css */
.news-date {
  display: block;
  margin-top: 7px;
  color: #69767b;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.journal-article-meta > .news-date {
  margin-top: 0;
}