/* cl-home.css: Titan Fuel Tanks' home (templates/home.html), from their measurements at 1440 and in their 390px
   phone stage: the still of their slider, the grey Search By Vehicle box, the category squares, the paired
   banners, the rows of product cards and the part search.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-hero { position: relative; display: block; height: 578px; overflow: hidden; background: var(--site-hero-bg); }
.cl-hero img { width: 100%; height: 100%; object-fit: cover; }

.cl-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 34px; }
.cl-home__h { font: 500 40px/60px var(--site-font-heading); color: var(--site-fg); text-align: center; }
.cl-finder { padding-bottom: 0; }
.cl-finder .cl-home__h { height: 120px; }
.cl-finder__box { min-height: 136px; padding: 20px; background: var(--site-finder-bg); }
.cl-rule { height: 0; margin: 31px 0 7px; border: 0; border-top: 2px solid var(--site-rule); }
.cl-rule--wide { margin: 48px 10px 0; padding-bottom: 50px; }

.cl-cats { padding: 64px 0; }
.cl-cats .cl-home__h { height: 120px; }
.cl-cats__list { display: grid; grid-template-columns: repeat(5, 218px); gap: 128px 16px; }
.cl-cats__list a { display: flex; flex-direction: column; align-items: center; min-height: 268px; text-align: center; font: 500 16px/24px var(--site-font-body); letter-spacing: 4px; color: var(--site-fg); }
.cl-cats__list img { width: 180px; height: 180px; object-fit: cover; margin-bottom: 24px; }
.cl-cats__list a:hover span { color: var(--site-accent); }

.cl-banners { display: flex; gap: 16px; padding: 0 20px; }
.cl-banners__item { display: block; min-width: 0; }
.cl-banners__item img { width: 100%; height: 404px; object-fit: cover; }
.cl-banners__item:only-child { flex: 0 1 561px !important; margin: 0 auto; }

.cl-row { max-width: var(--site-max); margin: 48px auto 0; padding: 0 var(--site-gutter); }
.cl-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 148px; }
.cl-row__h { font: 500 40px/60px var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }
.cl-row__all { flex: none; font: 500 16px/24px var(--site-font-body); text-decoration: underline; text-underline-offset: 3px; }
.cl-row__all:hover { color: var(--site-accent); }
.cl-row__list { display: grid; grid-template-columns: repeat(4, 294px); justify-content: space-between; padding: 8px 0; }
.cl-card { display: flex; flex-direction: column; min-height: 650px; padding: 42px 30px 30px; background: var(--site-tile-bg); border: 1px solid var(--site-tile-line); }
.cl-card__img img { width: 234px; height: 234px; object-fit: contain; background: var(--site-photo-bg); }
.cl-card__name { margin-top: 40px; font: 500 15px/22px var(--site-font-body); color: var(--site-fg); }
.cl-card__name:hover { color: var(--site-accent); }
.cl-card__num { margin-top: 12px; font: 500 14px/20px var(--site-font-body); }
.cl-card__btn { align-self: flex-start; margin-top: auto; }
.cl-row--short .cl-card { min-height: 626px; }

.cl-lookup { min-height: 332px; margin-bottom: 16px; padding: 25px var(--site-gutter) 48px; }
.cl-lookup__form { display: flex; gap: 8px; max-width: 640px; margin: 32px auto 0; }
.cl-lookup__form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; background: var(--site-field-bg); border: 2px solid var(--site-field-line); border-radius: var(--site-radius); font: 500 16px/1 var(--site-font-body); }
.cl-lookup__form input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 0; }
.cl-lookup__form .cl-btn { min-height: 44px; min-width: 139px; }

@media (max-width: 979.98px) {
  .cl-hero { height: 460px; }
  .cl-wrap { padding: 0 34px; }
  .cl-home__h { font-size: 30px; line-height: 60px; }
  .cl-finder .cl-home__h, .cl-cats .cl-home__h { height: 60px; }
  .cl-finder__box { min-height: 74px; padding: 0; }
  .cl-cats { padding: 24px 0 40px; }
  .cl-cats__list { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 218px; gap: 76px 0; overflow-x: auto; scrollbar-width: none; margin: 0 -34px; padding: 0 34px; }
  .cl-cats__list a { min-height: 0; letter-spacing: 2px; font-size: 15px; line-height: 20px; }
  .cl-cats__list img { width: 100px; height: 100px; }
  .cl-banners { flex-direction: column; }
  .cl-banners__item { flex: none !important; }
  .cl-banners__item img { height: auto; }
  .cl-row { margin-top: 16px; padding: 0 44px; }
  .cl-row__head { min-height: 60px; }
  .cl-row__h { font-size: 20px; line-height: 28px; }
  .cl-row__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 294px; gap: 16px; overflow-x: auto; scrollbar-width: none; margin: 0 -44px; padding: 8px 48px; scroll-padding: 0 48px; scroll-snap-type: x mandatory; }
  .cl-card { min-height: 630px; scroll-snap-align: start; }
  .cl-rule--wide { margin: 16px 10px 0; padding-bottom: 50px; }
  .cl-lookup { min-height: 317px; padding: 25px 24px 32px; }
  .cl-lookup__h { line-height: 36px; }
  .cl-lookup__form { flex-direction: column; }
}

}