/* cl-home.css: Energy Suspension's home (templates/home.html), measured on their home at 1440 and in the
   390 phone stage: the photo hero and its finder card, the white sections (the intro, our band on buying
   here, the Hyperflex tiles) and the dark vehicle band. Every rule sits in @layer site (cl-site.css). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-paper); }
.cl-home__h2 { font: 700 36px/54px var(--site-font-heading); color: var(--site-white); text-align: center; }
.cl-home__h2--red { color: var(--site-accent); }

/* ---------- the hero: 900 tall, its words and the finder card centred ---------- */
/* 820 tall where theirs is 900: the kit's vehicle band (80) sits above it, so every section below lines up with theirs */
.cl-hero { display: flex; align-items: flex-start; justify-content: center; min-height: 820px; padding: 171px var(--site-gutter) 40px;
  background-color: #111111; background-repeat: no-repeat; background-position: 0 0, 50% 100%;
  background-size: 100% 100%, max(100%, calc(900px * 1400 / 852)) auto; text-align: center; }
.cl-hero__in { width: 100%; max-width: 920px; }
.cl-hero__h1 { font: 700 36px/54px var(--site-font-heading); color: var(--site-white); }
.cl-finder { width: 540px; max-width: 100%; margin: 64px auto 0; padding: 26px 30px 30px; background: var(--site-card);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); }
.cl-finder__h { font: 700 18px/27px var(--site-font-heading); color: var(--site-accent); }
.cl-finder__pick { display: flex; align-items: center; height: 41px; margin-top: 17px; padding: 0 12px; border: 1px solid var(--site-finder-line); text-align: left;
  font: 400 16px/1 var(--site-font-body); color: var(--site-fg);
  background: var(--site-field-bg) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%233a3a3a' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") calc(100% - 12px) 50% / 8px 10px no-repeat; }
.cl-finder__pick:hover { border-color: var(--site-fg); }
.cl-finder__search { display: flex; margin-top: 17px; }
.cl-finder__search input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--site-field-line); border-right: 0; border-radius: 0;
  font: 400 16px/1 var(--site-font-body); color: var(--site-fg); background: var(--site-field-bg); }
.cl-finder__search input::placeholder { color: var(--site-fg); opacity: 1; }
.cl-finder__search .cl-btn { flex: none; width: 160px; min-height: 36px; height: 36px; font-size: 13px; }

/* ---------- our band on buying here, in their dark band of four columns ---------- */
.cl-promise { margin: 70px 0; padding: 110px var(--site-gutter) 80px; background: #111111 50% 50% / cover no-repeat; }
.cl-promise__cols { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--site-max); margin: 30px auto 0; }
.cl-promise__col { min-height: 415px; padding: 70px 15px 30px; text-align: center; color: var(--site-white); }
.cl-promise__col + .cl-promise__col { border-left: 1px solid rgba(255, 255, 255, .35); }
.cl-promise__col a { display: block; color: var(--site-white); }
.cl-promise__col a:hover .cl-promise__h { text-decoration: underline; }
.cl-promise__icon { margin: 0 auto; }
.cl-promise__h { margin-top: 34px; font: 700 18px/27px var(--site-font-heading); }
.cl-promise__p { margin-top: 14px; font: 300 16px/24px var(--site-font-body); }

/* ---------- Hyperflex: the heading and the four tiles of their carousel's first slide ---------- */
.cl-hyper { max-width: var(--site-max); margin: 0 auto; padding: 40px var(--site-gutter) 110px; }
.cl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 59px; }
.cl-tile { display: block; height: 100%; min-height: 290px; padding: 50px 30px 30px; text-align: center; color: var(--site-white);
  background: #555555 50% 50% / cover no-repeat;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); }
.cl-tile__h { font: 700 25px/35px var(--site-font-heading); }
.cl-tile:hover .cl-tile__h { text-decoration: underline; }

/* ---------- the vehicle band: the heading over a white card of three grey buttons ---------- */
.cl-vehicle { padding: 110px var(--site-gutter) 130px; background: var(--site-dark); }
.cl-vehicle__card { display: grid; gap: 7px; max-width: var(--site-max); margin: 6px auto 0; padding: 20px 30px;
  background: var(--site-card); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); }
.cl-vehicle__btn { display: flex; align-items: center; justify-content: center; min-height: 62px; background: var(--site-grey); color: var(--site-white);
  font: 400 19.2px/25.6px var(--site-font-body); text-transform: uppercase;
  box-shadow: 0 2px 2px 0 rgba(153, 153, 153, .14), 0 3px 1px -2px rgba(153, 153, 153, .2), 0 1px 5px 0 rgba(153, 153, 153, .12); }
.cl-vehicle__btn:hover { background: var(--site-button-bg); }

/* the dark page: the finder's chevrons drawn near white */
:root[data-parts-theme="dark"] .cl-finder__pick { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23f6f3ef' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); }
/* the dark page: the vehicle panel's 3 bars lift a step above the panel with near-white words and a dark grey edge,
   where the day's mid grey under white read grey on grey; red on hover as by day's button hover */
:root[data-parts-theme="dark"] .cl-vehicle__btn { background: #2A2622; color: var(--site-fg); box-shadow: inset 0 0 0 1px var(--site-line); }
:root[data-parts-theme="dark"] .cl-vehicle__btn:hover { background: var(--site-button-hover-bg); color: var(--site-white); }

/* ---------- phones: the stage's stacks ---------- */
@media (max-width: 979.98px) {
  /* 563 tall where theirs is 844: the kit's band (281) sits above it on a phone */
  .cl-hero { min-height: 563px; padding: 20px var(--site-gutter) 40px; background-size: 100% 100%, auto 844px; }
  .cl-finder { width: 100%; margin-top: 40px; padding: 25px 30px 30px; }
  .cl-finder__search .cl-btn { width: 160px; }
  .cl-promise { padding: 110px 17px 80px; }
  .cl-promise__cols { grid-template-columns: 1fr; }
  .cl-promise__col { min-height: 343px; padding: 70px 23px 30px; }
  .cl-promise__col + .cl-promise__col { border-left: 0; }
  .cl-hyper { padding: 40px 17px 80px; }
  .cl-tiles { grid-template-columns: 1fr 1fr; gap: 30px; }
  .cl-tile { min-height: 466px; padding: 50px 15px 30px; }
  .cl-vehicle { padding: 110px 17px 130px; }
  .cl-vehicle__card { padding: 20px 15px; }
}

}