/* =============================================================
   TERRALUX — Custom Sprite Icon System
   Sprite file: assets/img/sprite.png

   Usage:
     <span class="sp-[name] sp-xl|sp-lg|sp-md|sp-sm"></span>

   Fill in the background-position values below to match
   the exact position of each icon tile in your sprite.png.

   If your sprite tiles are a different pixel size than the
   display size, add background-size to scale them, e.g.:
     background-size: 320px auto;  (10 icons × 32px each)
   ============================================================= */

/* ── Base ────────────────────────────────────────────────────── */
[class^="sp-"],
[class*=" sp-"] {
  display: inline-block;
  background-image: url("../img/sprite.png");
  background-repeat: no-repeat;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Size variants ───────────────────────────────────────────── */
/* xl  — features strip icons  (.dc-features__icon,  ~48 px)    */
.sp-xl {
  width: 80px;
  height: 80px;
}

/* lg  — center-panel ornament  (~32 px)                         */
.sp-lg {
  width: 32px;
  height: 32px;
}

/* md  — journey-step + bottom-bar badges  (~24 px)             */
.sp-md {
  width: 24px;
  height: 24px;
}

/* sm  — inline rule diamond  (~18 px)                           */
.sp-sm {
  width: 18px;
  height: 18px;
}

/* ── Features strip (xl) ─────────────────────────────────────── */
.sp-people {
  background-position: -71px -8px;
}
.sp-rulers {
  background-position: -161px -8px;
}
.sp-lamp {
  background-position: -247px -8px;
}
.sp-lightbulb {
  background-position: -343px -8px;
}
.sp-key {
  background-position: -430px -8px;
}

/* ── Design journey steps (md) ──────────────────────────────── */
.sp-chat-square-text {
  background-position: -521px -8px;
}
.sp-layers {
  background-position: -616px -8px;
}
.sp-pencil-square {
  background-position: -711px -8px;
}
.sp-check2-square {
  background-position: -799px -8px;
}
.sp-house-check {
  background-position: -887px -8px;
}
.sp-stars {
  background-position: -978px -8px;
}

/* ── Decorative / shared ─────────────────────────────────────── */
.sp-diamond {
  background-position: -6px -34px;
  width: 27px;
  height: 27px;
}
.sp-gem {
  background-position: -1068px -8px;
}

/* ── Bottom-bar badges (md) ─────────────────────────────────── */
.sp-globe2 {
  background-position: -1154px -8px;
}
.sp-award {
  background-position: -1256px -8px;
}
.sp-shield-check {
  background-position: -1342px -8px;
}
.sp-ll {
  background-position: -1426px -39px;
  width: 108px;
  height: 24px;
}