/*Core design direction

We’re aiming for:

clean SaaS UI (Stripe / Notion vibe)
lots of whitespace
subtle borders (or none-heavy)
soft typography hierarchy
one restrained accent for “featured”
fully responsive without effort

*/

/*------*/


.upcoming-events {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /*font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;*/
    font-family: "lato", sans-serif;
    color: #111827;
}


/* Empty state */

.upcoming-empty {
    padding: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    font-size: .95rem;
}



/* Month headings */

.upcoming-month-heading {
    margin: 16px 0 14px;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}



/* Event container */

.upcoming-event {
    display: flex;
    gap: 16px;
    padding: 14px;
    border-radius: 18px;
    background: white;
    transition: background .15s ease, box-shadow .15s ease;
}


.upcoming-event:hover {
    background: white;
    box-shadow: 2px 2px 10px rgba(0,0,0,.15);
}

.upcoming-event--featured:hover {
    background: #faf7fc;
}



/* Featured event */

.upcoming-event--featured {
    background: #faf7fc;
}



/* Date block */

.upcoming-date {
    flex: 0 0 64px;
    width: 64px;
    min-width: 64px;

    text-align: center;

    border-radius: 10px;
    border: 1px solid #ddd;

    background: #f3f4f6;

    padding: 8px 6px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}



.upcoming-month {
    font-size: .72rem;
    letter-spacing: .08em;
    color: #6b7280;
    font-weight: 600;
}


.upcoming-day {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}



/* Event body */

.upcoming-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}



/* NEXT EVENT */

.upcoming-next-label {
    font-size: 1rem;
    font-weight: bold;
    color: #b91c1c;
    margin-bottom: 3px;
}



/* Human date */

.upcoming-long-date {
    font-size: .9rem;
    color: #475569;
    /*margin-bottom: 3px;*/
}



/* Title */

.upcoming-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #561091;
    font-family: "lato", sans-serif;
}


.upcoming-link {
    color: inherit;
    text-decoration: none;
}


.upcoming-link:hover {
    color: #2563eb;
    text-decoration: underline;
}



/* Metadata */

.upcoming-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1px;

    font-size: .875rem;
    color: #6b7280;
}


.upcoming-time,
.upcoming-location {
    display: inline-block;
    font-family: "merriweather", georgia, serif;
}



/* Description */

.upcoming-description {
    /*margin-top: 4px;*/
    font-size: .9rem;
    color: #4b5563;
    line-height: 1.4;
    font-family: "merriweather", georgia, serif;
}



/* Relative time */

.upcoming-relative {
    font-size: .78rem;
    font-weight: 600;
    color: #1d4ed8;
    margin-bottom: 2px;
}



/* Calendar links */

.upcoming-ics {
    display: inline-block;
    margin-top: 6px;
    font-size: .85rem;
    color: #2563eb;
    text-decoration: none;
}


.upcoming-ics:hover {
    text-decoration: underline;
}



/* Category hooks reserved */

.upcoming-event--meeting,
.upcoming-event--music,
.upcoming-event--volunteer,
.upcoming-event--default {
}



/*------*/

/*What this gives you
Layout behavior
clean horizontal event rows
date badge on left
content on right
fully responsive naturally
Visual hierarchy
title = strongest element
metadata = muted secondary
description = soft tertiary
Featured event
subtle blue accent bar
light background tint
no aggressive highlighting
Important detail

Notice something important:

We did not:

use grids everywhere
over-design spacing systems
add unnecessary animations
introduce framework-like complexity

This is intentionally “boringly good.”*/