/*
 * ============================================================
 * BISDIG UJB — CARD SYSTEM
 * FASE 2.3 — JANABADRA DIGITAL
 *
 * Purpose:
 *   Base card / content card / news card / lecturer card /
 *   statistic card / feature card / grids / responsive safety
 *
 * Design:
 *   Clean academic + modern digital
 *   Red = identity
 *   Burgundy/Wine = depth
 *   Gold = restrained accent
 *   Ivory = warm surface
 *
 * Responsive:
 *   320px → 2560px+
 *   Touch / Mouse / Keyboard
 *
 * Compatibility:
 *   Existing .card and .card-grid classes are preserved.
 * ============================================================
 */


/* ============================================================
   1. CARD TOKENS
   ============================================================ */

:root {

    --bisdig-card-bg:
        var(--color-white);

    --bisdig-card-bg-soft:
        var(--color-ivory);

    --bisdig-card-border:
        var(--color-border);

    --bisdig-card-border-hover:
        var(--color-border-red);

    --bisdig-card-radius:
        1rem;

    --bisdig-card-radius-sm:
        0.75rem;

    --bisdig-card-radius-lg:
        1.25rem;

    --bisdig-card-padding:
        clamp(1rem, 2.5vw, 1.75rem);

    --bisdig-card-gap:
        clamp(0.875rem, 2vw, 1.25rem);

    --bisdig-card-shadow:
        var(--bisdig-shadow-sm);

    --bisdig-card-shadow-hover:
        var(--bisdig-shadow-lg);

    --bisdig-card-hover-y:
        -4px;

    --bisdig-card-transition:
        background-color var(--bisdig-transition-normal),
        border-color var(--bisdig-transition-normal),
        box-shadow var(--bisdig-transition-normal),
        transform var(--bisdig-transition-normal);
}


/* ============================================================
   2. BASE CARD
   ============================================================ */

.card,
.bisdig-card {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    padding:
        var(--bisdig-card-padding);

    background:
        var(--bisdig-card-bg);

    color:
        var(--color-text);

    border:
        1px solid
        var(--bisdig-card-border);

    border-radius:
        var(--bisdig-card-radius);

    box-shadow:
        var(--bisdig-card-shadow);

    overflow: hidden;

    transition:
        var(--bisdig-card-transition);
}


/* ============================================================
   3. CARD HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .card:hover,
    .bisdig-card:hover {

        border-color:
            var(--bisdig-card-border-hover);

        box-shadow:
            var(--bisdig-card-shadow-hover);

        transform:
            translateY(var(--bisdig-card-hover-y));
    }
}


/* ============================================================
   4. CARD CONTENT SAFETY
   ============================================================ */

.card > *,
.bisdig-card > * {

    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   5. CARD HEADER
   ============================================================ */

.card-header,
.bisdig-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        1rem;

    min-width:
        0;

    margin-bottom:
        1rem;
}

.card-header > *,
.bisdig-card-header > * {

    min-width:
        0;
}


/* ============================================================
   6. CARD BODY
   ============================================================ */

.card-body,
.bisdig-card-body {

    flex:
        1 1 auto;

    min-width:
        0;
}


/* ============================================================
   7. CARD FOOTER
   ============================================================ */

.card-footer,
.bisdig-card-footer {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    min-width:
        0;

    margin-top:
        auto;

    padding-top:
        1rem;
}


/* ============================================================
   8. CARD TITLE
   ============================================================ */

.card-title,
.bisdig-card-title {

    margin:
        0;

    max-width:
        100%;

    color:
        var(--color-text-strong);

    font-size:
        clamp(1rem, 1.5vw, 1.25rem);

    font-weight:
        800;

    line-height:
        1.3;

    letter-spacing:
        -0.015em;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   9. CARD DESCRIPTION
   ============================================================ */

.card-description,
.bisdig-card-description {

    margin:
        0.5rem 0 0;

    max-width:
        65ch;

    color:
        var(--color-text-soft);

    font-size:
        0.9rem;

    line-height:
        1.65;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   10. CARD META
   ============================================================ */

.card-meta,
.bisdig-card-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.5rem 0.75rem;

    margin-top:
        0.75rem;

    color:
        var(--color-text-muted);

    font-size:
        0.75rem;

    line-height:
        1.45;
}


/* ============================================================
   11. CARD ACTIONS
   ============================================================ */

.card-actions,
.bisdig-card-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.625rem;

    margin-top:
        1rem;

    min-width:
        0;
}


/* ============================================================
   12. CARD IMAGE
   ============================================================ */

