/* ===================================================
   NIB FOTO DETAIL PAGE  (FotoNew.razor)
   Consistent met nib-news-block / nib-photos-block
   =================================================== */

/* ── Kleur-variabelen (net als news & photos blokken) ─ */
.nib-foto-block,
.nib-foto-two-col {
    --photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), white 20%);
    --photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), white 35%);
    --photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), white 40%);
    --photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), white 55%);
    --photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), white 72%);
    --photo-text:        color-mix(in oklab, var(--photo-color, #075082), black 30%);
    --photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 75%);
}

.rz-material-dark .nib-foto-block,
.rz-material-dark .nib-foto-two-col {
    --photo-bg-1: color-mix(in oklab, var(--photo-color, #075082), black 10%);
    --photo-bg-2: color-mix(in oklab, var(--photo-color, #075082), black 20%);
    --photo-bg-3: color-mix(in oklab, var(--photo-color, #075082), black 30%);
    --photo-bg-4: color-mix(in oklab, var(--photo-color, #075082), black 45%);
    --photo-bg-5: color-mix(in oklab, var(--photo-color, #075082), black 70%);
    --photo-text:        color-mix(in oklab, var(--photo-color, #075082), white 80%);
    --photo-text-accent: color-mix(in oklab, var(--photo-color, #075082), white 50%);
}

/* ── Basis blok ───────────────────────────────────────── */
.nib-foto-block {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: var(--rz-panel-background-color);
}

/* ── Twee-koloms wrapper (camera + locatie) ───────────── */
.nib-foto-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.nib-foto-two-col .nib-foto-block {
    margin: 0;
}

@media (max-width: 900px) {
    .nib-foto-two-col { grid-template-columns: 1fr; }
}

/* ── Header balk (identiek aan nib-news-header) ───────── */
.nib-foto-block-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem;
    background: var(--photo-bg-4);
    border-bottom: 1px solid var(--photo-bg-3);
}

.nib-foto-block-header-left { flex: 1; min-width: 0; }

.nib-foto-block-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--photo-text);
    margin: 0 0 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nib-foto-block-title i { font-size: 0.95rem; }

.nib-foto-block-sub {
    font-size: 0.8rem;
    color: var(--photo-text);
    margin: 0;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40ch;
}

/* ── Status badges ────────────────────────────────────── */
.nib-foto-status-badge {
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nib-foto-status-concept   { background: rgba(255,193,7,0.25); color: #92640a; }
.nib-foto-status-ingediend { background: rgba(33,150,243,0.2); color: #0d5c9e; }
.nib-foto-status-afgewezen { background: rgba(244,67,54,0.2);  color: #b71c1c; }

.rz-material-dark .nib-foto-status-concept   { background: rgba(255,193,7,0.2);  color: #ffd54f; }
.rz-material-dark .nib-foto-status-ingediend { background: rgba(33,150,243,0.2); color: #90caf9; }
.rz-material-dark .nib-foto-status-afgewezen { background: rgba(244,67,54,0.2);  color: #ef9a9a; }

/* ── Hero afbeelding ──────────────────────────────────── */
.nib-foto-hero {
    width: 100%;
    overflow: hidden;
    background: #000;
}

.nib-foto-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Info-sectie (onder foto) ─────────────────────────── */
.nib-foto-info {
    padding: 2rem 2.5rem;
    background: var(--photo-bg-5);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Auteur rij */
.nib-foto-author {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.nib-foto-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--photo-bg-3);
    cursor: pointer;
    transition: transform 0.15s;
    flex-shrink: 0;
}

.nib-foto-author-avatar:hover { transform: scale(1.06); }

.nib-foto-author-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--photo-bg-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--photo-text);
    font-size: 1.2rem;
    border: 2px solid var(--photo-bg-2);
    cursor: pointer;
    flex-shrink: 0;
}

.nib-foto-author-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--photo-text);
    opacity: 0.65;
}

.nib-foto-author-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--photo-text);
}

/* Meta chips rij */
.nib-foto-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nib-foto-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--photo-bg-3);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--photo-text);
}

.nib-foto-meta-chip i { font-size: 0.75rem; opacity: 0.8; }

.nib-foto-date-picker { margin-left: 0.25rem; }

/* Titel */
.nib-foto-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--photo-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Inline edit knop */
.nib-foto-edit-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--photo-text);
    background: transparent;
    color: var(--photo-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: right;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.nib-foto-edit-btn:hover { opacity: 1; background: var(--photo-bg-3); }

/* Beschrijving */
.nib-foto-description-block {
    border-top: 1px solid var(--photo-bg-3);
    padding-top: 1.25rem;
}

.nib-foto-description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--photo-text);
    opacity: 0.65;
}

.nib-foto-description-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--photo-text);
}

.nib-foto-description-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--photo-text);
    opacity: 0.5;
    font-size: 0.9rem;
    font-style: italic;
}

/* ── Block body ───────────────────────────────────────── */
.nib-foto-block-body {
    background: var(--photo-bg-5);
}

.nib-foto-block-body-flush {
    padding: 0;
}

/* ── Dier-blok wrapper ────────────────────────────────── */
.nib-foto-animal-wrapper {
    position: relative;
}

.nib-foto-animal-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

/* ── Dier selecteren prompt ───────────────────────────── */
.nib-foto-animal-select {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--photo-bg-4);
    border-radius: 8px;
    flex-wrap: wrap;
}

.nib-foto-animal-select i {
    font-size: 1.5rem;
    color: var(--photo-text);
    flex-shrink: 0;
}

.nib-foto-animal-select strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--photo-text);
}

.nib-foto-animal-select p {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: var(--photo-text);
    opacity: 0.7;
}

/* ── Skeleton blok ────────────────────────────────────── */

/* Gedeelde skeleton-header (matches nib-foto-block-header) */
.nib-foto-sk-header {
    padding: 1.25rem 1.5rem;
    background: var(--rz-base-300, #d4dce6);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-bottom: 1px solid var(--rz-base-200, #e8edf2);
}

/* Blok 1: hero-afbeelding (16:9 → CLS-vrij) */
.nib-foto-sk-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* Blok 1: info-sectie (matches .nib-foto-info) */
.nib-foto-sk-info {
    padding: 2rem 2.5rem;
    background: var(--rz-base-100, #f4f7fa);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Author-rij (matches .nib-foto-author) */
.nib-foto-sk-author {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.nib-foto-sk-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50% !important;
    flex-shrink: 0;
}

/* Meta-chips rij (matches .nib-foto-meta-row) */
.nib-foto-sk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nib-foto-sk-chip {
    height: 1.65rem;
    width: 7rem;
    border-radius: 20px !important;
}

/* Beschrijving-sectie */
.nib-foto-sk-desc {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rz-base-300, #d4dce6);
}

/* Blok 2+3: skeleton-card wrapper */
.nib-foto-skeleton-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Blok 2+3: spec-items grid (matches photo-exif-specs-grid / photo-location-specs-grid) */
.nib-foto-sk-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--rz-base-100, #f4f7fa);
}

.nib-foto-sk-spec {
    height: 3.6rem;
    border-radius: 8px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .nib-foto-sk-info  { padding: 1.25rem 1rem; }
    .nib-foto-sk-hero  { aspect-ratio: 4 / 3; }
    .nib-foto-sk-card-body { grid-template-columns: 1fr; }
}

/* ── Collecties op foto-detail pagina ─────────────────────
   Kleur #075082 (NIB-blauw) — zelfde als collectiepagina's.
   Variabelen worden direct op de component-classes gezet
   zodat dark-mode-overrides altijd werken.
   ─────────────────────────────────────────────────────── */

/* ── Variabelen: licht thema ──────────────────────────── */
.nib-foto-coll-block,
.nib-foto-coll-grid,
.nib-foto-coll-card {
    --cc-base:   #075082;
    --cc-dark:   color-mix(in oklab, #075082, black 18%);
    --cc-mid:    color-mix(in oklab, #075082, white 62%);
    --cc-light:  color-mix(in oklab, #075082, white 86%);
    --cc-border: color-mix(in oklab, #075082, white 52%);
    --cc-text:   color-mix(in oklab, #075082, black 18%);
    --cc-text-inv: #fff;
}

/* ── Variabelen: donker thema ─────────────────────────── */
.rz-material-dark .nib-foto-coll-block,
.rz-material-dark .nib-foto-coll-grid,
.rz-material-dark .nib-foto-coll-card {
    --cc-dark:   color-mix(in oklab, #075082, black 28%);
    --cc-mid:    color-mix(in oklab, #075082, black 52%);
    --cc-light:  color-mix(in oklab, #075082, black 68%);
    --cc-border: color-mix(in oklab, #075082, black 42%);
    --cc-text:   color-mix(in oklab, #075082, white 82%);
    --cc-text-inv: #fff;
}

/* Blok-wrapper: geeft nib-foto-block-header de collectiekleur */
.nib-foto-coll-block {
    --photo-color:       #075082;
    --photo-bg-4:        var(--cc-mid);
    --photo-bg-3:        var(--cc-border);
    --photo-text:        var(--cc-text);
    --photo-text-accent: color-mix(in oklab, #075082, white 32%);
}

/* "Alle collecties" link in blok-header */
.nib-foto-coll-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    background: var(--cc-dark);
    color: var(--cc-text-inv);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.nib-foto-coll-all-link:hover { opacity: 0.82; color: var(--cc-text-inv); text-decoration: none; }
.nib-foto-coll-all-link i { font-size: 0.72rem; transition: transform 0.15s; }
.nib-foto-coll-all-link:hover i { transform: translateX(3px); }

/* Grid: auto-fill, minimaal 260px per kaart */
.nib-foto-coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--cc-light);
}

/* ── Card ─────────────────────────────────────────────── */
.nib-foto-coll-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: var(--rz-panel-background-color);
    transition: box-shadow 0.18s, transform 0.18s;
}

.nib-foto-coll-card:hover {
}

/* ── Card header: titel + "Bekijk"-knop ───────────────── */
.nib-foto-coll-card-header {
    display: flex;
    align-items: center;        /* verticaal centreren */
    gap: 0.75rem;
    flex-wrap: nowrap;          /* GEEN wrap → gelijke kaardhoogte */
    padding: 0.9rem 1.1rem;
    background: var(--cc-mid);
    border-bottom: 1px solid var(--cc-border);
    min-height: 4rem;           /* vaste minimumhoogte → gelijke cards */
}

/* Linker deel: icon + titel + sub */
.nib-foto-coll-card-header .nib-foto-block-header-left {
    flex: 1;
    min-width: 0;               /* nodig voor text-overflow op kind */
    overflow: hidden;
}

/* Titel: truncate bij overloop */
.nib-foto-coll-card-header .nib-foto-block-title {
    font-size: 0.95rem;
    color: var(--cc-text);
    margin: 0 0 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow werkt niet direct op flex containers met text-nodes;
       de tekst zit in .nib-foto-coll-title-text */
}

.nib-foto-coll-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Beschrijving: maximaal 1 regel */
.nib-foto-coll-card-header .nib-foto-block-sub {
    color: var(--cc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Bekijk" knop rechts */
.nib-foto-coll-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--cc-dark);
    color: var(--cc-text-inv);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.nib-foto-coll-card-link:hover { opacity: 0.82; color: var(--cc-text-inv); text-decoration: none; }
.nib-foto-coll-card-link i { font-size: 0.68rem; transition: transform 0.15s; }
.nib-foto-coll-card-link:hover i { transform: translateX(3px); }

/* ── Donut "hero" ─────────────────────────────────────── */
.nib-foto-coll-donut-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 2.25rem 1.5rem 2rem;
    background: var(--cc-dark);
}

.nib-foto-coll-donut-wrap {
    position: relative;
    width: 164px;
    height: 164px;
}

.nib-foto-coll-donut-svg {
    width: 164px;
    height: 164px;
    transform: rotate(-90deg);
}

.nib-foto-coll-donut-bg {
    fill: none;
    stroke: rgba(255,255,255,0.18);
    stroke-width: 2.5;
}

.nib-foto-coll-donut-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.9s ease;
}

.nib-foto-coll-donut-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    pointer-events: none;
}

.nib-foto-coll-donut-pct {
    font-size: 2.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.nib-foto-coll-donut-sub {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.62);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nib-foto-coll-donut-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.nib-foto-coll-legend-filled {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.nib-foto-coll-legend-total {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.62);
}

/* ── Info sectie (meta-chips) ───────────────────────────── */
.nib-foto-coll-info {
    padding: 1rem 1.1rem;
    background: var(--cc-light);
}

.nib-foto-coll-chip {
    --photo-bg-3: var(--cc-border);
    --photo-text: var(--cc-text);
}

/* Responsive */
@media (max-width: 640px) {
    .nib-foto-coll-grid       { grid-template-columns: 1fr; gap: 0.75rem; }
    .nib-foto-coll-donut-wrap { width: 140px; height: 140px; }
    .nib-foto-coll-donut-svg  { width: 140px; height: 140px; }
    .nib-foto-coll-donut-pct  { font-size: 2.2rem; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .nib-foto-info { padding: 1.25rem 1rem; }
    .nib-foto-block-header { padding: 1rem; }
    .nib-foto-block-body { padding: 1rem; }
    .nib-foto-hero-img { max-height: 60vw; }
}