/* assets/css/hardware.css
 * Layout for the Hardware page.
 */

/* ---- Page head ------------------------------------------------------ */

.kit-hero {
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding: 40px 0;
  background: var(--band);
}

.kit-hero > .container {
  width: 100%;
  max-width: var(--hero-w);
}

  /* PROPORTIONAL, NOT FIXED. At a fixed 726px the artwork kept its full size
     while the narrower band took every pixel out of the copy. 1.16fr is the
     ratio the two columns already had at 1460, so the balance is unchanged and
     both simply scale. */
.kit-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 56px;
  align-items: center;
}

.kit-hero__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 3px;
  margin-top: 8px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

.kit-hero__lead {
  max-width: 470px;
  margin-top: 18px;
}

.kit-hero__art {
  width: 100%;
  height: auto;
}

/* ---- The honesty line -----------------------------------------------
 * Sits immediately under the head on purpose. A hardware page is where a
 * small club starts worrying about cost, and the answer should arrive
 * before the products do.
 */

.kit-note {
  padding-top: 46px;
}

.kit-note__text {
  max-width: 860px;
  margin-inline: auto;
  padding: 22px 30px;
  border-left: 4px solid var(--brand);
  font-size: var(--lead);
  line-height: 28px;
  color: var(--ink-soft);
}

.kit-note__text strong {
  color: var(--ink);
  font-weight: 500;
}

/* ---- The kit --------------------------------------------------------- */

.kit-grid-section {
  padding-top: 90px;
}

.kit-grid-section .sec-head {
  gap: 10px;
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
}

.kit {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 36px;
  border-radius: var(--radius);
  background: var(--paper);
}

/* The illustration spans the card rather than sitting in a tile, so each
   product is shown in the place it is actually used. */
.kit__art {
  width: 100%;
  height: auto;
  margin-bottom: 4px;
}

.kit__name {
  margin-top: 18px;
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.kit__body {
  margin-top: 10px;
  color: var(--ink-soft);
}

.kit__list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 22px;
}

.kit__list li {
  position: relative;
  padding-left: 18px;
}

.kit__list li + li {
  margin-top: 10px;
}

.kit__list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.kit-grid__note {
  margin-top: 30px;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- Bring your own --------------------------------------------------- */

.byo {
  padding-top: 110px;
}

.byo__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 60px 70px;
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--white);
}

.byo .eyebrow,
.byo__title {
  color: var(--white);
}

.byo__title {
  margin-top: 6px;
  font-size: var(--h3);
  line-height: var(--h3-lh);
}

.byo__lead {
  margin-top: 16px;
  color: var(--band);
}

.byo__list li strong {
  font-weight: 600;
  color: var(--white);
}

.byo__list li {
  padding: 16px 0;
  border-bottom: 1px solid rgba(166, 232, 196, 0.25);
  font-size: var(--lead);
  line-height: 26px;
}

.byo__list li:first-child {
  padding-top: 0;
}

.byo__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1340px) {
  .kit-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .kit-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

@media (max-width: 1100px) {
  .kit-hero {
    padding: 56px 0 52px;
  }

  .kit-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  

  .kit-hero__title .marker {
    display: none;
  }

  .kit-hero__art {
    max-width: 620px;
  }

  .kit-grid-section,
  .byo,
    .byo__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 36px;
  }

  }

@media (max-width: 640px) {
  

  .kit-note__text {
    padding: 18px 22px;
  }

  .kit-grid {
    grid-template-columns: 1fr;
  }

  .byo__inner {
    padding: 34px 24px;
  }

  }