/* cl-home.css: the home in the look of RaceQuip's page on holley.com, measured at 1440 and in the 390 stage
   (review/pages/brands-racequip.json): the hero band, the promise cards, the
   category tiles and the black support band.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { padding-bottom: 30px; }
.cl-home > * { width: min(1312px, 100% - 2 * var(--site-gutter)); margin-left: auto; margin-right: auto; }

/* the hero: their driver photo on the left, our h1 on the red */
.cl-home > .cl-hero { width: 100%; height: 380px; display: flex; align-items: stretch; overflow: hidden;
  background: linear-gradient(90deg, #6E0000 0%, #A30006 30%, #E3030E 100%); color: var(--site-on-dark); }
.cl-hero__img { flex: none; width: auto; max-width: none; height: 100%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.cl-hero__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; padding: 0 64px 0 32px; }
.cl-hero__h { max-width: 720px; font: 700 64px/1.05 var(--site-font-heading); text-transform: uppercase; }
.cl-hero__btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; background: var(--site-dark); color: var(--site-on-dark); font: 500 16px/20px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__btn:hover { background: var(--site-on-dark); color: var(--site-dark); }

/* the three promise cards */
.cl-badges { padding: 29px 0; display: flex; justify-content: center; gap: 100px; }
.cl-badge { display: flex; align-items: center; gap: 22px; width: 280px; height: 63px; padding: 0 20px; background: var(--site-panel); box-shadow: rgba(0, 0, 0, .15) 0 0 4px .5px; }
.cl-badge__icon { flex: none; color: var(--site-accent); }
.cl-badge__text { display: grid; min-width: 0; }
.cl-badge__t { font: 700 22px/32px var(--site-font-heading); text-transform: uppercase; }
.cl-badge__l { font: 400 13px/18px var(--site-font-heading); text-transform: uppercase; overflow-wrap: anywhere; }
.cl-badge:hover .cl-badge__t { color: var(--site-accent-ink); }

/* the category tiles: six to a row, the rest centred */
.cl-home > .cl-tiles { width: min(1320px, 100% - 2 * var(--site-gutter)); }
.cl-tiles { padding: 29px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 3px; }
.cl-tiles > li { width: 217px; }
.cl-tile { display: flex; align-items: center; gap: 12px; height: 156px; padding: 0 16px; background: var(--site-panel); box-shadow: rgba(0, 0, 0, .15) 0 0 4px .5px; }
.cl-tile__img { flex: none; width: 72px; height: 90px; background: center / contain no-repeat; }
.cl-tile__label { font: 700 16px/24px var(--site-font-heading); text-transform: uppercase; }
.cl-tile:hover .cl-tile__label { color: var(--site-accent-ink); }

/* the black support band */
.cl-home > .cl-help { margin-top: 29px; margin-bottom: 29px; min-height: 161px; padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--site-help-bg); color: var(--site-on-dark); }
.cl-help__h { max-width: 490px; font: 400 34.88px/52px var(--site-font-heading); text-transform: uppercase; }
.cl-help__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 210px; min-height: 48px; padding: 0 20px; background: var(--site-help-btn); font: 400 14.4px/20px var(--site-font-body); }
.cl-help__btn:hover { background: var(--site-on-dark); color: var(--site-dark); }

@media (max-width: 979.98px) {
  .cl-home > .cl-hero { height: auto; min-height: 195px; }
  .cl-hero__img { width: 40%; height: auto; object-fit: cover; object-position: 30% 50%; }
  .cl-hero__body { gap: 14px; padding: 20px 16px 20px 0; }
  .cl-hero__h { font-size: 32px; }
  .cl-hero__btn { min-height: 40px; padding: 0 16px; font-size: 13px; }
  .cl-badges { padding: 8px 0; gap: 8px; }
  .cl-badges > li { flex: 1 1 0; min-width: 0; }
  .cl-badge { width: auto; height: 88px; padding: 6px 4px; flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .cl-badge__icon { height: 24px; width: auto; }
  .cl-badge__t { font-size: 15px; line-height: 20px; }
  .cl-badge__l { font-size: 13px; line-height: 16px; }
  .cl-tiles { padding: 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .cl-tiles > li { width: auto; }
  .cl-tile { padding: 0 10px; gap: 10px; }
  .cl-tile__img { width: 56px; }
  .cl-tile__label { font-size: 15px; line-height: 20px; }
  .cl-home > .cl-help { margin-top: 8px; margin-bottom: 8px; padding: 32px 16px; flex-direction: column; align-items: center; text-align: center; }
  .cl-help__h { font-size: 24px; line-height: 32px; }
  .cl-help__btn { width: 100%; min-width: 0; overflow-wrap: anywhere; }
}

}