.challenge-card-basic {
  min-width: 30rem;
  height: 350px;
  clip-path: polygon(0 4%, 100% 0, 100% 97%, 0 100%);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  margin: 20px;
  position: relative;
  cursor: pointer;
}

.challenge-card-basic-overlay {
  position: absolute;
  background: #171e27 32%;
  clip-path: polygon(0 24%, 76% 70%, 35% 100%, 0% 100%);
  opacity: 0.4;
  left: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
  width: 110%;
}

.challenge-card-basic-textbox {
  border-left: 3px solid #ff7700;
  color: #fff;
  padding-left: 10px;
  width: 250px;
  margin: 20px 20px;
}

.challenge-card-basic-textbox-name {
  /* border: 1px solid yellow; */
  color: #fff;
  font-size: 2rem;
  width: 80%;
  padding: 0;
  margin: 0;
  line-height: 5px;
  font-weight: 600;
}
.challenge-card-basic-textbox-location {
  font-size: 1.6rem;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}
.challenge-card-basic-textbox-desc {
  font-size: 1.4rem;
  color: #c4ccd5;
  margin: 6px 0 0 0;
  padding: 0;
  /* keep to two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.challenge-card-new-tag {
  position: absolute;
  top: 30px;
  right: 0px;
  background-color: #f37720;
  padding: 0 10px;
}

/* ── Horizontal (landscape) variant ───────────────────────────────────────
   Same content + features as the portrait card, just a wide layout. Only the
   geometry and the legibility overlay change; everything else is inherited. */
.challenge-card-basic--horizontal {
  width: 100%;
  height: 200px;
  clip-path: none;
  border-radius: 6px;
  margin: 10px 0;
}
.challenge-card-basic--horizontal .challenge-card-basic-overlay {
  /* left-to-right wash instead of the portrait wedge, so the bottom-left
     text stays readable across a wide card */
  clip-path: none;
  width: 65%;
  background: linear-gradient(
    90deg,
    rgba(23, 30, 39, 0.85) 0%,
    rgba(23, 30, 39, 0) 100%
  );
  opacity: 0.85;
}

/* ── Dashboard "active challenge" extras (Active / days-left / Continue) ── */
.cc-status {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.cc-active {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #3ad15e;
  font-size: 1.5rem;
  font-weight: 600;
}
.cc-active-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #3ad15e;
  position: relative;
}
.cc-active-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #3ad15e;
}
.cc-days {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-size: 1.5rem;
}
/* Portrait (normal) card: move Active / days-left to the top-right, directly
   under the Continue button. Horizontal cards keep the bottom-right layout. */
.challenge-card-basic:not(.challenge-card-basic--horizontal) .cc-status {
  top: 16px;
  right: 16px;
  bottom: auto;
}
.challenge-card-basic:not(.challenge-card-basic--horizontal)
  .cc-status.cc-status--with-continue {
  top: 62px;
}
.cc-continue {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  background: var(--color-orange);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 9px 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(243, 119, 32, 0.4);
}
.cc-continue:hover {
  filter: brightness(1.08);
  color: #fff;
}