/* cl-home.css: Range Technology's home (templates/home.html), from their measurements (review/pages/home.json) at
   1440 and in the 390px phone stage, where --u (cl-site.css) is one stage pixel.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-bg); color: var(--site-fg); }
.cl-home__wrap { max-width: var(--site-max); margin: 0 auto; padding: 15px 0; }
.cl-home__wide { width: 100%; height: auto; }
.cl-home__h { padding-left: 12px; border-left: 5px solid var(--site-accent); font: 600 20px/30px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

/* their blue strip and the first slides of their card slider: on desktop the first two side by side, sized to the
   page (the third leads where they do); on phones a row the shopper swipes, clipped to the page */
.cl-home__strip { height: 28px; overflow: hidden; }
/* their strip fades to white under its teal line: on the dark page the fade goes to the page instead */
:root[data-parts-theme="dark"] .cl-home__strip img { -webkit-mask-image: linear-gradient(#000 25%, transparent 60%); mask-image: linear-gradient(#000 25%, transparent 60%); }
.cl-home__slides { display: grid; grid-template-columns: repeat(2, minmax(0, 634px)); justify-content: center; gap: 12px; padding: 12px; overflow: hidden; }
.cl-home__slide { display: block; min-width: 0; aspect-ratio: 634 / 250; }
.cl-home__slide:nth-child(n+3) { display: none; }
.cl-home__slide-img { width: 100%; height: 100%; object-fit: cover; }

/* who sells the store, under the slides */
.cl-home__seller { max-width: var(--site-max); margin: 0 auto; padding: 4px 16px 12px; text-align: center; font: 600 16px/22px var(--site-font-body); color: var(--site-ink); }

/* the kit's vehicle band, as tall as their Find Your Parts row */
.cl-home__band { min-height: 83px; }

/* the three promise cards */
.cl-home__promises { display: flex; justify-content: center; gap: 100px; padding: 15px 0; }
.cl-home__promise { display: flex; align-items: center; gap: 22px; width: 280px; height: 63px; padding: 0 20px 0 34px; box-shadow: var(--site-shadow); color: var(--site-fg); }
.cl-home__promise-icon { flex: none; width: 43px; height: 34px; color: var(--site-accent); }
.cl-home__promise-info { display: grid; }
.cl-home__promise-h { font: 700 22px/32px var(--site-font-heading); text-transform: uppercase; }
.cl-home__promise-t { font: 400 13px/17px var(--site-font-heading); text-transform: uppercase; }
.cl-home__promise-t.is-accent { color: var(--site-accent); }
a.cl-home__promise:hover .cl-home__promise-h { color: var(--site-accent); }

/* the category tiles */
.cl-home__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cl-home__tile { display: flex; flex-direction: column; align-items: center; height: 319px; padding: 36px 6px 0; background: var(--site-card); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.16); }
.cl-home__tile-img { display: flex; align-items: center; justify-content: center; width: 196px; max-width: 100%; height: 183px; background: var(--site-plate); }
.cl-home__tile-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-home__tile-t { display: flex; align-items: center; height: 63px; margin-top: 37px; font: 500 15.6px/1.3 var(--site-font-heading); text-transform: uppercase; text-align: center; color: var(--site-fg); }
.cl-home__tile:hover .cl-home__tile-t { color: var(--site-accent); }

/* the popular GM trucks, each a button posting its truck to the kit's /vehicle; the columns may shrink below a
   tile's text so the grid never pushes past the page */
.cl-home__trucks { padding-bottom: 15px; }
.cl-home__truck-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.cl-home__truck-form { height: 100%; }
.cl-home__truck { display: flex; align-items: center; width: 100%; height: 156px; padding: 0 16px; gap: 8px; background: var(--site-tile); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.16); border-radius: var(--site-radius); cursor: pointer; }
.cl-home__truck:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
.cl-home__truck img { flex: none; width: 90px; height: auto; background: var(--site-plate); }
.cl-home__truck span { flex: 1; min-width: 0; font: 500 16px/24px var(--site-font-heading); text-transform: uppercase; text-align: center; color: var(--site-fg); }
.cl-home__truck:hover span { color: var(--site-accent); }

/* the dark row of our most popular parts, where their news slider sits: on desktop the 4 side by side within the
   page, on phones a row the shopper swipes */
