/* cl-home.css: the home page (templates/home.html) in Superchips' look, every size measured on their home at 1440
   and in their 390px phone stage. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { display: block; }

/* their section heading: Oswald uppercase with a 5px bar on its left */
.cl-h { padding-left: 10px; border-left: 5px solid var(--site-fg); font: 600 20px/30px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-fg); }
.cl-h--dark { border-color: var(--site-dark-fg); color: var(--site-dark-fg); }

/* the hero: their wide photo, 141 to 495 on theirs; ours starts under the kit's vehicle band and keeps its foot */
.cl-hero { width: 100%; height: 323px; object-fit: cover; }

/* the slider's first slide: two banners from x=12, 634 wide at 1440, narrower with the window */
.cl-slides { display: grid; grid-template-columns: repeat(2, minmax(0, 634px)); gap: 12px; padding: 12px 12px 8px; }
.cl-slide, .cl-slide img { display: block; width: 100%; height: auto; }
.cl-slide img { aspect-ratio: 634 / 254; object-fit: cover; }

/* the strip under the slides: who sells, then the promise cards */
.cl-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 60px; min-height: 93px; padding: 15px var(--site-gutter); }
.cl-strip__seller { max-width: 400px; font: 600 18px/26px var(--site-font-body); color: var(--site-fg); }
.cl-promises { display: flex; justify-content: center; gap: 40px; }
.cl-promise {
  display: grid; grid-template-columns: 116px auto; grid-template-rows: auto auto; align-content: center; width: 280px; height: 63px;
  box-shadow: rgba(0, 0, 0, 0.15) 0 0 4px 0.5px; border-radius: var(--site-radius); color: var(--site-fg);
}
.cl-promise__icon { grid-row: 1 / 3; align-self: center; justify-self: center; }
.cl-promise__h { font: 700 22px/32px var(--site-font-heading); text-transform: uppercase; }
.cl-promise__t { font: 400 13px/17px var(--site-font-heading); text-transform: uppercase; }
.cl-promise__t--mail { text-transform: none; }
.cl-promise:hover .cl-promise__h { color: var(--site-accent); }

/* the tile rows: popular models and most popular */
.cl-tiles { min-height: 381px; padding: 29px var(--site-gutter) 0; }
.cl-tiles__row { display: grid; grid-template-columns: repeat(6, minmax(0, 209px)); gap: 10px; margin-top: 20px; padding-left: 5px; }
.cl-tile { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 273px; padding: 10px 10px 0; background: var(--site-card); color: var(--site-fg); }
.cl-tile__img { display: flex; background: var(--site-plate); align-items: center; justify-content: center; width: 100%; max-width: 169px; height: 192px; }
.cl-tile__img img { width: 85%; height: auto; max-height: 192px; object-fit: contain; mix-blend-mode: multiply; }
.cl-tile__label { margin-top: 10px; font: 500 15px/22px var(--site-font-heading); text-transform: uppercase; text-align: center; }
.cl-tile:hover .cl-tile__label { color: var(--site-accent); }

/* the bento: one tall banner and two short ones */
.cl-bento { display: grid; grid-template-columns: minmax(0, 756fr) minmax(0, 548fr); grid-template-rows: 266px 266px; gap: 8px; height: 570px; padding: 15px var(--site-gutter); }
.cl-bento__card { position: relative; background-size: cover; background-position: center; border-radius: var(--site-radius); }
.cl-bento__card--1 { grid-row: 1 / 3; }
.cl-bento__box { position: absolute; display: flex; flex-direction: column; }
.cl-bento__card--1 .cl-bento__box { right: 50px; top: 80px; width: min(454px, calc(100% - 100px)); height: 251px; align-items: center; padding-top: 30px; background: var(--site-veil); color: var(--site-fg); }
.cl-bento__card--2 .cl-bento__box, .cl-bento__card--3 .cl-bento__box { top: 39px; right: 37px; align-items: flex-end; text-align: right; color: var(--site-dark-fg); }
.cl-bento__title { font: 500 36px/53px var(--site-font-heading); text-transform: uppercase; }
.cl-bento__card--2 .cl-bento__title, .cl-bento__card--3 .cl-bento__title { font-size: 32px; line-height: 48px; }
.cl-bento__btn { width: 167px; min-height: 49px; margin-top: 46px; }
.cl-bento__card--2 .cl-bento__btn, .cl-bento__card--3 .cl-bento__btn { margin-top: 42px; }

/* the product comparison: their photo of the four tools over their table */
.cl-compare { padding: 15px var(--site-gutter) 15px; }
.cl-compare__img { width: 100%; height: 277px; margin-top: 20px; object-fit: cover; }
.cl-compare__wrap { margin-top: 50px; }
.cl-compare__table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 400 13px/17px var(--site-font-body); color: var(--site-fg); }
.cl-compare__table thead th { height: 31px; padding: 0 6px; background: var(--site-dark); color: var(--site-dark-fg); border: 1px solid var(--site-table-rule); font: 700 15px/18px var(--site-font-body); text-transform: uppercase; }
.cl-compare__table thead th:first-child { width: 769px; text-align: left; }
.cl-compare__table tbody th { padding: 0 6px; font-weight: 400; text-align: left; }
.cl-compare__table tbody th, .cl-compare__table td { height: 27px; border-right: 1px solid var(--site-table-rule); border-left: 1px solid var(--site-table-rule); }
.cl-compare__table tbody tr:nth-child(even) { background: var(--site-table-alt); }
.cl-compare__table tbody tr:last-child > * { border-bottom: 1px solid var(--site-table-rule); }
.cl-compare__table td { text-align: center; }
.cl-compare__check { display: inline-block; vertical-align: middle; color: var(--site-check); }

