/* tags.css */
:root {
    --tag-bg: var(--secondary-color);
    --tag-hover: #0e77a5;
}

.tags-section {
    margin: clamp(20px, 4vw, 40px) 0;
    padding: clamp(15px, 3vw, 20px);
    background-color: #f9f9f9;
    border-left: 4px solid var(--primary-color);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 10px);
    margin-top: clamp(10px, 2vw, 15px);
}

.tag {
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2vw, 15px);
    background: var(--tag-bg);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: clamp(12px, 1.5vw, 14px);
    transition: background 0.3s;
}

.tag:hover {
    background: var(--tag-hover);
}

.tagged-projects {
    margin: clamp(15px, 3vw, 20px) 0;
}

.project-preview {
    margin: clamp(15px, 3vw, 20px) 0;
    padding: clamp(15px, 3vw, 20px);
    background-color: #f9f9f9;
    border-left: 4px solid var(--secondary-color);
}

.project-preview h2 {
    margin-top: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.project-preview a {
    color: var(--secondary-color);
    text-decoration: none;
}

.project-preview a:hover {
    text-decoration: underline;
}

.project-preview p {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    .tags-section {
        margin: 20px 0;
        padding: 15px;
    }

    .project-preview {
        margin: 15px 0;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .tags {
        gap: 6px;
    }

    .tag {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Better tag handling on small screens */
@media screen and (max-width: 320px) {
    .tag {
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
    }
  }
  
  /* Improve readability on large screens */
  @media screen and (min-width: 1600px) {
    .project-preview {
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }
  }