/* ═══════════════════════════════════════════════════════════════
   NIB-CARD  —  Generiek kaart-systeem
   ═══════════════════════════════════════════════════════════════

   CSS-variabelen (inline style op .nib-card):
     --card-color : #075082     hoofd-kleur (verplicht)
     --card-ratio : 4 / 3      aspect-ratio hero-blok (optioneel)

   Structuur:
     .nib-card
        .nib-card-hero                     bovenblok — content-gedreven (padding)
          .nib-card-hero--media            modifier: foto-modus (aspect-ratio + overflow)
           .nib-card-hero-img             optioneel: <img>
           .nib-card-hero-placeholder     optioneel: placeholder zonder foto
         [vrije content]                  optioneel: eigen markup (bijv. percentage)
         .nib-card-badge                  optioneel: linksboven badge
       .nib-card-info                     onderblok (lichter)
         .nib-card-info-header            rij: titel links, actieknop rechts
           .nib-card-info-text            flex-kolom: titel + beschrijving
             .nib-card-title
             .nib-card-desc
           .nib-card-action               optioneel: ronde knop rechts
         .nib-card-tags                   optioneel: tags
           .nib-card-tag

   ═══════════════════════════════════════════════════════════════ */

/* ── Kaart wrapper ─────────────────────────────────────────── */
.nib-card {
    --_color: var(--card-color, #075082);
    --_ratio: var(--card-ratio, 4 / 3);

    /* Afgeleide kleuren — licht thema */
    --_hero-bg:     color-mix(in oklab, var(--_color), white 35%);
    --_hero-text:   color-mix(in oklab, var(--_color), black 25%);
    --_hero-sub:    color-mix(in oklab, var(--_color), black 15%);
    --_info-bg:     color-mix(in oklab, var(--_color), white 62%);
    --_title-color: color-mix(in oklab, var(--_color), black 32%);
    --_desc-color:  color-mix(in oklab, var(--_color), black 12%);
    --_tag-bg:      color-mix(in oklab, var(--_color), white 48%);
    --_tag-color:   color-mix(in oklab, var(--_color), black 22%);
    --_action-bg:   color-mix(in oklab, var(--_color), white 42%);
    --_action-hover:color-mix(in oklab, var(--_color), white 30%);
    --_action-color:color-mix(in oklab, var(--_color), black 32%);
    --_placeholder-bg: color-mix(in oklab, var(--_color), white 25%);
    --_placeholder-icon: color-mix(in oklab, var(--_color), black 12%);

    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: opacity 0.15s;
}

.nib-card:hover {
    opacity: 0.92;
}

/* ── Hero (bovenblok) ──────────────────────────────────────── */
/* Basis = oorspronkelijke nib-coll-ov-hero */
.nib-card-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2.5rem 1.5rem;
    background: var(--_hero-bg);
}

/* Media-modus (foto/placeholder): schaalbaar hero-vlak */
.nib-card-hero--media {
    aspect-ratio: var(--_ratio);
    overflow: hidden;
    padding: 0;
    gap: 0;
}

/* Foto in hero */
.nib-card-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, filter 0.3s ease;
}

.nib-card:hover .nib-card-hero-img {
    transform: scale(1.04);
    filter: brightness(0.92);
}

/* Placeholder (geen foto) */
.nib-card-hero-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--_placeholder-bg);
    width: 100%;
    height: 100%;
}

.nib-card-hero-placeholder i {
    font-size: 2.75rem;
    color: var(--_placeholder-icon);
    opacity: 0.5;
}

/* Badge linksboven in hero */
.nib-card-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #facc15;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nib-card-badge:empty {
    display: none;
}

.nib-card-badge i {
    font-size: 0.6rem;
}

/* Actieknoppen rechtsboven in hero — verschijnen op hover */
.nib-card-hero-actions {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.35rem;
    z-index: 3;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nib-card:hover .nib-card-hero-actions {
    opacity: 1;
    transform: translateY(0);
}

.nib-card-hero-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.nib-card-hero-action:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.1);
    color: #fff;
    text-decoration: none;
}

/* Inhoud in hero (optionele wrapper, bijv. voor tekst over een afbeelding) */
.nib-card-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: var(--_hero-text);
}

/* Groot percentage-getal in hero */
.nib-card-hero-pct {
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--_hero-text);
}

.nib-card-hero-pct small {
    font-size: 0.4em;
    font-weight: 700;
    vertical-align: super;
    margin-left: 0.05em;
}

/* Sub-tekst onder het percentage */
.nib-card-hero-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--_hero-sub);
    letter-spacing: 0.02em;
}

/* ── Info (onderblok) ──────────────────────────────────────── */
.nib-card-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1.25rem 1.5rem 1.35rem;
    background: var(--_info-bg);
    flex: 1;
}

/* Header rij: titel-tekst links, actieknop rechts */
.nib-card-info-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Tekstkolom (titel + beschrijving) */
.nib-card-info-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Titel */
.nib-card-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--_title-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Beschrijving */
.nib-card-desc {
    margin: 0 0 1em 0;
    font-size: 0.88rem;
    color: var(--_desc-color);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Actieknop (rond, rechts naast titel) */
.nib-card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--_action-bg);
    color: var(--_action-color);
    font-size: 0.82rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    margin-top: 0.1rem;
}

.nib-card-action:hover {
    background: var(--_action-hover);
    transform: scale(1.08);
    color: var(--_action-color);
    text-decoration: none;
}

/* ── Tags ──────────────────────────────────────────────────── */
.nib-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: auto;
}

.nib-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
    background: var(--_tag-bg);
    color: var(--_tag-color);
}

.nib-card-tag i {
    font-size: 0.68rem;
    opacity: 0.7;
}

/* ── Skeleton ──────────────────────────────────────────────── */
.nib-card-sk {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nib-card-sk-hero {
    aspect-ratio: var(--card-ratio, 4 / 3);
}

/* Content-modus skeleton (geen aspect-ratio, vaste hoogte) */
.nib-card-sk-hero--content {
    aspect-ratio: unset;
    height: 140px;
}

.nib-card-sk-info {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

/* ── Dark mode ─────────────────────────────────────────────── */
.rz-material-dark .nib-card {
    --_hero-bg:     color-mix(in oklab, var(--_color), black 25%);
    --_hero-text:   color-mix(in oklab, var(--_color), white 55%);
    --_hero-sub:    color-mix(in oklab, var(--_color), white 35%);
    --_info-bg:     color-mix(in oklab, var(--_color), black 55%);
    --_title-color: color-mix(in oklab, var(--_color), white 75%);
    --_desc-color:  color-mix(in oklab, var(--_color), white 50%);
    --_tag-bg:      color-mix(in oklab, var(--_color), black 35%);
    --_tag-color:   color-mix(in oklab, var(--_color), white 55%);
    --_action-bg:   color-mix(in oklab, var(--_color), black 35%);
    --_action-hover:color-mix(in oklab, var(--_color), black 20%);
    --_action-color:color-mix(in oklab, var(--_color), white 75%);
    --_placeholder-bg: color-mix(in oklab, var(--_color), black 20%);
    --_placeholder-icon: rgba(255, 255, 255, 0.5);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nib-card-info {
        padding: 1rem 1.1rem 1.1rem;
    }

    .nib-card-title {
        font-size: 1.1rem;
    }

    .nib-card-desc {
        font-size: 0.82rem;
    }

    .nib-card-hero-actions {
        opacity: 1;
        transform: none;
    }
}