/* cl-home.css: the home in ARB's look (review/pages/home.json): a 465px hero with the text on the left, the
   category tiles over the light angled lines, the Shop by Build row, the best sellers' tabs and cards, the featured
   products in their blog's frame and the two-up support band. Phones turn each row into a sideways scroll, as their
   sliders do. Every rule sits in @layer site. */
@layer base, kit, site;

@layer site {

.cl-home { --home-max: 1200px; }
.cl-row { display: flex; }
.cl-corner { position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background: linear-gradient(135deg, transparent 50%, var(--site-accent) 50%); color: var(--site-accent-fg); }
.cl-corner svg { position: absolute; right: 9px; bottom: 9px; }

/* the hero */
.cl-hero { position: relative; height: 465px; background: #000; color: var(--site-dark-fg); overflow: hidden; }
.cl-hero__media img { width: 100%; height: 465px; object-fit: cover; }
.cl-hero__body { position: absolute; left: 50px; top: 50%; transform: translateY(-50%); width: 541px; }
.cl-hero__h { font: 700 38px/41.04px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__btn { margin-top: 25px; }

/* the kit's vehicle band, where their vehicle picker sits */
.cl-home__band { box-shadow: 0 10px 20px rgba(0, 0, 0, .12); position: relative; z-index: 1; }

/* the category tiles */
.cl-cats { padding: 107px 15px 0; }
.cl-cats__in { position: relative; max-width: 1170px; margin: 0 auto; padding-top: 45px; }
.cl-cats__in::before { content: ""; position: absolute; left: 146px; top: 0; width: 878px; height: 350px; background: url("img/site/home/bg-angled-lines.png") repeat; }
.cl-cats__h { position: relative; margin: 8px 0 0 76px; font: 700 13px/15.99px var(--site-font-heading); letter-spacing: 2.3px; text-transform: uppercase; color: var(--site-dark); }
.cl-cats__list { position: relative; gap: 30px; margin-top: 50px; padding: 0 15px; }
.cl-cats__list li { flex: 0 0 263px; }
/* the night look: the small heading drawn in the header's near black turns to the page's ink */
:root[data-parts-theme="dark"] .cl-cats__h { color: var(--site-ink); }
.cl-cat { position: relative; display: block; height: 390px; background: var(--site-dark); overflow: hidden; }
.cl-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cl-cat:hover img { transform: scale(1.04); }
.cl-cat__name { position: absolute; left: 20px; right: 56px; bottom: 20px; font: 700 21px/23.94px var(--site-font-heading); text-transform: uppercase; color: var(--site-dark-fg); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* Shop by Build: a row of square photos running off the right edge */
.cl-veh { height: 385px; margin-top: 80px; }
.cl-veh__h { padding: 0 15px; font: 700 32px/33.6px var(--site-font-heading); text-transform: uppercase; color: var(--site-ink); }
.cl-veh__list { gap: 14px; margin-top: 19px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.cl-veh__list li { flex: 0 0 321px; }
.cl-veh__tile { position: relative; display: block; height: 321px; background: var(--site-dark); overflow: hidden; }
.cl-veh__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cl-veh__tile:hover img { transform: scale(1.04); }
.cl-veh__tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.cl-veh__name { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; font: 700 21px/23.94px var(--site-font-heading); text-transform: uppercase; color: var(--site-dark-fg); }

/* the best sellers */
.cl-best { max-width: 1200px; margin: 0 auto; padding: 85px 15px 49px; }
.cl-best__tabs { display: flex; flex-wrap: wrap; gap: 0 40px; border-bottom: 1px solid var(--site-line); }
.cl-best__tab { display: inline-flex; align-items: center; height: 44px; font: 700 17px/20.91px var(--site-font-heading); letter-spacing: 3px; text-transform: uppercase; color: var(--site-ink); border-bottom: 3px solid transparent; }
.cl-best__tab.is-current { border-bottom-color: var(--site-accent); }
a.cl-best__tab:hover { color: var(--site-accent); }
.cl-best__list { gap: 30px; margin-top: 53px; }
.cl-best__list li { flex: 0 0 270px; }
.cl-prod { position: relative; display: block; height: 100%; min-height: 420px; padding-bottom: 24px; background: var(--site-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.cl-prod img { width: 270px; height: 270px; object-fit: contain; }
.cl-prod__name { display: block; padding: 20px 20px 0; font: 700 20px/21px var(--site-font-heading); color: var(--site-ink); }
.cl-prod:hover .cl-prod__name { color: var(--site-accent); }
.cl-prod .cl-corner { width: 24px; height: 24px; background: linear-gradient(135deg, transparent 50%, var(--site-dark) 50%); }
.cl-prod .cl-corner svg { display: none; }

/* the featured products, two by two, each photo beside its name */
.cl-feat { max-width: 1200px; margin: 80px auto 0; padding: 0 15px; }
.cl-feat__h { padding-bottom: 25px; border-bottom: 1px solid var(--site-line); font: 700 38px/41.04px var(--site-font-heading); text-transform: uppercase; color: var(--site-ink); }
.cl-feat__list { display: grid; grid-template-columns: 1fr 1fr; gap: 52px 30px; margin-top: 30px; }
.cl-feat__item { display: grid; grid-template-columns: 305px 235px; gap: 30px; align-items: start; }
.cl-feat__body { display: block; }
.cl-feat__img { display: block; height: 345px; background: var(--site-dark); overflow: hidden; }
.cl-feat__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-feat__title { font: 700 21px/23.94px var(--site-font-heading); color: var(--site-ink); }
.cl-feat__item:hover .cl-feat__title { color: var(--site-accent); }

/* the support band */
.cl-support { display: grid; grid-template-columns: 1fr 1fr; margin-top: 101px; }
.cl-support__tile { position: relative; display: block; height: 425px; background: var(--site-dark); color: var(--site-dark-fg); overflow: hidden; }
.cl-support__tile img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: opacity .3s ease; }
.cl-support__tile:hover img { opacity: .6; }
.cl-support__body { position: absolute; left: 60px; right: 60px; bottom: 7px; }
.cl-support__h { display: block; font: 700 21px/23.94px var(--site-font-heading); text-transform: uppercase; }
.cl-support__p { display: block; margin-top: 4px; min-height: 53px; font: 400 17px/26.35px var(--site-font-body); }

/* phones: the hero's photo over a black text block, each row a sideways scroll */
@media (max-width: 979.98px) {
  .cl-hero { height: auto; }
  .cl-hero__media img { height: 237px; }
  .cl-hero__body { position: static; transform: none; width: auto; padding: 102px 20px 83px; }
  .cl-hero__h { font-size: 30px; line-height: 32.4px; }
  .cl-hero__btn { min-height: 44px; }
  .cl-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-row > li { scroll-snap-align: start; }
  .cl-cats { padding: 68px 0 0; }
  .cl-cats__in { padding: 40px 0 0; }
  .cl-cats__in::before { left: 40px; width: auto; right: 0; height: 260px; }
  .cl-cats__h { margin: 0 0 0 15px; font-size: 11px; line-height: 13.53px; }
  .cl-cats__list { gap: 14px; margin-top: 44px; padding: 0 15px 0 22px; scroll-padding-left: 22px; }
  .cl-cats__list li { flex-basis: 230px; }
  .cl-cat { height: 340px; }
  .cl-veh { height: 279px; margin-top: 44px; }
  .cl-veh__h { font-size: 25px; line-height: 26px; }
  .cl-veh__list { margin-top: 18px; scroll-padding-left: 14px; }
  .cl-veh__list li { flex-basis: 225px; }
  .cl-veh__tile { height: 225px; }
  .cl-best { padding: 44px 15px 0; }
  .cl-best__tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0 18px; scrollbar-width: none; }
  .cl-best__tab { flex: none; font-size: 13px; letter-spacing: 2px; }
  .cl-best__list { gap: 14px; margin-top: 50px; scroll-padding-left: 15px; }
  .cl-best__list li { flex-basis: 230px; }
  .cl-prod { min-height: 398px; }
  .cl-prod img { width: 230px; height: 230px; }
  .cl-prod__name { font-size: 18px; line-height: 20px; padding: 12px 12px 0; }
  .cl-feat { margin-top: 39px; }
  .cl-feat__h { padding-bottom: 13px; font-size: 30px; line-height: 32.4px; }
  .cl-feat__list { gap: 26px 14px; margin-top: 18px; }
  .cl-feat__item { display: block; }
  .cl-feat__img { height: 195px; }
  .cl-feat__title { margin-top: 14px; }
  .cl-support { grid-template-columns: 1fr; margin-top: 34px; }
  .cl-support__tile { height: 325px; }
  .cl-support__body { left: 30px; right: 30px; bottom: 30px; }
  .cl-support__p { min-height: 0; font-size: 16px; line-height: 24.8px; }
}

}