/* cl-home.css: the home (templates/home.html) in bajadesigns.com's look and measures: dark sections, their display
   type for headings and buttons, Roboto for the words. From 980px their desktop layout, below it their phone stack.
   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-light); }

/* the hero: their first slide, its photo full width, the words at the left */
.cl-hero { position: relative; height: 514px; overflow: hidden; }
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cl-hero__body { position: relative; padding: 79px 72px 0; }
.cl-hero__h { font: 900 40px/42px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__go { margin-top: 24px; min-width: 142px; }

/* the three product tiles */
.cl-tiles { padding: 32px 0 56px; }
.cl-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cl-tile__img { width: 100%; height: 320px; object-fit: cover; }
.cl-tile__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 24px; }
.cl-tile__h { max-width: 290px; font: italic 700 28px/32px var(--site-font-body); }
.cl-tile__go { flex: none; display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; background: var(--site-accent); color: var(--site-accent-fg); font: 400 16px/18px var(--site-font-heading); text-transform: uppercase; }
.cl-tile__go:hover { background: var(--site-accent-strong); }

@media (max-width: 979.98px) {
  .cl-hero { height: 312px; }
  .cl-hero__body { position: absolute; inset: auto 0 0 0; padding: 0 20px 36px; }
  .cl-hero__h { font-size: 28px; line-height: 33px; }

  .cl-tiles { padding: 32px 0 24px; }
  .cl-tiles__grid { grid-template-columns: 1fr; gap: 32px; }
  .cl-tile__img { height: 281px; }
  .cl-tile__head { display: block; padding: 0 20px; }
  .cl-tile__h { max-width: none; }
  .cl-tile__head .cl-tile__go { margin-top: 12px; }
}

}