/* ------------------------------------------------------------
 * Aurbis SVG Dividers - shared bundle. Mirrors the divider rules
 * from aurbis-dividers/aurbis-dividers-demo.html so the landing /
 * forum see the same look as the demo page. DO NOT add margin
 * tweaks here - control spacing from the consuming template's
 * adjacent block (section padding, divider wrapper margin).
 * ------------------------------------------------------------ */
:root {
  --aurbis-iron-0: #0b0d10;
  --aurbis-iron-1: #171b1f;
  --aurbis-iron-2: #2a3036;
  --aurbis-iron-3: #6f7d86;
  --aurbis-frost: #78c7ff;
  --aurbis-frost-soft: rgba(120,199,255,.44);
  --aurbis-gold: #b99a58;
  --aurbis-gold-soft: rgba(185,154,88,.55);
}

.aurbis-divider {
  --line-h: 2px;
  --center-w: 92px;
  --cap-w: 74px;
  --glow: drop-shadow(0 0 7px rgba(120,199,255,.35));
  width: min(100%, 1120px);
  height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--cap-w) 1fr var(--center-w) 1fr var(--cap-w);
  align-items: center;
  color: var(--aurbis-iron-3);
}

.aurbis-divider .rail {
  height: 22px;
  min-width: 0;
  position: relative;
}

.aurbis-divider .rail::before,
.aurbis-divider .rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 999px;
}

.aurbis-divider .rail::before {
  top: 10px;
  height: var(--line-h);
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(111,125,134,.18) 2%,
      rgba(111,125,134,.9) 11%,
      rgba(185,154,88,.5) 50%,
      rgba(111,125,134,.9) 89%,
      rgba(111,125,134,.18) 98%,
      transparent 100%);
  box-shadow: 0 0 8px rgba(120,199,255,.13);
}

.aurbis-divider .rail::after {
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurbis-frost-soft), transparent);
  opacity: .7;
}

.aurbis-divider .rail.left { transform: scaleX(-1); }

.aurbis-divider svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: var(--glow);
}

.aurbis-divider .iron-fill { fill: var(--aurbis-iron-2); }
.aurbis-divider .iron-stroke { stroke: var(--aurbis-iron-3); }
.aurbis-divider .dark-fill { fill: var(--aurbis-iron-1); }
.aurbis-divider .gold-stroke { stroke: var(--aurbis-gold); }
.aurbis-divider .frost-stroke { stroke: var(--aurbis-frost); }
.aurbis-divider .frost-fill { fill: var(--aurbis-frost); }
.aurbis-divider .gold-fill { fill: var(--aurbis-gold); }

.aurbis-divider.thin {
  --center-w: 58px;
  --cap-w: 48px;
  height: 38px;
  --line-h: 1px;
  opacity: .82;
}

.aurbis-divider.medium {
  --center-w: 86px;
  --cap-w: 64px;
  height: 58px;
}

.aurbis-divider.grand {
  --center-w: 132px;
  --cap-w: 92px;
  height: 92px;
}

.aurbis-divider.tavern {
  --aurbis-frost: #80c8ff;
  --aurbis-frost-soft: rgba(128,200,255,.25);
  --aurbis-gold: #d29b4b;
  --aurbis-gold-soft: rgba(210,155,75,.72);
  --glow: drop-shadow(0 0 8px rgba(210,155,75,.18));
}

.aurbis-divider.observatory {
  --center-w: 150px;
  --cap-w: 86px;
  --aurbis-frost: #57c8ff;
  --aurbis-gold: #bfa76a;
  --glow: drop-shadow(0 0 10px rgba(87,200,255,.42));
}

.aurbis-divider.observatory .rail::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(120,199,255,.38) 27px, transparent 30px),
    linear-gradient(90deg, transparent, rgba(87,200,255,.82), rgba(191,167,106,.5), rgba(87,200,255,.82), transparent);
}

@media (max-width: 640px) {
  .aurbis-divider {
    --center-w: 70px;
    --cap-w: 42px;
    height: 52px;
  }
  .aurbis-divider.grand,
  .aurbis-divider.observatory {
    --center-w: 88px;
    --cap-w: 44px;
    height: 64px;
  }
}