/* ==========================================================================
   Patty Bakker — de nestkaart (twee ouderfoto's, hartje, tekstblok)
   ==========================================================================
   Hoort bij de .nest-grid die de PHP-code-elementen renderen op /verwachte-
   nestjes/ en op de homepage.

   Stond eerst alleen in pb-verwachte-nesjes.css. De homepage draait op
   pb-index.css, en daar staat nog de oudere versie van dezelfde selectors:
   twee kolommen i.p.v. auto-fit, hoekradius 4px i.p.v. 18px, foto's van
   257x200 i.p.v. vierkant. Dezelfde kaart zag er op de twee pagina's dus
   anders uit.

   Alles hier is op .nest-grid gescoped, zodat het niet lekt naar de andere
   .treatment-card-varianten op de homepage.
   ========================================================================== */

/* ---- 4. De nestkaarten ---------------------------------------------- */

.pb-main .nest-grid{
  display:grid;
  /* auto-FILL, niet auto-fit. Op de homepage staan er twee nestjes en op
     /verwachte-nestjes/ drie. Met auto-fit klapt de lege kolom weg en rekken
     die twee naar 580px, terwijl dezelfde kaart op de nestjespagina 369px is.
     auto-fill laat de kolom staan, dus de kaart houdt overal dezelfde maat. */
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
}

.pb-main .nest-grid .nest-card{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  background:var(--paper, #fffaf5);
  border:1px solid var(--line);
  border-radius:var(--img-radius-lg, 18px);
  box-shadow:var(--shadow2);
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  /* stretch, want .treatment-card zet align-items:center. In een flexkolom
     krimpen de kinderen dan tot hun eigen inhoud in plaats van de kaart te
     vullen - en een blok met alleen nog niet geladen foto's is 0 breed. */
  align-items:stretch;
}

/* De twee ouderfoto's naast elkaar met het hartje op de naad. */

.pb-main .nest-grid .nest-card .nest-parents{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  /* Ruimte rondom en tussen de twee foto's, zodat de kaartrand overal
     zichtbaar is en er een smalle strook tussen de twee honden staat. De
     strook is bewust 10px: breed genoeg om als lijn te lezen, smal genoeg dat
     het hartje (38px) er nog netjes over heen valt en beide foto's raakt. */
  gap:10px;
  padding:10px;
  position:relative;
  border-bottom:0;
  width:100%;
}

/* Waarom minmax(0,1fr) en niet 1fr:

   Met `1fr` is de minimale kolombreedte de min-content van de foto. De foto's
   staan op loading="lazy", dus zolang ze niet geladen zijn is die min-content
   nul en klapt het hele blok dicht. En een blok van 0 hoog komt nooit in beeld,
   dus laadt de browser de foto ook nooit - de kaart bleef permanent ingeklapt.
   Op /interesse-in-een-pup/ overkwam dat de kaart "Djazz x Roger": 187px hoog
   naast twee buren van 434px.

   Met minmax(0,1fr) is de kolom altijd de helft van de kaart, ongeacht of de
   foto er al is. Samen met width:100% en aspect-ratio:1/1 staat de hoogte
   daarmee vast vóórdat er iets geladen is. */

.pb-main .nest-grid .nest-card .nest-parents img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center top;   /* koppen in beeld houden */
  border-radius:10px;
}

.pb-main .nest-grid .nest-card .nest-parents::after{
  content:"\2665";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:var(--paper, #fffaf5);
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:50%;
  box-shadow:var(--shadow2);
  font-size:17px;
  z-index:2;
}

.pb-main .nest-grid .nest-card .treatment-body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:18px 20px 20px;
}

.pb-main .nest-grid .nest-card .treatment-body h3{
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--brown);
  margin:10px 0 8px;
}

.pb-main .nest-grid .nest-card .treatment-body p{
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
  /* De beschrijvingen lopen sterk uiteen in lengte; vier regels houdt de
     kaarten in de pas. De volledige tekst staat op de detailpagina. */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

/* De twee linkjes onderaan. Deze regels stonden alleen in pb-werkwijze.css,
   dus op /verwachte-nestjes/ en de homepage - waar dat bestand niet laadt -
   was er geen ruimte tussen de twee: "Bekijk moederBekijk vader". Ze horen bij
   de kaart, dus staan ze nu hier. Nagekeken: .parent-link komt op de hele site
   alleen binnen een nestkaart voor. */
.pb-main .nest-grid .nest-card .parent-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:auto;
  padding-top:14px;
}

.pb-main .nest-grid .nest-card .parent-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brown);
  border-bottom:2px solid var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
}

@media (hover:hover){
  .pb-main .nest-grid .nest-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(77, 51, 34, .16);
    border-color:var(--accent);
  }
}

@media (max-width:767px){
  .pb-main .nest-grid{grid-template-columns:1fr;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .nest-grid .nest-card{transition:none}
}

/* --------------------------------------------------------------------------
   Ouder zonder foto
   --------------------------------------------------------------------------
   Een nestje kan een ouder hebben waar nog geen foto van is - bij een externe
   reu die alleen in stambomen voorkomt is dat eerder regel dan uitzondering.
   In plaats van een gebroken afbeelding of een ingeklapte kolom staat er dan
   een rustig vlak in dezelfde maat, zodat de kaart zijn vorm houdt.
   -------------------------------------------------------------------------- */

.pb-main .nest-grid .nest-card .nest-parents .nest-parent-leeg{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background:#ece0d6;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.55) 0 22%, transparent 23%);
}

/* Een ouder zonder eigen pagina krijgt zijn naam zonder link. Zelfde plek als
   de linkjes, maar zonder onderstreping en zonder aanwijsaanwijzer. */
.pb-main .nest-grid .nest-card .parent-link.is-uit{
  border-bottom:0;
  color:var(--muted);
  cursor:default;
}

/* ==========================================================================
   DE MUISAANWIJZER, EN WAAROM HIJ OMGEKEERD STOND
   ==========================================================================
   Op de nestkaart wees de aanwijzer precies verkeerd om: een handje boven de
   hele kaart, waar klikken niets doet, en een gewone pijl boven "Bekijk moeder"
   en "Bekijk vader", die wel echte links zijn. Dat is niet alleen slordig maar
   misleidend: je klikt op de kaart, er gebeurt niets, en de plek waar je wel
   moet zijn ziet er onklikbaar uit.

   Waar het vandaan komt: de nestkaart leent de klasse `treatment-card` van de
   behandelingen, en daar IS de hele kaart aanklikbaar. In vijf
   paginastylesheets staat `.pb-main .treatment-card{...cursor:pointer}`, en dat
   gold dus ook hier. De regel die de linkjes op `default` zette stond daar als
   tegenwicht tegenover — een oplossing voor het verkeerde probleem.

   Deze regels zetten het om. Ze staan expres met drie of meer klassen in de
   selector, zodat ze het winnen van `.pb-main .treatment-card` (twee klassen)
   ongeacht in welke volgorde de stylesheets binnenkomen. Aan de regels in die
   paginabestanden zelf komen we niet: daar hangt de aanklikbare
   behandelingenkaart ook aan. */

.pb-main .nest-grid .nest-card{
  cursor:default;
}

.pb-main .nest-grid .nest-card a.parent-link{
  cursor:pointer;
}

/* De naam van een externe ouder is geen link, dus die houdt de gewone pijl.
   Vijf klassen, want hij moet ook van de regel hierboven winnen. */
.pb-main .nest-grid .nest-card .parent-link.is-uit{
  cursor:default;
}