.section-title { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; text-align: center; margin-bottom: 24px; color: var(--color-text-strong); }
.section-subtitle { font-size: clamp(1.1rem, 2vw, 1.2rem); text-align: center; color: var(--color-text); max-width: 800px; margin: 0 auto 80px; line-height: 1.7; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.animated-on-scroll { animation: fade-in-up linear both; animation-timeline: view(); animation-range: entry 10% cover 25%; }

.section { margin: 8rem 0; }
.section h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, var(--kinetic-teal), var(--pure-white)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; margin-bottom: 3rem; }
.card-grid { display: grid; gap: 2rem; }
.session-types-grid { grid-template-columns: repeat(2, 1fr); }
.topics-grid { grid-template-columns: repeat(4, 1fr); }
.card { background: linear-gradient(145deg, rgba(58, 80, 107, 0.2), rgba(11, 19, 43, 0.6)); border: 1px solid rgba(0, 245, 212, 0.2); border-radius: 16px; padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 245, 212, 0.2); }
.card h3 { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--kinetic-teal); margin-bottom: 1rem; }
.card p { font-size: 1rem; color: var(--starlight); opacity: 0.9; }
.emoji { font-size: 1.5rem; margin-right: 0.5rem; vertical-align: middle; }

/* ======================================================= */
/* ==   LIGHT THEME OVERRIDES                           == */
/* ======================================================= */

/* This will only apply when the body has the .theme-light class */

/* Update the section heading for light mode */
.theme-light .section h2 {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--graphite);
    text-shadow: none;
}

/* This is the core restyling for the cards themselves */
.theme-light .card {
    /* Change the background from a dark gradient to solid white */
    background: var(--pure-white);
    
    /* Change the border from a glow to a subtle, clean line */
    border: 1px solid #e9ecef;
    
    /* Change the shadow from a colored glow to a soft, modern drop shadow */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Enhance the shadow on hover for a "lifting" effect */
.theme-light .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Update the text colors inside the card for readability */
.theme-light .card h3 {
    /* The bright teal color still works great as an accent! No change needed. */
    color: var(--kinetic-teal);
}

.theme-light .topics-section .card h3 {
    color: var(--graphite); /* Sets the color to Graphite */
    opacity: 0.9;
}

.theme-light .card p {
    /* Change the light paragraph text to a dark, readable color */
    color: var(--graphite);
    opacity: 0.9;
}

@media (max-width: 768px) {
    /* Stack both grids into a single column on mobile */
    .session-types-grid,
    .topics-grid {
        grid-template-columns: 1fr;
    }

    /* Reduce the large vertical margin for a tighter layout on mobile */
    .section {
        margin: 4rem 0;
    }

    /* Reduce side padding on the main content container to give cards more space */
    .section-content--wide {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Reduce the padding inside the cards themselves */
    .card {
        padding: 1.5rem;
    }
}