/* cl-home.css: Walbro'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 { padding-bottom: 42px; }

/* the hero: their first slide as a still, the photo under a 50% veil, the heading and the ghost button */
.cl-hero { position: relative; }
.cl-hero__photo { position: relative; display: flex; flex-direction: column; align-items: center; height: 510px; padding: 129px 108px 0;
  background: #141414 var(--cl-hero) center / cover no-repeat; color: #FFFFFF; text-align: center; }
.cl-hero__photo::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.cl-hero__h { position: relative; max-width: 1224px; font: 800 65px/72px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 194px; height: 53px; margin-top: 111px;
  border: 1px solid rgba(255, 255, 255, 0.5); color: #FFFFFF; font: 400 20px/1 var(--site-font-heading); letter-spacing: 3px; text-transform: uppercase; }
.cl-hero__btn:hover { background: #FFFFFF; color: var(--site-dark); }
.cl-hero__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.cl-hero__pick { display: none; }

/* Market Applications: four tiles on their blue, the label in a white strip over the photo */
.cl-markets { padding: 11px 6% 24px; background: var(--site-markets); }
.cl-markets__h { color: #FFFFFF; font: 800 24px/28.8px var(--site-font-heading); text-transform: uppercase; text-align: center; }
.cl-markets__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19.5px; margin-top: 13px; }
.cl-tile { display: flex; flex-direction: column; background: var(--site-tile); }
.cl-tile__label { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 8px; color: var(--site-fg);
  font: 800 13.44px/17.5px var(--site-font-heading); text-transform: uppercase; text-align: center; }
.cl-tile__img { width: 100%; height: auto; aspect-ratio: 302.5 / 209; object-fit: cover; }
.cl-tile:hover .cl-tile__label { color: var(--site-accent-ink); }

@media (max-width: 979.98px) {
  .cl-home { padding-bottom: 21px; }
  .cl-hero__photo { height: 219px; padding: 29px 30px 0; }
  .cl-hero__h { font: 700 24px/26px var(--site-font-heading); }
  .cl-hero__btn { width: 155px; height: 40px; margin-top: 41px; font: 700 16px/1 var(--site-font-heading); }
  .cl-hero__band { position: static; }
  /* the band folds behind a strip on the photo's foot, so the tiles keep their place (their hero has no band) */
  .cl-js .cl-hero__btn { margin-top: 22px; }
  .cl-js .cl-hero__pick { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; height: 40px;
    background: var(--site-accent); color: var(--site-accent-fg); font: 700 14px/1 var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
  .cl-js .cl-hero__pick:hover { background: var(--site-button-hover-bg); }
  .cl-js .cl-hero:not(.is-open) .cl-hero__band { display: none; }
  .cl-markets { padding: 11px 23.4px 60px; }
  .cl-markets__list { grid-template-columns: 1fr; gap: 60px; margin-top: 13px; }
  .cl-tile { flex-direction: column-reverse; }
  .cl-tile__img { aspect-ratio: 343 / 237; }
}

}