/* cl-home.css: the home (templates/home.html) in yuasabatteries.com's look, measured at 1440 and in their 390 stage:
   the hero, the black band round the kit's vehicle band, the four series and the quick links. Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- the hero: their first slide ---------- */
.cl-hero { position: relative; height: 598px; overflow: hidden; background: var(--site-dark); color: var(--site-dark-fg); }
.cl-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cl-hero__in { position: relative; max-width: 1094px; margin: 0 auto; padding-top: 81px; }
.cl-hero__h { margin: 0 0 30px; font: 700 60px/70px var(--site-font-heading); text-transform: uppercase; color: #EC2028; }
.cl-hero__btn { width: 342px; }

/* ---------- the kit's vehicle band on their black search band ---------- */
.cl-find { min-height: 328px; padding: 132px 0 40px; background: var(--site-dark); }
.cl-find__h { margin-bottom: 30px; padding: 0 16px; font: 700 30px/36px var(--site-font-heading); text-transform: uppercase; text-align: center; color: var(--site-dark-fg); }
.cl-find__h em { font-style: normal; color: var(--site-accent); }

/* ---------- the four series in a row, their names in the accent ---------- */
.cl-series { padding: 60px 16px; }
.cl-series__list { display: grid; grid-template-columns: repeat(4, 295px); justify-content: center; gap: 40px 30px; }
.cl-series__tile { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cl-series__tile img { width: 295px; height: 148px; object-fit: contain; }
.cl-series__name { margin-top: 30px; font: 700 24px/36px var(--site-font-heading); color: var(--site-accent); }
.cl-series__tile:hover .cl-series__name { text-decoration: underline; }
/* the battery photos are drawn for white: a white plate under them in the dark */
:root[data-parts-theme="dark"] .cl-series__tile img { background: #FFFFFF; }

/* ---------- the quick links ---------- */
.cl-links { min-height: 508px; padding: 92px 0 43px; }
.cl-links__h { font: 700 48px/56px var(--site-font-heading); text-align: center; }
.cl-links__list { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 68px; }
.cl-links__tile { display: flex; flex-direction: column; align-items: center; color: var(--site-accent); }
.cl-links__icon { width: 280px; height: 200px; }
.cl-links__mask { fill: var(--site-bg); }  /* the house and the plug drawn over the battery: the page colour hides the lines under them */
.cl-links__label { margin-top: 6px; font: 700 22px/25.7px var(--site-font-heading); text-transform: uppercase; }
.cl-links__tile:hover .cl-links__label { text-decoration: underline; }

/* ---------- phones: their 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-hero { height: 306px; }
  .cl-hero__in { padding: 28px 16px 0 20px; }
  .cl-hero__h { margin: 0 0 22px; font-size: 38px; line-height: 38px; }
  .cl-hero__btn { width: 304px; max-width: 100%; min-height: 48px; font-size: 16px; }
  .cl-find { min-height: 553px; padding: 110px 0 32px; }
  .cl-find__h { font-size: 20px; line-height: 24px; }
  .cl-series { padding: 40px 16px; }
  .cl-series__list { grid-template-columns: 1fr; row-gap: 45px; }
  .cl-series__tile img { width: 100%; height: 200px; }
  .cl-series__name { margin-top: 10px; }
  .cl-links { min-height: 1290px; padding: 66px 0 42px; }
  .cl-links__h { padding: 0 80px 0 16px; font-size: 36px; line-height: 44px; }
  .cl-links__list { grid-template-columns: 1fr; margin-top: 75px; }
  .cl-links__icon { width: 284px; height: 232px; }
  .cl-links__label { margin-top: 0; line-height: 34px; }
}

}