/* cl-home.css: the home (templates/home.html) in aeromotiveinc.com's look, measured on their home in a 1440
   window and their 390 phone stage: full-bleed photo tiles with condensed italic capitals, white product cards
   on hairlines, near-black bands. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home img { width: 100%; height: 100%; object-fit: cover; }

/* the section heading: condensed italic capitals, centred, a hairline either side on the product rows */
.cl-h2 { display: block; font: italic 800 54px/47.25px var(--site-font-heading); letter-spacing: 0.72px; text-transform: uppercase; text-align: center; color: var(--site-fg); }
.cl-h2--ruled { display: flex; align-items: center; gap: 30px; }
.cl-h2--ruled::before, .cl-h2--ruled::after { content: ""; flex: 1; height: 1px; background: var(--site-rule); }
.cl-h2 a:hover { color: var(--site-accent); }

/* ---------- hero: the photo, the search panel, two photo tiles ---------- */
.cl-hero { padding: 6px 0 40px; }
.cl-hero__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 341px 342px; gap: 20px; }
.cl-hero__main { position: relative; grid-column: 1 / 3; grid-row: 1 / 3; background: #000; overflow: hidden; }
.cl-hero__main::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.cl-hero__text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 40px 41px; color: #FFF; }
.cl-hero__h1 { max-width: 560px; font: italic 900 72px/60.48px var(--site-font-heading); letter-spacing: -1px; text-transform: uppercase; }
.cl-hero__text .cl-btn { min-width: 137px; margin-top: 16px; }

.cl-finder { grid-column: 3 / 5; grid-row: 1; display: flex; flex-direction: column; background: var(--site-dark-2); color: var(--site-on-dark); }
.cl-finder__h { padding: 20px 20px 0; height: 65px; font: italic 900 30px/25.2px var(--site-font-heading); text-transform: uppercase; }
.cl-finder__panel { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 20px; background: var(--site-dark-3); }
.cl-finder__form { display: flex; gap: 10px; }
.cl-finder__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #707275; border-radius: 0; background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-finder__form input::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-finder__form .cl-btn { width: 140px; }
.cl-finder__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-finder__links a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; background: rgba(112, 114, 117, 0.69); color: #FFF;
  font: 700 14px/1.2 var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; }
.cl-finder__links a:hover { background: var(--site-accent); }

.cl-tile { position: relative; display: block; overflow: hidden; background: #000; color: #FFF; }
.cl-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.cl-tile--hero::after { background: rgba(0, 0, 0, 0.4); }
.cl-tile--vehicle::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0) 85%); }
.cl-tile img { transition: transform 0.4s ease; }
.cl-tile:hover img { transform: scale(1.03); }
.cl-tile__h, .cl-tile__text { z-index: 1; }
.cl-tile__h { font: italic 900 30px/25.2px var(--site-font-heading); letter-spacing: -0.6px; text-transform: uppercase; color: #FFF; }
.cl-tile--hero { grid-row: 2; }
.cl-tile__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 11px; }
.cl-tile__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 700 14px/14px var(--site-font-body); text-transform: uppercase; }

/* ---------- the promises on the dark bar ---------- */
.cl-promises { background: var(--site-dark); color: var(--site-on-dark); padding: 20px 0 19px; }
.cl-promises__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.cl-promise { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.cl-promise__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--site-accent); border-radius: 50%; }
.cl-promise__h { display: block; font: 700 12px/16.8px var(--site-font-body); text-transform: uppercase; }
.cl-promise__p { display: block; font: 400 13px/16.8px var(--site-font-body); }
.cl-promise:hover .cl-promise__h { text-decoration: underline; }

/* ---------- the category tiles ---------- */
.cl-cats { display: grid; grid-template-columns: repeat(4, 1fr); }
.cl-cat { display: flex; align-items: center; height: 101px; padding: 0 0 1px 10px; background: var(--site-bg); border-right: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); }
.cl-cat img { flex: none; width: 100px; height: 100px; object-fit: contain; background: var(--site-photo); }
.cl-cat__label { padding: 0 20px; font: italic 800 30px/30px var(--site-font-heading); letter-spacing: 0.72px; text-transform: uppercase; color: var(--site-fg); }
.cl-cat:hover .cl-cat__label { color: var(--site-accent); }

/* ---------- the product rows ---------- */
.cl-row { padding-top: 32px; }
.cl-row--grid { padding: 36px 0 258px; }
.cl-row--best { padding-bottom: 14px; }
.cl-row--best .cl-card { min-height: 531px; }
.cl-row--pumps { padding-bottom: 41px; }
.cl-row__head { position: relative; margin-bottom: 30px; }
.cl-row--best .cl-row__head, .cl-row--pumps .cl-row__head { margin-bottom: 32px; }
.cl-row__arrows { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; padding-left: 20px; background: var(--site-bg); }
.cl-row__arrow { display: grid; place-items: center; width: 30px; height: 30px; background: var(--site-accent); color: #FFF; }
.cl-row__arrow:hover { background: var(--site-accent-strong); }
.cl-row--best .cl-h2--ruled::after, .cl-row--pumps .cl-h2--ruled::after { margin-right: 130px; }
.cl-cards { display: flex; border-top: 1px solid var(--site-rule); border-left: 1px solid var(--site-rule); }
.cl-cards--grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cl-cards--slide { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cl-cards--slide::-webkit-scrollbar { display: none; }
.cl-card { flex: 0 0 25%; display: flex; flex-direction: column; min-height: 541px; scroll-snap-align: start; background: var(--site-bg); border-right: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); }
.cl-card__img { display: block; background: var(--site-photo); }
.cl-card__img img { height: auto; aspect-ratio: 1; object-fit: contain; }
.cl-card__body { padding: 10px 20px 20px; }
.cl-row--best .cl-card__body { padding-top: 30px; }
.cl-card__name { font: 700 16px/25.6px var(--site-font-body); color: var(--site-fg); }
.cl-card__name a:hover { color: var(--site-accent); }
.cl-card__part { margin-top: 5px; font: 700 14px/19.6px var(--site-font-body); letter-spacing: 0.4px; color: var(--site-fg); }

/* ---------- popular vehicles ---------- */
.cl-vehicles { padding-top: 32px; }
.cl-vehicles__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 30px; }
.cl-tile--vehicle { height: 270px; }
.cl-tile--vehicle .cl-tile__h { position: absolute; font-size: 54px; line-height: 47.25px; letter-spacing: 0.72px; font-weight: 800; }
.cl-tile--vehicle .cl-tile__h { left: 35px; bottom: 45px; }

