/* ==========================================================================
   pb-doodle-reuen.css
   Doodle reuen (.p-doodle-reuen): dog-grid / dog-grid-card.
   Link samen met pb-common.css (pb-common.css eerst).
   ========================================================================== */

.pb-main .dog-tag{display:inline-flex;align-items:center;height:24px;padding-top:0;padding-right:8px;padding-bottom:0;padding-left:8px;border-radius:var(--r);background:var(--accent);color:#fff;font-size:9px;font-weight:900;letter-spacing:.05em;box-shadow:0 5px 12px rgba(38,27,20,.18);text-transform:uppercase;line-height:1;border:0;white-space:nowrap}
.pb-main .dog-tag.dark{background:rgba(108,77,56,.92);color:#fff}
.pb-main .dog-tag{display:inline-flex;align-items:center;height:22px;padding-top:0;padding-right:7px;padding-bottom:0;padding-left:7px;border-radius:var(--r);background:var(--accent);color:#fff;border:0;font-size:9px;line-height:22px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 5px 12px rgba(38,27,20,.18)}
.pb-main .dog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;overflow-x:visible;overflow-y:visible}
.pb-main .dog-grid-card{height:210px;border-radius:var(--r);overflow-x:hidden;overflow-y:hidden;position:relative;background:#ddd;box-shadow:0 10px 22px rgba(77,51,34,.12);display:block}
.pb-main .dog-grid-card img{width:100%;height:100%;object-fit:cover}
.pb-main .dog-grid-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.62));z-index:1}
.pb-main .dog-grid-card .card-link{position:absolute;inset:0;z-index:4;font-size:0;line-height:0}
.pb-main .dog-grid-card .dog-card-copy{position:absolute;left:10px;right:10px;bottom:11px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pb-main .dog-grid-card .dog-title{color:#fff;font-family:Fraunces,serif;font-weight:700;line-height:.98;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.32);margin:0;font-size:20px}
@media (min-width:768px) and (max-width:1024px){
  .pb-main .dog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .pb-main .dog-grid{grid-template-columns:1fr 1fr}
}
.pb-main .dog-grid-card .dog-tag{max-width:100%;height:auto;min-height:22px;line-height:1.2;white-space:normal;padding-top:3px;padding-bottom:3px}

/* ==========================================================================
   Vierkante hondenfoto's
   --------------------------------------------------------------------------
   CORRECTIE OP MIJN VORIGE VERSIE. Ik zette aspect-ratio:1/1 op de FOTO. Die
   werd daarmee ook echt vierkant — gemeten 278x278 — maar de kaart eromheen
   heeft `height:210px` met `overflow:hidden`, dus er werd 68px onderaf
   gesneden en het resultaat zag er nog steeds niet vierkant uit.

   De verhouding hoort dus op de KAART. De foto vult die vervolgens helemaal.
   `object-position:top` houdt de kop in beeld; bij een hond kijk je daarnaar.
   ========================================================================== */
.pb-main .dog-grid-card{
  height:auto;
  aspect-ratio:1 / 1;
}
.pb-main .dog-grid-card img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center top;
}

/* ==========================================================================
   Het raslabel: kleiner, en onder de naam
   ==========================================================================
   WAT ER EERST MIS GING
   Ik verving de accentkleur door een doorzichtige laag en liet de pil krimpen
   tot de tekst. Allebei terug: de kleur was beter zoals hij was, en dat krimpen
   haalde de uitlijning op desktop onderuit.

   DE MAAT
   "Mini Australian Labradoodle" is 27 tekens. Op een kaart van ongeveer 180px
   blijft er na de marges zo'n 144px over. Bij 9px met 0,05em letterspatiëring
   heeft die tekst 163px nodig, dus viel hij over twee regels en werd het blok
   hoger dan de naam eronder. Bij 7,5px met 0,03em is het 132px en past het.

   DE VOLGORDE
   De naam staat nu boven en het ras eronder. De naam is waar het om gaat en
   waar je op klikt; het ras is de bijzin. Dat scheelt ook als het label toch
   twee regels wordt: dan groeit het naar beneden, weg van de naam, in plaats
   van de naam omlaag te duwen.

   De volgorde staat met `order` en niet met `column-reverse`: dan blijft de
   opbouw in de HTML zoals hij is, en blijft de voorleesvolgorde logisch.

   EN ALS HET TOCH AFBREEKT
   Dan mag hij niet van rand tot rand lopen. Een bovengrens van 86% laat hem
   eerder afbreken, zodat er rechts lucht overblijft en het een label blijft in
   plaats van een balk.
   ========================================================================== */

.pb-main .dog-grid-card .dog-card-copy .dog-title{ order: 1 }
.pb-main .dog-grid-card .dog-card-copy .dog-tag{ order: 2 }

.pb-main .dog-tag{
  height: auto;
  min-height: 0;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(38, 27, 20, .14);
}

.pb-main .dog-grid-card .dog-tag{
  min-height: 0;
  padding: 3px 7px;
  line-height: 1.2;

  /* ZO BREED ALS DE TEKST, DUS NIET AFBREKEN.

     Een afgebroken label is per definitie zo breed als de ruimte die het
     krijgt, niet als de tekst: de browser vult de regel en breekt pas daarna
     af. Elke bovengrens die ik erop zette maakte hem dus alleen smaller, niet
     passend. De enige manier om hem precies zo breed als de tekst te krijgen is
     op één regel houden.

     Regel 23 hierboven zette juist `white-space: normal` om het afbreken
     mogelijk te maken; die draaien we hier terug.

     Past het bij een heel lange rasnaam toch niet, dan komt er een … achter in
     plaats van dat hij over de rand loopt. Nagerekend haalt de langste naam
     (Medium Australian Labradoodle) dat op mobiel met ruimte over. */
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Op een telefoon zijn de kaarten het smalst en telt elke pixel. */
@media (max-width: 767px){
  .pb-main .dog-tag{
    padding: 2px 6px;
    font-size: 7px;
    letter-spacing: .03em;
  }
  .pb-main .dog-grid-card .dog-tag{
    padding: 2px 6px;
  }
}