/* cl-home.css: the home (templates/home.html) in tourenwheels.com's look, from their home's measurements at 1440 and
   in their 390 phone stage: the 600px slide, the vehicle search under its red tab, the section titles between two
   black rules, the Featured Wheels row, the three photo tiles, the full-width TR10 banner and our series row.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- the slide: their TR81, its name, finish and button at the right ---------- */
.cl-hero { position: relative; height: 600px; overflow: hidden; background: var(--site-hero-bg); }
.cl-hero__link { display: block; height: 100%; color: var(--site-hero-ink); }
.cl-hero__img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero__copy { position: absolute; top: 240px; left: 89.25%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; text-align: center; }
.cl-hero__title { font: 400 38px/44px var(--site-font-strip); text-transform: uppercase; }
.cl-hero__finish { margin-top: 2px; font: 400 18px/26px "Roboto Slab", Georgia, serif; }
.cl-hero__btn { margin-top: 16px; padding: 0 20px; border: 1px solid var(--site-hero-ink); font: 600 13px/32px var(--site-font-strip); text-transform: uppercase; }
.cl-hero__link:hover .cl-hero__btn { background: var(--site-hero-ink); color: var(--site-hero-ink-on); }

/* ---------- their vehicle search: the red tab over the black panel, the kit's band inside ---------- */
.cl-vs { max-width: 1250px; margin: 0 auto; padding: 30px 10px; }
.cl-vs__tab { display: flex; align-items: center; justify-content: center; width: 392px; height: 34px; background: var(--site-tab-bg); color: var(--site-tab-fg); font: 600 14px/14px var(--site-font-heading); text-transform: uppercase; }
.cl-vs__panel { min-height: 90px; background: var(--parts-band-bg); }

/* ---------- a section title: the words between two black rules ---------- */
.cl-title { display: flex; align-items: center; gap: 20px; padding: 0 12px; }
.cl-title::before, .cl-title::after { content: ""; flex: 1; border-top: 1px solid var(--site-rule); }
.cl-title__h { padding: 0 20px; color: var(--site-heading); font: 400 18px/26.4px var(--site-font-heading); text-transform: uppercase; white-space: nowrap; }
.cl-title__h strong { font-weight: 700; }

/* ---------- Featured Wheels: six wheels in view, the arrows step the row ---------- */
.cl-feat { padding-top: 1px; }
.cl-feat .cl-title { height: 55px; }
.cl-feat__row { position: relative; max-width: 1250px; height: 290px; margin: 0 auto; padding: 20px 35px 0; }
.cl-feat__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cl-feat__track::-webkit-scrollbar { display: none; }
.cl-feat__item { flex: 0 0 calc(100% / 6); scroll-snap-align: start; }
.cl-feat__card { display: flex; flex-direction: column; align-items: center; padding: 0 10px; text-align: center; }
.cl-feat__card img { width: 167px; height: 167px; object-fit: contain; background: var(--site-photo-bg); }
.cl-feat__name { margin-top: 0; color: var(--site-heading); font: 400 20px/28px var(--site-font-name); text-transform: uppercase; }
.cl-feat__finish { color: var(--site-heading); font: 500 12px/18px "Asap Condensed", var(--site-font-body); text-transform: uppercase; }
.cl-feat__card:hover .cl-feat__name { color: var(--site-accent-text); }
.cl-feat__arrow { position: absolute; top: 102px; display: grid; place-items: center; width: 40px; height: 40px; color: var(--site-ink); }
.cl-feat__arrow--prev { left: 7px; }
.cl-feat__arrow--next { right: 8px; }
.cl-feat__arrow:hover { color: var(--site-accent-text); }

/* ---------- the three photo tiles ---------- */
.cl-tiles { display: grid; grid-template-columns: repeat(3, 1fr); height: 358px; }
.cl-tiles__tile { display: block; padding: 10px; }
.cl-tiles__h { margin-bottom: 6px; color: var(--site-heading); font: 700 20px/26.4px var(--site-font-heading); text-transform: uppercase; }
.cl-tiles__tile img { width: 100%; height: 307px; object-fit: cover; }
.cl-tiles__tile:nth-child(2) img { height: 263px; }
.cl-tiles__tile:nth-child(3) img { height: 258px; }
.cl-tiles__tile img.is-contain { object-fit: contain; background: var(--site-photo-bg); }
.cl-tiles__tile:hover .cl-tiles__h { color: var(--site-accent-text); }

/* ---------- New Arrivals: the title, the TR10 banner across ---------- */
.cl-new .cl-title, .cl-series .cl-title { height: 71px; padding: 0 20px; }
.cl-new__banner img { width: 100%; height: auto; }

/* ---------- our series, where their Instagram feed sits ---------- */
.cl-series__list { max-width: 1250px; margin: 0 auto; padding: 20px 10px 52px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.cl-series__link { display: grid; place-items: center; height: 100px; border: 1px solid var(--site-line); color: var(--site-heading); font: 400 22px/1 var(--site-font-name); }
.cl-series__link:hover { border-color: var(--site-ink); color: var(--site-accent-text); }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-hero { height: 200px; }
  .cl-hero__copy { top: 96px; left: 72%; }
  .cl-hero__title { font-size: 18px; line-height: 24px; }
  .cl-hero__finish { font-size: 15px; line-height: 22px; }
  .cl-hero__btn { margin-top: 12px; font-size: 13px; line-height: 32px; padding: 0 22px; }

  .cl-vs { min-height: 438px; padding: 30px; }
  .cl-vs__tab { width: 100%; height: 48px; padding: 0 60px; text-align: center; line-height: 16px; }

  .cl-feat .cl-title, .cl-new .cl-title, .cl-series .cl-title { flex-direction: column; justify-content: center; gap: 35px; height: auto; padding: 35px 20px; }
  .cl-feat .cl-title { padding: 26px 12px; }
  .cl-title::before, .cl-title::after { flex: none; width: 100%; }
  .cl-feat__row { height: 374px; padding: 10px 55px 0; }
  .cl-feat__item { flex-basis: 100%; }
  .cl-feat__card img { width: 260px; height: 260px; }
  .cl-feat__name { font-size: 15px; line-height: 24px; }
  .cl-feat__arrow { top: 147px; width: 35px; height: 35px; }
  .cl-feat__arrow--prev { left: 25px; }
  .cl-feat__arrow--next { right: 25px; }

  .cl-tiles { grid-template-columns: 1fr; height: auto; }
  .cl-tiles__h { margin-bottom: 5px; font-size: 20px; line-height: 24px; }
  .cl-tiles__tile img { height: 247px; }
  .cl-tiles__tile:nth-child(2) img { height: 211px; }
  .cl-tiles__tile:nth-child(3) img { height: 208px; }

  .cl-series__list { grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 5px 20px 0; }
  .cl-series__link { height: 48px; font-size: 16px; }
}

}