/* cl-home.css: UWS's home (templates/home.html), from their measurements at 1440 and in the 390 phone stage.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { display: block; padding-bottom: 40px; }
.cl-home__in { max-width: var(--site-max); margin: 0 auto; }

/* ---------- hero: the photo under a 32% shade, their white headline and blue line ---------- */
.cl-hero { position: relative; display: block; height: 344px; overflow: hidden; background: var(--site-dark); }
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0 0; }
.cl-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .32); }
.cl-hero__in { position: relative; z-index: 1; display: block; padding: 112px 30px 0 216px; }
.cl-hero__h1 { color: var(--site-on-dark); font: 700 50.4px/55px var(--site-font-heading); text-transform: uppercase; }

/* ---------- Featured Products ---------- */
.cl-feat__h { height: 120px; color: var(--site-accent-text); font: 700 60px/120px var(--site-font-heading); text-transform: uppercase; text-align: center; }
.cl-feat__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cl-card__title { display: flex; align-items: center; height: 65px; padding: 0 30px; background: var(--site-dark); border-left: 10px solid var(--site-red);
  color: var(--site-on-dark); font: 700 25px/25px var(--site-font-heading); text-transform: uppercase; }
.cl-card__media { display: flex; align-items: flex-end; height: 300px; padding-bottom: 89.5px; background-color: var(--site-dark); background-repeat: no-repeat; }
.cl-feat__products { display: grid; grid-template-columns: repeat(4, 1fr); }
.cl-feat__products li { height: 336.8px; }
.cl-prod { display: flex; flex-direction: column; align-items: center; color: var(--site-accent-text); font: 400 16px/22.86px var(--site-font-body); text-align: center; }
.cl-prod img { width: 300px; height: 300px; object-fit: contain; margin-bottom: 4px; background: var(--site-photo-bg); }
.cl-prod:hover span { text-decoration: underline; }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-home { padding-bottom: 0; }
  .cl-hero { height: 266px; }
  .cl-hero__in { padding: 34px 30px 0 58px; }
  .cl-hero__h1 { font-size: 14px; line-height: 18px; }

  .cl-feat__h { height: 48px; font-size: 30px; line-height: 48px; }
  .cl-feat__cards { display: grid; grid-template-columns: minmax(0, 380px); gap: 20px; }
  .cl-card + .cl-card { margin-left: 10px; }
  .cl-card__title { height: 40px; padding: 0 12px; font-size: 14px; line-height: 16px; }
  .cl-card__media { padding-bottom: 89.5px; }
  .cl-card .cl-btn { min-width: 145px; min-height: 51px; padding: 0 4px; font-size: 16px; }
  .cl-feat__products { grid-template-columns: 1fr; }
}

}