.cl-home__hot { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-home__hot .cl-home__wrap { padding: 50px 0 20px; min-height: 536px; }
.cl-home__hot .cl-home__h { color: var(--site-dark-fg); }
.cl-home__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 76px 0 0; }
.cl-home__cards li { min-width: 0; }
.cl-home__card { display: flex; flex-direction: column; color: var(--site-dark-fg); }
.cl-home__card-img { display: flex; align-items: center; justify-content: center; height: 241px; padding: 16px; background: var(--site-photo); }
.cl-home__card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cl-home__card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 20px; font: 400 16px/22px var(--site-font-heading); text-transform: uppercase; }
.cl-home__card-price { margin-top: 12px; font: 700 16px/22px var(--site-font-body); }
.cl-home__card-price s { font-weight: 400; }
.cl-home__card:hover .cl-home__card-title { text-decoration: underline; }

/* the support box */
.cl-home__support { padding: 15px 0; }
.cl-home__support-in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 170px; padding: 30px; background: var(--site-soft);
  box-shadow: inset 0 0 0 30px var(--site-bg), 0 0.5px 0 rgba(0, 0, 0, 0.16); text-align: center; font: 400 13px/17px var(--site-font-body); }
.cl-home__support-h { padding-bottom: 1px; border-bottom: 1px solid var(--site-rule-mid); font: 700 18px/24px var(--site-font-body); }
.cl-home__support-in:hover .cl-home__support-h { color: var(--site-accent); }

/* ---------- phones: their phone home in the 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-home__wrap { padding: 15px calc(16 * var(--u)); }
  .cl-home__strip { height: auto; }
  .cl-home__band { min-height: 284px; }
  .cl-home__slides { display: flex; justify-content: flex-start; gap: calc(12 * var(--u)); height: calc(174 * var(--u)); padding: calc(12 * var(--u));
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: calc(12 * var(--u)); scrollbar-width: none; overscroll-behavior-x: contain; }
  .cl-home__slides::-webkit-scrollbar { display: none; }
  .cl-home__slide, .cl-home__slide:nth-child(n+3) { display: block; flex: none; width: calc(259 * var(--u)); height: calc(150 * var(--u)); aspect-ratio: auto; scroll-snap-align: start; }
  .cl-home__seller { padding: 4px 16px 12px; font-size: 15px; line-height: 21px; }

  .cl-home__promises { gap: calc(11 * var(--u)); padding: 15px calc(16 * var(--u)); }
  .cl-home__promises li { flex: 1; min-width: 0; }
  .cl-home__promise { flex-direction: column; justify-content: flex-start; gap: 4px; width: auto; height: 88px; padding: 6px 2px 0; text-align: center; }
  .cl-home__promise-icon { width: auto; height: 26px; }
  .cl-home__promise-h { font-size: 16px; line-height: 22px; }
  .cl-home__promise-t { font-size: 13px; line-height: 17px; }

  .cl-home__tiles { grid-template-columns: 1fr 1fr; }
  .cl-home__tile { height: calc(270 * var(--u)); padding: calc(12 * var(--u)) 4px 0; }
  .cl-home__tile-img { width: calc(135 * var(--u)); height: calc(183 * var(--u)); }
  .cl-home__tile-t { margin-top: calc(12 * var(--u)); height: 48px; font-size: 15px; }


  .cl-home__trucks { padding-bottom: 11px; }
  .cl-home__truck-list { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .cl-home__truck { height: 160px; padding: 0 4px; }
  .cl-home__truck img { width: calc(66 * var(--u)); }
  .cl-home__truck span { width: auto; flex: 1; font-size: 16px; }



  .cl-home__hot .cl-home__wrap { padding: 50px 0 20px calc(16 * var(--u)); min-height: 626px; }
  .cl-home__cards { display: flex; gap: 16px; margin: 112px 0 0; padding-right: calc(16 * var(--u)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-home__cards::-webkit-scrollbar { display: none; }
  .cl-home__cards li { flex: none; width: calc(333 * var(--u)); scroll-snap-align: start; }

  .cl-home__support-in { height: 170px; padding: 30px calc(46 * var(--u)); box-shadow: inset 0 0 0 30px var(--site-bg), 0 0.5px 0 rgba(0, 0, 0, 0.16); }
}

}