/*
 * The Product Sets block (src/Blocks/Sets.php), as the boards Set, Set-Mobile and Set-Home draw it, on the parts of a
 * set (plugin/resources/front/sets.css): the sets side by side in a wide section (two at most, from 71rem, where each
 * has the 34rem its list needs beside its photo; a landscape photo or a set without a photo takes the row alone). A set
 * with a photo is the photo (its own ratio) beside its items from 34rem of the set's width, else above them. Beside it
 * the items start at its top and never get narrower than 17.5rem; the photo takes 6 of 11 parts (a landscape one 7 of
 * 12) but never stands taller than 32rem, its width from its ratio (`--lanternwp-ratio`), and the items take the rest
 * of the row.
 *
 * A set without a photo is the same rows as a numbered list in a narrow column; from 48rem its items are cards, four
 * to the row as the store's product cards: the picture with its number and its box on it, then the name, what the set
 * pins, the price, and the choices one under another. Up to three cards leave the last column to the total (how many
 * pieces, their price, the button and a note on a `surface` panel); four take the row, the total under it in a line;
 * from five the row scrolls sideways under the title's arrows, the total under it. On a product page the block is its
 * own section before the related products, the theme's section spacing above it and the store's heading over it.
 * The arrows are controls (docs/design-tokens.html#roles).
 */
.wp-block-lanternwp-sets {
  container: lanternwp-sets / inline-size;
}

.wp-block-lanternwp-sets.is-product-page {
  padding-block-start: var(--wp--custom--layout--section);
}

.lanternwp-sets__heading {
  margin-block: 0 var(--wp--preset--spacing--60);
}

.lanternwp-sets__sets {
  display: grid;
  gap: var(--wp--preset--spacing--70);
}

@container lanternwp-sets (min-width: 71rem) {
  .lanternwp-sets__sets:has(> .lanternwp-sets__set + .lanternwp-sets__set):not(:has(> .is-landscape)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lanternwp-sets__sets:has(> .is-list) {
    grid-template-columns: none;
  }
}

.lanternwp-sets__grid {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}

@container lanternwp-set (min-width: 34rem) {
  .lanternwp-sets__grid {
    --lanternwp-share: 6 / 11;

    grid-template-columns:
      minmax(
        0,
        min(
          calc((100% - var(--wp--preset--spacing--50)) * var(--lanternwp-share)),
          calc(32rem * var(--lanternwp-ratio, 2 / 3))
        )
      )
      minmax(17.5rem, 1fr);
    align-items: start;
  }

  .is-landscape .lanternwp-sets__grid {
    --lanternwp-share: 7 / 12;
  }
}

/* A set without a photo: the title with the arrows of a row that scrolls, the items, then the total. In a narrow column
   the items are the list's rows and the total is the button alone. */
.lanternwp-sets__set.is-list {
  --lanternwp-columns: 4;
  --lanternwp-card: calc(
    (100% - (var(--lanternwp-columns) - 1) * var(--wp--custom--grid--gap)) / var(--lanternwp-columns)
  );

  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.lanternwp-sets__arrows {
  display: none;
  gap: var(--wp--preset--spacing--20);
}

.wp-block-lanternwp-sets .lanternwp-sets__arrow {
  display: inline-grid;
  place-items: center;
  inline-size: var(--wp--custom--size--icon-button, 2.75rem);
  block-size: var(--wp--custom--size--icon-button, 2.75rem);
  padding: 0;
  border: 1px solid var(--wp--preset--color--border-strong);
  border-radius: var(--wp--custom--radius--control);
  background: transparent;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  transition:
    border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing),
    color var(--wp--custom--motion--fast) var(--wp--custom--motion--easing);

  & svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }

  &:disabled {
    border-color: var(--wp--preset--color--border-subtle);
    color: var(--wp--preset--color--muted);
    cursor: default;
  }

  &:focus-visible {
    outline: 2px solid var(--wp--preset--color--contrast);
    outline-offset: 2px;
  }

  &:active:not(:disabled) {
    scale: var(--wp--custom--interaction--press);
  }
}