.card-image,
.bisdig-card-image {

    position:
        relative;

    width:
        100%;

    max-width:
        100%;

    overflow:
        hidden;

    background:
        var(--color-ivory);

    aspect-ratio:
        16 / 9;
}

.card-image img,
.bisdig-card-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform var(--bisdig-transition-slow);
}

@media (hover: hover) and (pointer: fine) {

    .card:hover .card-image img,
    .bisdig-card:hover .bisdig-card-image img {

        transform:
            scale(1.035);
    }
}


/* ============================================================
   13. CARD IMAGE — NO CROP VARIANT
   ============================================================ */

.card-image-contain,
.bisdig-card-image-contain {

    aspect-ratio:
        auto;

    min-height:
        160px;

    display:
        grid;

    place-items:
        center;

    padding:
        1rem;
}

.card-image-contain img,
.bisdig-card-image-contain img {

    width:
        auto;

    height:
        auto;

    max-width:
        100%;

    max-height:
        240px;

    object-fit:
        contain;
}


/* ============================================================
   14. CARD BADGE
   ============================================================ */

.card-badge,
.bisdig-card-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    max-width:
        100%;

    min-height:
        28px;

    padding:
        0.3rem
        0.65rem;

    background:
        var(--color-red-pale);

    color:
        var(--color-red);

    border:
        1px solid
        var(--color-border-red);

    border-radius:
        var(--bisdig-radius-full);

    font-size:
        0.6875rem;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    overflow-wrap:
        anywhere;
}


/* ============================================================
   15. CARD ACCENT LINE
   ============================================================ */

.card-accent,
.bisdig-card-accent {

    position:
        absolute;

    inset:
        0 auto auto 0;

    width:
        100%;

    height:
        3px;

    background:
        var(--color-red);
}

.card-accent-gold,
.bisdig-card-accent-gold {

    background:
        var(--color-gold);
}

.card-accent-burgundy,
.bisdig-card-accent-burgundy {

    background:
        var(--color-burgundy);
}


/* ============================================================
   16. CARD VARIANT — SOFT
   ============================================================ */

.card-soft,
.bisdig-card-soft {

    background:
        var(--color-ivory);

    border-color:
        transparent;

    box-shadow:
        none;
}

@media (hover: hover) and (pointer: fine) {

    .card-soft:hover,
    .bisdig-card-soft:hover {

        background:
            var(--color-white);

        border-color:
            var(--color-border-red);

        box-shadow:
            var(--bisdig-card-shadow-hover);
    }
}


/* ============================================================
   17. CARD VARIANT — RED
   ============================================================ */

.card-red,
.bisdig-card-red {

    background:
        var(--color-red);

    color:
        var(--color-white);

    border-color:
        var(--color-red);
}

.card-red .card-title,
.card-red .bisdig-card-title,
.bisdig-card-red .card-title,
.bisdig-card-red .bisdig-card-title {

    color:
        var(--color-white);
}

.card-red .card-description,
.card-red .bisdig-card-description,
.bisdig-card-red .card-description,
.bisdig-card-red .bisdig-card-description {

    color:
        rgba(255,255,255,0.82);
}


/* ============================================================
   18. CARD VARIANT — DARK
   ============================================================ */

.card-dark,
.bisdig-card-dark {

    background:
        var(--color-charcoal-dark);

    color:
        var(--color-white);

    border-color:
        var(--color-charcoal-dark);

    box-shadow:
        var(--bisdig-shadow-lg);
}

.card-dark .card-title,
.card-dark .bisdig-card-title,
.bisdig-card-dark .card-title,
.bisdig-card-dark .bisdig-card-title {

    color:
        var(--color-white);
}

.card-dark .card-description,
.card-dark .bisdig-card-description,
.bisdig-card-dark .card-description,
.bisdig-card-dark .bisdig-card-description {

    color:
        rgba(255,255,255,0.76);
}


/* ============================================================
   19. CARD VARIANT — WINE
   ============================================================ */

.card-wine,
.bisdig-card-wine {

    background:
        var(--color-wine);

    color:
        var(--color-white);

    border-color:
        var(--color-wine);
}

.card-wine .card-title,
.card-wine .bisdig-card-title,
.bisdig-card-wine .card-title,
.bisdig-card-wine .bisdig-card-title {

    color:
        var(--color-white);
}


/* ============================================================
   20. CARD VARIANT — FLAT
   ============================================================ */

.card-flat,
.bisdig-card-flat {

    box-shadow:
        none;

    border-radius:
        var(--bisdig-card-radius-sm);
}


/* ============================================================
   21. CARD VARIANT — INTERACTIVE
   ============================================================ */

