/* cl-home.css: the home (templates/home.html) in calioffroadwheels.com's look, measured on their home at 1440
   and in the 390 phone stage: the hero, Find your set, the 9118 banner, the Summit Dually feature and the
   photo tiles. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- hero: their first slide, 2:1, with the kit's vehicle band along its foot ---------- */
.cl-hero { position: relative; margin-bottom: 57px; }
.cl-hero__link img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.cl-home__band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; }
.cl-home__pick { display: none; }

/* ---------- Find your set: their Cali heading over six wheels in three columns ---------- */
.cl-set { padding: 10px 0 39px; }
.cl-set__h { margin-bottom: 10px; font: 900 50px/50px var(--site-font-heading); letter-spacing: 2.3px; text-align: center; text-transform: uppercase; }
.cl-set__list { display: grid; grid-template-columns: repeat(3, 381.3px); gap: 5px 30px; width: 1204px; margin: 0 auto 0 calc(50% - 617px); align-items: start; }
.cl-set__tile { display: block; }
.cl-set__tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.cl-set__name { position: relative; margin-top: -17px; font: 600 39px/39px var(--site-font-heading); letter-spacing: 2.3px; text-align: center; text-transform: uppercase; }
.cl-set__tile:hover .cl-set__name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- the 9118 banner on white ---------- */
.cl-banner { padding: 155.5px 0; }
.cl-banner img { width: 100%; height: auto; }

/* ---------- the Summit Dually feature: the wheel, then its name and the button ---------- */
.cl-feature { display: flex; align-items: center; gap: 30px; padding: 0 0 70px 278px; }
.cl-feature__img { flex: none; width: 442px; height: 442px; }
.cl-feature__copy { width: 580px; }
.cl-feature__h { margin-bottom: 25px; font: 900 88px/61.6px var(--site-font-heading); text-transform: uppercase; }
.cl-feature__code { display: block; margin-bottom: 25px; font-size: 40px; line-height: 20px; letter-spacing: 1px; }

/* ---------- three photo tiles, each with its lime button ---------- */
.cl-photos { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; }
.cl-photos__tile { position: relative; display: grid; place-items: center; height: 500px; overflow: hidden; }
.cl-photos__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-photos__tile::after { content: ""; position: absolute; inset: 0; background: rgba(204, 204, 204, 0.32); }
.cl-photos__btn { position: relative; z-index: 1; min-height: 62px; padding: 0 40px; font: 700 18px/18px var(--site-font-button); }
.cl-photos__tile:hover .cl-photos__btn { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }

/* the dark page: the wheels and the feature keep their white plates, since the gloss black wheels vanish on the dark;
   a wheel's name sits under its plate rather than over its foot, so the near-white name never lands on white */
:root[data-parts-theme="dark"] .cl-set__tile img, :root[data-parts-theme="dark"] .cl-feature__img { background: var(--site-plate); }
:root[data-parts-theme="dark"] .cl-set__name { margin-top: 12px; height: auto; }

/* ---------- phones ---------- */
@media (max-width: 979.98px) {
  /* the band folds behind the pick button in the gap under the hero; opened, it drops over the page, opaque */
  .cl-home__band { top: calc(100% + 8px); bottom: auto; left: 16px; right: auto; }
  .cl-js .cl-home__pick { display: inline-flex; min-height: 40px; padding: 0 20px; }
  .cl-js .cl-home__band:not(.is-open) .cl-home__fold { display: none; }
  .cl-js .cl-home__band.is-open .cl-home__fold { position: absolute; top: calc(100% + 8px); left: -16px; width: 100vw; }

  .cl-set { padding: 10px 0 0; margin-bottom: -20px; }
  .cl-set__h { margin-bottom: 60px; font-size: 28px; line-height: 28px; }
  .cl-set__list { grid-template-columns: 347px; gap: 0; width: auto; margin: 0 0 0 20px; }
  .cl-set__list li:nth-child(4) { margin-top: 30px; }
  .cl-set__name { margin-top: 17px; height: 43px; }

  .cl-banner { padding: 107px 0; }

  .cl-feature { flex-direction: column; gap: 0; padding: 0 20px 20px; text-align: center; }
  .cl-feature__img { width: 227.5px; height: 227.5px; }
  .cl-feature__copy { width: 100%; }
  .cl-feature__h { margin-bottom: 15px; font-size: 30px; line-height: 21px; }
  .cl-feature__code { font-size: 40px; }

  .cl-photos { grid-template-columns: 1fr; }
  .cl-photos__tile { height: 300px; }
}

}