/**
 * Kreatif Agency Theme — local Phosphor icon masks.
 *
 * Delivery: individual SVGs, CSS mask + currentColor.
 * Decorative by default; visible text or aria-label must supply meaning.
 */

.icon {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: middle;
}

.icon--arrow-right {
  -webkit-mask-image: url("../icons/phosphor/arrow-right.svg");
  mask-image: url("../icons/phosphor/arrow-right.svg");
}

.icon--arrow-down-left {
  -webkit-mask-image: url("../icons/phosphor/arrow-down-left.svg");
  mask-image: url("../icons/phosphor/arrow-down-left.svg");
}

.icon--arrow-down-right {
  -webkit-mask-image: url("../icons/phosphor/arrow-down-right.svg");
  mask-image: url("../icons/phosphor/arrow-down-right.svg");
}

.icon--caret-up {
  -webkit-mask-image: url("../icons/phosphor/caret-up.svg");
  mask-image: url("../icons/phosphor/caret-up.svg");
}

.icon--caret-down {
  -webkit-mask-image: url("../icons/phosphor/caret-down.svg");
  mask-image: url("../icons/phosphor/caret-down.svg");
}

.icon--caret-left {
  -webkit-mask-image: url("../icons/phosphor/caret-left.svg");
  mask-image: url("../icons/phosphor/caret-left.svg");
}

.icon--caret-right {
  -webkit-mask-image: url("../icons/phosphor/caret-right.svg");
  mask-image: url("../icons/phosphor/caret-right.svg");
}

.icon--envelope {
  -webkit-mask-image: url("../icons/phosphor/envelope.svg");
  mask-image: url("../icons/phosphor/envelope.svg");
}

.icon--phone {
  -webkit-mask-image: url("../icons/phosphor/phone.svg");
  mask-image: url("../icons/phosphor/phone.svg");
}

.icon--map-pin {
  -webkit-mask-image: url("../icons/phosphor/map-pin.svg");
  mask-image: url("../icons/phosphor/map-pin.svg");
}

.icon--linkedin {
  -webkit-mask-image: url("../icons/phosphor/linkedin-logo.svg");
  mask-image: url("../icons/phosphor/linkedin-logo.svg");
}

.icon--facebook {
  -webkit-mask-image: url("../icons/phosphor/facebook-logo.svg");
  mask-image: url("../icons/phosphor/facebook-logo.svg");
}

.icon--behance {
  -webkit-mask-image: url("../icons/phosphor/behance-logo.svg");
  mask-image: url("../icons/phosphor/behance-logo.svg");
}

.icon--pinterest {
  -webkit-mask-image: url("../icons/phosphor/pinterest-logo.svg");
  mask-image: url("../icons/phosphor/pinterest-logo.svg");
}

.icon--instagram {
  -webkit-mask-image: url("../icons/phosphor/instagram-logo.svg");
  mask-image: url("../icons/phosphor/instagram-logo.svg");
}

.icon--youtube {
  -webkit-mask-image: url("../icons/phosphor/youtube-logo.svg");
  mask-image: url("../icons/phosphor/youtube-logo.svg");
}

.icon--vimeo {
  -webkit-mask-image: url("../icons/simple-icons/vimeo.svg");
  mask-image: url("../icons/simple-icons/vimeo.svg");
}

/* Navigation aliases (Phosphor regular has no separate chevron glyphs at pinned commit). */
.icon--nav-prev {
  -webkit-mask-image: url("../icons/phosphor/caret-left.svg");
  mask-image: url("../icons/phosphor/caret-left.svg");
}

.icon--nav-next {
  -webkit-mask-image: url("../icons/phosphor/caret-right.svg");
  mask-image: url("../icons/phosphor/caret-right.svg");
}

.icon--nav-up {
  -webkit-mask-image: url("../icons/phosphor/caret-up.svg");
  mask-image: url("../icons/phosphor/caret-up.svg");
}

.icon--nav-down {
  -webkit-mask-image: url("../icons/phosphor/caret-down.svg");
  mask-image: url("../icons/phosphor/caret-down.svg");
}

.icon--list {
  -webkit-mask-image: url("../icons/phosphor/list.svg");
  mask-image: url("../icons/phosphor/list.svg");
}

.icon--x {
  -webkit-mask-image: url("../icons/phosphor/x.svg");
  mask-image: url("../icons/phosphor/x.svg");
}

.icon--check-circle {
  -webkit-mask-image: url("../icons/phosphor/check-circle.svg");
  mask-image: url("../icons/phosphor/check-circle.svg");
}

:where(.button, .project-card__link)::after {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 var(--icon-size);
  content: "";
  background-color: currentColor;
  -webkit-mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
  mask: url("../icons/phosphor/arrow-right.svg") center / contain no-repeat;
}

.project-card__link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-xs);
}