/* Base project card */
.featured-left {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #0a0a0f; /* fallback dark */
  border-radius: 16px;
  overflow: hidden;
  padding: 30px 30px 0 30px;
  justify-content: space-between;
  cursor: pointer;
  height: 100%;
  isolation: isolate;
}

.featured-left::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.featured-left > * {
  position: relative;
  z-index: 2;
}

/* === THEMES === */

/* Blue */
.featured-left.blue {
  background: #18293fbb;
  border: 1px solid rgba(41, 151, 255, 0.2);
}
.featured-left.blue::after {
  background: linear-gradient(
    180deg,
    rgba(41, 151, 255, 0) 0%,
    rgba(41, 151, 255, 0.06) 60%,
    rgb(41, 151, 255) 100%
  );
  border: 1px solid rgb(41, 152, 255);
}

/* Cyan (cool aqua) */
.featured-left.cyan {
  background: #0a1f29;
  border: 1px solid rgba(0, 188, 212, 0.2);
}
.featured-left.cyan::after {
  background: linear-gradient(
    180deg,
    rgba(0, 188, 212, 0) 0%,
    rgba(0, 188, 212, 0.06) 60%,
    rgb(0, 188, 212) 100%
  );
  border: 1px solid rgb(0, 188, 212);
}

/* Purple */
.featured-left.purple {
  background: #120a18;
  border: 1px solid rgba(155, 81, 224, 0.2);
}
.featured-left.purple::after {
  background: linear-gradient(
    180deg,
    rgba(155, 81, 224, 0) 0%,
    rgba(155, 81, 224, 0.06) 60%,
    rgb(155, 81, 224) 100%
  );
  border: 1px solid rgb(155, 81, 224);
}

/* Indigo */
.featured-left.indigo {
  background: #0d0a1a;
  border: 1px solid rgba(63, 81, 181, 0.2);
}
.featured-left.indigo::after {
  background: linear-gradient(
    180deg,
    rgba(63, 81, 181, 0) 0%,
    rgba(63, 81, 181, 0.06) 60%,
    rgb(63, 81, 181) 100%
  );
  border: 1px solid rgb(63, 81, 181);
}

/* Pink */
.featured-left.pink {
  background: #19070d;
  border: 1px solid rgba(255, 64, 129, 0.2);
}
.featured-left.pink::after {
  background: linear-gradient(
    180deg,
    rgba(255, 64, 129, 0) 0%,
    rgba(255, 64, 129, 0.06) 60%,
    rgb(255, 64, 129) 100%
  );
  border: 1px solid rgb(255, 64, 128);
}

/* Gray */
.featured-left.gray {
  background: #1a1a1a;
  border: 1px solid rgba(180, 180, 180, 0.2);
}
.featured-left.gray::after {
  background: linear-gradient(
    180deg,
    rgba(200, 200, 200, 0) 0%,
    rgba(200, 200, 200, 0.06) 60%,
    rgb(200, 200, 200) 100%
  );
  border: 1px solid rgb(200, 200, 200);
}

/* Theme-based overrides */
.title-dash.blue {
  background-color: rgb(41, 50, 203); /* Deep Blue */
}

.title-dash.purple {
  background-color: rgb(155, 81, 224); /* Purple */
}

.title-dash.indigo {
  background-color: rgb(76, 81, 191); /* Indigo */
}

.title-dash.cyan {
  background-color: rgb(0, 184, 212); /* Cyan */
}

.title-dash.gray {
  background-color: rgb(120, 130, 140); /* Neutral Gray */
}

.title-dash.pink {
  background-color: rgb(255, 64, 129); /* Pink */
}

/* Theme-based shadows */
.blue .project-screenshot {
  box-shadow: rgba(41, 151, 255, 0.7) 0px 0px 30px;
}

.purple .project-screenshot {
  box-shadow: rgba(155, 81, 224, 0.7) 0px 0px 30px;
}

.indigo .project-screenshot {
  box-shadow: rgba(63, 81, 181, 0.7) 0px 0px 30px;
}

.cyan .project-screenshot {
  box-shadow: rgba(0, 188, 212, 0.7) 0px 0px 30px;
}

.gray .project-screenshot {
  box-shadow: rgba(180, 180, 180, 0.6) 0px 0px 30px;
}

.pink .project-screenshot {
  box-shadow: rgba(255, 64, 129, 0.7) 0px 0px 30px;
}