/* Product cards stay in document flow. Absolute layers are limited to the
   original decorative frame and its text-free background underlay. */
.landing-related-products { margin: 0; color: #fff; }
.landing-related-list { width: 100%; }
.landing-related-card {
  /* Colors sampled from text-free areas of this project's original card. */
  --redbook-fill: linear-gradient(180deg, #301b40, #171522 20%, #161520 65%, #35194e);
  isolation: isolate;
  min-width: 0;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.landing-related-card.redbook-tone-1 { --redbook-fill: linear-gradient(145deg, #e95a88, #d64674 24%, #ce4070 65%, #e04b84); }
.landing-related-card.redbook-tone-2 { --redbook-fill: linear-gradient(180deg, #382595, #312188 20%, #32218f 65%, #4027b2); }
.landing-related-card.redbook-tone-3 { --redbook-fill: linear-gradient(180deg, #2a1f38, #191924 20%, #181624 65%, #33194d); }
.landing-related-card.redbook-tone-4 { --redbook-fill: linear-gradient(145deg, #ed5787, #d3406b 24%, #c23c67 65%, #d2437b); }
.landing-related-card.redbook-tone-5 { --redbook-fill: linear-gradient(180deg, #37279d, #302089 20%, #32238f 65%, #4326b3); }
.landing-related-card.redbook-tone-6 { --redbook-fill: linear-gradient(180deg, #2e2438, #1b1c26 20%, #171720 65%, #2e1a42); }
.landing-related-card::before { position: absolute; inset: 1%; z-index: -1; border-radius: 8cqw; background: var(--redbook-fill); content: ""; }
.landing-related-card:focus-visible { outline: 3px solid #8b0632; outline-offset: 3px; }
.landing-related-image { display: block; border-radius: .4em; }
.redbook-related-caption { font-weight: 400; }
.redbook-related-arrow { background-image: var(--redbook-art); background-repeat: no-repeat; clip-path: ellipse(49% 49% at 50% 50%); pointer-events: none; }
/* A 36px nine-slice preserves the complete source corner, even on tall cards.
   The border is painted at three times its 12px mask width; the mask removes
   its inner two-thirds and all center pixels, including any raster identity.
   Only straight edge strips stretch when live content grows the card. */
.redbook-related-rim {
  position: absolute;
  inset: 0;
  border: max(3px, 2.83cqw) solid transparent;
  border-radius: 8.5cqw;
  border-image-source: var(--redbook-art);
  border-image-slice: 36;
  border-image-width: 3;
  border-image-repeat: stretch;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Flex wraps and centers every partial row; each card's content uses Grid. */
.landing-related-products--flow[data-related-products-container] {
  visibility: visible !important;
  pointer-events: auto !important;
  position: static;
  width: 100%;
  height: auto;
  overflow: visible;
  padding: max(18px, 1.92708vw) 1.04167% max(20px, 1.66667vw);
  background: url('./assets/jw012-xhs/recommend-background.webp') top center / 100% auto no-repeat;
}
.landing-related-products--flow .landing-related-list {
  --product-gap: max(4px, .9375vw);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  column-gap: var(--product-gap);
  row-gap: max(2px, .2604167vw);
  height: auto;
}
.landing-related-products--flow .landing-related-redbook-card {
  position: relative;
  container-type: inline-size;
  flex: 0 0 calc((100% - 3 * var(--product-gap)) / 4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 0 max(2px, .104167vw);
  min-width: min(100%, 6em);
  max-width: 100%;
  width: auto;
  height: auto;
  min-height: max(120px, 12.29167vw);
  padding: max(6px, .833333vw);
  font-size: max(.75rem, 2.604167vw);
  line-height: 1.3;
}
/* The original second row is slightly larger than the first (469 vs 456px).
   Symmetric margins provide its original 24px gap and keep it centered. */
.landing-related-products--flow .landing-related-list:where(:has(> .landing-related-card:last-child:nth-child(4n + 3))) > .landing-related-card:where(:nth-last-child(-n + 3)) {
  flex-basis: 24.426vw;
  margin-inline: .15625vw;
}
.landing-related-products--flow .landing-related-name {
  position: static;
  grid-column: 1 / -1;
  display: block;
  width: auto;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  font-size: max(.75rem, calc(1em * var(--product-title-scale, 1)));
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.03em;
  -webkit-line-clamp: unset;
}
.landing-related-products--flow .redbook-related-caption {
  position: static;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  font-size: max(.75rem, 1.666667vw);
  line-height: 1.35;
  white-space: normal;
}
.landing-related-products--flow .redbook-related-arrow {
  position: static;
  grid-column: 2;
  grid-row: 2;
  width: max(14px, var(--product-arrow-size, 16.5cqw));
  height: auto;
  aspect-ratio: 1;
  background-size: var(--arrow-sheet-width) var(--arrow-sheet-height);
  background-position: var(--arrow-sheet-x) var(--arrow-sheet-y);
}
.landing-related-products--flow .has-product-image {
  grid-template-columns: var(--product-logo-column, 38%) minmax(0, 1fr) auto;
}
.landing-related-products--flow .landing-related-image {
  position: static;
  grid-column: 1;
  grid-row: 1 / 3;
  justify-self: start;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.landing-related-products--flow .has-product-image .landing-related-name { grid-column: 2 / -1; grid-row: 1; }
.landing-related-products--flow .has-product-image .redbook-related-caption { grid-column: 2; grid-row: 2; }
.landing-related-products--flow .has-product-image .redbook-related-arrow { grid-column: 3; grid-row: 2; }
/* The source centers the logo above the text block's midpoint. Flexible
   spacer rows reproduce that offset without coordinates or fixed card height:
   title and caption rows still expand for zoom and longer backend names. */
.landing-related-products--flow .has-design-identity {
  grid-template-rows: minmax(0, 5fr) auto max(2px, 1.041667vw) auto minmax(0, 1fr);
}
.landing-related-products--flow .has-design-identity .landing-related-image { grid-row: 1 / 6; }
.landing-related-products--flow .has-design-identity .landing-related-name { grid-row: 2; }
.landing-related-products--flow .has-design-identity .redbook-related-caption,
.landing-related-products--flow .has-design-identity .redbook-related-arrow { grid-row: 4; }
/* These exact logo crops preserve their source aspect ratio; no raster label
   or URL is included, and supplied API images still take priority. */
.redbook-related-logo {
  background-image: var(--logo-art);
  background-size: var(--logo-sheet-width) var(--logo-sheet-height);
  background-position: var(--logo-sheet-x) var(--logo-sheet-y);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at center, #000 65%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at center, #000 65%, transparent 100%);
}
.landing-related-products--flow .has-design-logo .redbook-related-logo { aspect-ratio: var(--logo-ratio); border-radius: 0; }
/* A narrow card (or enlarged text) moves the caption beneath the logo/title.
   The condition follows available content width, not a device breakpoint. */
@container (max-width: max(8em, 150px)) {
  .landing-related-products--flow .has-design-identity .landing-related-name { font-size: max(.75rem, 1em); }
  .landing-related-products--flow .has-product-image .landing-related-image { grid-row: 1; }
  .landing-related-products--flow .has-design-identity .landing-related-image { grid-row: 2; }
  .landing-related-products--flow .has-product-image .redbook-related-caption { grid-column: 1 / 3; }
}
@media (max-width: 900px) {
  .landing-related-products--flow[data-related-products-container] { padding: 0 1.6% max(14px, 2.266667vw); background: none; }
  .landing-related-products--flow .landing-related-list { --product-gap: max(4px, 1vw); row-gap: max(2px, .266667vw); }
  .landing-related-products--flow .landing-related-redbook-card {
    min-height: max(64px, 12.133333vw);
    padding: max(6px, .833333vw);
    font-size: max(.75rem, 2.566667vw);
  }
  .landing-related-products--flow .landing-related-list:where(:has(> .landing-related-card:last-child:nth-child(4n + 3))) > .landing-related-card:where(:nth-last-child(-n + 3)) {
    flex-basis: 24.2vw;
    min-height: max(64px, 12.266667vw);
    margin-inline: .1vw;
  }
  .landing-related-products--flow .redbook-related-caption { font-size: max(.75rem, 1.65vw); }
}
@media (max-width: 319px) {
  .landing-related-products--flow .landing-related-redbook-card,
  .landing-related-products--flow .landing-related-list:where(:has(> .landing-related-card:last-child:nth-child(4n + 3))) > .landing-related-card:where(:nth-last-child(-n + 3)) { flex-basis: calc((100% - var(--product-gap)) / 2); margin-inline: 0; }
}
@media (min-width: 901px) and (max-width: 1349px) {
  .landing-related-products--flow .landing-related-redbook-card,
  .landing-related-products--flow .landing-related-list:where(:has(> .landing-related-card:last-child:nth-child(4n + 3))) > .landing-related-card:where(:nth-last-child(-n + 3)) {
    flex-basis: calc((100% - var(--product-gap)) / 2);
    margin-inline: 0;
    min-height: max(120px, 15vw);
  }
}
/* Long API names receive enough line length and always grow the page. */
.landing-related-products--flow .landing-related-card.has-long-name { flex-basis: calc((100% - var(--product-gap)) / 2); margin-inline: 0; }
@media (max-width: 1349px) {
  .landing-related-products--flow .landing-related-card.has-long-name { flex-basis: 100%; }
}