.card-interactive,
.bisdig-card-interactive {

    cursor:
        pointer;

    touch-action:
        manipulation;
}

.card-interactive:focus-within,
.bisdig-card-interactive:focus-within {

    border-color:
        var(--color-red);

    box-shadow:
        var(--bisdig-shadow-red);
}


/* ============================================================
   22. CARD GRID
   ============================================================ */

.card-grid,
.bisdig-card-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 260px),
                1fr
            )
        );

    gap:
        var(--bisdig-card-gap);

    width:
        100%;

    min-width:
        0;
}


/* ============================================================
   23. CARD GRID — 2 COLUMNS
   ============================================================ */

.card-grid-2,
.bisdig-card-grid-2 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--bisdig-card-gap);
}


/* ============================================================
   24. CARD GRID — 3 COLUMNS
   ============================================================ */

.card-grid-3,
.bisdig-card-grid-3 {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--bisdig-card-gap);
}


/* ============================================================
   25. CARD GRID — 4 COLUMNS
   ============================================================ */

.card-grid-4,
.bisdig-card-grid-4 {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap:
        var(--bisdig-card-gap);
}


/* ============================================================
   26. STAT CARD
   ============================================================ */

.stat-card,
.bisdig-stat-card {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-height:
        150px;

    padding:
        var(--bisdig-card-padding);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--bisdig-card-radius);

    box-shadow:
        var(--bisdig-shadow-sm);
}

.stat-card-value,
.bisdig-stat-card-value {

    margin:
        0;

    color:
        var(--color-red);

    font-size:
        clamp(1.75rem, 4vw, 2.75rem);

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.035em;

    overflow-wrap:
        anywhere;
}

.stat-card-label,
.bisdig-stat-card-label {

    margin-top:
        0.625rem;

    color:
        var(--color-text-strong);

    font-size:
        0.8125rem;

    font-weight:
        700;

    line-height:
        1.4;
}

.stat-card-meta,
.bisdig-stat-card-meta {

    margin-top:
        0.35rem;

    color:
        var(--color-text-muted);

    font-size:
        0.6875rem;
}


/* ============================================================
   27. FEATURE CARD
   ============================================================ */

.feature-card,
.bisdig-feature-card {

    min-height:
        100%;

    padding:
        clamp(1.25rem, 3vw, 2rem);
}

.feature-card-icon,
.bisdig-feature-card-icon {

    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    margin-bottom:
        1rem;

    background:
        var(--color-red-pale);

    color:
        var(--color-red);

    border:
        1px solid
        var(--color-border-red);

    border-radius:
        0.875rem;
}

.feature-card-icon svg,
.bisdig-feature-card-icon svg {

    width:
        1.4rem;

    height:
        1.4rem;
}


/* ============================================================
   28. NEWS CARD
   ============================================================ */

.news-card,
.bisdig-news-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        100%;

    padding:
        0;

    overflow:
        hidden;
}

.news-card .card-body,
.bisdig-news-card .bisdig-card-body {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    padding:
        var(--bisdig-card-padding);
}

.news-card .card-actions,
.bisdig-news-card .bisdig-card-actions {

    margin-top:
        auto;

    padding-top:
        1rem;
}


/* ============================================================
   29. LECTURER / PROFILE CARD
   ============================================================ */

.lecturer-card,
.bisdig-lecturer-card {

    text-align:
        center;

    align-items:
        center;
}

.lecturer-card-image,
.bisdig-lecturer-card-image {

    width:
        clamp(84px, 12vw, 128px);

    aspect-ratio:
        1;

    margin-inline:
        auto;

    overflow:
        hidden;

    border:
        3px solid
        var(--color-red-pale);

    border-radius:
        50%;

    background:
        var(--color-ivory);
}

.lecturer-card-image img,
.bisdig-lecturer-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.lecturer-card-role,
.bisdig-lecturer-card-role {

    margin-top:
        0.35rem;

    color:
        var(--color-red);

    font-size:
        0.75rem;

    font-weight:
        800;
}


/* ============================================================
   30. PARTNER / LOGO CARD
   ============================================================ */

.partner-card,
.bisdig-partner-card {

    display:
        grid;

    place-items:
        center;

    min-height:
        110px;

    padding:
        1rem;

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--bisdig-card-radius-sm);
}

.partner-card img,
.bisdig-partner-card img {

    width:
        auto;

    max-width:
        min(100%, 180px);

    max-height:
        64px;

    object-fit:
        contain;

    opacity:
        0.78;

    transition:
        opacity var(--bisdig-transition-fast),
        transform var(--bisdig-transition-fast);
}

