/* cl-home.css: Bully Dog's home (templates/home.html), measured on bullydog.com at 1440 and in the 390 phone
   stage: the 600px hero (their feature band's look, our h1 and line over their trucks photo), the 211x230 category tiles with red captions, the 450px feature bands with their dark
   gradient, the featured products and the red search band, 100px apart (60 on phones).
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {


.cl-hm-h { font: 400 36px/43.2px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

.cl-hm-cats { margin-top: 100px; margin-bottom: 100px; }
.cl-hm-cats__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 40px; padding-bottom: 22px; }
.cl-hm-cat { position: relative; display: block; height: 230px; background: var(--site-card); overflow: hidden; }
.cl-hm-cat img { width: 100%; height: 100%; object-fit: cover; }
.cl-hm-cat__label { position: absolute; left: 6px; right: 6px; bottom: 14px; display: flex; align-items: center; justify-content: center; min-height: 45px; padding: 6px 10px; background: var(--site-accent); color: var(--site-accent-fg); font: 400 18px/19px var(--site-font-body); text-transform: uppercase; text-align: center; }
.cl-hm-cat:hover .cl-hm-cat__label { background: var(--site-dark); }

.cl-hm-band { height: 450px; display: flex; align-items: center; color: var(--site-dark-fg); background: linear-gradient(90deg, rgba(0, 1, 4, 0.7) 43.61%, rgba(0, 1, 4, 0.21) 74.32%, rgba(0, 1, 4, 0.3) 87.74%), var(--band) center / cover no-repeat; }
.cl-hm-band--right { background-image: linear-gradient(270deg, rgba(0, 1, 4, 0.7) 43.61%, rgba(0, 1, 4, 0.21) 74.32%, rgba(0, 1, 4, 0.3) 87.74%), var(--band); }
.cl-hm-band > .cl-wrap { width: 100%; }
.cl-hm-band__body { max-width: 1107px; }
.cl-hm-band--right .cl-hm-band__body { margin-left: 607px; max-width: 440px; }
.cl-hm-band__h { font: 400 48px/57.6px var(--site-font-heading); text-transform: uppercase; color: var(--site-accent); }
.cl-hm-band__sub { margin-top: 7px; font: 400 24px/28.8px var(--site-font-heading); text-transform: uppercase; }
.cl-hm-band__text { margin-top: 20px; font: 300 18px/21.6px var(--site-font-body); }
.cl-hm-band__btn { margin-top: 30px; min-width: 170px; }
.cl-hm-hero { height: 600px; background: linear-gradient(90deg, rgba(0, 1, 4, 0.85) 0%, rgba(0, 1, 4, 0.75) 45%, rgba(0, 1, 4, 0.2) 80%), var(--band) center / cover no-repeat; }
.cl-hm-hero .cl-hm-band__body { max-width: 560px; }
.cl-hm-hero .cl-hm-band__h { font-size: 56px; line-height: 60px; color: var(--site-dark-fg); }
.cl-hm-hero .cl-hm-band__text { font-size: 22px; line-height: 26.4px; }

.cl-hm-feat { margin-top: 100px; margin-bottom: 100px; }
.cl-hm-feat__top { display: flex; align-items: center; justify-content: space-between; }
.cl-hm-feat__all { font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; text-decoration: underline; }
.cl-hm-feat__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px; padding-bottom: 22px; }
.cl-hm-prod { display: flex; flex-direction: column; min-height: 505px; padding: 10px 20px 30px; background: var(--site-bg); border: 1px solid var(--site-line); }
.cl-hm-prod__img img { width: 100%; height: 235px; object-fit: contain; }
.cl-hm-prod__name { margin-top: 20px; min-height: 65px; font: 400 18px/21.6px var(--site-font-body); }
.cl-hm-prod__num { margin-top: 10px; font: 400 18px/21.6px var(--site-font-body); }
.cl-hm-prod__btn { margin-top: auto; min-height: 40px; padding: 0 12px; font-size: 14px; line-height: 17px; }

.cl-hm-find { position: relative; padding: 60px 0; min-height: 311px; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hm-find__h { font: 400 48px/57.6px var(--site-font-heading); text-transform: uppercase; }
.cl-hm-find__sub { margin-top: 20px; font: 300 24px/28.8px var(--site-font-body); text-transform: uppercase; }
.cl-hm-find__form { display: flex; align-items: center; width: 385px; max-width: 100%; margin-top: 20px; border-bottom: 1px solid var(--site-accent-fg); }
.cl-hm-find__q { flex: 1; min-width: 0; height: 40px; padding: 0; background: transparent; border: 0; color: var(--site-accent-fg); font: 300 16px/1 var(--site-font-body); outline: 0; }
.cl-hm-find__q::placeholder { color: var(--site-accent-fg); opacity: 1; }
.cl-hm-find__go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }


@media (max-width: 979.98px) {
  .cl-hm-band.cl-hm-hero { height: auto; min-height: 340px; background: linear-gradient(rgba(0, 1, 4, 0.5), rgba(0, 1, 4, 0.8)), var(--band) 72% center / cover no-repeat; }
  .cl-hm-hero .cl-hm-band__h { font-size: 36px; line-height: 40px; }
  .cl-hm-hero .cl-hm-band__text { font-size: 18px; line-height: 21.6px; }
  .cl-hm-h { font-size: 24px; line-height: 29px; }
  .cl-hm-cats { margin-top: 60px; margin-bottom: 60px; }
  .cl-hm-cats__row, .cl-hm-feat__row { display: flex; gap: 20px; margin: 20px calc(-1 * var(--site-gutter)) 0; padding: 0 var(--site-gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-hm-cats__row > li, .cl-hm-feat__row > li { flex: 0 0 160px; scroll-snap-align: start; }
  .cl-hm-cat { height: 125px; }
  .cl-hm-cat__label { left: 4px; right: 4px; bottom: 8px; min-height: 36px; padding: 4px 6px; font-size: 14px; line-height: 16px; }
  .cl-hm-band { height: auto; min-height: 260px; padding: 37px 0; }
  .cl-hm-band--right .cl-hm-band__body { margin-left: 0; }
  .cl-hm-band__h { font-size: 32px; line-height: 38.4px; }
  .cl-hm-band__sub { margin-top: 6px; font-size: 18px; line-height: 21.6px; }
  .cl-hm-band__text { margin-top: 16px; font-size: 16px; line-height: 19.2px; }
  .cl-hm-band__btn { margin-top: 20px; }
  .cl-hm-feat { margin-top: 60px; margin-bottom: 60px; }
  .cl-hm-feat__all { display: none; }
  .cl-hm-prod { padding: 10px 12px 20px; }
  .cl-hm-prod__img img { height: 150px; }
  .cl-hm-prod__name { min-height: 58px; font-size: 16px; line-height: 19.2px; }
  .cl-hm-prod__num { font-size: 16px; line-height: 19.2px; }
  .cl-hm-prod { min-height: 0; }
  .cl-hm-prod__btn { margin-top: 40px; }
  .cl-hm-find { min-height: 240px; padding: 25px 0; }
  .cl-hm-find__h { font-size: 32px; line-height: 38.4px; }
  .cl-hm-find__sub { margin-top: 20px; font-size: 18px; line-height: 21.6px; }
}

}