/* cl-home.css: Garrett's home (templates/home.html), from their measurements (review/pages/home.json): the 400px
   slide with our heading on the white left of the photo, the part cards in their news carousel's shape on #F8F8F8,
   the four photo tiles, the photo banner with the vehicle band in its white box, and the "Stay in touch" band. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* the slide: the photo fills the 400px band, their words sit at 120px on its white left */
.cl-gm-hero { position: relative; height: 400px; overflow: hidden; }
.cl-gm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; }
.cl-gm-hero__copy { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 756px; padding: 0 0 0 120px; }
.cl-gm-hero__h { font: 500 36px/39.6px var(--site-font-heading); color: var(--site-photo-ink); }
.cl-gm-hero__btn { align-self: flex-start; margin-top: 20px; min-height: 42px; }


/* part families in their news carousel: 288x440 white cards 30px apart, the row running off the right edge */
.cl-gm-fam { background: var(--site-wash); padding: 50px 0; }
.cl-gm-fam__h { font: 500 30px/33px var(--site-font-heading); letter-spacing: -0.7px; text-align: center; }
.cl-gm-fam__list { display: flex; gap: 30px; margin-top: 20px; padding: 30px 30px 90px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 30px; scrollbar-width: none; }
.cl-gm-fam__list li { flex: none; width: 288px; scroll-snap-align: start; }
.cl-gm-fam__card { display: flex; flex-direction: column; height: 440px; background: var(--site-bg); }
.cl-gm-fam__img { width: 288px; height: 162px; object-fit: contain; background: var(--site-photo); }
.cl-gm-fam__body { display: flex; flex-direction: column; padding: 30px; }
.cl-gm-fam__series { font: 700 12px/17.14px var(--site-font-body); }
.cl-gm-fam__title { min-height: 64.8px; margin-top: 20px; font: 700 18px/21.6px var(--site-font-heading); }
.cl-gm-fam__card:hover .cl-gm-fam__title { color: var(--site-red); }
.cl-gm-fam__text { margin-top: 20px; font: 400 16px/22.86px var(--site-font-body); }

/* four photo tiles under their 30% black veil, with a white button on each */
.cl-gm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 334px)); gap: 15px; justify-content: center; padding: 30px 16px 110px; }
.cl-gm-tile { position: relative; display: grid; place-items: center; height: 400px; }
.cl-gm-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-gm-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.cl-gm-tile__btn { z-index: 1; }
.cl-gm-tile__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 25px; background: var(--site-bg); font: 500 15px/20px var(--site-font-button); text-transform: uppercase; }
.cl-gm-tile__btn:hover { color: var(--site-red); }

/* a photo behind a band: the replacement banner and "Stay in touch" */
.cl-gm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* turbo replacement on their investor banner: words centred on the left, the vehicle band in their white box */
.cl-gm-replace { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 60px; min-height: 443px; margin-bottom: 51px; padding: 30px; }
.cl-gm-replace__bg { object-position: 50% 70%; }
.cl-gm-replace__copy { position: relative; flex: 0 1 900px; color: var(--site-photo-ink); }
.cl-gm-replace__h { font: 500 30px/33px var(--site-font-heading); }
.cl-gm-replace__text { margin-top: 15px; font: 400 16px/22.86px var(--site-font-body); }
.cl-gm-replace__btn { margin-top: 20px; min-height: 48px; }
.cl-gm-replace__box { position: relative; flex: none; display: flex; align-items: center; width: 420px; min-height: 383px; padding: 30px; background: var(--site-veil); }
.cl-gm-replace__box > * { width: 100%; }


/* stay in touch: the car photo with a white box over its right half */
.cl-gm-touch { position: relative; display: flex; justify-content: flex-end; height: 294px; padding: 67px 84px 0; }
.cl-gm-touch__bg { object-position: 0 50%; }
.cl-gm-touch__box { position: relative; align-self: flex-start; display: flex; flex-direction: column; align-items: center; width: 572px; padding: 30px; background: var(--site-veil); }
.cl-gm-touch__h { font: 500 30px/36px var(--site-font-heading); }
.cl-gm-touch__btn { margin-top: 16px; min-height: 48px; }

@media (max-width: 979.98px) {
  .cl-gm-hero { height: auto; }
  .cl-gm-hero__img { position: static; height: auto; aspect-ratio: 390 / 250; }
  .cl-gm-hero__copy { max-width: none; padding: 40px 16px 36px; }
  .cl-gm-hero__h { font-size: 30px; line-height: 36px; color: var(--site-fg); }  /* under the photo, on the page */
  .cl-gm-hero__btn { align-self: stretch; }
  .cl-gm-fam { padding: 30px 0 29px; }
  .cl-gm-fam__h { font-size: 26px; line-height: 26px; }
  .cl-gm-fam__list { margin-top: -9px; padding-bottom: 70px; }
  .cl-gm-fam__list li { width: 271px; }
  .cl-gm-fam__card { height: 405px; }
  .cl-gm-fam__img { width: 271px; height: 152px; }
  .cl-gm-fam__series { font-size: 13px; }
  .cl-gm-fam__title { min-height: 50px; }
  .cl-gm-tiles { grid-template-columns: minmax(0, 330px); padding: 30px 30px 80px; }
  .cl-gm-tile { height: 220px; }
  .cl-gm-tile__btn { min-height: 42px; }
  .cl-gm-replace { flex-direction: column; align-items: stretch; gap: 51px; padding: 30px; }
  .cl-gm-replace__copy { flex: none; }
  .cl-gm-replace__btn { align-self: flex-start; min-height: 42px; }
  .cl-gm-replace__box { width: auto; min-height: 384px; }
  .cl-gm-touch { justify-content: center; height: auto; min-height: 209px; padding: 30px; }
  .cl-gm-touch__box { width: 100%; }
  .cl-gm-touch__btn { min-height: 44px; }
}

/* the vehicle band's white box on desktop after kit 0.9.4 gave the band its three tabs (2026-10-30, as bakflip.ca
   13ac5b5d): the tabs on the heading row and Year, Make, Model and Go on a row of their own across the box. The 420px
   box left the form 0px and the fields ran off its right edge, so it widens to 620px (the copy beside it gives way),
   which gives the fields 132px as on bakflip. Layout only, the phone keeps the kit's own stack. These name kit classes
   (doctor check 13) until the kit's band stacks itself in a narrow box. */
@media (min-width: 980px) {
  .cl-gm-replace__box { width: min(620px, 50%); }
  .cl-gm-replace__box .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .cl-gm-replace__box .kit-band__panels { flex-basis: 100%; }
}

}

/* the hero at night: the photo's white left half under a dark panel cut on the photo's own slant, so the words sit
   on the dark page and the turbo keeps a white plate between the panel and the road; a phone's photo has no white */
@media (min-width: 980px) {
  :root[data-parts-theme="dark"] .cl-gm-hero::after { content: ""; position: absolute; inset: 0; background: var(--site-bg);
    clip-path: polygon(0 0, 914px 0, 746px 100%, 0 100%); }
  :root[data-parts-theme="dark"] .cl-gm-hero__copy { z-index: 1; }
  :root[data-parts-theme="dark"] .cl-gm-hero__h { color: var(--site-fg); }
}