/* cl-home.css: S&S Cycle's home (templates/home.html), from the measurements of theirs at 1440 and in the 390px
   phone stage: black bands around their photos, Sora semibold titles, their blue buttons and their grey tiles.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-dark); }

/* the heading in a blue box over their 10px blue rule, where their blue ride picker sat under the vehicle band */
.cl-home__lead { display: flex; flex-direction: column; justify-content: center; height: 97px; margin: 0 10px; padding: 0 20px 20px; position: relative; text-align: center;
  background: linear-gradient(var(--site-accent), var(--site-accent)) top / 100% 77px no-repeat; }
.cl-home__lead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 10px; background: var(--site-accent); }
.cl-home__h1 { font: 600 24px/36px var(--site-font-heading); letter-spacing: 0.25px; color: #FFFFFF; }

/* the products row: their slider's first slide, four photos on black */
.cl-home__row { padding: 16px 16px 46px; background: var(--site-dark); }
.cl-home__slides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.cl-home__slide a { display: block; color: #FFFFFF; text-align: center; }
.cl-home__slide img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--site-dark); }
.cl-home__slide-name { display: block; margin-top: 16px; padding: 0 12px; font: 400 15px/23px var(--site-font-body); }
.cl-home__slide a:hover .cl-home__slide-name { text-decoration: underline; }

/* the three feature tiles: one tall at the left, two stacked at the right */
.cl-home__promos { display: grid; grid-template-columns: 914fr 526fr; grid-template-rows: 390px 390px; }
.cl-home__promo { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: var(--site-dark); }
.cl-home__promo--1 { grid-row: 1 / 3; }
.cl-home__promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.89)); }
.cl-home__promo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-home__promo-body { position: relative; z-index: 1; padding: 0 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.cl-home__promo-title { font: 600 46px/57.5px var(--site-font-heading); letter-spacing: 0.25px; color: #FFFFFF; }
.cl-home__shop { min-width: 140px; min-height: 59px; }

/* the four category tiles on grey, ruled between */
.cl-home__cats { padding: 50px; background: var(--site-band); }
.cl-home__cat-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-home__cat { padding: 0 16px; text-align: center; border-right: 1px solid var(--site-line); }
.cl-home__cat:last-child { border-right: 0; }
.cl-home__cat-title { font: 600 40px/50px var(--site-font-heading); letter-spacing: 0.25px; color: var(--site-fg); }
.cl-home__cat-link { display: inline-block; margin-top: 28px; font: 600 16px/24px var(--site-font-body); color: var(--site-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cl-home__cat-link:hover { color: var(--site-accent-ink-strong); }

/* the featured products on black, under their thin rule */
.cl-home__featured { padding: 70px 34px 50px; background: var(--site-dark); position: relative; }
.cl-home__featured::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; border-top: 1px solid #B4BAD1; }
.cl-home__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.cl-home__card { display: flex; flex-direction: column; min-height: 604px; border: 1px solid var(--site-card-line); background: var(--site-band); }
.cl-home__card-img { display: block; background: #FFFFFF; }
.cl-home__card-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cl-home__card-body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 20px; }
.cl-home__card-name { font: 600 18px/23.94px var(--site-font-heading); letter-spacing: 0.25px; color: var(--site-fg); }
.cl-home__card-name a:hover { text-decoration: underline; }
.cl-home__card-sku { margin-top: 20px; font: 400 16px/24px var(--site-font-body); color: var(--site-fg); }
.cl-home__card-more {
  display: flex; align-items: center; justify-content: center; min-height: 40px; margin-top: auto;
  border: 2px solid var(--site-accent-ink-strong); border-radius: var(--site-radius);
  font: 600 14px/14px var(--site-font-button); color: var(--site-accent-ink-strong);
}
.cl-home__card-more:hover { background: var(--site-accent-strong); color: #FFFFFF; }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-home__lead { height: auto; margin: 0; padding: 0; background: none; }
  .cl-home__lead::after { display: none; }
  .cl-home__h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  /* a strip of the four photos: the kit's vehicle band stands taller here than their folded ride picker */
  .cl-home__row { padding: 8px 16px 9px; }
  .cl-home__slides { gap: 8px; }
  .cl-home__slide-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

  .cl-home__promos { display: block; }
  .cl-home__promo { height: 320px; }
  .cl-home__promo--2 { height: 247px; }
  .cl-home__promo--3 { height: 287px; }
  .cl-home__promo-body { padding: 0 20px 40px; }
  .cl-home__promo-title { font-size: 32px; line-height: 40px; }

  .cl-home__cats { padding: 50px; }
  .cl-home__cat-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .cl-home__cat { min-height: 104px; padding: 16px 16px 0; border-right: 0; border-top: 1px solid var(--site-line); }
  .cl-home__cat-title { font-size: 28px; line-height: 35px; }
  .cl-home__cat-link { margin-top: 28px; }

  .cl-home__featured { padding: 70px 34.5px 50px; }
  .cl-home__cards { grid-template-columns: 1fr; gap: 32px; }
  .cl-home__card { min-height: 0; }
  /* their cards' heights in the phone stage, so the row keeps their rhythm (the button sits at the foot) */
  .cl-home__card:nth-child(1) .cl-home__card-body { min-height: 281px; }
  .cl-home__card:nth-child(2) .cl-home__card-body { min-height: 256px; }
  .cl-home__card:nth-child(3) .cl-home__card-body { min-height: 187px; }
  .cl-home__card:nth-child(4) .cl-home__card-body { min-height: 283px; }
}

}