/* ============================================
   Works in Progress
   
   Container und Karten für Werke, die als
   "Coming Soon" angezeigt werden, aber noch
   nicht als Release fertig sind.
   ============================================ */

.works-in-progress {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--c-line);
}

.works-in-progress[hidden] {
  display: none;
}

.works-in-progress__header {
  margin-bottom: 2rem;
}

.works-in-progress__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-blue-accent);
}

.works-in-progress__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* ===== Einzelne In-Progress-Karte ===== */

.work-in-progress {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.01);
  display: flex;
  flex-direction: column;
  transition: all 0.4s var(--ease-out);
}

.work-in-progress:hover {
  border-color: var(--c-line-hover);
  background: rgba(255, 255, 255, 0.02);
}

/* Status-Row (oben) mit pulsierendem Dot */
.work-in-progress__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-amber);
  margin-bottom: 1.5rem;
}

.work-in-progress__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-amber);
  animation: work-in-progress-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes work-in-progress-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 6px rgba(212, 165, 116, 0);
  }
}

.work-in-progress__meta {
  margin-bottom: 1rem;
}

.work-in-progress__type {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-line);
  border-radius: 2px;
}

.work-in-progress__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.15;
  color: var(--c-text);
  margin-bottom: 0.75rem;
}

.work-in-progress__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-amber);
  margin-bottom: 1.25rem;
}

.work-in-progress__description {
  color: var(--c-text-dim);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  flex: 1;
}

.work-in-progress__footer {
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
}

.work-in-progress__coming-soon {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

/* Mobile */
@media (max-width: 600px) {
  .works-in-progress {
    margin-top: 3rem;
    padding-top: 2rem;
  }
  
  .work-in-progress {
    padding: 1.5rem;
  }
  
  .work-in-progress__title {
    font-size: 1.5rem;
  }
}