/*
 * The Product Set Hero (src/Blocks/SetHero.php, Sets\View\HeroLayout) on the parts of a set
 * (plugin/resources/front/sets.css), as the boards Home and Home-Mobile draw it in the theme's
 * Hero with a product set section (patterns/home-hero-set.php), which gives the block its box and stands its title over
 * the photo (resources/styles/patterns/home-hero-set.css). The photo fills the box in its own ratio, at least as wide
 * and tall as the box, with the middle of the box round its points (`--lanternwp-focus-*`, from the block's
 * Photo::crop()) in the middle of the box as far as the photo's edges allow: a crop keeps the points on their products
 * and in the frame. The panel is a 25rem `base` card at the end of the wide column with the section's spacing above and
 * under it, in the flow, so a longer set makes the section taller: the title with the count, the rows without boxes
 * (the hero adds the whole set), the longest time to dispatch and the button. No container here: containment would
 * make the block a stacking context, and the section's fade and title stand between the photo and the panel. Below
 * 80em, where a 25rem panel would cover a good part of the photo, the block gives up its boxes (`display: contents`)
 * so the section orders its parts in a column: the photo framed round its points (`--lanternwp-crop-*`, from the
 * block), the section's title, then the panel on the page; a point opens its product in the sheet.
 */
.wp-block-lanternwp-set-hero {
  display: grid;

  & .lanternwp-sets__sets {
    display: grid;
  }

  & .lanternwp-sets__set {
    container: none;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 30rem;
  }

  /* The photo's frame: below the section's fade and title, which stand at 2 and 3. */
  & .lanternwp-sets__stage {
    container: lanternwp-sets-stage / size;
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    background: var(--wp--custom--color--media);
  }

  /* Behind the photo, where the section is wider than the photo grows: the same photo, blurred across the frame. */
  & .lanternwp-sets__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--lanternwp-photo) center / cover no-repeat;
    filter: blur(2.5rem);

    /* Past the frame, so the blur has no pale rim. */
    scale: 1.15;
  }

  /*
   * Physical, as the points' places on it. The photo grows with the section up to 90rem (`--lanternwp-frame`), the
   * width of the boards, where the wide column with its padding stops growing and the title and the panel stop moving
   * apart; on a wider screen it keeps the place it has under them there, in the middle, and its sides fade into its
   * blurred copy. In that frame its corner moves
   * its points' middle to the frame's, kept between 0 and the frame's size less its own, so no edge of it shows in
   * the frame.
   */
  & .lanternwp-sets__photo {
    --lanternwp-frame: min(100cqw, 90rem);
    --lanternwp-photo-width: max(var(--lanternwp-frame), 100cqh * (var(--lanternwp-ratio)));
    --lanternwp-photo-height: calc(var(--lanternwp-photo-width) / (var(--lanternwp-ratio)));
    --lanternwp-photo-fade: clamp(0px, (100cqw - var(--lanternwp-photo-width)) / 2, 8rem);

    position: absolute;
    top: clamp(
      100cqh - var(--lanternwp-photo-height),
      50cqh - var(--lanternwp-photo-height) * var(--lanternwp-focus-y, 50) / 100,
      0px
    );
    left: calc(
      (100cqw - var(--lanternwp-frame)) / 2 +
        clamp(
          var(--lanternwp-frame) - var(--lanternwp-photo-width),
          var(--lanternwp-frame) / 2 - var(--lanternwp-photo-width) * var(--lanternwp-focus-x, 50) / 100,
          0px
        )
    );
    inline-size: var(--lanternwp-photo-width);
    aspect-ratio: var(--lanternwp-ratio);
    border-radius: 0;
    mask-image: linear-gradient(
      to right,
      transparent,
      currentcolor var(--lanternwp-photo-fade),
      currentcolor calc(100% - var(--lanternwp-photo-fade)),
      transparent
    );
  }

  /* As tall as its content, up to the window's height or the theme's section's least height (47.5rem), whichever is
     more; taller, its list scrolls, so the title, the button and the department's link stay in view. */
  & .lanternwp-sets__side {
    z-index: 4;
    place-self: start end;
    box-sizing: border-box;
    inline-size: 25rem;
    max-block-size: max(100svh, 47.5rem);
    margin-block: var(--wp--preset--spacing--70);
    margin-inline-end: max(
      var(--wp--style--root--padding-right, var(--wp--preset--spacing--50)),
      (100% - var(--wp--style--global--wide-size)) / 2
    );
    padding: var(--wp--preset--spacing--50);
    overflow: hidden;
    border-radius: var(--wp--custom--radius--panel);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
  }

  & .lanternwp-sets__head {
    align-items: baseline;
  }

  & .lanternwp-sets__count {
    flex-shrink: 0;
  }

  /* A list that scrolls fades out at its foot until it is scrolled to its end: the fade runs on the list's own scroll,
     which a list that fits has none of. */
  & .lanternwp-sets__items {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    mask-image: linear-gradient(to top, transparent, currentcolor var(--lanternwp-sets-fade));
    animation: lanternwp-sets-fade linear both;
    animation-timeline: scroll(self);
  }

  & .lanternwp-sets__item {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  }

  /* The link to the set's department under the button (HeroLayout::shop()), the theme's arrow link. */
  & .lanternwp-sets__shop {
    align-self: center;
    margin: 0;
  }

  & .lanternwp-sets__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.lanternwp-sets__time {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--xs);

  & svg {
    flex: none;
    inline-size: 0.9375rem;
    block-size: 0.9375rem;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.75;
    stroke-linejoin: round;
  }

  &[hidden] {
    display: none;
  }
}

@property --lanternwp-sets-fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0;
}

@keyframes lanternwp-sets-fade {
  from {
    --lanternwp-sets-fade: 3rem;
  }

  to {
    --lanternwp-sets-fade: 0;
  }
}

/* The column layout, below 80em as the section's (home-hero-set.css). */
@media (width < 80em) {
  .wp-block-lanternwp-set-hero,
  .wp-block-lanternwp-set-hero :is(.lanternwp-sets__sets, .lanternwp-sets__set) {
    display: contents;
  }

  /* The photo framed round its points, before the section's title; the frame and the photo are physical, as the
     points' places on it. */
  .wp-block-lanternwp-set-hero .lanternwp-sets__stage {
    container: none;
    position: relative;
    inset: auto;
    order: -1;
    display: block;
    aspect-ratio: var(--lanternwp-crop-ratio);
  }

  .wp-block-lanternwp-set-hero .lanternwp-sets__stage::before {
    content: none;
  }

  .wp-block-lanternwp-set-hero .lanternwp-sets__photo {
    position: absolute;
    top: var(--lanternwp-crop-y);
    left: var(--lanternwp-crop-x);
    inline-size: var(--lanternwp-crop-size);
    mask-image: none;
  }

  .wp-block-lanternwp-set-hero .lanternwp-sets__side {
    align-self: auto;
    inline-size: auto;
    max-block-size: none;
    margin-block: 0;
    margin-inline: var(--wp--style--root--padding-left, var(--wp--preset--spacing--50))
      var(--wp--style--root--padding-right, var(--wp--preset--spacing--50));
    padding: var(--wp--preset--spacing--20) 0 0;
    overflow: visible;
    border-radius: 0;
  }

  .wp-block-lanternwp-set-hero .lanternwp-sets__items {
    overflow: visible;
    mask-image: none;
  }
}