/* cl-home.css: the home in ACT's look (templates/home.html): the grey shipping line, the white red-ruled card
   that holds the vehicle band, and the grey category band with its tiles and View All. Measured on advancedclutch.com's home at 1440 and in its 390px phone stage.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.ac-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }

.ac-notice { padding: 9px 20px; background: var(--site-notice-bg); text-align: center; font: 600 14px/24px var(--site-font-body); color: var(--site-fg); }
.ac-notice strong { font-weight: 700; color: var(--site-accent-ink); }

.ac-veh { padding-top: 30px; padding-bottom: 50px; }
/* the card reads heading then band, nothing blank around them */
.ac-veh__card { border-top: 2px solid var(--site-accent); background: var(--site-bg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
.ac-veh__h1 { padding: 24px 24px 20px; font: 700 26px/34px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }

.ac-sec { padding: 50px 0; background: var(--site-section-bg); }
.ac-sec__h { position: relative; margin-bottom: 20px; font: 700 16px/24px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }
.ac-sec__h::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--site-line); }
.ac-sec__h span { position: relative; padding: 0 10px; background: var(--site-section-bg); }

.ac-cats { min-height: 421px; padding-top: 68px; padding-bottom: 41px; }
.ac-cats__list { display: flex; justify-content: center; margin: 0 -10px; }
.ac-cats__list li { width: 180px; }
.ac-cats__tile { display: flex; flex-direction: column; align-items: center; padding: 0 10px 10px; text-align: center; }
.ac-cats__img { display: grid; place-items: center; width: 150px; height: 150px; background: var(--site-tile-plate); }
.ac-cats__img img { width: auto; height: auto; max-width: 150px; max-height: 150px; }
.ac-cats__label { font: 600 16px/24px var(--site-font-body); color: var(--site-accent-ink); }
.ac-cats__tile:hover .ac-cats__label { text-decoration: underline; }
.ac-cats__all { margin-top: 6px; text-align: center; }
.ac-grey { display: inline-flex; align-items: center; min-height: 54px; padding: 0 32px; background: var(--site-grey-bg); color: var(--site-fg); font: 600 14px/20px var(--site-font-button); text-transform: uppercase; }
.ac-grey:hover { background: var(--site-fg); color: var(--site-bg); }

@media (max-width: 979.98px) {
  .ac-notice { padding: 12px 16px; font-size: 14px; line-height: 21px; }
  .ac-veh { padding: 24px 16px; }
  /* the H1 at the landing pages' phone size (MOBILE-BRIEF rule 4) */
  .ac-veh__h1 { padding: 16px 16px 14px; font-size: 34px; line-height: 1.1; }
  .ac-sec { padding: 50px 10px; }
  .ac-cats__list { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
  .ac-cats__list li { width: auto; }
  .ac-cats__tile { padding: 0 10px; }
}

}

/* the 404 (templates/404.html): its H1 at the landing pages' size, 16px gutters on a phone */
@layer site {
.ac-404 .ac-sec__h { font-size: 40px; line-height: 1.1; }
.ac-404__text { margin: 10px 0 24px; text-align: center; font: 400 16px/24px var(--site-font-body); }
.ac-404__home { text-align: center; }
@media (max-width: 979.98px) {
  .ac-404 .ac-sec { padding: 40px 0; }
  .ac-404 .ac-wrap { padding: 0 16px; }
  .ac-404 .ac-sec__h { font-size: 34px; }
  .ac-404 .ac-sec__h span { padding-left: 0; }
  .ac-404__text { font-size: 15px; }
}
}