/* cl-home.css: the home in kanseiwheels.com's look (templates/home.html), measured at 1440 and in their 390
   phone stage: full-bleed photo slabs with a heading and a white button low at the left, and the row of four
   wheel tiles. From 980px the header lies over the hero, transparent, as on theirs.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

@media (min-width: 980px) {
  .cl-home-page .cl-hd { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
  .cl-home-page .cl-hd__search { border-color: #FFFFFF; }
}

/* ---------- the slabs ---------- */
.cl-slab { position: relative; overflow: hidden; height: var(--h); background: #222222; }
.cl-slab__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cl-slab__copy { position: absolute; left: var(--x); bottom: var(--b); width: var(--w, auto); color: #FFFFFF; }
.cl-slab__h { font: 700 var(--fs)/1.2 var(--site-font-heading); letter-spacing: calc(var(--fs) * 0.05); text-transform: uppercase; }
.cl-slab__btn {
  display: inline-block; margin-top: 15px; padding: 15px 20px; background: #FFFFFF; color: #000000; border-radius: var(--site-radius);
  font: 400 13px/19.5px var(--site-font-button); letter-spacing: 0.975px; text-transform: uppercase; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-slab__btn:hover { background: #000000; color: #FFFFFF; }
.cl-slab--hero { --h: 810px; --x: 126px; --b: 153px; --fs: 35px; }
.cl-slab--goods { --h: 600px; --x: 126px; --b: 109px; --fs: 40px; }
.cl-slab--hero .cl-slab__img { object-position: 50% 30%; }

/* the kit's vehicle band along the foot of the hero; the pick button is the phone's */
.cl-home__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.cl-home__pick { display: none; }

/* ---------- the four wheel tiles ---------- */
.cl-tiles { padding: 30px 16px 60px; }
.cl-tiles__list { display: grid; grid-template-columns: repeat(4, 301px); gap: 30px; justify-content: center; }
.cl-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--site-card); }
.cl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cl-tile:hover img { transform: scale(1.03); }
.cl-tile__btn { position: absolute; left: 20px; bottom: 20px; margin: 0; }
.cl-tile:hover .cl-tile__btn { background: #000000; color: #FFFFFF; }

@media (max-width: 1379.98px) {
  .cl-tiles__list { grid-template-columns: repeat(4, minmax(0, 301px)); }
}

/* ---------- phones: the 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-slab__btn { margin-top: 15px; padding: 14px 16px; font-size: 12px; line-height: 19px; letter-spacing: 0.9px; }
  .cl-slab__h { line-height: 1.2; }
  .cl-slab--hero { --h: calc(56.25vw + 1px); --x: 26px; --b: 35px; --fs: 30px; overflow: visible; }
  .cl-slab--goods { --h: 400px; --x: 26px; --b: 71px; --fs: 34px; }
  .cl-slab--hero .cl-slab__btn { padding: 15px 16px; }
  .cl-slab--goods .cl-slab__img { object-position: 37% 50%; }

  /* the band folds behind the pick button at the top of the hero; opened, it drops over the page, opaque */
  .cl-home__band { top: 16px; bottom: auto; left: 26px; right: 16px; }
  .cl-js .cl-home__pick { display: inline-block; margin: 0; }
  .cl-js .cl-home__band:not(.is-open) .cl-home__fold { display: none; }
  .cl-js .cl-home__band.is-open .cl-home__fold { position: absolute; top: calc(100% + 8px); left: -26px; right: -16px; }

  .cl-tiles { padding: 30px 15px 59px 16px; }
  .cl-tiles__list { grid-template-columns: 1fr; }
  .cl-tile__btn { left: 20px; bottom: 20px; }
}

}