/*
 * Fixes for layout defects inherited from the WordPress theme, loaded after
 * site.css (the untouched theme bundle, regenerated by `npm run wp:mirror`).
 * Each rule is a deliberate deviation from the original; everything else is
 * pixel-identical. Detected by scripts/wp-mirror/verify/layout-audit.mjs.
 */

/*
 * 1. The course carousels are pulled up by a negative margin and carry 39px of
 *    invisible padding (so card shadows aren't clipped). On phones the stacked
 *    "View All Courses" link ends up underneath that transparent area and
 *    can't be tapped. Lift the link above it — stacking only, no visual change.
 */
.gdlr-core-pbf-column .gdlr-core-button-item {
  position: relative;
  z-index: 1;
}

/*
 * 2. Server-rendered carousel (before hydration measures it): lay the slides
 *    out with the same geometry FlexSlider will compute, so there is no flash
 *    of stacked cards. ul.slides is (2 x slides x 100%) of the viewport wide;
 *    slides are 40px apart; one column below 768px like the theme script.
 */
.gdlr-core-flexslider.flexslider ul.slides[data-ssr] > li:not([data-probe]) {
  display: block;
  float: left;
  margin-right: 40px;
  width: calc(100% / (2 * var(--slides) * var(--cols)) - 40px * (var(--cols) - 1) / var(--cols));
}
@media only screen and (max-width: 767px) {
  .gdlr-core-flexslider.flexslider ul.slides[data-ssr] > li:not([data-probe]) {
    width: calc(100% / (2 * var(--slides)));
  }
}