/* cl-home.css: ION Wheels's home (templates/home.html), from the boxes of their home at 1440 and in the 390 stage:
   the hero photo, the 3-column styles grid (2 on phones), the pink parallelogram
   and the two-tone heading over its red button. --hero-top takes the kit's vehicle band (80px at 1440) off the hero's top space,
   so the photo sits where theirs does under their header; on phones the band is 281px, and the hero's space gives
   it back.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { --hero-top: 75px; }
.cl-home__hero { padding: var(--hero-top) var(--site-gutter) 154px; }
.cl-home__hero img { width: 100%; max-width: var(--site-max); height: auto; aspect-ratio: 1348 / 614; object-fit: cover; margin: 0 auto; }

.cl-home__styles { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 48px var(--site-gutter) 84px; }
.cl-home__h img { width: 772px; height: 20px; object-fit: fill; filter: var(--site-heading-filter); }
.cl-home__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 31px; }
.cl-home__tile { display: block; text-align: center; color: var(--site-fg); }
.cl-home__tile img { width: 100%; height: auto; aspect-ratio: 1; background: var(--site-photo-plate); }
.cl-home__tile span { display: block; margin-top: 7px; font: 400 14px/28.9px var(--site-font-body); letter-spacing: .17px; }
.cl-home__tile:hover span { text-decoration: underline; }

.cl-home__shop { display: flex; justify-content: center; padding: 119px var(--site-gutter); }
.cl-home__para { display: flex; align-items: center; justify-content: center; width: 567px; height: 212px;
  background: var(--site-pink); transform: skewX(22deg); color: var(--site-pink-fg); transition: background-color .2s ease; }
.cl-home__para span { transform: skewX(-22deg); font: 400 34px/1 var(--site-font-heading); letter-spacing: .24em; text-transform: uppercase; }
.cl-home__para:hover { background: var(--site-red); color: var(--site-button-fg); }

.cl-home__ask { min-height: 561px; padding: 72px var(--site-gutter) 0; text-align: center; }
.cl-home__ask-h { font: 400 34px/1 var(--site-font-heading); letter-spacing: .22em; text-transform: uppercase; }
.cl-home__ask-h span { color: var(--site-red-text); }
.cl-home__ask-btn { margin-top: 10px; min-height: 40px; font-size: 17px; }

@media (max-width: 979.98px) {
  .cl-home { --hero-top: 0px; }
  .cl-home__hero { padding-bottom: 68px; }
  .cl-home__styles { padding: 44px var(--site-gutter) 65px; }
  .cl-home__h img { width: 100%; height: auto; }
  .cl-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 34px; }
  .cl-home__tile span { font-size: 14px; line-height: 27.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cl-home__shop { padding: 127px var(--site-gutter) 190px; }
  .cl-home__para { width: 281px; height: 105px; }
  .cl-home__para span { font-size: 22px; letter-spacing: .16em; }
  .cl-home__ask { min-height: 422px; padding-top: 154px; }
  .cl-home__ask-h { font-size: 26px; letter-spacing: .14em; }
}

}