/*
 * Runtime card layout helpers used by server-rendered markup.
 *
 * Current use in this theme:
 * - MailPoet subscription/fallback cards rendered by SubscriptionFormatter::render_subscription_card()
 *   output `<div class="go-cards single"><div class="go-card ...">...</div></div>`.
 *
 * Why this stays separate from block variation JSON (`is-style-cards--6`, `is-style-card--7`):
 * - The JSON variation styles are editor/block driven and primarily grid/wrap oriented.
 * - This file adds the `.go-cards.single` flex rule that centers one card and constrains width,
 *   which is needed for MailPoet state/confirmation messages.
 */

/* This not nested below because it is also used by Linked Products blocks in our Tutorial CPT template - dynamically created */
.go-card {
  padding: 2.5em 2em;
  /*
      Text is centred in the JSON cards, but I have not so far needed it to be in these. Consider the MailPoet messages and the Support articles bullet list.
      text-align: justify;
    */
  background-color: var(--wp--preset--color--card-bg);
  background-image: var(--wp--custom--backgrounds--card--current);
  border-radius: var(--wp--preset--border-radius--medium);
  > p {
    text-indent: 1em;
    & + p {
      margin-top: 0.75em;
    }
  }
  img {
    border-radius: var(--wp--preset--border-radius--small);
  }
}

.go-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: max(1.5rem, 2vw);
  max-width: var(--wp--style--global--content-size);
  margin-right: auto;
  margin-left: auto;

  /* This optimises the layout for single cards - e.g. on MailPoet pages. It currently only exists here and not as a block variation */
  &.single {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    > .go-card {
      flex: 1 1 22rem;
      width: 100%;
      max-width: 42rem;
    }
  }
}

.go-tutorial-associated-products {
  padding-right: var(--wp--preset--spacing--50);
  padding-left: 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);
}