/* cl-home.css: the home in Mayhem Wheels' look, from their measurements at 1440 and in the 390 stage
   (review/pages/home.json): the full-width hero, the New Styles row, the band on their map, the Instagram
   heading and the two photo banners. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-hero img { width: 100%; height: auto; }

/* their section heading: white words in a black block on a 2px black rule across the page */
.cl-sechead { position: relative; display: flex; justify-content: center; }
.cl-sechead::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--site-fg); }
.cl-sechead__h { position: relative; padding: 16px 30px; background: var(--site-chrome-bg); color: var(--site-chrome-fg); font: 700 30px/30px var(--site-font-heading); text-transform: uppercase; }

/* New Styles: four wheels across the 1193px row of theirs, the rest a scroll away */
.cl-styles { padding: 48px 0; }
.cl-styles__row { max-width: 1273px; margin: 48px auto 0; padding: 0 40px; display: grid; grid-auto-flow: column; grid-auto-columns: 25%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.cl-styles__row > li { scroll-snap-align: start; padding: 0 10px 48px; }
.cl-wheel { display: block; text-align: center; }
.cl-wheel img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--cs-photo); }
.cl-wheel__name { margin-top: 16px; font: 700 25px/30px var(--site-font-heading); text-transform: uppercase; }
.cl-wheel__name span { color: var(--site-tan); }
.cl-wheel__finish { margin-top: 5px; font: 400 18px/24.75px var(--site-font-body); text-transform: uppercase; }
.cl-wheel:hover .cl-wheel__name { text-decoration: underline; text-underline-offset: 4px; }
.cl-styles__more { margin-top: 20px; text-align: center; }

/* the band on their locator map: the map behind, the white card where their Find a Dealer form sat */
.cl-finder { position: relative; padding: 80px 0; background: var(--site-tan); }
.cl-finder__in { position: relative; max-width: 1273px; height: 100%; margin: 0 auto; display: flex; align-items: center; }
.cl-finder__card { width: 573px; padding: 40px; background: var(--site-bg); box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); }

.cl-ghost { display: inline-flex; align-items: center; gap: 10px; min-height: 53px; padding: 0 30px; border: 2px solid var(--site-fg);
  font: 700 20px/20px var(--site-font-button); text-transform: uppercase; }
.cl-ghost:hover { background: var(--site-fg); color: var(--site-bg); }

/* the two photo banners, white words and an outlined button over each */
.cl-banners { display: grid; grid-template-columns: 1fr 1fr; }
.cl-banner { position: relative; display: block; height: 390px; overflow: hidden; color: var(--site-chrome-fg); }
.cl-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-banner__text { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 94px; text-align: center; }
.cl-banner__line { font: 700 45px/61.875px var(--site-font-heading); text-transform: uppercase; }
.cl-banner__go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 210px; height: 57px; margin-top: 20px;
  border: 2px solid var(--site-chrome-fg); font: 700 20px/20px var(--site-font-button); text-transform: uppercase; }
.cl-banner:hover .cl-banner__go { background: var(--site-chrome-fg); color: var(--site-chrome-bg); }

@media (max-width: 979.98px) {
  .cl-sechead__h { padding: 8px 16px; font-size: 20px; line-height: 20px; }
  .cl-styles { padding: 30px 0; }
  .cl-styles__row { margin-top: 30px; padding: 0 16px; grid-auto-columns: 50%; }
  .cl-styles__row > li { padding: 0 8px 20px; }
  .cl-wheel__name { margin-top: 12px; font-size: 18px; line-height: 22px; }
  .cl-wheel__finish { margin-top: 4px; font-size: 14px; line-height: 18px; }
  .cl-styles__more { margin-top: 10px; }
  .cl-finder { padding: 16px 0 0; }
  .cl-finder__in { display: block; padding: 0 16px 16px; }
  .cl-finder__card { width: auto; padding: 16px; box-shadow: none; }
  .cl-ghost { min-height: 44px; font-size: 16px; }
  .cl-banners { grid-template-columns: 1fr; }
  .cl-banner { height: 211px; }
  .cl-banner__text { padding-top: 50px; }
  .cl-banner__line { font-size: 20px; line-height: 27.5px; }
  .cl-banner__go { height: 40px; margin-top: 20px; font-size: 16px; }
}

/* the finder card on desktop as before kit 0.9.4 gave the band its three tabs (2026-10-30, as bakflip.ca 13ac5b5d):
   the tabs on the heading row and Year, Make, Model and Go on a row of their own across the card. On one row with
   the tabs the fields were 0px, and wrapped in the 573px card 109px, so the card widens to 640px for 132px fields
   as on bakflip. Layout only, the phone keeps the kit's own stack. These name kit classes (doctor check 13) until
   the kit's band stacks itself in a narrow box. */
@media (min-width: 980px) {
  .cl-finder__card { width: 640px; }
  .cl-finder__card .kit-band__row { flex-wrap: wrap; gap: 12px; }
  .cl-finder__card .kit-band__panels { flex-basis: 100%; }
}

}