/* cl-home.css: the home (templates/home.html) in Sinister Diesel's look, from their measurements: the hero still,
   the Shop by Truck panel holding the kit's vehicle band, the Categories grid of white square tiles, our part types
   in their panel, and their alternating brand bands with the gold rules. Every rule sits in @layer site. */
@layer base, kit, site;

@layer site {

/* hero: their 405px still from 980px, the whole photo on phones */
.cl-hero { display: block; height: 405px; background: #000000; }
.cl-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* their Shop by Truck panel: pale grey under a rule, the vehicle band inside */
.cl-truck { min-height: 151.4px; padding: 20px 154px; background: var(--site-panel); border-bottom: 1px solid var(--site-panel-line); }
.cl-truck__pick { display: none; }
.cl-truck__band { min-height: 110.4px; padding: 14px 0; background: var(--parts-band-bg); }

/* the shared section heading: Play capitals with their gold rule under it */
.cl-h { font: 700 28px/42px var(--site-font-heading); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-heading); text-align: center; }
.cl-types__h::after { content: ""; display: block; width: 48px; height: 3px; margin: 10px auto 0; background: var(--site-gold); }

/* Categories: 4 columns of 269.5px squares, 18px apart */
.cl-cats { width: 1132px; max-width: calc(100% - 32px); margin: 28px auto 0; }
.cl-cats__h { margin-bottom: 22px; }
.cl-cats__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cl-tile { display: block; background: #FFFFFF; border: 1px solid var(--site-tile-line); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.cl-tile:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
.cl-tile img { width: 100%; height: auto; aspect-ratio: 720 / 719; }
/* a tile of ours where theirs has none: the name in their tile capitals over a product photo of ours */
.cl-tile--named { position: relative; }
.cl-tile__name { position: absolute; top: 6%; left: 6%; right: 6%; font: 700 18px/22px var(--site-font-menu); letter-spacing: 0.5px; text-transform: uppercase; color: #111114; }
/* the grid's last place: our part search on a white tile */
.cl-find { display: flex; flex-direction: column; justify-content: center; gap: 14px; height: 100%; min-height: 269.3px; padding: 24px 20px; background: var(--site-surface); border: 1px solid var(--site-tile-line); }
.cl-find__h { font: 700 22px/28px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-heading); }
.cl-find__q { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: var(--site-field-bg); font: 400 16px/1 var(--site-font-body); color: var(--site-fg); }
.cl-find__q:focus { outline: 2px solid var(--site-accent-ink); outline-offset: -1px; }

/* our part types in the pale panel where their reviews sat, at its 544.1px so the bands below keep their places */
.cl-types { height: 544.1px; margin: 48px 16px 0; padding: 44px 130px 0; background: var(--site-panel); }
.cl-types__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; margin-top: 24px; }
.cl-types__list a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--site-surface); border: 1px solid var(--site-tile-line);
  font: 400 14px/18px var(--site-font-body); color: var(--site-fg); }
.cl-types__list a:hover { border-color: var(--site-accent-ink); color: var(--site-accent-ink); }

/* the brand bands: 402.9px, white and pale in turn, the photo 491px beside 573px of text, gold rules */
.cl-feat { margin: 0 16px; background: var(--site-surface); }
.cl-feat:nth-of-type(even) { background: var(--site-panel); }
.cl-feat__in { display: flex; align-items: center; gap: 52px; width: 1180px; max-width: 100%; height: 402.9px; margin: 0 auto; padding: 0 32px; }
.cl-feat__img { position: relative; flex: none; width: 491px; height: 306.9px; overflow: hidden; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.cl-feat__img img { width: 100%; height: 100%; object-fit: cover; }
.cl-feat__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px; background: var(--site-gold); }
.cl-feat__text { flex: 1; min-width: 0; }
.cl-feat__h { font: 700 20px/25px var(--site-font-heading); letter-spacing: 2px; text-transform: uppercase; color: var(--site-heading); }
.cl-feat__h::after { content: ""; display: block; width: 24px; height: 3px; margin: 9px 0 16px; background: var(--site-gold); }
.cl-feat__text p { font: 400 14px/24.92px var(--site-font-body); color: var(--site-text); }
.cl-feat__text p + p { margin-top: 12px; }
.cl-feat__link { color: var(--site-accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 979.98px) {
  .cl-hero { height: auto; }
  .cl-hero img { height: auto; aspect-ratio: 1600 / 640; }
  /* the band folds behind their blue Select Your Truck button */
  .cl-truck { min-height: 73px; padding: 14px 16px; }
  .cl-truck__pick { display: flex; align-items: center; width: 100%; height: 44px; padding: 0 12px; border-radius: 4px; background: var(--site-accent); color: #FFFFFF;
    font: 700 14px/16px var(--site-font-button); letter-spacing: 1px; text-transform: uppercase; }
  .cl-truck__pick::after { content: ""; margin-left: auto; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; }
  .cl-js .cl-truck:not(.is-open) .cl-truck__band { display: none; }
  .cl-truck__band { min-height: 0; margin-top: 14px; padding: 0; }

  .cl-h { font-size: 22px; line-height: 33px; }
  .cl-cats { width: 330px; max-width: calc(100% - 32px); margin-top: 22px; }
  .cl-cats__list li { min-width: 0; }
  .cl-cats__h { margin-bottom: 14px; }
  .cl-cats__list { grid-template-columns: 1fr; gap: 12px; }
  .cl-find { min-height: 329.7px; }

  /* their reviews carousel's 489.5px: the part types in 6 rows that scroll sideways inside the panel */
  .cl-types { height: 489.5px; margin: 36px 16px 0; padding: 32px 0 0; }
  .cl-types__list { grid-template-rows: repeat(6, auto); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 240px; gap: 8px 10px;
    margin-top: 20px; padding: 0 16px 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
  .cl-types__list li { scroll-snap-align: start; }

  .cl-feat__in { flex-direction: column; align-items: stretch; gap: 20px; height: auto; padding: 32px 16px; }
  .cl-feat__img { width: 100%; height: 142.6px; }
  .cl-feat__h { font-size: 17px; line-height: 21.25px; letter-spacing: 1px; }
}

}