/* Dierendag: info-venster per hond (assets/js/dierendag-info.js). Bouwt voort op .dd-modal in dierendag.css. */

.dd-photo[data-info] { cursor: zoom-in; }

.dd-card-actions { display: flex; gap: 8px; align-items: stretch; margin-top: 4px; }
.dd-card-actions .dd-cta { flex: 1; width: auto !important; margin-top: 0; }
.dd-card-actions .dd-info-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.dd-info-icon { width: 18px; height: 18px; flex: none; }

.dd-info-box { max-width: 720px; }
.dd-info-loading { padding: 40px 0; text-align: center; color: var(--dd-muted); }

.dd-info-head { padding-right: 44px; margin-bottom: 12px; }
.dd-info-head h2 { margin: 0; font-size: 2rem; text-transform: uppercase; line-height: 1.1; }
.dd-info-head p { margin: 2px 0 0; color: var(--dd-muted); font-weight: 700; }

.dd-info-stage {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #2b2118;
    border-radius: 16px;
    overflow: hidden;
    touch-action: pan-y;
}

.dd-info-stage img,
.dd-info-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.dd-info-gallery { position: relative; }
.dd-info-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--dd-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 1px 1px 0 #000;
    z-index: 2;
}
.dd-info-nav[hidden] { display: none; }
.dd-info-nav.is-prev { left: 10px; }
.dd-info-nav.is-next { right: 10px; }
.dd-info-count {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 2px 10px;
    border-radius: 99px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .85rem;
    z-index: 2;
}
.dd-info-count:empty { display: none; }

.dd-info-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 4px; scrollbar-width: thin; }
.dd-info-strip[hidden] { display: none; }
.dd-info-strip button {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #2b2118;
    color: #fff;
    cursor: pointer;
}
.dd-info-strip button.is-active { border-color: var(--dd-coral); }
.dd-info-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dd-info-bio {
    margin: 16px 0 0;
    padding: 12px 16px;
    background: var(--dd-sun-soft);
    border-radius: 14px;
    font-weight: 700;
    white-space: pre-line;
}
.dd-info-desc-wrap h3 { font-size: 1.15rem; margin: 18px 0 6px; }
.dd-info-desc { margin: 0; white-space: pre-line; color: #4b3d30; }

.dd-info-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.dd-info-actions .btn[hidden] { display: none; }

@media (max-width: 575.98px) {
    .dd-info-head h2 { font-size: 1.6rem; }
    .dd-info-actions .btn { width: 100%; }
}