/* ==========================================================
   AJEC DESIGN SYSTEM
   Tugas
========================================================== */

/* ===== TUGAS ===== */

.ajec-task {
  display: flex;
  flex-direction: column;
  gap: var(--ajec-space-lg);
}

.ajec-task-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ajec-space-md);
}

.ajec-task-card {
  background: var(--ajec-surface);
}

.ajec-task-card .ajec-btn {
  min-width: 150px;
}

.ajec-task-card-audio {
    margin-bottom: var(--ajec-space-lg);
    padding-top: var(--ajec-space-md);

    border-top: 1px solid var(--ajec-border);
}

.ajec-task-card-audio h3 {
  margin: 0;

  font-size: var(--ajec-font-size-base);
  font-weight: var(--ajec-font-weight-semibold);
  color: var(--ajec-text);
}

.ajec-task-card-audio audio {
  display: block;
  width: 100%;
}

@media (max-width: 768px) {
  
  .ajec-task-card .ajec-card-actions {
    display: grid;
  }

  .ajec-task-card .ajec-btn {
    min-width: 0;
    width: 100%;
  }

  .ajec-task-btn-submit {
    grid-column: 1 / -1;
  }
}