/* ===== Shared ===== */

.hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.section-title {
  font-family: var(--secondary-font);
  font-size: var(--step-1);
  font-weight: 500;
  text-align: center;
}

/* ===== Hero ===== */

@media only screen and (min-width: 0rem) {
  .products-hero {
    padding: var(--section-padding);
    border-bottom: 1px solid var(--color-divider);
    background: var(--color-surface);

    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }

    .products-hero__headline {
      font-family: var(--secondary-font);
      font-size: var(--step-4);
      font-weight: 500;
      line-height: 1.1;
      text-align: center;
    }

    .products-hero__subheadline {
      text-align: center;
      font-size: var(--step-0);
    }
  }
}

/* ===== Deep Dives ===== */

@media only screen and (min-width: 0rem) {
  .products-showcase {
    padding: var(--section-padding);

    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--space-l);
    }

    .product-categories-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
    }

    .product-category {
      display: grid;
      gap: var(--space-m);
    }

    .product-category__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }

    .product-category__title {
      color: var(--color-text);
      font-family: var(--secondary-font);
      font-size: var(--step-2);
      font-weight: 500;
      line-height: 1.1;
    }

    .product-category__description {
      font-size: var(--step-0);
    }

    .product-category__image > img {
      width: 100%;
      aspect-ratio: 1.6;
      object-fit: cover;
      object-position: center;
    }

    .product-category__details {
      display: grid;
      gap: var(--space-s);

      padding-top: var(--space-s);
      border-top: 1px solid var(--color-divider);

      .product-category__detail {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
      }

      .product-category__detail-title {
        font-size: var(--step--2);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent);
      }

      .product-category__detail-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);

        .product-category__detail-item {
          font-size: var(--step--1);
        }

        .product-category__detail-item::before {
          content: "•";
          margin: 0 var(--space-3xs);
        }
      }
    }

    .product-category__tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);

      .pill {
        display: inline-flex;
        padding: var(--space-3xs) var(--space-xs);
        border: 1px solid var(--color-divider);

        background: var(--color-surface-2);
        border-radius: 999px;
        color: var(--color-text);
        font-size: var(--step--2);
        white-space: nowrap;
      }
    }
  }
}

@media only screen and (min-width: 48rem) {
  .products-showcase {
    .product-category {
      grid-template-columns: 1fr 1fr;
    }

    .product-category__details {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-m);
    }

    /* Reverse the order of the image and text in even items */
    .product-category:nth-child(even) {
      .product-category__image {
        grid-column: 2;
        grid-row: 1;
      }

      .product-category__content {
        grid-column: 1;
        grid-row: 1;
      }
    }
  }
}

/* ===== CTA ===== */

@media only screen and (min-width: 0rem) {
  .products-cta {
    padding: var(--section-padding);
    background: var(--color-surface);

    .content-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      align-items: center;
      text-align: center;
    }

    .products-cta__title {
      font-family: var(--secondary-font);
      font-size: var(--step-1);
      font-weight: 500;
      line-height: 1.1;
      color: var(--color-text);
    }

    .products-cta__body {
      font-size: var(--step--1);
    }

    .products-cta__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      justify-content: center;
      margin-top: var(--space-2xs);
    }
  }
}