/* Auto-extracted from resources/views/website/announcements/index.blade.php */

.announcement-tabs {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 28px;
    }

    .announcement-tab {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 999px;
        border: 1px solid #dbe4ef;
        background: #fff;
        color: #23456c;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .announcement-tab.active {
        background: #2971b7;
        border-color: #2971b7;
        color: #fff;
        box-shadow: 0 10px 22px rgba(41, 113, 183, 0.18);
    }

    .announcement-tab-count {
        min-width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        background: rgba(35, 69, 108, 0.12);
        font-size: 12px;
    }

    .announcement-tab.active .announcement-tab-count {
        background: rgba(255, 255, 255, 0.2);
    }

    .announcement-list {
        display: grid;
        gap: 24px;
    }

    .announcement-card {
        padding: 26px;
        display: grid;
        gap: 16px;
    }

    .announcement-meta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .announcement-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.03em;
    }

    .announcement-badge.announcement { background: #dbeafe; color: #1d4ed8; }
    .announcement-badge.notification { background: #dcfce7; color: #15803d; }
    .announcement-badge.event { background: #fef3c7; color: #b45309; }
    .announcement-badge.new { background: #fee2e2; color: #b91c1c; }

    .announcement-time {
        color: #64748b;
        font-size: 14px;
        display: inline-flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .announcement-title {
        font-size: 28px;
        font-weight: 800;
        color: #0f172a;
        margin: 0;
    }

    .announcement-body {
        color: #475569;
        line-height: 1.8;
        margin: 0;
    }

    .announcement-image img {
        width: 100%;
        max-height: 360px;
        object-fit: cover;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
    }