.lanternwp-sets__row {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.lanternwp-sets__summary {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}

.lanternwp-sets__sum,
.lanternwp-sets__hint {
  display: none;
}

.lanternwp-sets__sum {
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}

.lanternwp-sets__hint {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);
}

.lanternwp-sets__total {
  font-size: var(--wp--preset--font-size--xl);
  font-weight: var(--wp--custom--weight--bold);
}

/* From 48rem a card per item, as wide as the store's product cards: four columns of the grid's gap. */
@container lanternwp-set (min-width: 48rem) {
  .is-list .lanternwp-sets__items {
    display: grid;
    grid-auto-columns: var(--lanternwp-card);
    grid-auto-flow: column;
    gap: var(--wp--custom--grid--gap);
    align-items: start;
    border: 0;
  }

  .is-list .lanternwp-sets__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--wp--preset--spacing--20);
    padding: 0;
    border: 0;

    &::before {
      display: none;
    }

    &.is-out .lanternwp-sets__thumb {
      opacity: 0.55;
    }
  }

  /* The card's parts in the board's order: picture, name, what the set pins, price, sold out, choices. */
  .is-list .lanternwp-sets__info {
    display: contents;
  }

  .is-list .lanternwp-sets__thumb {
    order: 0;
    margin-block-end: var(--wp--preset--spacing--10);
  }

  .is-list .lanternwp-sets__named {
    order: 1;
  }

  .is-list .lanternwp-sets__pinned {
    order: 2;
  }

  .is-list .lanternwp-sets__price {
    order: 3;
    align-items: flex-start;
  }

  .is-list .lanternwp-sets__sold-out,
  .is-list .lanternwp-sets__view {
    order: 4;
  }

  .is-list .lanternwp-sets__choices {
    order: 5;
    flex-direction: column;
    align-items: stretch;

    & .lanternwp-sets__choice,
    & select {
      inline-size: 100%;
    }

    & .wp-block-lanternwp-option-guide {
      align-self: flex-start;
    }
  }

  .is-list .lanternwp-sets__number {
    inset-block-start: var(--wp--preset--spacing--20);
    inset-inline-start: var(--wp--preset--spacing--20);
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }

  /* The box on the picture's corner, on a `base` patch. */
  .is-list .lanternwp-sets__include {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--wp--preset--spacing--20);
    inset-inline-end: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--10);
    border-radius: var(--wp--custom--radius--field);
    background: var(--wp--preset--color--base);

    &:empty {
      display: none;
    }
  }

  .is-list .lanternwp-sets__sum {
    display: flex;
  }

  .is-list .lanternwp-sets__hint {
    display: block;
  }

  /* Up to three cards: the total in the row's last column, on a `surface` panel. */
  .is-few .lanternwp-sets__row {
    display: grid;
    grid-template-columns: repeat(var(--lanternwp-columns), minmax(0, 1fr));
    gap: var(--wp--custom--grid--gap);
    align-items: start;
  }

  .is-few .lanternwp-sets__items {
    display: contents;
  }

  .is-few .lanternwp-sets__summary {
    grid-column: var(--lanternwp-columns);
    gap: var(--wp--preset--spacing--40);
    padding: var(--wp--preset--spacing--50);
    border-radius: var(--wp--custom--radius--panel);
    background: var(--wp--preset--color--surface);
  }

  .is-few .lanternwp-sets__hint {
    order: 1;
  }

  /* Four cards and more: the total under the row in a line, between lines. */
  :is(.is-full, .is-scrolling) .lanternwp-sets__summary {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--50);
    padding-block-start: var(--wp--preset--spacing--40);
    border-block-start: 1px solid var(--wp--preset--color--border-subtle);

    & .lanternwp-sets__hint {
      order: -1;
    }

    & .lanternwp-sets__add {
      inline-size: 20rem;
    }
  }

  /* From five cards the row scrolls under the arrows by the title, a card at a time. */
  .is-scrolling .lanternwp-sets__arrows {
    display: inline-flex;
  }

  .is-scrolling .lanternwp-sets__items {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    & > .lanternwp-sets__item {
      scroll-snap-align: start;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-lanternwp-sets .lanternwp-sets__arrow {
    transition: none;
  }
}