/* ---- Employee per campus bento grid ---- */
.fnf-fpc-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr 1fr 1fr;
    grid-template-rows: 180px 180px 185px;
    gap: 10px;
    grid-template-areas:
        "total  feat1  feat2  feat3  sm-lipa     sm-nasugbu"
        "total  feat1  feat2  feat3  sm-lemery   sm-tanauan"
        "sm-mabini sm-rosario sm-lobo sm-malvar sm-sanjuan sm-aboitiz";
}

.fnf-fpc-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.fnf-fpc-card-content {
    position: relative;
    z-index: 2;
    padding: 18px 20px;
    width: 100%;
}

.fnf-fpc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: transform 0.5s ease, filter 0.4s ease;
}

.fnf-fpc-card:hover .fnf-fpc-bg {
    transform: scale(1.06);
    filter: grayscale(80%) contrast(1.1);
}

.fnf-fpc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.78) 0%, rgba(10,10,15,0.28) 55%, rgba(10,10,15,0.10) 100%);
    z-index: 1;
}

.fnf-fpc-overlay--dark {
    background: linear-gradient(to top, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.40) 60%, rgba(10,10,15,0.14) 100%);
}

.fnf-fpc-card:hover .fnf-fpc-overlay {
    background: linear-gradient(to top, rgba(218,32,43,0.9) 0%, rgba(218,32,43,0.4) 55%, rgba(218,32,43,0.1) 100%);
}

.fnf-fpc-card--total {
    grid-area: total;
    background: linear-gradient(145deg, #da202b 0%, #a8141d 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 6px;
}

.fnf-fpc-card--total .fnf-fpc-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    height: 100%;
}

.fnf-fpc-total-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.70);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.fnf-fpc-total-num {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(44px, 5.5vw, 52px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
}

.fnf-fpc-total-sub {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    letter-spacing: 1px;
    margin-top: 6px;
    text-transform: uppercase;
}

.fnf-fpc-total-divider {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.40);
    margin: 12px auto;
    border-radius: 2px;
}

.fnf-fpc-total-footer {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.fnf-fpc-card--feat1 { grid-area: feat1; }
.fnf-fpc-card--feat2 { grid-area: feat2; }
.fnf-fpc-card--feat3 { grid-area: feat3; }

.fnf-fpc-card--feature .fnf-fpc-card-content {
    padding: 22px 24px;
}

.fnf-fpc-feat-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(52px, 6.5vw, 62px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.fnf-fpc-feat-campus {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.fnf-fpc-feat-badge {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(218,32,43,0.75);
    padding: 3px 8px;
    border-radius: 2px;
    margin-top: 8px;
}

.fnf-fpc-card--sm .fnf-fpc-card-content {
    padding: 14px 16px;
}

.fnf-fpc-sm-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.fnf-fpc-sm-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

.fnf-fpc-card--lipa    { grid-area: sm-lipa; }
.fnf-fpc-card--nasugbu { grid-area: sm-nasugbu; }
.fnf-fpc-card--lemery  { grid-area: sm-lemery; }
.fnf-fpc-card--tanauan { grid-area: sm-tanauan; }
.fnf-fpc-card--mabini  { grid-area: sm-mabini; }
.fnf-fpc-card--rosario { grid-area: sm-rosario; }
.fnf-fpc-card--lobo    { grid-area: sm-lobo; }
.fnf-fpc-card--malvar  { grid-area: sm-malvar; }
.fnf-fpc-card--sanjuan { grid-area: sm-sanjuan; }
.fnf-fpc-card--aboitiz { grid-area: sm-aboitiz; }

@media (max-width: 1100px) {
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1.4fr 1.4fr 1.4fr 1fr;
        grid-template-rows: 160px 160px 170px 170px;
        grid-template-areas:
            "total  feat1  feat2  feat3  sm-lipa"
            "total  feat1  feat2  feat3  sm-nasugbu"
            "sm-lemery  sm-tanauan  sm-mabini  sm-rosario  sm-lobo"
            "sm-malvar  sm-malvar   sm-sanjuan sm-sanjuan  sm-aboitiz";
    }
}

@media (max-width: 768px) {
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 140px 140px 160px 160px;
        gap: 8px;
        grid-template-areas:
            "total  feat1  feat2"
            "total  feat1  feat3"
            "sm-lipa    sm-nasugbu sm-lemery"
            "sm-tanauan sm-mabini  sm-rosario";
    }

    .fnf-fpc-feat-num {
        font-size: clamp(36px, 6vw, 56px);
    }

    .fnf-fpc-card--lobo,
    .fnf-fpc-card--malvar,
    .fnf-fpc-card--sanjuan,
    .fnf-fpc-card--aboitiz { display: none; }
}

@media (max-width: 540px) {
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 120px 140px 140px 140px 140px 140px;
        gap: 7px;
        grid-template-areas:
            "total     total"
            "feat1     feat1"
            "feat2     feat3"
            "sm-lipa   sm-nasugbu"
            "sm-lemery sm-tanauan"
            "sm-mabini sm-rosario";
    }

    .fnf-fpc-card--total {
        align-items: center;
    }

    .fnf-fpc-total-num {
        font-size: clamp(38px, 9vw, 58px);
    }

    .fnf-fpc-card--lobo,
    .fnf-fpc-card--malvar,
    .fnf-fpc-card--sanjuan,
    .fnf-fpc-card--aboitiz { display: none; }
}