/* cl-home.css: the home in ICON Vehicle Dynamics' look, measured on their home at 1440 and in the 390 stage
   (review/pages/home.json): dark bands (#000104, #141518) with Russo One uppercase headings, photo tiles with
   their label at the bottom left, white product cards, the grey ICON Tech band. Every rule in @layer site. */
@layer base, kit, site;

@layer site {

/* the content column: 1320 wide at 52 from the left in a 1440 window, as their page lays out beside its scrollbar */
.cl-wrap { width: min(var(--site-max), 100% - 2 * var(--site-gutter)); margin-left: max(var(--site-gutter), (100% - var(--site-max) - 16px) / 2); }
.cl-sec { padding: 60px 0 101px; }
.cl-sec--dark { background: var(--site-dark-2); color: var(--site-on-dark); }
.cl-sec--topo { background-color: var(--site-dark-2); background-size: cover; background-position: center; }
.cl-h2 { margin-bottom: 25px; font: 400 34px/40.8px var(--site-font-heading); letter-spacing: 1.7px; text-transform: uppercase; }
.cl-h2--center { text-align: center; }
.cl-h3 { font: 400 26px/33.8px var(--site-font-heading); letter-spacing: 1.56px; text-transform: uppercase; }

/* a row that scrolls sideways when it outgrows the page, as their sliders do */
.cl-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cl-row::-webkit-scrollbar { display: none; }
.cl-row > li { flex: none; scroll-snap-align: start; }

/* a photo tile: the picture under a light shade, the label at the bottom left */
.cl-tile { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--site-dark); color: var(--site-on-dark); }
.cl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cl-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .55) 100%); }
.cl-tile:hover img { transform: scale(1.04); }
.cl-tile__label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 20px; font: 400 26px/33.8px var(--site-font-heading); letter-spacing: 1.56px; text-transform: uppercase; }

/* the hero: their video behind a dark shade (the still as its poster, and alone under reduced motion), the heading,
   and the picker's panel at its foot, 594 high as theirs; on a phone the video is 293 high and the panel under it */
.cl-hero { position: relative; height: 594px; background: var(--site-dark); color: var(--site-on-dark); }
.cl-hero__media { position: absolute; inset: 0; overflow: hidden; }
.cl-hero__img, .cl-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 1, 4, .3); }
.cl-hero__in { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 40px; }
.cl-hero__h { max-width: 660px; margin-bottom: 89px; font: 400 42px/46.2px var(--site-font-heading); letter-spacing: 2.1px; text-transform: uppercase; }
.cl-hero__pick { padding: 30px 40px 45px; background: var(--site-dark); background-image: var(--site-topo); background-size: cover; background-position: center; }
@media (prefers-reduced-motion: reduce) {
  .cl-hero__video, .cl-duo__tile video { display: none; }
}

.cl-ride > li { width: 298px; height: 347px; }

/* the two tiles: two thirds and one third, 625 high */
.cl-duo { display: grid; grid-template-columns: 2fr 1fr; height: 625px; }
.cl-duo__tile { position: relative; display: block; overflow: hidden; background: var(--site-dark); color: var(--site-on-dark); }
.cl-duo__tile img, .cl-duo__tile video { width: 100%; height: 100%; object-fit: cover; }
.cl-duo__tile video { position: absolute; inset: 0; }
.cl-duo__text { position: absolute; z-index: 1; left: 40px; right: 40px; bottom: 40px; }
.cl-duo__tile:last-child .cl-duo__text { text-align: right; }
.cl-duo__kicker { display: block; font: 500 18px/25.2px var(--site-font-body); letter-spacing: 1.8px; text-transform: uppercase; }
.cl-duo__label { display: block; font: 400 42px/46.2px var(--site-font-heading); letter-spacing: 2.1px; text-transform: uppercase; }

