/* cl-home.css: bankspower.ca's home (templates/home.html), measured on bankspower.com's (review/pages/home.json):
   a 1216px column, square cards with a hairline border, Acumin headings in caps.
   Every rule sits in @layer site (cl-site.css: the layer order); no rule names a kit class. */
@layer base, kit, site;

@layer site {

.bp-home { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-pad); }
.bp-home img { width: 100%; height: auto; }
.bp-h2 { font: 800 24px/33.6px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }
.bp-h4 { font: 800 20px/28px var(--site-font-heading); color: var(--site-fg); }

/* the vehicle search */
.bp-home__lead { display: flex; flex-direction: column; }
.bp-ymm { margin: 18px 0 12px; padding: 16px; border: 1px solid var(--site-line); }
.bp-ymm__h { margin-bottom: 14px; font: 700 28px/39.2px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

/* the category tiles */
.bp-cats { padding: 0 0 26px; }
.bp-cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 24px; margin-top: 24px; }
.bp-cat { display: flex; flex-direction: column; height: 100%; min-height: 244px; border: 1px solid var(--site-line); background: var(--site-bg); }
.bp-cat img { aspect-ratio: 1; object-fit: cover; }
.bp-cat__h { padding: 11px 8px 0; font: 700 16px/25px var(--site-font-body); color: var(--site-fg); }
.bp-cat:hover .bp-cat__h { color: var(--site-accent-ink); }
.bp-cats__all { display: none; }

/* the top parts */
.bp-top { padding: 10px 0 10px; }
.bp-top__h { font: 800 14px/22px var(--site-font-body); color: var(--site-fg); }
.bp-top__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 29px; margin-top: 30px; }
.bp-tile { display: block; text-align: center; }
.bp-tile img { aspect-ratio: 282 / 125; object-fit: cover; }
.bp-tile span { display: block; margin-top: 23px; min-height: 24px; font: 500 17px/20.4px var(--site-font-heading); color: var(--site-menu-fg); }
.bp-tile:hover span { color: var(--site-accent-ink); }

/* phones: 3 tiles a row, the top parts a swipe row */
@media (max-width: 979.98px) {
  .bp-ymm { margin: 20px 0 16px; padding: 0; border: 0; }
  .bp-ymm__h { margin-bottom: 8px; font-size: 22px; line-height: 28px; }
  .bp-h2 { font-size: 20px; line-height: 28px; }
  .bp-cats { padding: 18px 0 50px; }
  .bp-cats__grid { grid-template-columns: repeat(3, 1fr); gap: 20px 24px; margin-top: 24px; }
  .bp-cat { min-height: 0; }
  .bp-cats__all { display: block; margin-top: 50px; }
  .bp-cats__all .cl-btn { width: 100%; min-height: 48px; }
  .bp-cat__h { padding: 12px 8px 0; font-size: 13px; line-height: 19px; }
  .bp-top { padding: 8px 0 24px; }
  .bp-top__grid { display: flex; gap: 10px; margin: 30px calc(-1 * var(--site-pad)) 0; padding: 0 var(--site-pad); overflow-x: auto; scroll-snap-type: x mandatory; }
  .bp-top__grid li { flex: 0 0 86%; scroll-snap-align: start; }
}

}