/* 
==============================================
INTERACTIVE DEMO STYLES
==============================================
This section demonstrates various CSS comment types
and their practical applications in real code.
============================================== 
*/

.demo-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* Header styling with gradient background */
.demo-header {
    background: linear-gradient(45deg, #007bff, #0056b3); /* Blue gradient */
    color: white; /* Ensure text contrast */
    padding: 2rem; /* Generous padding for visual breathing room */
    border-radius: 12px; /* Rounded corners for modern look */
    text-align: center;
    margin-bottom: 2rem;
}

/*
Button component with hover effects
Includes accessibility considerations and smooth transitions
*/
.demo-button {
    background: #28a745; /* Success green color */
    color: white;
    padding: 12px 24px;
    border: none; /* Remove default button styling */
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease; /* Smooth animation for all properties */
}

.demo-button:hover {
    background: #218838; /* Darker green on hover */
    transform: translateY(-2px); /* Subtle lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

/* Responsive grid layout for demo cards */
.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 1.5rem; /* Space between grid items */
    margin-top: 2rem;
}

.demo-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-left: 4px solid #17a2b8; /* Accent border */
}

.demo-card h4 {
    color: #343a40; /* Dark gray for headings */
    margin-bottom: 0.5rem;
}

.demo-card p {
    color: #6c757d; /* Muted text color */
    margin: 0;
    line-height: 1.6; /* Improved readability */
}

/*
Media query for mobile devices
Adjusts layout and spacing for smaller screens
*/
@media (max-width: 768px) {
    .demo-header {
        padding: 1.5rem; /* Reduced padding on mobile */
        margin-bottom: 1.5rem;
    }
    
    .demo-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 1rem; /* Reduced gap for mobile */
    }
}