/* J09: uneven card widths with two cards per row (card_options.row_split, alternate_rows).
   The grid utilities this needs (grid-cols-5/10, col-span-3/7) are not in the compiled
   tailwind.css, so they are written here. Unlayered, so they beat the layered sm:grid-cols-2.
   From 1024px only: below that the grid keeps its equal columns (sm) and stacks (mobile).
   Cards are the grid's <div> children; two <meta> siblings come first, so count with nth-of-type. */
@media (min-width: 1024px) {
  .card-grid-split { grid-template-columns: repeat(var(--card-grid-cols), minmax(0, 1fr)); }
  .card-grid-split--60-40 { --card-grid-cols: 5; --card-grid-wide: 3; --card-grid-narrow: 2; }
  .card-grid-split--70-30 { --card-grid-cols: 10; --card-grid-wide: 7; --card-grid-narrow: 3; }

  .card-grid-split > div { grid-column: span var(--card-grid-narrow); }
  /* Wide card on the left of every row */
  .card-grid-split:not(.card-grid-split--alternate) > div:nth-of-type(odd),
  /* Zigzag: wide on cards 1, 4, 5, 8, 9 ... */
  .card-grid-split--alternate > div:is(:nth-of-type(4n+1), :nth-of-type(4n)) { grid-column: span var(--card-grid-wide); }
  /* An odd last card takes the full row */
  .card-grid-split > div:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }

  /* J09 option, match_image_heights: the wide card's image (or J10 video wrapper) takes the height
     the narrow card's image has at the module's aspect ratio, and crops. The narrow card keeps its
     aspect class untouched. Each card is a size container, so 100cqi is the wide card's width Ww;
     with gap g the narrow card is (2Ww - g) / 3 wide at 60/40 and (3Ww - 4g) / 7 at 70/30, and its
     image is that width divided by the ratio. Auto has no ratio to match: no rule applies. */
  @supports (width: 1cqi) {
  .card-grid-split--match > div { container-type: inline-size; }
  .card-grid-split--match { --card-grid-gap: calc(var(--spacing, .25rem) * 8); }
  .card-grid-split--match :is(.aspect-1\/1) { --card-grid-ar: 1; }
  .card-grid-split--match :is(.aspect-4\/5) { --card-grid-ar: 4 / 5; }
  .card-grid-split--match :is(.aspect-5\/4) { --card-grid-ar: 5 / 4; }
  .card-grid-split--match :is(.aspect-16\/9) { --card-grid-ar: 16 / 9; }
  .card-grid-split--60-40 { --card-grid-narrow-w: calc((200cqi - var(--card-grid-gap)) / 3); }
  .card-grid-split--70-30 { --card-grid-narrow-w: calc((300cqi - 4 * var(--card-grid-gap)) / 7); }
  :is(
    .card-grid-split--match:not(.card-grid-split--alternate) > div:nth-of-type(odd),
    .card-grid-split--match.card-grid-split--alternate > div:is(:nth-of-type(4n+1), :nth-of-type(4n))
  ):not(:last-of-type:nth-of-type(odd)) > :is(img.image, .card-media):is(.aspect-1\/1, .aspect-4\/5, .aspect-5\/4, .aspect-16\/9) {
    aspect-ratio: auto;
    width: 100%;
    height: calc(var(--card-grid-narrow-w) / (var(--card-grid-ar)));
    object-fit: cover;
  }
  /* J07: a scrolling or framed card image carries the aspect class on its window (.hx-mockup__screen), one level
     down, and the image fills the window, so the window takes the height. A browser bar sits above the window:
     with a frame on both cards of a row, both are the same height too. The --auto 4:3 window is Auto's: no rule. */
  :is(
    .card-grid-split--match:not(.card-grid-split--alternate) > div:nth-of-type(odd),
    .card-grid-split--match.card-grid-split--alternate > div:is(:nth-of-type(4n+1), :nth-of-type(4n))
  ):not(:last-of-type:nth-of-type(odd)) > .hx-mockup > .hx-mockup__screen:is(.aspect-1\/1, .aspect-4\/5, .aspect-5\/4, .aspect-16\/9) {
    aspect-ratio: auto;
    height: calc(var(--card-grid-narrow-w) / (var(--card-grid-ar)));
  }
  }
}