/*!
 * MappCanada – Promoted Card Border Ring Effect
 * Inspired by: https://codepen.io/jh3y/pen/vYqLPaE
 * Version: 1.2.0
 *
 * Scoped exclusively to .mc-promo-card-wrap so non-promoted cards are
 * completely unaffected.  The effect has two layers:
 *
 *  0  .mc-trail__ring  — rotating conic-gradient ambient ring (CSS-only, no @property needed)
 *  1  .mappcanada-card — the card itself (white bg covers the ring's interior)
 *  2  .mc-promo-badge  — always on top
 *
 * Border radius is controlled via --mc-card-radius (default: 8px).
 * JS reads the actual computed radius from .mappcanada-card and writes
 * --mc-card-radius onto the wrapper so the ring always matches exactly.
 */

/* ==========================================================================
   1. Wrapper — own stacking context so z-index values are self-contained
   ========================================================================== */

.mc-promo-card-wrap {
  isolation: isolate; /* creates a new stacking context */
  display: block;     /* explicit block; safe with grid/flex parent */
  width: 100%;        /* fill grid column so ring never under-extends */

  /*
   * --mc-card-radius is written by mc-promo-trail.js at runtime so it always
   * reflects the card's actual computed border-radius.  The 8px fallback
   * matches the default .mappcanada-card value and keeps the ring correct
   * even when JS hasn't run yet (SSR, no-JS).
   */
  border-radius: var(--mc-card-radius, 8px);
}

/*
 * Card must be above the ring so its white bg covers the ring interior.
 *
 * height: 100% — in a CSS grid row where a service card is shorter than
 * neighbouring listing/job cards, the grid stretches the wrapper to the
 * row height while the card's intrinsic height stays shorter.  Without
 * this rule the ring's bottom portion has no card background behind it,
 * producing the visible gap.  Because .mappcanada-card is a flex-column
 * container with flex: 1 on its body, the extra height is absorbed by
 * the body without distorting any content.
 */
.mc-promo-card-wrap > .mappcanada-card {
  position: relative;
  z-index: 1;
  height: 100%;           /* fill wrapper — no bottom gap against ring */
  border-radius: inherit; /* stay in sync with wrapper / --mc-card-radius */
}

/* Badge must sit above all ring layers */
.mc-promo-card-wrap > .mc-promo-badge {
  z-index: 3;
}

/* ==========================================================================
   2. Animated border ring (behind the card)
   ========================================================================== */

.mc-trail__ring {
  position: absolute;
  inset: -2px;  /* 2 px bleed outside the card on every side */
  /*
   * Derive radius from --mc-card-radius (set by JS / fallback 8px) plus the
   * 2 px bleed so corners hug the card precisely with no gap or overshoot.
   */
  border-radius: calc(var(--mc-card-radius, 8px) + 2px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/*
 * Rotating conic-gradient element.
 * Sized at 200 % so rotation never shows a corner gap.
 * transform: rotate() works everywhere — no @property needed.
 */
.mc-trail__ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent              0%,
    transparent             42%,
    rgba(185, 28,  28, 0.10) 53%,
    rgba(220, 38,  38, 0.50) 63%,
    rgba(248, 113, 113, 0.80) 68%,
    rgba(255, 255, 255, 0.92) 71%,
    rgba(248, 113, 113, 0.80) 74%,
    rgba(220, 38,  38, 0.50) 79%,
    rgba(185, 28,  28, 0.10) 90%,
    transparent            100%
  );
  /* Keep translate baked into transform so the keyframe doesn't override it */
  transform: translate(-50%, -50%) rotate(0deg);
  animation: mc-trail-spin var(--mc-trail-duration, 8s) linear infinite;
  will-change: transform;
}

@keyframes mc-trail-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==========================================================================
   3. Comet — removed; rule kept defensively so any stale injected element
      remains invisible without causing layout issues.
   ========================================================================== */

.mc-trail__comet {
  display: none !important; /* defensive: comet no longer injected by JS */
}

/* ==========================================================================
   4. Graceful fallback — browsers that don't support conic-gradient
   ========================================================================== */

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .mc-trail__ring {
    /* Static premium border glow */
    border: 2px solid rgba(220, 38, 38, 0.4);
    box-shadow:
      0 0 0 1px rgba(220, 38, 38, 0.15) inset,
      0 0 10px rgba(220, 38, 38, 0.2);
  }

  .mc-trail__ring::before {
    display: none;
  }
}

/* ==========================================================================
   5. Reduced motion — animation off; show a tasteful static premium border
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mc-trail__ring::before {
    animation: none;
    /* Keep a static angled gradient highlight */
    background: conic-gradient(
      from 135deg,
      transparent              0%,
      transparent             55%,
      rgba(220, 38, 38, 0.40) 68%,
      rgba(255, 255, 255, 0.65) 72%,
      rgba(220, 38, 38, 0.40) 76%,
      transparent            100%
    );
  }
}