/* cl-home.css: RECARO's home (templates/home.html), written from their measured home at 1440 and in their 390
   phone stage: their two-part headings (a Univers Light line over a Univers Bold capital line) and their red
   arrow links.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { display: flow-root; }

/* their two-part heading */
.cl-h { font: 400 36px/46.8px var(--site-font-heading); color: var(--site-ink); }
.cl-h strong { display: block; font: 400 36px/46.8px var(--site-font-bold); letter-spacing: -0.5px; text-transform: uppercase; }

/* ---------- hero: the first slide ---------- */
.cl-hero { position: relative; height: 550px; margin: 0 20px 20px; overflow: hidden; background: var(--site-dark); }
.cl-hero__img { width: 100%; height: 100%; object-fit: cover; }
.cl-hero__box { position: absolute; left: 80px; top: 135px; width: 620px; padding: 54px 50px 44px; background: rgba(0, 0, 0, 0.7); color: var(--site-dark-fg); }
.cl-hero__text { font: 400 36px/46.8px var(--site-font-body); }
.cl-hero__text strong { display: block; font: 400 36px/46.8px var(--site-font-bold); text-transform: uppercase; }
.cl-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 204px; height: 50px; margin-top: 32px;
  border: 1px dashed var(--site-dark-fg); color: var(--site-dark-fg); font: 400 16px/24px var(--site-font-bold); letter-spacing: 1.6px; text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-hero__btn:hover { background: var(--site-dark-fg); color: var(--site-dark); }

/* ---------- the store finder band, with our part search ---------- */
.cl-finder { position: relative; height: 711px; margin-bottom: 100px; overflow: hidden; }
.cl-finder__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-finder__box { position: absolute; top: 99px; right: 140px; width: 500px; padding: 50px; background: var(--site-panel); }
.cl-finder__h { font-size: 26px; line-height: 33.8px; }
.cl-finder__h strong { font-size: 26px; line-height: 33.8px; }
.cl-finder__text { margin: 32px 0 16px; font: 400 16px/25.6px var(--site-font-body); color: var(--site-ink); }
.cl-finder__q { display: block; width: 100%; height: 56px; padding: 0 24px; background: var(--site-field); color: var(--site-fg); border: 1px solid var(--site-field-line); border-radius: 0; font: 400 16px/1 var(--site-font-body); }
.cl-finder__q::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-finder__btn { margin-top: 24px; min-width: 218px; }

/* ---------- help ---------- */
.cl-help { min-height: 554px; margin: 0 20px 20px; padding: 100px 120px; background: var(--site-band); }
.cl-help__h { font-size: 26px; line-height: 33.8px; }
.cl-help__h strong { font-size: 26px; line-height: 33.8px; }
.cl-help__text { max-width: 373px; margin: 32px 0; font: 400 16px/25.6px var(--site-font-body); color: var(--site-ink); }
.cl-help__links .cl-arrow { text-transform: none; }
.cl-help__links li:not(:first-child) .cl-arrow { text-transform: uppercase; }

/* the help band sits 20px over the footer's black block */
.cl-home ~ .cl-ft { margin-top: 0; }
/* their black block is 732px tall on their home, the height of their longest column */
.cl-home ~ .cl-ft .cl-ft__cols { min-height: 732px; }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-home ~ .cl-ft .cl-ft__cols { min-height: 0; }
  .cl-h, .cl-h strong { font-size: 22px; line-height: 28.6px; }
  .cl-hero { height: auto; margin: 0; }
  .cl-hero__img { height: auto; aspect-ratio: 2 / 1; }
  .cl-hero__box { position: static; width: auto; padding: 30px 18px 24px; background: var(--site-dark); }
  .cl-hero__text, .cl-hero__text strong { font-size: 22px; line-height: 28.6px; }
  .cl-hero__btn { width: 141px; height: 46px; margin-top: 13px; font-size: 13px; line-height: 20px; letter-spacing: 1.3px; }

  .cl-finder { height: auto; margin: 0; }
  .cl-finder__img { position: static; height: 233px; }
  .cl-finder__box { position: static; width: auto; min-height: 499px; padding: 50px 26px; }
  .cl-finder__h, .cl-finder__h strong { font-size: 18px; line-height: 23.4px; }
  .cl-finder__text { margin: 26px 0 16px; font-size: 13px; line-height: 20.8px; }
  .cl-finder__q { padding: 0 16px; }

  .cl-help { min-height: 438px; margin: 0; padding: 50px 26px 80px; }
  .cl-help__h, .cl-help__h strong { font-size: 18px; line-height: 23.4px; }
  .cl-help__text { max-width: none; margin: 26px 0 32px; font-size: 13px; line-height: 20.8px; }
  .cl-arrow { font-size: 13px; letter-spacing: 1.3px; gap: 14px; }
}

}