/* =========================================================
   Gau Mitra - News and notice card component
   Auto-segregated from the original Gau Mitra stylesheet.
========================================================= */

/* Card */

.nn-card {
    --nn-main: #f97316;
    --nn-dark: #9f1239;
    --nn-soft: rgba(249, 115, 22, 0.12);
    --nn-extra-soft: rgba(249, 115, 22, 0.06);

    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)),
        radial-gradient(circle at 10% 0%, var(--nn-extra-soft), transparent 35%);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 54px rgba(107, 63, 24, 0.12);
    transition: all 0.28s ease;
}

.nn-card.news {
    --nn-main: #0f766e;
    --nn-dark: #115e59;
    --nn-soft: rgba(20, 184, 166, 0.14);
    --nn-extra-soft: rgba(20, 184, 166, 0.08);
}

.nn-card.notice {
    --nn-main: #f97316;
    --nn-dark: #9f1239;
    --nn-soft: rgba(249, 115, 22, 0.14);
    --nn-extra-soft: rgba(159, 18, 57, 0.07);
}

.nn-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 78px rgba(107, 63, 24, 0.18);
}

.nn-card-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--nn-soft), transparent 70%);
    pointer-events: none;
}

.nn-card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, var(--nn-soft), transparent 46%),
        linear-gradient(135deg, #fff7ed, #ffffff);
}

.nn-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.32s ease;
}

.nn-card:hover .nn-card-media img {
    transform: scale(1.045);
}

.nn-card-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--nn-main);
    font-size: 54px;
}

.nn-floating-badges {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.nn-type-pill,
.nn-priority-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.nn-type-pill {
    color: #fff;
    background: linear-gradient(135deg, var(--nn-main), var(--nn-dark));
}

.nn-priority-pill {
    color: #4b2506;
    background: rgba(255, 255, 255, 0.92);
}

.nn-priority-pill.low {
    color: #166534;
}

.nn-priority-pill.medium {
    color: #c2410c;
}

.nn-priority-pill.high {
    color: #b91c1c;
}

.nn-priority-pill.urgent {
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.nn-card-body {
    padding: 22px;
}

.nn-date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 13px;
}

.nn-date-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    background: var(--nn-soft);
    color: var(--nn-dark);
    font-size: 11px;
    font-weight: 900;
}

.nn-card h4 {
    margin: 0;
    min-height: 56px;
    color: var(--maroon);
    font-size: 20px;
    line-height: 1.35;
    font-weight: 900;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nn-card p {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 650;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nn-meta-list {
    display: grid;
    gap: 9px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(139, 92, 24, 0.12);
}

.nn-meta-list div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #70451f;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

.nn-meta-list i {
    color: var(--nn-main);
    min-width: 16px;
    margin-top: 2px;
}

.nn-mini-empty,
.nn-empty-box {
    text-align: center;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(139, 92, 24, 0.22);
    color: var(--muted);
    font-weight: 800;
}

.nn-mini-empty {
    padding: 24px;
}

.nn-mini-empty i {
    color: var(--saffron-dark);
    margin-right: 7px;
}

.nn-empty-box {
    padding: 46px 20px;
}

.nn-empty-box i {
    display: block;
    font-size: 46px;
    margin-bottom: 12px;
}

.nn-empty-box.news i {
    color: #0f766e;
}

.nn-empty-box.notice i {
    color: #f97316;
}

.nn-empty-box h4 {
    color: var(--maroon);
    font-weight: 900;
}

.nn-empty-box p {
    color: var(--muted);
    margin: 0;
    font-weight: 700;
}

.nn-pagination {
    margin-top: 28px;
}

/* Responsive */

@media (max-width: 991px) {
    .nn-type-header {
        align-items: flex-start;
    }

    .nn-card-media {
        height: 180px;
    }
}

@media (max-width: 767px) {
    .nn-page-hero {
        padding: 46px 0 34px;
    }

    .nn-page-hero p {
        font-size: 15px;
    }

    .nn-filter-box {
        padding: 16px;
        border-radius: 22px;
    }

    .nn-type-tabs {
        gap: 8px;
    }

    .nn-type-tabs a {
        min-height: 40px;
        padding: 9px 13px;
        font-size: 13px;
    }

    .nn-type-block {
        padding: 16px;
        border-radius: 26px;
    }

    .nn-type-header {
        display: grid;
    }

    .nn-type-header h3 {
        font-size: 22px;
    }

    .nn-card {
        border-radius: 24px;
    }

    .nn-card-media {
        height: 175px;
    }

    .nn-card-body {
        padding: 18px;
    }

    .nn-card h4 {
        min-height: auto;
        font-size: 18px;
    }
}