/* cl-home.css: Griot's Garage's home (templates/home.html), from their measured home at 1440 and in their 390px
   phone stage (--u, cl-site.css). Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-hm { display: block; }

/* the vehicle band where their promo strip sits; on phones a 60px bar opens it */
.cl-hm-pick__btn { display: none; }

/* the hero: their first slide, 526px so the page below keeps their positions */
.cl-hm-hero { position: relative; height: 526px; overflow: hidden; background: #2B2B2B; color: #FFFFFF; }
.cl-hm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cl-hm-hero__in { position: relative; max-width: 1080px; margin: 0 auto; padding-top: 66px; }
.cl-hm-hero__title { font: 400 80px/88px var(--site-font-heading); letter-spacing: 0.25px; text-transform: uppercase; }
.cl-hm-hero__text { margin-top: 40px; font: 400 32px/40px var(--site-font-body); }
.cl-hm-hero__btn { display: inline-flex; align-items: center; justify-content: center; width: 195px; height: 48px; margin-top: 40px;
  border: 2px solid #FFFFFF; border-radius: var(--site-radius); font: 400 20px/20px var(--site-font-button); text-transform: uppercase; }
.cl-hm-hero__btn:hover { background: #FFFFFF; color: var(--site-fg); }

/* the two category tiles */
.cl-hm-promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; justify-content: space-between; margin-top: 24px; padding: 20px 21px 160px; }
.cl-hm-promos__tile img { width: 100%; height: auto; aspect-ratio: 334 / 191; object-fit: cover; }

/* their four picks */
.cl-hm-picks { position: relative; padding: 0 18px 100px; }
.cl-hm-picks__h { display: block; text-align: center; color: var(--site-fg); font: 400 32px/48px var(--site-font-heading); letter-spacing: 0.25px; text-transform: uppercase; }
.cl-hm-picks__h span { display: block; color: var(--site-accent); font-size: 64px; line-height: 64px; }
.cl-hm-picks__list { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1339px; margin: 40px auto 0; }
.cl-hm-pick-card { min-width: 0; }
.cl-hm-pick-card__img img { width: 234px; height: 238px; object-fit: contain; }
.cl-hm-pick-card__name { margin-top: 16px; }
.cl-hm-pick-card__name a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 0 4px;
  font: 400 16px/16px var(--site-font-button); letter-spacing: 0.25px; text-transform: uppercase; color: var(--site-fg); }
.cl-hm-pick-card__name span { color: var(--site-accent); font-size: 12px; }
.cl-hm-pick-card__name a:hover { color: var(--site-accent); }
.cl-hm-pick-card__text { max-width: 305px; font: 400 16px/24px var(--site-font-body); }

/* the arrows that page the picks and the promises on phones */
.cl-hm-arrow { display: none; }

/* the red band of their three promises */
.cl-hm-values { position: relative; padding: 20px 11px 60px 10px; }
.cl-hm-values__list { display: flex; justify-content: center; gap: 24px; height: 250px; background: var(--site-accent); color: #FFFFFF; }
.cl-hm-value { width: 368px; padding: 40px 16px 0; text-align: center; }
.cl-hm-value__top { display: block; }
.cl-hm-value__icon { height: 70px; width: auto; max-width: 140px; margin: 0 auto; padding: 13px 0; color: #FFFFFF; box-sizing: content-box; }
.cl-hm-value__icon[viewBox="0 0 64 40"] { height: 40px; padding: 15px 0; }
.cl-hm-value__title { margin-top: 8px; font: 400 20px/24px var(--site-font-button); letter-spacing: 0.2px; text-transform: uppercase; }
.cl-hm-value__text { margin-top: 8px; font: 400 16px/22.4px var(--site-font-body); }
a.cl-hm-value__top:hover .cl-hm-value__title { text-decoration: underline; }

/* the six category tiles: 480px cells, the photo under a white box */
.cl-hm-cats { display: grid; grid-template-columns: repeat(3, 1fr); }
.cl-hm-cat { position: relative; height: 480px; padding: 11px 10px 10px; }
.cl-hm-cat__img { width: 100%; height: 100%; padding: 12px; object-fit: cover; }
.cl-hm-cat__box { position: absolute; left: 50%; top: 160px; transform: translateX(-50%); width: 323px; height: 160px; padding-top: 24px;
  background: var(--site-veil); text-align: center; }
.cl-hm-cat__name { color: var(--site-fg); font: 400 32px/48px var(--site-font-heading); letter-spacing: 0.25px; text-transform: uppercase; }
.cl-hm-cat__btn { width: 177px; margin-top: 16px; }

/* the shop by part links over the footer */
.cl-hm-about { display: grid; grid-template-columns: 1fr; max-width: 1416px; margin: 42px auto 16px; padding: 60px 10px; }
.cl-hm-about__col { min-height: 292px; padding: 56px 20px 0; text-align: center; color: var(--site-navy-ink); }
.cl-hm-about__h { color: var(--site-accent); font: 400 36px/41.4px var(--site-font-heading); letter-spacing: 0.25px; text-transform: uppercase; }
.cl-hm-about__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-top: 8px; }
.cl-hm-about__links a { display: inline-flex; align-items: center; min-height: 40px; font: 400 16px/24px var(--site-font-body); text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; }
.cl-hm-about__links a:hover { color: var(--site-accent); }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-hm-pick__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: calc(60 * var(--u));
    background: var(--site-promo-bg); color: var(--site-fg); font: 400 18px/1 var(--site-font-button); text-transform: uppercase; }
  .cl-hm-pick__btn[aria-expanded="true"] { background: var(--site-fg); color: var(--site-bg); }
  .cl-js .cl-hm-pick__fold:not(.is-open) { display: none; }

  .cl-hm-hero { height: calc(208 * var(--u)); }
  .cl-hm-hero__in { padding: calc(20 * var(--u)) calc(6 * var(--u)) 0; }
  .cl-hm-hero__title { font-size: calc(36 * var(--u)); line-height: calc(40 * var(--u)); }
  .cl-hm-hero__text { margin-top: calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .cl-hm-hero__btn { width: calc(112 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(16 * var(--u)); font-size: 16px; }
  /* a 32px button keeps a 40px tap target */
  .cl-hm-hero__btn, .cl-hm-cat__btn { position: relative; }
  .cl-hm-hero__btn::after, .cl-hm-cat__btn::after { content: ""; position: absolute; inset: -5px 0; }

  .cl-hm-promos { grid-template-columns: 1fr; gap: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(11 * var(--u)) calc(159 * var(--u)) calc(10 * var(--u)); }
  .cl-hm-promos__tile img { width: 100%; height: calc(211 * var(--u)); }

  .cl-hm-picks { padding: 0 0 calc(44 * var(--u)); overflow-x: clip; }
  .cl-hm-picks__h { padding: 0 calc(26 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
  .cl-hm-picks__h span { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); }
  .cl-hm-picks__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: calc(117 * var(--u)); margin-top: calc(16 * var(--u));
    padding: 0 calc(58 * var(--u)); scroll-padding: 0 calc(58 * var(--u)); scrollbar-width: none; }
  .cl-hm-pick-card { flex: 0 0 calc(273 * var(--u)); scroll-snap-align: start; min-height: calc(406 * var(--u)); }
  .cl-hm-pick-card__img img { width: calc(273 * var(--u)); height: calc(273 * var(--u)); }
  .cl-hm-pick-card__name { margin-top: calc(20 * var(--u)); }
  .cl-hm-pick-card__name a { min-height: 40px; }
  .cl-hm-pick-card__text { max-width: calc(243 * var(--u)); }
  .cl-hm-arrow { display: flex; align-items: center; justify-content: center; position: absolute; }
  .cl-hm-picks .cl-hm-arrow { top: calc(246 * var(--u)); width: 48px; height: calc(61 * var(--u)); color: #707070; }
  .cl-hm-picks .cl-hm-arrow--prev { left: calc(-6 * var(--u)); }
  .cl-hm-picks .cl-hm-arrow--next { left: calc(348 * var(--u)); }
  .cl-hm-values .cl-hm-arrow { top: calc(123 * var(--u)); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
  .cl-hm-values .cl-hm-arrow--prev { left: calc(30 * var(--u)); }
  .cl-hm-values .cl-hm-arrow--next { left: calc(316 * var(--u)); }

  .cl-hm-values { padding: calc(20 * var(--u)) calc(11 * var(--u)) calc(60 * var(--u)) calc(10 * var(--u)); }
  .cl-hm-values__list { justify-content: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cl-hm-value { flex: 0 0 100%; width: auto; padding: calc(29 * var(--u)) calc(72 * var(--u)) 0; scroll-snap-align: start; }

  .cl-hm-cats { grid-template-columns: 1fr; }
  .cl-hm-cat { height: calc(229 * var(--u)); padding: calc(11 * var(--u)) calc(11 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); }
  .cl-hm-cat__img { padding: calc(12 * var(--u)) calc(8 * var(--u)); object-position: top; }
  .cl-hm-cat__box { top: calc(61 * var(--u)); width: calc(258 * var(--u)); height: calc(108 * var(--u)); padding-top: calc(12 * var(--u)); }
  .cl-hm-cat__name { font-size: calc(24 * var(--u)); line-height: calc(36 * var(--u)); }
  .cl-hm-cat__btn { width: calc(110 * var(--u)); min-height: calc(32 * var(--u)); margin-top: calc(8 * var(--u)); font-size: 16px; padding: 0; }

  .cl-hm-about { grid-template-columns: 1fr; margin: calc(43 * var(--u)) 0 16px; padding: calc(60 * var(--u)) calc(23 * var(--u)) calc(60 * var(--u)) calc(22 * var(--u)); }
  .cl-hm-about__col { padding: calc(56 * var(--u)) calc(20 * var(--u)) 0; }
  .cl-hm-about__col--shop { min-height: calc(212 * var(--u)); }
  .cl-hm-about__h { font-size: calc(36 * var(--u)); line-height: calc(41.4 * var(--u)); }
}

/* their phone stage is 390 wide: a phone a few pixels wider keeps the stage's layout, as theirs does */
@media (min-width: 390.02px) and (max-width: 399.98px) {
  .cl-hm > * { max-width: 390px; }
}

}