/**
 * product-guide.css
 */

/* Component: Product Guide */
.guide {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;
  padding: 32px;
  border-radius: var(--border-radius-default);
  background: var(--color-blue-light);

  .guide-title {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
  }

  .guide-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 32px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;

    .guide-step {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
      min-width: 0;
      counter-increment: guide-step;

      /* Drawn without an image too, so every step keeps its place for one. */
      .guide-image {
        overflow: hidden;
        aspect-ratio: 2 / 1;
        border-radius: var(--border-radius-default);
        background: var(--color-white);

        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .guide-content {
        display: flex;
        flex-direction: column;
        gap: 12px;

        /* The offset keeps the counter on the first line when the title wraps. */
        .guide-heading {
          --guide-counter-size: 24px;
          --guide-counter-offset: calc((var(--guide-counter-size) - var(--font-size-medium) * var(--line-height-body)) / 2);

          display: flex;
          align-items: flex-start;
          gap: 10px;
          margin: 0;
          padding-top: var(--guide-counter-offset);
          color: var(--color-black-light);
          font-size: var(--font-size-medium);
          font-weight: 600;
          line-height: var(--line-height-body);
          letter-spacing: 0.5px;
          text-transform: uppercase;

          &::before {
            content: counter(guide-step);
            display: inline-flex;
            flex: 0 0 var(--guide-counter-size);
            align-items: center;
            justify-content: center;
            width: var(--guide-counter-size);
            height: var(--guide-counter-size);
            margin-top: calc(-1 * var(--guide-counter-offset));
            border-radius: 50%;
            background: var(--color-primary);
            color: var(--color-white);
            font-size: var(--font-size-small);
            letter-spacing: 0;
            line-height: 1;
          }

          /* Trims the line box to the digit height. */
          @supports (text-box: trim-both cap alphabetic) {
            &::before {
              display: block;
              box-sizing: border-box;
              padding-top: calc((var(--guide-counter-size) - 1cap) / 2);
              text-align: center;
              text-box: trim-both cap alphabetic;
            }
          }
        }

        .guide-text {
          color: var(--color-grey-dark);
          font-size: var(--font-size-medium);
          line-height: var(--line-height-single);

          p {
            margin: 0 0 8px;
          }

          p:last-child {
            margin-bottom: 0;
          }

          a {
            color: var(--color-primary);
            text-decoration: underline;
            text-underline-offset: 2px;

            &:hover {
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

/* Tablet: Product Guide */
@media (max-width: 1024px) {
  .guide {
    padding: 16px;

    .guide-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* Mobile: Product Guide */
@media (max-width: 767px) {
  .guide {
    gap: 0;
    margin-bottom: 48px;
    padding: 0;

    .guide-title {
      padding: 16px 16px 8px;
    }

    /* The steps carry the padding, so the borders run edge to edge. */
    .guide-steps {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;

      .guide-step {
        padding: 16px;
        border-bottom: 1px solid var(--color-white);

        &:last-child {
          border-bottom: 0;
        }
      }
    }
  }
}