/* cl-home.css: the home in WELD's look (templates/home.html), measured on weldwheels.com's home at 1440 and
   in its 390px phone stage: the full-bleed hero, the vehicle band on the page grey, the 2x2 photo tiles with
   Druk Wide italic names, the dark featured row and the white favourites row. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

.cl-home { background: var(--site-bg); }
.cl-wrap { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter); }

/* ---------- hero: one banner, the whole width ---------- */
.cl-hero { display: block; background: var(--site-dark); }
.cl-hero img { width: 100%; height: auto; aspect-ratio: 1600 / 640; object-fit: cover; }

/* ---------- the vehicle band, where WELD's wheel-size finder sits ---------- */
.cl-finder { min-height: 212px; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; }

/* ---------- shop-by-use tiles ---------- */
.cl-tiles { padding: 0 var(--site-gutter) 48px; }
.cl-tiles__grid { max-width: var(--site-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cl-tile { position: relative; display: block; aspect-ratio: 662 / 372; overflow: hidden; background: #FFFFFF; color: #FFFFFF; }
.cl-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cl-tile:hover img { transform: scale(1.03); }
.cl-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(rgba(0, 0, 0, 0), #000000); }
.cl-tile__h { position: absolute; z-index: 1; left: 16px; top: 16px; font: italic 700 44px/44px var(--site-font-heading); letter-spacing: -4px; text-transform: uppercase; }
.cl-tile__h span { font-family: var(--site-font-call); letter-spacing: 0; }
.cl-tile__go { position: absolute; z-index: 1; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; font: italic 900 32px/48px var(--site-font-call); text-transform: uppercase; }

/* ---------- section heads: Druk Wide capitals, the Druk Condensed link on the right ---------- */
.cl-sechead { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 48px var(--site-gutter) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cl-sechead__h { font: 700 24px/24px var(--site-font-heading); text-transform: uppercase; }
.cl-more { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 4px; font: italic 900 16px/24px var(--site-font-call); letter-spacing: 1.6px; text-transform: uppercase; }
.cl-more:hover { color: var(--site-accent); }

.cl-dark { background: var(--site-dark); color: #FFFFFF; }
.cl-light { background: var(--site-plain); color: var(--site-fg); }

/* ---------- card rows: the featured wheels (dark) and the fan favourites (light) ---------- */
.cl-row { display: grid; grid-auto-flow: column; grid-auto-columns: 309px; gap: 30px; overflow-x: auto; scrollbar-width: none; padding: 48px var(--site-gutter) 48px 57px; }
.cl-row::-webkit-scrollbar { display: none; }
.cl-row--favorites { grid-auto-columns: 321px; gap: 20px; padding-left: var(--site-gutter); max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; }
.cl-card { display: flex; flex-direction: column; height: 100%; min-height: 447px; padding: 16px; background: var(--site-tile); border: 1px solid var(--site-tile); }
.cl-card--dark { background: var(--site-dark-card); border-color: var(--site-dark-card); }
.cl-row--favorites .cl-card { min-height: 477px; }
.cl-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin-bottom: 64px; transition: transform 0.3s ease; }
.cl-card:hover img { transform: scale(1.04); }
.cl-card__name { font: 900 16px/20px var(--site-font-heading); text-transform: uppercase; }
.cl-card__note { margin-top: 4px; font: 400 14px/21px var(--site-font-body); }

/* ---------- phones ---------- */
@media (max-width: 979.98px) {
  .cl-hero img { aspect-ratio: 640 / 720; }
  .cl-finder { min-height: 296px; padding: 8px 0; }
  .cl-tiles { padding: 24px 16px 24px; }
  .cl-tiles__grid { grid-template-columns: 1fr; gap: 8px; }
  .cl-tile { aspect-ratio: 358 / 201; }
  .cl-tile__h { left: 8px; top: 8px; font-size: 24px; line-height: 24px; letter-spacing: -2px; }
  .cl-tile__go { left: 8px; bottom: 8px; font-size: 24px; line-height: 40px; }
  .cl-sechead { padding: 24px 16px 0; flex-direction: column; align-items: flex-start; gap: 4px; }
  .cl-sechead__h { line-height: 24px; }
  .cl-more { padding: 0; min-height: 40px; }
  .cl-row, .cl-row--favorites { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 8px; padding: 24px 16px; overflow: visible; }
  .cl-card { min-height: 316px; }
  .cl-row--favorites .cl-card { min-height: 353px; }
  .cl-card img { margin-bottom: 40px; }
}

}