/* their full-width photo band */
.cl-feature {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 500px; padding: 0 var(--site-gutter) 57px;
  border-top: 15px solid var(--site-dark); background-color: var(--site-dark); background-size: cover; background-position: center; color: var(--site-dark-fg);
}
.cl-feature__h { font: 500 32px/47px var(--site-font-heading); text-transform: uppercase; }
.cl-feature__btn { width: 162px; min-height: 57px; margin-top: 20px; border-width: 3px; }

/* our part types in the black band where their blog posts run */
.cl-types { height: 430px; padding: 50px var(--site-gutter) 0; background: var(--site-dark); color: var(--site-dark-fg); }
.cl-types__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 20px; }
.cl-type {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 241px; padding: 24px;
  background: var(--site-footer-bg); border: 1px solid var(--site-dark-edge); color: var(--site-dark-fg);
}
.cl-type__label { font: 500 24px/32px var(--site-font-heading); text-transform: uppercase; }
.cl-type__go { flex: none; margin-bottom: 7px; }
.cl-type:hover { border-color: var(--site-accent); }
.cl-type:hover .cl-type__go { color: var(--site-accent); }

/* the dark theme: the promise cards' soft shadow is lost on the dark page, so a rule draws them */
:root[data-parts-theme="dark"] .cl-promise { box-shadow: 0 0 0 1px var(--site-line); }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-hero { height: 128px; object-position: 20% 50%; }

  .cl-slides { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
  .cl-slide img { aspect-ratio: 518 / 300; }

  .cl-strip { flex-direction: column; align-items: stretch; gap: 12px; padding: 15px 16px; }
  .cl-strip__seller { max-width: none; font-size: 16px; line-height: 24px; text-align: center; }
  .cl-promises { gap: 11px; }
  .cl-promises li { flex: 1 1 0; min-width: 0; }
  .cl-promise { width: auto; height: 88px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 0 6px; }
  .cl-promise__icon { grid-row: auto; height: 22px; width: auto; }
  .cl-promise__h { font-size: 18px; line-height: 24px; }
  .cl-promise__t { font-size: 13px; overflow-wrap: anywhere; }

  .cl-tiles { min-height: 0; padding: 7px 0 24px; }
  .cl-tiles .cl-h { margin: 0 16px; }
  .cl-tiles__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; padding: 0 16px; }
  .cl-tile { height: auto; min-height: 220px; padding: 10px 8px 12px; }
  .cl-tile__img { max-width: 130px; height: 150px; }
  .cl-tile__img img { width: 112px; max-height: 150px; }

  .cl-bento { grid-template-columns: 1fr; grid-template-rows: 238px 238px 238px; gap: 4px; height: 755px; padding: 15px 16px 17px; }
  .cl-bento__card--1 { grid-row: auto; }
  .cl-bento__card--1 .cl-bento__box { left: auto; right: 21px; top: 24px; width: 179px; height: 124px; padding-top: 8px; }
  .cl-bento__card--2 .cl-bento__box, .cl-bento__card--3 .cl-bento__box { top: 34px; right: 30px; }
  .cl-bento__title, .cl-bento__card--2 .cl-bento__title, .cl-bento__card--3 .cl-bento__title { font-size: 22px; line-height: 30px; }
  .cl-bento__btn, .cl-bento__card--2 .cl-bento__btn, .cl-bento__card--3 .cl-bento__btn { width: auto; min-height: 40px; margin-top: 10px; padding: 0 14px; font-size: 13px; }

  .cl-compare { padding: 16px 16px 15px; }
  .cl-compare__img { display: none; }
  .cl-compare__wrap { margin-top: 20px; }
  .cl-compare__table { font-size: 13px; }
  .cl-compare__table thead th { height: 72px; padding: 4px; font: 600 13px/16px var(--site-font-heading); vertical-align: bottom; }
  .cl-compare__table thead th:first-child { width: auto; }
  .cl-compare__table thead th:not(:first-child) { width: 34px; padding: 6px 0; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; vertical-align: middle; }
  .cl-compare__table tbody th { height: auto; padding: 2px 4px; font-size: 13px; line-height: 16px; }
  .cl-compare__table td { height: auto; }
  .cl-compare__check { width: 14px; height: 14px; }

  .cl-feature { align-items: center; text-align: center; padding: 0 25px 57px; }
  .cl-feature__h { font-size: 30px; line-height: 45px; }

  .cl-types { height: 258px; padding: 40px 16px 0; }
  .cl-types__row { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .cl-type { align-items: center; height: 72px; padding: 8px 12px; }
  .cl-type__label { font-size: 16px; line-height: 20px; }
  .cl-type__go { margin: 0; }
}

}