/* cl-home.css: MAHLE's home (templates/home.html), from their measurements at 1440 and in the 390 phone stage:
   the 504px slide with its navy caption and the three cards in sky outlines. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-hm { padding-bottom: 56px; }

/* the slide */
.cl-hm-hero { position: relative; height: 504px; overflow: hidden; background: var(--site-bg); }
.cl-hm-hero__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }
.cl-hm-hero__panel { position: absolute; left: 0; bottom: 106px; max-width: 792px; padding: 0 34px 12px; background: var(--site-navy); color: var(--site-on-navy); }
.cl-hm-hero__h { font: 300 50px/58px var(--site-font-heading); }
.cl-hm-hero__link { display: inline-flex; align-items: center; gap: 22px; margin-top: 10px; font: 300 30px/39px var(--site-font-body); color: var(--site-accent); }
.cl-hm-hero__link .cl-hm-arrow { width: 13px; height: 24px; flex: none; }
.cl-hm-hero__link:hover { color: var(--site-on-navy); }

/* at night the slide's band is the page's near black and the photo, drawn on white, sits on its own white plate
   at the right, the navy caption over its edge as by day */
:root[data-parts-theme="dark"] .cl-hm-hero__img { position: absolute; top: 24px; right: 39px; width: 50%; height: calc(100% - 48px); object-position: 92% center; }

/* the vehicle band in the white gap under the slide */
.cl-hm-band { min-height: 120px; padding: 24px 0 0; }


/* the grid of three cards */
.cl-hm-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px 20px; }
.cl-hm-chev { position: absolute; right: 18px; bottom: 14px; color: var(--site-accent); }
.cl-hm-card { position: relative; display: block; min-height: 382px; border: 1px solid var(--site-accent); background: var(--site-bg); color: var(--site-fg); padding-bottom: 60px; }
.cl-hm-card__img { display: block; height: 202px; }
.cl-hm-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-hm-card__h { display: block; margin: 32px 37px 23px; font: 400 21px/24px var(--site-font-heading); }
.cl-hm-card:hover .cl-hm-card__h { color: var(--site-accent); }

@media (max-width: 979.98px) {
  .cl-hm { padding-bottom: 56px; }
  .cl-hm-hero { height: 420px; }
  .cl-hm-hero__img { object-position: 70% top; }
  :root[data-parts-theme="dark"] .cl-hm-hero__img { top: 16px; left: 16px; right: auto; width: calc(100% - 32px); height: 250px; object-position: 80% center; }
  .cl-hm-hero__panel { bottom: 30px; max-width: 214px; padding: 0 20px 12px 34px; }
  .cl-hm-hero__h { font-size: 26px; line-height: 32px; }
  .cl-hm-hero__link { gap: 12px; margin-top: 8px; font-size: 18px; line-height: 24px; align-items: flex-start; }
  .cl-hm-hero__link .cl-hm-arrow { width: 8px; height: 14px; margin-top: 5px; }
  .cl-hm-band { min-height: 0; padding: 0 0 26px; }
  .cl-hm-grid { grid-template-columns: 1fr; gap: 13px; padding: 0 15px; }
  .cl-hm-card { min-height: 0; }
  .cl-hm-card__img { height: 191px; }
  .cl-hm-card__h { margin: 46px 26px 16px; }
}

}