@media (hover: hover) and (pointer: fine) {

    .partner-card:hover img,
    .bisdig-partner-card:hover img {

        opacity:
            1;

        transform:
            scale(1.025);
    }
}


/* ============================================================
   31. EMPTY CARD
   ============================================================ */

.card-empty,
.bisdig-card-empty {

    display:
        grid;

    place-items:
        center;

    min-height:
        180px;

    text-align:
        center;

    background:
        var(--color-ivory);

    border:
        1px dashed
        var(--color-border-dark);

    box-shadow:
        none;
}


/* ============================================================
   32. RESPONSIVE — <= 1024px
   ============================================================ */

@media (max-width: 1024px) {

    .card-grid-4,
    .bisdig-card-grid-4 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .card-grid-3,
    .bisdig-card-grid-3 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


/* ============================================================
   33. RESPONSIVE — <= 700px
   ============================================================ */

@media (max-width: 700px) {

    .card-grid-2,
    .card-grid-3,
    .card-grid-4,
    .bisdig-card-grid-2,
    .bisdig-card-grid-3,
    .bisdig-card-grid-4 {

        grid-template-columns:
            minmax(0, 1fr);
    }

    .card,
    .bisdig-card {

        border-radius:
            var(--bisdig-card-radius-sm);
    }

    .card-header,
    .bisdig-card-header {

        gap:
            0.75rem;
    }
}


/* ============================================================
   34. RESPONSIVE — <= 480px
   ============================================================ */

@media (max-width: 480px) {

    .card,
    .bisdig-card {

        padding:
            1rem;
    }

    .card-title,
    .bisdig-card-title {

        font-size:
            1rem;
    }

    .card-description,
    .bisdig-card-description {

        font-size:
            0.8125rem;
    }

    .card-actions,
    .bisdig-card-actions {

        width:
            100%;

        align-items:
            stretch;
    }

    .card-actions > .btn,
    .card-actions > a.btn,
    .bisdig-card-actions > .bisdig-btn {

        max-width:
            100%;
    }

    .stat-card,
    .bisdig-stat-card {

        min-height:
            135px;
    }
}


/* ============================================================
   35. RESPONSIVE — <= 360px
   ============================================================ */

@media (max-width: 360px) {

    .card,
    .bisdig-card {

        padding:
            0.875rem;

        border-radius:
            0.75rem;
    }

    .card-grid,
    .bisdig-card-grid {

        grid-template-columns:
            minmax(0, 1fr);

        gap:
            0.75rem;
    }

    .card-image,
    .bisdig-card-image {

        aspect-ratio:
            4 / 3;
    }

    .lecturer-card-image,
    .bisdig-lecturer-card-image {

        width:
            84px;
    }
}


/* ============================================================
   36. TOUCH DEVICES
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .card,
    .bisdig-card {

        transform:
            none !important;
    }

    /*
     * Interactive cards should still feel clickable without
     * relying on hover animation.
     */
    .card-interactive,
    .bisdig-card-interactive {

        -webkit-tap-highlight-color:
            rgba(var(--color-red-rgb), 0.08);
    }
}


/* ============================================================
   37. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .card,
    .bisdig-card,
    .card-image img,
    .bisdig-card-image img,
    .partner-card img,
    .bisdig-partner-card img {

        transition:
            none;
    }

    .card:hover,
    .bisdig-card:hover,
    .card:hover .card-image img,
    .bisdig-card:hover .bisdig-card-image img,
    .partner-card:hover img,
    .bisdig-partner-card:hover img {

        transform:
            none;
    }
}


/* ============================================================
   38. FORCED COLORS / HIGH CONTRAST
   ============================================================ */

@media (forced-colors: active) {

    .card,
    .bisdig-card,
    .stat-card,
    .bisdig-stat-card,
    .partner-card,
    .bisdig-partner-card {

        border:
            1px solid CanvasText;
    }
}


/* ============================================================
   39. CARD GRID SAFETY
   ============================================================ */

.card-grid > *,
.bisdig-card-grid > *,
.card-grid-2 > *,
.card-grid-3 > *,
.card-grid-4 > *,
.bisdig-card-grid-2 > *,
.bisdig-card-grid-3 > *,
.bisdig-card-grid-4 > * {

    min-width:
        0;

    max-width:
        100%;
}


/* ============================================================
   40. LEGACY COMPATIBILITY
   ============================================================ */

/*
 * Existing theme code may still use these utility classes.
 * Keep them predictable rather than changing their meaning.
 */

.card-grid {

    width:
        100%;

    max-width:
        100%;
}


/* ============================================================
   END
   ============================================================
 */