/* cl-home.css: Rigid's home (templates/home.html) from their measurements at 1440 and in the 390px phone stage:
   the half-black header over the hero, then the light-type tiles on their near-black band.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-dark); color: var(--site-on-dark); }
.cl-home img { width: 100%; height: 100%; object-fit: cover; }

/* the header lies over the hero, half black, on the desktop */
@media (min-width: 980px) {
  .cl-home-page .cl-hd { background: rgba(0, 0, 0, .5); margin-bottom: -140px; }
}

/* ---------- hero: their video's poster, 860px ---------- */
.cl-hero { display: flex; flex-direction: column; height: 860px; background: var(--site-black) center / cover no-repeat; }
.cl-hero__in { flex: 1; width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 380px var(--site-gutter) 0; }
.cl-hero__h { max-width: 900px; font: 700 64px/68px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__btn { display: inline-flex; align-items: center; justify-content: center; width: 243px; height: 52px; margin-top: 40px; background: var(--site-on-dark); color: var(--site-dark); border: 1px solid var(--site-dark); font: 700 16px/22px var(--site-font-button); text-transform: uppercase; }
.cl-hero__btn:hover { background: var(--site-dark); color: var(--site-on-dark); border-color: var(--site-on-dark); }

/* ---------- the light-type tiles: their slider as a row that scrolls ---------- */
.cl-tiles { padding: 80px 0; }
.cl-tiles__row { display: flex; gap: 20px; padding: 0 110px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 110px; scrollbar-width: none; }
.cl-tiles__row::-webkit-scrollbar { display: none; }
.cl-tiles__row li { flex: 0 0 363px; scroll-snap-align: start; }
.cl-tile { position: relative; display: block; height: 473px; overflow: hidden; }
.cl-tile span { position: absolute; left: 0; right: 0; bottom: 32px; text-align: center; font: 700 18px/30px var(--site-font-heading); text-transform: uppercase; }
.cl-tile:hover span { text-decoration: underline; }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-hero { height: 650px; }
  .cl-hero__in { padding: 183px 20px 0; }
  .cl-hero__h { font-size: 34px; line-height: 38px; }
  .cl-hero__btn { width: 166px; margin-top: 20px; font-size: 14px; border: 2px solid var(--site-dark); }

  .cl-tiles { padding: 30px 0; }
  .cl-tiles__row { gap: 10px; padding: 0 25px 0 50px; scroll-padding: 0 50px; }
  .cl-tiles__row li { flex-basis: 315px; }
  .cl-tile { height: 411px; }
  .cl-tile span { bottom: 10px; }
}

}