/* Top Sellers: white cards with a thin border */
.cl-sellers__row { gap: 30px; }
.cl-card { width: 228px; height: 345px; border: 1px solid var(--site-raised-line); background: var(--site-raised); }
:root[data-parts-theme="dark"] .cl-card__img img { background: var(--site-plate); }
.cl-card a { display: flex; flex-direction: column; height: 100%; padding: 21px; }
.cl-card__img { display: block; height: 186px; }
.cl-card__img img { width: 100%; height: 100%; object-fit: contain; }
.cl-card__title { margin-top: 10px; font: 600 15px/21px var(--site-font-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cl-card__price { margin-top: auto; font: 400 18px/23.4px var(--site-font-heading); }
.cl-card a:hover .cl-card__title { text-decoration: underline; }

/* our tree's headings: a 4 by 2 grid of tiles */
.cl-parts { padding-bottom: 60px; }
.cl-parts__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 262px; gap: 10px; }
.cl-parts__grid .cl-tile__label { font-size: 22px; line-height: 28px; }

/* Suspension, Wheels, & Armor: three photo cards */
.cl-terrain { padding-bottom: 118px; }
.cl-terrain__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cl-more { font: 600 15px/18px var(--site-font-body); letter-spacing: 1.5px; text-transform: uppercase; }
.cl-more:hover, .cl-terrain__card:hover span { text-decoration: underline; }
.cl-terrain__row { gap: 30px; }
.cl-terrain__row > li { flex: 1 1 0; min-width: 0; }
.cl-terrain__card img { width: 100%; height: 280px; object-fit: cover; }
.cl-terrain__card span { display: block; margin-top: 15px; font: 600 18px/27.9px var(--site-font-body); }

@media (max-width: 979.98px) {
  .cl-sec { padding: 40px 0 60px; }
  .cl-h2 { margin-bottom: 20px; font-size: 24px; line-height: 29px; letter-spacing: 1.2px; }
  .cl-h3 { font-size: 20px; line-height: 26px; }
  .cl-tile__label { left: 15px; right: 15px; bottom: 15px; font-size: 20px; line-height: 26px; }
  .cl-hero { height: 685px; }
  .cl-hero__media { bottom: auto; height: 293px; }
  .cl-hero__in { width: 100%; margin: 0; padding: 0; justify-content: flex-start; }
  .cl-hero__h { height: 293px; margin: 0; padding: 0 15px 32px; display: flex; align-items: flex-end; font-size: 32px; line-height: 35px; letter-spacing: 1.6px; }
  .cl-hero__pick { flex: 1; padding: 25px; }
  .cl-ride > li { width: 196px; height: 228px; }
  .cl-sec--dark:not(.cl-parts) { padding-bottom: 66px; }
  .cl-duo { grid-template-columns: 1fr; height: auto; }
  .cl-duo__tile { height: 258px; }
  .cl-duo__tile:last-child { height: 390px; }
  .cl-duo__text { left: 20px; right: 20px; bottom: 20px; }
  .cl-duo__label { font-size: 32px; line-height: 35px; }
  .cl-sellers { padding-bottom: 66px; }
  .cl-sellers__row { gap: 16px; }
  .cl-card { width: 172px; height: 277px; }
  .cl-card a { padding: 11px; }
  .cl-card__img { height: 150px; }
  .cl-card__title { font-size: 13px; line-height: 18px; }
  .cl-parts { padding-bottom: 66px; }
  .cl-parts__grid { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, 175px); grid-auto-columns: 170px; overflow-x: auto; scrollbar-width: none; }
  .cl-parts__grid .cl-tile__label { font-size: 16px; line-height: 20px; }
  .cl-terrain { padding-bottom: 69px; }
  .cl-terrain__head { flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .cl-terrain__row { gap: 15px; }
  .cl-terrain__row > li { flex: none; width: 360px; }
  .cl-terrain__card img { height: 240px; }
  .cl-terrain__card span { height: 53px; }
}

}