/* Extracted from app/view/user/event-announcement.html
   (previously inline <style> block(s) in the view). External so the CSP
   can drop style-src 'unsafe-inline'. */

    /* Event and Announcement Card Styling */
    .event-card,
    .announcement-card {
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .event-card:hover,
    .announcement-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    }

    .event-header,
    .announcement-header {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .event-body,
    .announcement-body {
        display: flex;
        flex-direction: column;
    }

    .event-body button:hover,
    .announcement-body button:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }

    /* Responsive padding adjustments */
    @media (max-width: 768px) {

        .event-card,
        .announcement-card {
            margin-bottom: 20px;
        }

        .event-header h5,
        .announcement-header h5 {
            font-size: 16px !important;
        }

        .event-body p,
        .announcement-body p {
            font-size: 13px !important;
        }
    }

    @media (max-width: 576px) {

        .event-header,
        .announcement-header {
            padding: 15px !important;
        }

        .event-body,
        .announcement-body {
            padding: 15px !important;
        }

        .event-header h5,
        .announcement-header h5 {
            font-size: 14px !important;
        }
    }

    /* Icon styling */
    .bi {
        vertical-align: middle;
    }

    /* Section spacing */
    .events-section,
    .announcements-section {
        padding: 40px 0;
    }

    /* Card height consistency */
    .event-card,
    .announcement-card {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .event-body,
    .announcement-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .event-body button,
    .announcement-body button {
        margin-top: 20px;
        align-self: flex-start;
    }

    /* Smooth animations */
    .event-card i,
    .announcement-card i {
        transition: transform 0.3s ease;
    }

    .event-card:hover i,
    .announcement-card:hover i {
        transform: scale(1.1);
    }