/* =========================================================
   PROFIL PSA — organizacija podataka
   Osnovno pravilo: ništa prazno se ne prikazuje. Sekcija bez
   podataka se ne ispisuje, a rodovnik se skuplja na onoliko
   generacija koliko ih je zaista uneto.
   ========================================================= */

/* ---------- hero bez fotografije ---------- */
.dog-hero--plain {
  min-height: auto;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.dog-hero--plain .dog-hero__in { padding-block: var(--s6) var(--s5); }


/* ---------- lična karta ---------- */
/* Uspravne kolone sa tankim razdelnicima: čita se kao tabela podataka,
   a ne kao niz praznih polja. */
.idcard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream-card);
}
.idcard__item { padding: 1rem 1.25rem; }
.idcard__item + .idcard__item { border-left: 1px solid var(--line); }
.idcard dt {
  font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.idcard dd {
  margin-top: .3rem; font-weight: 500; color: var(--forest);
  font-size: 1rem; line-height: 1.35;
}

/* ---------- titule po grupama ---------- */
.titlegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s3);
}
.titlegroup {
  background: var(--cream-card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.2rem 1.35rem 1.35rem;
}
.titlegroup__h {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--gold); margin-bottom: .8rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.titlegroup__list { display: grid; gap: .6rem; }

/* Tačka je apsolutna, a sadržaj blok — spisak zemalja zna da bude dugačak
   ("Serbia, China, Slovakia, Croatia, Bosnia…") i mora da se prelama
   unutar kartice, a ne da izlazi iz nje. */
.titlegroup__list li {
  position: relative; padding-left: 1rem;
  font-size: var(--fs-sm); line-height: 1.45;
}
.titlegroup__list li::before {
  content: ''; position: absolute; left: 0; top: .5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--forest);
}
.titlegroup__list em {
  display: block; font-style: normal;
  margin-top: .15rem; white-space: normal; overflow-wrap: anywhere;
  font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-soft);
}

/* ---------- slobodan zapis uz titule ----------
 * Sve što se ne uklapa u spisak titula: objašnjenje, zapažanje sa izložbe,
 * dogovor sa sudijom. Piše se slobodno i zna da bude dug — zato širina
 * teksta ide na čitljivih ~70 znakova, a ne preko cele mreže.
 */
.titlenote {
  max-width: 70ch;
  padding: 1.1rem 1.3rem;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
/* Kad stoji sam, naslov odeljka ga već odvaja. Kad ide ispod spiska titula,
   treba mu vazduh da se ne čita kao nastavak poslednje kartice. */
.titlegrid + .titlenote { margin-top: var(--s4); }

/* Pečat uz naslov rodovnika. Prigušen, jer je rodovnik ono što se čita —
   znak je tu da kaže čiji je dokument, a ne da se nadmeće sa imenima. */
.ped-znak {
  display: block; width: clamp(62px, 7vw, 92px);
  opacity: .45; align-self: center; flex: none;
}
.ped-znak img { width: 100%; height: auto; }
@media (max-width: 560px) {
  /* Na uskom ekranu bi se prelomio u sopstveni red i visio sam — bolje bez. */
  .ped-znak { display: none; }
}

/* ---------- rodovnik ---------- */
/*
 * Mreža kao na štampanom rodovniku: roditelj obuhvata tačno visinu svoja
 * dva pretka. Zato su redovi jedinična mera — ćelija prve generacije
 * zauzima 4 reda, druge 2, treće 1 — a raspored postavlja PHP (pedMesto).
 *
 * Linije mreže su razmak koji propušta pozadinu; tako su svuda tačno
 * jedan piksel, bez udvajanja na dodiru dve ćelije.
 */
.ptree {
  display: grid;
  grid-template-rows: repeat(var(--redova, 8), minmax(46px, auto));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ptree--g1 { grid-template-columns: 1fr; }
.ptree--g2 { grid-template-columns: 1fr 1fr; }
.ptree--g3 { grid-template-columns: 1.15fr 1fr 1fr; }

.ptree__cell {
  background: var(--cream-card);
  padding: .7rem .85rem;
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  min-width: 0;
}
/* Pol pretka: zelena za mužjaka, terakota za ženku. Traka je unutrašnja
   senka, pa ne pomera sadržaj i ne kvari linije mreže. */
.ptree__cell--m { box-shadow: inset 3px 0 0 var(--forest); }
.ptree__cell--f { box-shadow: inset 3px 0 0 var(--terracotta); }

.ptree__cell b {
  font-size: .86rem; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere;   /* imena iz rodovnika ume da budu vrlo duga */
}
.ptree__cell small {
  font-size: .64rem; letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--ink-soft);
}
.ptree__cell a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--line); }
.ptree__cell a:hover { text-decoration-color: var(--forest); }

