@import url(./root.css);

/* ---------- Lifecycle rail: open layout, nodes on a rail, no card boxes ---------- */
.life-section {
  padding: 130px 24px 40px;

  @media (max-width: 991.99px) {
    padding: 90px 16px 20px;
  }
}

.life-container {
  max-width: 1619px;
  margin: 0 auto;
}

.life-intro {
  max-width: 820px;
  margin: 20px auto 80px;
  line-height: var(--leading-150);
  text-align: center;

  @media (width < 1100px) {
    margin-bottom: 56px;
  }
}

.life-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;

  /* the rail runs through the centre of each node */
  &::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, 0.14));
  }

  @media (width < 1100px) {
    grid-template-columns: 1fr;
    row-gap: 48px;
    max-width: 640px;
    margin: 0 auto;

    &::before {
      top: 28px;
      bottom: 28px;
      left: 27px;
      right: auto;
      width: 2px;
      height: auto;
      background: linear-gradient(180deg, var(--red), rgba(255, 255, 255, 0.14));
    }
  }
}

.life-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 88px;
  color: var(--white);

  @media (width < 1100px) {
    padding: 0 0 0 84px;
  }

  @media (max-width: 575.99px) {
    padding-left: 64px;
  }
}

.life-node {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--black);
  border: 2px solid var(--red);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);

  /* the lifecycle starts with the adoption */
  .life-step:first-child & {
    background: var(--red);
  }

  @media (width < 1100px) {
    left: 0;
    translate: none;
  }

  @media (max-width: 575.99px) {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

.life-list::before {
  @media (max-width: 575.99px) {
    left: 21px;
  }
}

.life-stage {
  margin: 0 0 8px;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--red);
}

.life-product {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;

  @media (max-width: 1440px) {
    font-size: 22px;
  }
}

.life-desc {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);

  @media (max-width: 1440px) {
    font-size: 16px;
  }
}

/* what this stage passes to the next one */
.life-handoff {
  width: 100%;
  margin: auto 0 0;
  padding: 12px 0 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.life-link {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--red);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;

  &:hover {
    color: var(--red);
  }
}

/* Link from the procurement preview to the full Source page */
.smarter-cta {
  position: relative;
  z-index: 10;
  width: fit-content;
  margin: 60px auto 0;
  text-decoration: none;

  @media (max-width: 767.99px) {
    margin-top: 36px;
  }
}

/* ---------- FAQ: native details/summary, no script needed ---------- */
.home-faq {
  padding: 0 24px 60px;

  @media (max-width: 575.99px) {
    padding: 0 16px 32px;
  }
}

.home-faq-container {
  max-width: 1100px;
  margin: 0 auto;
}

.home-faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 56px;

  @media (max-width: 575.99px) {
    margin-top: 32px;
  }
}

.home-faq-item {
  border-radius: 16px;
  background: var(--light-black);
  border: 1px solid rgba(255, 255, 255, 0.08);

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    font-size: var(--fs-3xl);
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    img {
      flex: none;
      width: 22px;
      transition: rotate 0.3s ease;
    }
  }

  &[open] summary img {
    rotate: 180deg;
  }

  p {
    margin: 0;
    padding: 0 28px 24px;
    font-size: var(--fs-2xl);
    font-weight: 500;
    line-height: var(--leading-160);
    color: var(--deep-gray);
  }

  @media (max-width: 575.99px) {
    summary {
      padding: 18px 20px;
    }

    p {
      padding: 0 20px 18px;
    }
  }
}

/* ---------- Who We Serve grid ---------- */
.serve-section {
  position: relative;
  padding: 0 20px 140px; /* top space comes from Books, Done Better above */

  @media (max-width: 991.99px) {
    padding: 0 16px 90px;
  }
}

.serve-container {
  position: relative;
  z-index: 10;
  max-width: 1487px;
  margin: 0 auto;
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 60px;

  @media (width < 1300px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 767.99px) {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }
}

.serve-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 21px;
  background: var(--light-black);
  border: 1px solid rgba(255, 255, 255, 0.08);

  h3 {
    margin: 0 0 10px;
    font-size: var(--fs-8xl);
    font-weight: 600;
    line-height: var(--leading-130);
    color: var(--white);
  }

  > p {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 500;
    line-height: var(--leading-160);
    color: var(--deep-gray);
  }

  @media (max-width: 575.99px) {
    padding: 22px 18px 18px;
  }
}

.serve-products {
  list-style: none;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;

  li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.28);

    &::before {
      content: "";
      flex: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.18);
    }
  }

  li.is-used {
    color: var(--white);

    &::before {
      border-color: var(--red);
      background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    }

    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        color: var(--red);
      }
    }
  }
}

.serve-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--red);
  text-decoration: none;

  &:hover {
    color: var(--white);
  }
}

.serve-intro {
  max-width: 1080px;
  margin: 24px auto 0;
  line-height: var(--leading-160);
  text-align: center;

  @media (max-width: 767.99px) {
    margin-top: 16px;
  }
}

/* Two or more columns: line up the product lists and links across cards */
@media (width >= 768px) {
  @supports (grid-template-rows: subgrid) {
    .serve-card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .serve-link {
      align-self: end;
    }
  }
}

/* Why Choose slider: let each card fill the slot slick gives it. With slider.css's 527px cap, cards were
   narrower than their slots on wide screens, so the positions drifted and the loop visibly jumped. */
.slider-section .card-book {
  max-width: none;
}