/* cl-home.css: the home in nwseatcovers.com's look (templates/home.html), measured on their home in a 1440 window and
   in their 390 phone stage: the near-black hero, the photo tiles with their grey labels and the series cards.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { display: block; padding-bottom: 75px; }
.cl-h2 { color: var(--site-fg); font: 700 32px/35.2px var(--site-font-heading); text-transform: capitalize; text-align: center; }

/* ---------- the hero: the heading and our vehicle band beside a seat cover photo, our three promises under ---------- */
.cl-hero { display: grid; grid-template-columns: 480px minmax(0, 1fr); background: var(--site-bar); color: var(--site-bar-fg); }
.cl-hero__slide { grid-column: 2; grid-row: 1; display: block; height: 443px; margin-right: 15px; }
.cl-hero__slide img { width: 100%; height: 100%; object-fit: contain; }
.cl-hero__panel { grid-column: 1; grid-row: 1; padding: 41px 15px 0; text-align: center; }
.cl-hero__h { font: 700 30px/33px var(--site-font-heading); text-transform: uppercase; }
.cl-hero__band { margin-top: 10px; text-align: left; }
.cl-hero__promises { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 25px 0; }
.cl-hero__promises li { padding: 5px 5px; font: 500 16px/17.6px var(--site-font-heading); text-align: center; }

/* ---------- the photo tiles and the red button ---------- */
.cl-tiles { padding: 30px 0 35px; }
.cl-tiles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 447px)); justify-content: center; gap: 10px; margin-top: 31px; padding: 0 16px; }
.cl-tile { position: relative; display: block; }
.cl-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.cl-tile__label {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 10px 12px; white-space: nowrap;
  background: var(--site-grey); color: #FFFFFF; border-radius: var(--site-radius); font: 400 18px/23.94px var(--site-font-button);
}
.cl-tile:hover .cl-tile__label { background: var(--site-accent); }
.cl-tiles__all { margin-top: 34px; text-align: center; }
.cl-tiles__all .cl-btn { min-width: 417px; }

/* ---------- the series, in the place of their reviews: their grey review cards ---------- */
.cl-series { max-width: 1372px; margin: 35px auto 0; padding: 0 16px 50px; border-bottom: 1px solid var(--site-band); }
.cl-series__h { font-weight: 900; text-transform: uppercase; text-align: left; }
.cl-series__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 31px -15px 0; }
.cl-card { padding: 0 10px 10px; }
.cl-card__box { height: 100%; padding: 20px; background: #F5F5F5; border: 1px solid #E3E3E3; box-shadow: var(--site-shadow); color: var(--site-fg); }
.cl-card__name { font: 700 16px/20px var(--site-font-heading); }
.cl-card__line { font: italic 400 14px/20px var(--site-font-heading); }
.cl-card__rows { margin: 18px 0 0; padding: 10px 0; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE; }
.cl-card__rows div { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 26px; }
.cl-card__rows dt { font: 700 14px/15.4px var(--site-font-heading); text-transform: capitalize; }
.cl-card__rows dd { margin: 0; color: #1A7A1A; font: 700 14px/20px var(--site-font-heading); white-space: nowrap; }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-home { padding-bottom: 75px; }
  .cl-h2 { font-size: 20px; line-height: 22px; padding: 0 15px; }
  .cl-hero { grid-template-columns: minmax(0, 1fr); }
  .cl-hero__slide { grid-column: 1; grid-row: 1; height: auto; margin: 0; aspect-ratio: 510 / 430; }
  .cl-hero__panel { grid-column: 1; grid-row: 2; padding: 19px 15px 0; }
  /* the H1 a little bigger on a phone (MOBILE-BRIEF rule 4), the landing pages' 36px */
  .cl-hero__h { font-size: 36px; line-height: 1.1; }
  .cl-hero__promises { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 0 7px; }
  .cl-hero__promises li { padding: 5px 2px; font-size: 13px; line-height: 13px; letter-spacing: -.2px; }
  .cl-tiles { padding: 29px 0 30px; }
  .cl-tiles__list { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 30px; padding: 0 5px; }
  .cl-tile img { width: 100%; height: auto; aspect-ratio: 1; }
  .cl-tile__label { bottom: 14px; padding: 8px 12px; font-size: 14px; line-height: 18.62px; }
  .cl-tiles__all { margin-top: 20px; }
  .cl-tiles__all .cl-btn { min-width: 224px; min-height: 40px; font-size: 14px; }
  .cl-series { margin: 30px 15px 0; padding: 0 0 40px; }
  .cl-series__h { padding: 0; font-size: 25px; line-height: 27.5px; }
  .cl-series__list { grid-template-columns: minmax(0, 1fr); margin: 20px -15px 0; }
}

}