/**
 * Gym niche front-end overrides.
 *
 * Only holds what block attributes cannot express: the slider chrome the design
 * uses (a hairline progress bar instead of bullets) and the product-card hover
 * reveal. Everything else lives in niche.json or in the patterns.
 */

body {
  /*
   * The design pages both sliders with a thin rule, not bullets. Track and fill
   * derive from currentColor so the same bar reads correctly on the light
   * (#EEF2EE) and dark (#0D0D0D) sections without per-section overrides.
   */
  --embla-pagination-display: flex;
  --embla-progressbar-height: 3px;
  --embla-progressbar-radius: 10px;
  --embla-dots-track-color: color-mix(in srgb, currentColor 20%, transparent);
  --embla-dots-color-active: currentColor;

  /*
   * Frosted glass runs far more opaque and far less blurred here than the
   * plugin's 15% / 16px default: the design uses it for legible captions over
   * photography, not for a soft scrim.
   */
  --brandy-glass-tint: 255 255 255;
  --brandy-glass-alpha: 0.8;
  --brandy-glass-blur: 6px;
}

/*
 * The before/after badges sit lighter, so the photo still reads underneath.
 * Scoped to the card wrapper, not to the comparison block: brandy/before-after-image
 * renders only its two images, labels and handle, so a badge can never be its
 * descendant -- the badges are siblings pinned over it.
 */
.gym-transformation-media .has-brandy-glass {
  --brandy-glass-alpha: 0.44;
}

/*
 * The contact panel keeps its own 88% white surface (a block attribute) and only
 * borrows the blur, so it is a scoped rule rather than the frosted-glass class.
 */
.gym-contact-panel {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/*
 * The services list drops its right column 365px so the two columns interleave.
 * That offset only means anything while there are two columns: once core stacks
 * them at 781px it becomes a 365px hole above the fourth card. No block attribute
 * can express it — the repo's @tablet/@mobile keys cover layout and typography,
 * not spacing — so it is one rule here rather than a fabricated attribute.
 */
@media (max-width: 781px) {
  .wp-block-group.gym-services-stagger {
    padding-top: 0;
  }
}