/* ---------------------------------------------------------------------------
   Side-products strip: the carousel arrows sit on the SIDES of the strip.

   journal3 already renders prev/next here and drives them from js/carousel.js.
   Nothing below adds a control or a listener - it only changes where the two it
   renders end up. The theme's own default for them is exactly what we want, an
   absolutely positioned pair centred on the strip; the module's generated settings
   css overrides that and pins BOTH to the top-right corner, half above the cards:

       .module-side_products-<id> .auto-carousel-buttons {
         justify-content: flex-end; position: relative; height: 0;
         transform: translate3d(0, calc(var(--auto-carousel-button-height)/2*-1), 0);
       }

   That rule is generated per module id, so it can be neither edited here nor
   addressed by id. Every selector below therefore carries one class MORE than the
   generated rule it has to outrank (.side-products is the extra one) and none of
   them names a module - a second strip of this kind is covered the day it is added.

   HOW, and why not the obvious way: the arrows stay OUT of the flex flow and the
   strip is given a gutter wide enough to hold them, so they land beside the cards
   without ever sitting on one. Making them flex columns instead (display:contents
   on the wrapper) was tried on 2026-09-21 and collapsed the strip - the scroller
   would not take the remaining width and .auto-grid's own justify-content:center
   then parked the whole thing in the middle of the block. Out of flow there is no
   width to negotiate: the scroller keeps its plain width:100% of the padded box.
   --------------------------------------------------------------------------- */

/* Two variables the module sets that this layout has to undo. Addressed from
   .module-body, three classes deep, because the generated rules that set them are
   '.module-side_products-<id> .auto-grid' and 'div.module-side_products-<id>
   .auto-grid' - two classes and two-classes-plus-a-tag, on this very element. A
   two-class selector of ours would lose the second one outright and settle the first
   on source order, which is not something to depend on. */
.module-body .side-products.auto-grid {
  /* The module bleeds the strip out into the page gutter with a negative margin and
     the scroller pads the same amount back inside; both read this one variable, so
     zeroing it squares the strip up with the heading above it and leaves the gutter
     below as the only inset. Without this the arrows sit outside the content edge. */
  --scroll-padding: 0px;

  /* The module lifts its arrows 20px. Centred on the strip that put them above the
     middle of the cards rather than on it. */
  --auto-carousel-button-y: 0px;

  /* The gutter the arrows live in. It has to stay wider than the button or an arrow
     starts covering the first and last card, which is the one thing this arrangement
     exists to prevent - so it is DERIVED from the button instead of being a second
     number to keep in step. A literal would not have held anyway: the theme declares
     --auto-carousel-button-width on this element from a selector carrying an extra
     tag name. Reading it sidesteps that and follows the theme if the size changes. */
  padding-inline: calc(var(--auto-carousel-button-width, 40px) + 18px);
}

/* Back to the theme's own overlay geometry, undoing the module's corner pinning.
   inset-inline resolves against the PADDING box, so each arrow ends up inside the
   gutter above and the cards begin after it. */
.side-products.auto-grid > .auto-carousel-buttons.auto-carousel-controls {
  display: flex;
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  justify-content: space-between;
  align-items: center;
}

/* At either end the module fades its arrow to nothing and scales it away. In a
   gutter of its own that reads as a control that has gone missing. Dimmed and still
   there instead - same as the recommendation strip. */
.side-products.auto-grid.no-scroll-prev .auto-carousel-prev,
.side-products.auto-grid.no-scroll-next .auto-carousel-next {
  opacity: 0.3;
  --scale: 1;
}

/* Nothing to scroll at all: no arrows, and no gutter held open for them. The theme
   only makes the controls invisible, which would leave the space behind. */
.module-body .side-products.auto-grid.no-scroll {
  padding-inline: 0;
}
.side-products.auto-grid.no-scroll > .auto-carousel-buttons {
  display: none;
}

/* At 900px and below the theme hides the arrows (visibility:hidden, in its
   generated settings css) and the strip is swiped instead. The gutter held open
   for them stayed, so on a phone the first card started ~46px in from the
   heading above it (2026-10-13). Same selector as the gutter rule, later in the
   file, so it wins without anything stronger. */
@media (max-width: 900px) {
  .module-body .side-products.auto-grid {
    padding-inline: 0;
  }
}