/* -------------------------------------------------
   PNG Sprite Icon System (no SVG required)
   Place `icons-sprite.png` next to this file.

   Sprite layout (default):
   - 7 columns x 2 rows = 14 icons
   - Each cell: 32px x 32px (source image pixels)
   - Image size: 224px x 64px

   File: Personality test/icons-sprite.png
   ------------------------------------------------- */

:root{
  --pt-sprite-url: url("./icons-sprite.png");
  --pt-sprite-cell: 32px;
  --pt-sprite-cols: 8;
  --pt-sprite-rows: 3;
  --pt-sprite-width: calc(var(--pt-sprite-cell) * var(--pt-sprite-cols));
  --pt-sprite-height: calc(var(--pt-sprite-cell) * var(--pt-sprite-rows));
}

.pt-sprite{
  display:inline-block;
  width: var(--pt-sprite-cell);
  height: var(--pt-sprite-cell);
  background-image: var(--pt-sprite-url);
  background-repeat: no-repeat;
  background-size: var(--pt-sprite-width) var(--pt-sprite-height);
  background-position: 0 0;
  vertical-align: -0.2em;
  image-rendering: -webkit-optimize-contrast;
  transform-origin: center;
  will-change: transform;
}

/* On dark backgrounds (e.g., teal buttons): invert the PNG sprite for contrast */
.pt-sprite--on-dark{
  filter: brightness(0) invert(1);
}

/* Size variants: keep the sprite cell at 32px and scale via transform
   (prevents "cropped / off-center" look when element is smaller than the 32px cell) */
.pt-sprite--sm{ transform: scale(0.625); } /* 20 / 32 */
.pt-sprite--md{ transform: scale(0.75); }  /* 24 / 32 */
.pt-sprite--lg{ transform: scale(1); }     /* 32 / 32 */
.pt-sprite--xl{ transform: scale(1.25); }  /* 40 / 32 */

/* Badge wrapper (used on index page) */
.pt-sprite-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.9rem;
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.18);
}

/* Icon map: 8 cols x 3 rows (x, y) */
/* Row 0 */
.pt-i-brain{ background-position: calc(var(--pt-sprite-cell) * 0 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-microscope{ background-position: calc(var(--pt-sprite-cell) * 1 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-globe{ background-position: calc(var(--pt-sprite-cell) * 2 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-scales{ background-position: calc(var(--pt-sprite-cell) * 3 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-temple{ background-position: calc(var(--pt-sprite-cell) * 4 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-sparkles{ background-position: calc(var(--pt-sprite-cell) * 5 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-books{ background-position: calc(var(--pt-sprite-cell) * 6 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }
.pt-i-home{ background-position: calc(var(--pt-sprite-cell) * 7 * -1) calc(var(--pt-sprite-cell) * 0 * -1); }

/* Row 1 */
.pt-i-thumb-up{ background-position: calc(var(--pt-sprite-cell) * 0 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-neutral{ background-position: calc(var(--pt-sprite-cell) * 1 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-thumb-down{ background-position: calc(var(--pt-sprite-cell) * 2 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-warning{ background-position: calc(var(--pt-sprite-cell) * 3 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-target{ background-position: calc(var(--pt-sprite-cell) * 4 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-puzzle{ background-position: calc(var(--pt-sprite-cell) * 5 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-mask{ background-position: calc(var(--pt-sprite-cell) * 6 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }
.pt-i-chart{ background-position: calc(var(--pt-sprite-cell) * 7 * -1) calc(var(--pt-sprite-cell) * 1 * -1); }

/* Row 2 */
.pt-i-refresh{ background-position: calc(var(--pt-sprite-cell) * 0 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-lock{ background-position: calc(var(--pt-sprite-cell) * 1 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-cap{ background-position: calc(var(--pt-sprite-cell) * 2 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-note{ background-position: calc(var(--pt-sprite-cell) * 3 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-party{ background-position: calc(var(--pt-sprite-cell) * 4 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-check{ background-position: calc(var(--pt-sprite-cell) * 5 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-x{ background-position: calc(var(--pt-sprite-cell) * 6 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }
.pt-i-image{ background-position: calc(var(--pt-sprite-cell) * 7 * -1) calc(var(--pt-sprite-cell) * 2 * -1); }