/* Nepoznat predak: tiho šrafirano polje, bez teksta. */
.ptree__cell--empty {
  background:
    repeating-linear-gradient(45deg,
      var(--cream-deep) 0 6px, var(--cream-card) 6px 12px);
}

/*
 * Mreža uvek staje u širinu ekrana — bez vodoravnog klizanja. Duga imena
 * se prelamaju i ćelija poraste u visinu; raspored ostane čitljiv jer
 * roditelj i dalje obuhvata tačno svoja dva pretka.
 */


/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .idcard { grid-template-columns: repeat(2, 1fr); }
  .idcard__item + .idcard__item { border-left: 0; }
  .idcard__item:nth-child(even) { border-left: 1px solid var(--line); }
  .idcard__item:nth-child(n+3) { border-top: 1px solid var(--line); }

  /* Na telefonu tri kolone su uske — tekst se smanjuje da stane bez klizanja. */
  .ptree__cell { padding: .45rem .5rem; }
  .ptree__cell b { font-size: .74rem; line-height: 1.3; }
  .ptree__cell small { font-size: .58rem; }
}

@media (max-width: 520px) {
  .idcard { grid-template-columns: 1fr; }
  .idcard__item:nth-child(even) { border-left: 0; }
  .idcard__item + .idcard__item { border-top: 1px solid var(--line); }
}

/* ---------- spisak pregleda (stranica "O rasi") ---------- */
.checklist { display: grid; gap: .55rem; list-style: none; padding: 0; }
.checklist li {
  position: relative; padding-left: 1.9rem;
  font-size: var(--fs-sm); line-height: 1.5;
}
/* Kvačica umesto tačke — spisak govori šta je urađeno, ne šta postoji. */
.checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(3, 97, 71, .1); color: var(--forest);
  font-size: .7rem; font-weight: 700;
}
.checklist b { font-weight: 600; }
.checklist span { display: block; color: var(--ink-soft); font-size: var(--fs-xs); margin-top: .1rem; }

/* ---------- priplod (samo mužjaci, samo kad je popunjeno) ---------- */
.studcard {
  display: grid; gap: .6rem; justify-items: start;
  padding: 1.1rem 1.3rem;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
}
.studcard__label {
  font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--gold);
}
.studcard__text { font-size: var(--fs-sm); line-height: 1.6; }

/* ---------- beleška uz zdravstvene nalaze ---------- */
.health-note {
  margin-top: var(--s3); padding: .85rem 1.1rem;
  border-left: 3px solid var(--line);
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft);
}

/* ---------- predak na drugom sajtu ---------- */
/*
 * Razlikuje se od naših pasa: oni vode na profil ovde i pišu se zelenim,
 * a ovo vodi napolje. Strelica govori da se otvara nova kartica, pa nema
 * iznenađenja kad se pritisne.
 */
.ptree__cell a.ptree__out {
  color: var(--ink); text-decoration-color: var(--line);
}
.ptree__cell a.ptree__out::after {
  content: '↗'; font-size: .72em; margin-left: .2em;
  color: var(--ink-soft); vertical-align: super;
}
.ptree__cell a.ptree__out:hover { color: var(--forest); text-decoration-color: var(--forest); }