/* ==========================================================================
   Patty Bakker — detailpagina hond/pup: de opmaak die in de PHP zat
   ==========================================================================
   Deze regels stonden als <style>-blokken middenin het Bricks Code-element,
   verspreid over vijf secties. Bij het omzetten naar inc/pb-dier-detail.php
   zijn ze hierheen verhuisd.

   Waarom een eigen bestand en niet in pb-hond-detail.css? Omdat een pup met
   de meta `special` pb-specials.css laadt in plaats van pb-hond-detail.css
   (zie functions.php). Die pagina's leunden volledig op de inline stijlen.
   Dit bestand laadt op elke hond- én puppagina, ongeacht welk paginabestand
   erbij komt.

   De selectors zijn bewust ongewijzigd overgenomen (`#fotos …`, `#pb-dna …`),
   zodat het gewicht hetzelfde blijft als toen ze inline stonden.
   ========================================================================== */

/* ---- 3. Stamboom -------------------------------------------------------- */

#pb-stamboom{display:block;justify-content:normal;padding:0}
#pb-stamboom .family-tree{transform-origin:top left}
#pb-stamboom a.family-node{text-decoration:none;cursor:pointer}
#pb-stamboom a.family-node:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(77,51,34,.16)}

/* ---- 4. Foto's ---------------------------------------------------------- */

#fotos .photo-slider{position:relative;overflow:hidden}
#fotos .photo-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}

/* Vaste kaartmaat. Was height:300px met width:auto en object-fit:contain:
   elke foto kreeg dan zijn eigen breedte (200px staand, 450px liggend), de
   strook zag er rafelig uit en de stap tussen twee foto's was nergens gelijk.
   Bovendien rekent de slider met offsetLeft, en dat klopt pas als de foto's
   geladen zijn — vandaar dat hij niet altijd goed stond. */
#fotos .photo-slide{flex:0 0 260px;width:260px}
#fotos .photo-slide img{
  height:300px;
  width:100%;
  max-width:none;
  object-fit:cover;
  object-position:center top;
  border-radius:var(--img-radius, 12px);
  display:block;
  cursor:zoom-in;
}

#fotos .photo-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(108,77,56,.9);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:3;transition:background .2s}
#fotos .photo-arrow:hover{background:#6c4d38}
#fotos .photo-arrow.prev{left:10px}
#fotos .photo-arrow.next{right:10px}
#fotos .photo-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1024px){
  #fotos .photo-slide{flex:0 0 230px;width:230px}
  #fotos .photo-slide img{height:260px}
}
@media (max-width:767px){
  #fotos .photo-track{padding:0 18px}
  #fotos .photo-slide{flex:0 0 200px;width:200px}
  #fotos .photo-slide img{height:240px}
}

/* ---- Lightbox (hangt aan <body>, dus niet onder .pb-main gescoped) ------- */

.pb-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(20,14,10,.92);display:none;align-items:center;justify-content:center;padding:24px}
.pb-lightbox.open{display:flex}
.pb-lightbox>img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.pb-lb-close,.pb-lb-nav{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.pb-lb-close:hover,.pb-lb-nav:hover{background:rgba(255,255,255,.28)}
.pb-lb-close{top:18px;right:18px;width:46px;height:46px}
.pb-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px}
.pb-lb-nav.prev{left:18px}
.pb-lb-nav.next{right:18px}
.pb-lb-close svg,.pb-lb-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:767px){.pb-lb-nav{width:42px;height:42px}}

/* ---- 6. DNA ------------------------------------------------------------- */
/* Accordeon in dezelfde stijl als 'Gezondheid' — compact, standaard dicht.
   De .is-profile-regels stonden alleen in het pup-sjabloon; ze horen bij
   allebei, want het ISAG-profiel is één lange regel die over de volle breedte
   moet en in monospace beter leest. */

#pb-dna .dna-accordion{border-top:1px solid var(--line,#e1d1c4)}
#pb-dna .dna-item{border-bottom:1px solid var(--line,#e1d1c4);background:transparent}
#pb-dna .dna-sum{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 0;cursor:pointer}
#pb-dna .dna-sum::-webkit-details-marker{display:none}
#pb-dna .dna-sum-title{flex:1 1 auto;color:var(--brown,#6c4d38);font-weight:850;font-size:12px;text-transform:uppercase;letter-spacing:.07em}
#pb-dna .dna-sum-hint{flex:0 0 auto;color:var(--muted,#7d6d63);font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
#pb-dna .dna-sum::after{content:"+";flex:0 0 18px;width:18px;text-align:right;color:var(--accent,#c97a55);font-weight:900;font-size:18px;line-height:1}
#pb-dna .dna-item[open] .dna-sum::after{content:"\2212"}
#pb-dna .dna-panel{padding:0 0 14px}
#pb-dna .dna-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 22px}
#pb-dna .dna-cell{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px dashed var(--line,#e1d1c4)}
#pb-dna .dna-cell .k{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#7d6d63)}
#pb-dna .dna-cell .v{font-family:Fraunces,serif;font-size:16px;font-weight:850;line-height:1.2;color:var(--brown,#6c4d38)}
#pb-dna .dna-cell.is-vrij .v,#pb-dna .dna-cell.is-drager .v{display:inline-flex;align-items:center;gap:8px}
#pb-dna .dna-cell.is-vrij .v::before,#pb-dna .dna-cell.is-drager .v::before{content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto}
#pb-dna .dna-cell.is-vrij .v{color:var(--green,#66735b)}
#pb-dna .dna-cell.is-vrij .v::before{background:var(--green,#66735b)}
#pb-dna .dna-cell.is-drager .v{color:var(--accent,#c97a55)}
#pb-dna .dna-cell.is-drager .v::before{background:var(--accent,#c97a55)}
#pb-dna .dna-item.is-profile .dna-grid{grid-template-columns:1fr}
#pb-dna .dna-item.is-profile .dna-cell .v{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1.5;word-break:break-word}
@media (max-width:767px){
  #pb-dna .dna-accordion{margin:0 18px}
  #pb-dna .dna-grid{grid-template-columns:repeat(2,1fr);gap:0 16px}
}

/* ---- 8. Groeicurve ------------------------------------------------------ */

#pb-groeicurve svg{width:100%;height:auto;display:block}

/* ---- 9. Video ----------------------------------------------------------- */

#pb-video .video-thumb video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
#pb-video .video-thumb::after{content:none}
