/* Responsive styles for portfolio SPA */

/* Base responsive container */
.responsive-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Responsive text sizes */
@media (max-width: 640px) {
    .content-section p {
        font-size: 0.875rem; /* 14px */
    }
    
    .content-section h3 {
        font-size: 1rem; /* 16px */
    }
    
    .content-section h4 {
        font-size: 0.875rem; /* 14px */
    }
    
    .content-section li {
        font-size: 0.875rem; /* 14px */
    }
    
    .skill-tag {
        font-size: 0.75rem; /* 12px */
        padding: 0.25rem 0.5rem;
    }
}

/* Timeline adjustments for small screens */
@media (max-width: 640px) {
    .timeline-icon {
        width: 1.5rem; /* 24px */
        height: 1.5rem; /* 24px */
    }
    
    .timeline-content {
        padding-left: 0.5rem;
    }
    
    .timeline-connector {
        margin-left: 0.75rem;
    }
    
    .content-section ul.timeline-list {
        padding-left: 1rem;
    }
}

/* Improved spacing for different screen sizes */
@media (max-width: 768px) {
    .section-spacing {
        margin-bottom: 1rem;
    }
    
    .content-spacing {
        gap: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .section-spacing {
        margin-bottom: 1.5rem;
    }
    
    .content-spacing {
        gap: 1.5rem;
    }
}

@media (min-width: 1025px) {
    .section-spacing {
        margin-bottom: 2rem;
    }
    
    .content-spacing {
        gap: 2rem;
    }
}

/* Skill bars responsive adjustments */
@media (max-width: 640px) {
    .skill-bar-container {
        height: 0.5rem;
    }
    
    .skill-bar-label {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
}

/* Card adjustments for small screens */
@media (max-width: 640px) {
    .card-padding {
        padding: 1rem;
    }
    
    .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
}