@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700;6..12,800;6..12,900&display=swap');

.sau-wrap { max-width: 900px; margin: 0 auto; font-family: 'Nunito Sans', Arial, sans-serif; }
.sau-heading { font-size: 1.6rem; font-weight: 900; color: #2C2530; margin: 0 0 6px; }
.sau-sub { color: #6D6675; font-size: 1rem; margin: 0 0 28px; }

.sau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.sau-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(44,37,48,.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s, box-shadow .18s;
}
.sau-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(44,37,48,.16); }
.sau-card-inactive { opacity: 0.75; }
.sau-card-inactive:hover { transform: none; }

.sau-card-top {
    padding: 18px 20px 14px;
    border-top: 5px solid #C42B2E;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sau-icon { font-size: 1.8rem; }
.sau-status { font-size: 0.75rem; font-weight: 800; border-radius: 99px; padding: 3px 10px; }
.sau-open   { background: #E6F9EE; color: #1A7A40; }
.sau-soon   { background: #FFF3E0; color: #A06000; }
.sau-closed { background: #FDEAEA; color: #C0392B; }

.sau-card-body { padding: 0 20px 20px; flex: 1; display: flex; flex-direction: column; }

.sau-event-title { font-size: 1.05rem; font-weight: 900; margin: 0 0 10px; line-height: 1.3; }

.sau-event-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: #6D6675;
    font-weight: 700;
    margin-bottom: 16px;
    flex: 1;
}

.sau-btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    font-family: 'Nunito Sans', Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    transition: opacity .15s, filter .15s;
    border: 0;
    cursor: pointer;
}
.sau-btn:hover { opacity: .88; filter: brightness(1.1); }
.sau-btn-disabled {
    background: #D8DCE8 !important;
    color: #8890A4 !important;
    cursor: not-allowed;
}

@media(max-width:480px) {
    .sau-grid { grid-template-columns: 1fr; }
}