/* ---------- the two pump photo tiles ---------- */
.cl-features { display: grid; grid-template-columns: 1fr 1fr; }
.cl-feature { position: relative; height: 720px; overflow: hidden; background: #000; }
.cl-feature::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.cl-feature__text { position: absolute; left: 35px; right: 35px; bottom: 45px; z-index: 1; color: #FFF; }
.cl-feature__h { font: italic 800 54px/47.25px var(--site-font-heading); letter-spacing: 0.72px; text-transform: uppercase; }
.cl-feature__p { max-width: 260px; margin: 20px 0; font: 400 16px/25.6px var(--site-font-body); }

/* ---------- the support band ---------- */
.cl-help { position: relative; overflow: hidden; background: var(--site-dark); color: #FFF; text-align: center; }
.cl-help__bg { position: absolute; inset: 0; }
.cl-help__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 299px; padding: 30px 20px; }
.cl-help__h { font: italic 800 45px/45px var(--site-font-heading); text-transform: uppercase; }
.cl-help__p { margin: 11px 0 26px; font: 400 14px/24px var(--site-font-body); }
.cl-help .cl-btn { min-height: 48px; padding: 0 30px; text-transform: none; letter-spacing: 0.5px; font-size: 16px; }

/* ---------- phones (their 390 stage) ---------- */
@media (max-width: 979.98px) {
  .cl-h2 { font-size: 36px; line-height: 31.5px; }
  .cl-h2--ruled { gap: 0; }
  .cl-h2--ruled::before, .cl-h2--ruled::after { display: none; }
  .cl-row__arrows { display: none; }

  .cl-hero { padding: 20px 0; }
  .cl-hero__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .cl-hero__main, .cl-finder, .cl-tile--hero { grid-column: auto; grid-row: auto; }
  .cl-hero__main { height: 263px; }
  .cl-hero__text { padding: 20px; }
  .cl-hero__h1 { font-size: 36px; line-height: 30px; }
  .cl-finder__h { height: auto; padding: 20px 20px 14px; }
  .cl-finder__panel { flex: none; padding: 20px 20px 25px; }
  .cl-finder__form .cl-btn { width: 70px; }
  .cl-finder__links { display: none; }
  .cl-tile--hero { height: 240px; }
  .cl-tile__text { padding: 16px; }

  .cl-promises { padding: 36px 0; }
  .cl-promises__list { grid-template-columns: 1fr; gap: 30px; }
  .cl-promise__icon { width: 57px; height: 57px; }
  .cl-promise { gap: 20px; }

  .cl-cats { grid-template-columns: 1fr 1fr; }
  .cl-cat { flex-direction: column; justify-content: flex-start; height: 163px; padding: 10px 0 0; }
  .cl-cat img { width: 100%; height: 100px; }
  .cl-cat__label { padding: 15px 10px 0; font-size: 22px; line-height: 22px; text-align: center; }

  .cl-row { padding-top: 27px; }
  .cl-row--grid { padding: 27px 0 337px; }
  .cl-row__head, .cl-row--best .cl-row__head, .cl-row--pumps .cl-row__head { margin-bottom: 30px; padding: 0 20px; }
  .cl-cards--grid { grid-template-columns: 1fr 1fr; }
  .cl-card { min-height: 0; }
  .cl-card__body { padding: 10px 12px 16px; }
  .cl-row--best .cl-card { flex-basis: 100%; }
  .cl-row--best .cl-card { min-height: 0; }
  .cl-row--best .cl-card__body { padding-top: 22px; min-height: 167px; }
  .cl-row--pumps .cl-card { flex-basis: 50%; }
  .cl-row--pumps .cl-card__body { min-height: 185px; }

  .cl-vehicles { padding-top: 24px; }
  .cl-vehicles__grid { grid-template-columns: 1fr; }
  .cl-tile--vehicle { height: 150px; }
  .cl-tile--vehicle .cl-tile__h { font-size: 36px; line-height: 31.5px; }
  .cl-tile--vehicle .cl-tile__h { left: 20px; bottom: 24px; }

  .cl-features { grid-template-columns: 1fr; }
  .cl-feature { height: 390px; }
  .cl-feature__text { left: 20px; bottom: 25px; }
  .cl-feature__h { font-size: 36px; line-height: 31.5px; }
  .cl-feature__p { display: none; }
  .cl-feature .cl-btn { min-height: 40px; margin-top: 14px; }

  .cl-help__text { min-height: 357px; padding: 30px 25px; }
  .cl-help__h { font-size: 30px; line-height: 31px; }
  .cl-help .cl-btn { width: 100%; }
}

}