/* Post Slideshow block (rhsc/post-slideshow).

   Deliberately small. The block emits the bc-slideshow plugin's markup contract,
   so that plugin's style-index.css already supplies the entire carousel: the
   Embla base, the slide flex-basis formula (derived from the inline
   --slides-per-view we emit), the --bleed gutter maths, the is-not-in-view
   dimming, the arrows, the dots and the 480px teardown.

   So there is NO layout CSS here for the bleed or the 2-per-view sizing. Adding
   any would duplicate the plugin's formula and then compete with it at equal
   specificity — the failure mode being a carousel that is subtly wrong at one
   breakpoint only. If something needs tuning, tune it against the plugin's
   custom properties (--slides-per-view, --slide-gap, --peek-amount,
   --max-slide-width, --embla-arrow-inset), not with a new width rule.

   Everything below is for state the plugin cannot know about: equal-height
   cards, and the fallback rendered when the plugin is inactive. */

/* --- Equal-height cards --------------------------------------------------
   Embla slides are flex children, so they already stretch to the tallest in the
   row; the card's own wrapper div does not inherit that automatically. The
   webinar card is a fixed 346px so this is defensive, but the generic card is
   content-height and would otherwise leave ragged bottoms. */
.rhsc-post-slideshow .embla__slide > div {
  height: 100%;
}

/* --- Two active slides, dimmed neighbours in the gutters -----------------
   The one place this block must override the plugin's own width formula.

   The plugin zeroes --peek inside .embla--bleed, on the reasoning that the
   gutters are already filled by the neighbouring slides. That holds at 1 slide
   per view. At 2 it does not: the slides then divide the column exactly
   (562 + 16 + 562 = 1140), so the pair spans the full column and the
   neighbours land precisely ON the column edges. Embla's inViewThreshold of
   0.95 then counts the second slide as out of view and dims it, leaving ONE
   opaque slide centred with two half-slides straddling the boundary — not the
   two-active design.

   Subtracting a peek narrows the pair enough to sit wholly inside the column,
   which pushes the neighbours out into the gutters where they read as the
   dimmed previous/next slides. --peek-amount is unusable here: the plugin sets
   --peek on .embla__slide inside .embla--bleed, so setting the variable higher
   up is simply overwritten. Overriding flex-basis is the only lever, hence the
   duplicated formula.

   Scoped to this block and to 2-per-view only, so the plugin's own slideshows
   and this block's other per-view settings keep the plugin's maths untouched.

   BREAKPOINT SYNC: 992px mirrors the plugin's own tablet step; the 481px floor
   mirrors its 480px teardown, below which css-framework.css owns the layout. */
@media (min-width: 481px) {
  .rhsc-post-slideshow .embla--bleed .embla__container[style*="--slides-per-view: 2"] .embla__slide {
    --rhsc-peek: 120px;
    /* Two gaps, not one: the plugin moved slide spacing off the container's
       flex `gap` onto a `margin-inline-end` carried by EVERY slide (so Embla's
       measureEndGap can see it and the loop wrap keeps its seam). The last
       slide's margin is inside the width being divided, so both gaps subtract. */
    flex: 0 0 calc(
      (100% - var(--rhsc-peek) - 2 * var(--slide-gap, 16px)) / 2
    );
  }
}

/* Tablet keeps two slides but needs a smaller peek — 120px of a ~700px column
   would eat too much card.

   The lower bound of 481px is load-bearing, not tidiness. Below 480px Embla is
   torn down and css-framework.css takes over with a scroll-snap row whose
   slides are `flex: 0 0 100%`. A bare `max-width: 992px` still matches at 400px,
   so this rule's flex-basis won there too and cards collapsed to 118px wide. */
@media (min-width: 481px) and (max-width: 992px) {
  .rhsc-post-slideshow .embla--bleed .embla__container[style*="--slides-per-view: 2"] .embla__slide {
    --rhsc-peek: 72px;
  }
}

/* Phones (<=480px) are deliberately NOT handled here.

   Embla is torn down at that width, and css-framework.css replaces it with a
   hand-rolled scroll-snap carousel (~line 2542): display:flex on the container,
   8px gap, 22px inline padding for the peek, and `flex: 0 0 100%` +
   scroll-snap-align:center on the slides, driven by the stepper in js.js. The
   peek down there comes from the container padding, not from a narrower slide.

   An earlier revision of this file re-declared `flex: 0 0 100%` at 480px to
   "undo the peek". That was redundant at best and actively wrong at worst: it
   duplicated a value the framework already sets and would silently diverge if
   the framework's mobile design were ever retuned. The 992px query above stops
   at 481px by virtue of the framework taking over below it. */

/* --- Fallback: bc-slideshow inactive -------------------------------------
   render.php swaps to these classes when the plugin's asset handles are not
   registered. Referencing an unregistered handle is a silent no-op in
   WordPress, so without this the page would show a stacked, full-width <ul>
   with no indication anything was wrong. A plain responsive grid keeps the
   posts readable and every link working. */
.rhsc-post-slideshow__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rhsc-post-slideshow__item > div {
  height: 100%;
}

/* Editor-only diagnostic, gated in render.php behind current_user_can(
   'edit_posts' ) so visitors never see it. Styled as a WP admin notice rather
   than as page content, to read as a system message and not as design. */
.rhsc-post-slideshow__notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 4px solid #d63638;
  border-radius: 2px;
  background: #fcf0f1;
  color: #3c434a;
  font-size: 13px;
  line-height: 1.5;
}