/* Mobile responsiveness */
@media (max-width: 768px) {
  .tutorial-page {
    padding: 15px;
  }

  .tutorial-title {
    font-size: 2rem;
  }

  .tutorial-board-preview {
    flex-direction: column;
    gap: 15px;
  }

  .tutorial-actions {
    flex-direction: column;
    align-items: center;
  }

  .tutorial-button {
    width: 200px;
    text-align: center;
  }

  .done-column-toggle {
    display: none;
  }

  .board-container {
    gap: 1px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .board-container::-webkit-scrollbar {
    display: none;
  }

  .task_column {
    flex: 0 0 88%;
    min-height: calc(100vh - 50px);
    scroll-snap-align: center;
  }

  .app-header {
    flex-direction: column;
    align-items: stretch;
  }

  .app-search-form {
    width: 100%;
  }

  .app-search-input {
    width: 100%;
  }

  .task-form-container {
    padding: 20px;
  }

  .task-form-title {
    font-size: 24px;
  }

  .task-form-textarea {
    min-height: 50vh;
  }

  .landing-title {
    font-size: 32px;
  }

  .landing-subtitle {
    font-size: 16px;
  }

  .landing-intro {
    font-size: 16px;
  }

  .landing-section h2 {
    font-size: 24px;
  }

  .landing-actions {
    flex-direction: column;
  }

  .landing-button {
    width: 100%;
  }

  .floating-button-summary {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
}

@media (min-width: 769px) {
  .board-container.done-minimized .task_column[data-status="done"] {
    flex: 0 0 220px;
    max-width: 50px;
    overflow: hidden;
  }

  .board-container.done-minimized .task_column[data-status="done"]  p.task-description {
    display: none;
  }
}