/*
 * Template-specific styles for singular Tutorial pages.
 *
 * This file styles two server-rendered tutorial access surfaces:
 * - the linked bundle products panel shown on tutorial pages
 * - the conditional unlock CTA shown only when the current user lacks access
 *
 * The linked products panel intentionally renders bundle products only; the
 * primary single-access product is handled separately by the unlock CTA.
 */

.go-tutorial-associated-products {
  padding: 2.5em var(--wp--preset--spacing--50);
  margin-block-start: var(--wp--preset--spacing--50);
  > ul {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(max(150px, calc(16.66667% - 1.04167em)), 1fr)
      );
    gap: 1.25em;
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    > li > div {
      border-radius: 8px;
      img {
        max-width: 100%;
        height: auto;
      }
    }
  }
}

.go-tutorial-unlock-cta {
  box-sizing: border-box;
  display: flex;
  gap: var(--wp--preset--spacing--40);
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--wp--preset--spacing--30);
  margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
}