e/* ==========================================================================
   RUN.EVENTS WIDGETS — Notifications Widget
   Banner-style notifications with icon/image support
   ========================================================================== */

.run-events-notifications {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: var(--space-lg);
    display: flex;
    gap: var(--space-md);
}

.run-events-notifications.warning {
    background-color: var(--color-secondary);
    color: var(--color-text-on-secondary);
}

.run-events-notifications .img-container {
    width: 120px;
    max-height: 120px;
    border: 8px solid var(--color-text-on-primary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.run-events-notifications.warning .img-container {
    border-color: var(--color-text-on-secondary);
}

.run-events-notifications img {
    max-height: 100%;
    height: auto;
    border-radius: var(--radius-full);
}

.run-events-notifications p {
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 768px) {
    .run-events-notifications {
        flex-direction: column;
        text-align: center;
    }

    .run-events-notifications .img-container {
        margin: 0 auto;
    }
}