/* cl-home.css: the home in ITP's look, from their measurements at 1440 and in the 390 stage
   (review/pages/home.json): the hero with the band, the two tiles and the fitment photo panel. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* the hero: their 715px still, the white and yellow headline, the band in a white bar 960 wide */
.cl-hero { height: 715px; padding-top: 240px; background: #3A3326 center / cover no-repeat; text-align: center; color: var(--site-chrome-fg); }
.cl-hero__h { display: flex; flex-direction: column; align-items: center; }
.cl-hero__label { font: 700 24px/30px var(--site-font-body); text-transform: uppercase; }
.cl-hero__big { font: 400 96px/120px var(--site-font-heading); text-transform: uppercase; color: var(--site-yellow); }
.cl-hero__find { width: 960px; max-width: 100%; margin: 60px auto 0; background: var(--site-bg); color: var(--site-fg); text-align: left; }
/* the band in their white fitment bar: the band tokens a site owns, set for this bar alone */
.cl-hero__find { --parts-band-bg: var(--site-find-bg); --parts-band-ink: var(--site-find-ink); --parts-band-edge: var(--site-find-bg);
  --parts-band-go: var(--site-yellow); --parts-band-go-hover: var(--site-yellow-hover); --parts-band-go-ink: var(--site-button-fg); }

/* the two tiles on their blue: the name in white with a chevron, the photo standing on the bottom edge */
.cl-tiles { display: grid; grid-template-columns: 1fr 1fr; background: var(--site-blue) 100% 100% / cover no-repeat; }
.cl-tile { height: 265px; padding-top: 35px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: var(--site-chrome-fg); }
.cl-tile__h { display: inline-flex; align-items: center; gap: 12px; font: 400 40px/50px var(--site-font-heading); text-transform: uppercase; }
.cl-tile__img { height: auto; }
.cl-tile:hover .cl-tile__h { color: var(--site-yellow); }

/* the fitment photo panel, a yellow button in the middle */
.cl-panels { display: grid; grid-template-columns: 1fr; }
.cl-panel { height: 600px; display: flex; align-items: center; justify-content: center; background: #333333 0 0 / cover no-repeat; }

@media (max-width: 979.98px) {
  .cl-hero { height: auto; min-height: 779px; padding: 199px 16px 40px; }
  .cl-hero__label { font-size: 18px; line-height: 22.5px; }
  .cl-hero__big { width: 205px; font-size: 48px; line-height: 61.6px; }
  .cl-hero__find { margin-top: 60px; }
  .cl-tiles { grid-template-columns: 1fr; }
  .cl-tile { height: 190px; padding: 30px 20px 0; }
  .cl-tile__h { font-size: 40px; }
  .cl-tile__img { width: 350px; }
  .cl-panel { height: 300px; }
}

}