/* ==========================================================================
   pb-interesse-pup.css
   Pagina "Interesse in een pup" — de menu-ingang voor mensen die een pup zoeken.

   Hoort bij bricks/interesse-in-een-pup.json.

   LET OP — dit is géén losstaand paginabestand meer. De pagina laadt eerst
   pb-werkwijze.css en dit bestand komt daar als dunne laag bovenop. Zie
   functions.php: de slug staat in de $page_map-regel van pb-werkwijze.css, en
   vlak na het inladen van $page staat een aparte $enq() met 'pb-werkwijze' als
   afhankelijkheid, zodat dit bestand er gegarandeerd ná komt.

   Waarom hergebruiken en niet nabouwen: de vorige versie had een eigen set
   componenten die er ongeveer zo uitzag als /werkwijze/. "Ongeveer" is precies
   het probleem — bij elke wijziging aan de een groeit de ander mee uit de pas.
   Nu zijn de stappenlijst, de verwachtingstabel, het FAQ-blok en het slotpaneel
   letterlijk dezelfde componenten.

   Hier staat alleen wat op deze pagina anders is:
     1. de herofoto (werkwijze zet die inline vanuit Bricks, hier vanuit CSS)
     2. de accentrand op de aanmeldstap
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Herofoto

   Op /werkwijze/ is .pb-hero-photo een leeg blok met een achtergrondfoto die
   in Bricks per element is ingesteld. Ik had dat hier eerst nagedaan vanuit
   CSS, maar dat pakt slecht uit in de builder: je ziet dan een leeg vak, je
   kunt de foto niet aanklikken en niet vervangen met de gewone
   afbeeldingskiezer.

   Daarom zit de foto hier als echt beeldelement ín dat blok. De achtergrond
   en de vaste hoogte van .pb-hero-photo moeten dan wijken, want die hoogte
   hoort nu bij de <img> zelf.

   De selector pakt bewust elke <img> eronder en niet alleen een direct kind:
   mocht Bricks het beeld ooit in een <figure> wikkelen, dan blijft dit werken.
   -------------------------------------------------------------------------- */

.pb-main .pb-hero-photo.pb-pup-hero{
  background:none;
  height:auto;
}

/* Ook video: het hero-vak bevatte een image-element met puppies.mp4 erin, en
   dan laadt er niets. Zet je het om naar een Video-element, dan krijgt de
   <video> hier dezelfde maat en uitsnede als een foto. */
.pb-main .pb-hero-photo.pb-pup-hero video,
.pb-main .pb-hero-photo.pb-pup-hero img{
  display:block;
  width:100%;
  height:clamp(300px, 32vw, 430px);
  object-fit:cover;
  /* De pup zit in de onderste helft van het kader; vanaf 45% uitsnijden houdt
     hem in beeld bij elke hoogte. */
  object-position:center 45%;
  border-radius:16px;
}

/* --------------------------------------------------------------------------
   2) Aanmeldstap

   Stap 2 is waar deze pagina naartoe werkt. Een accentring laat dat zien
   zonder dat er een extra knop bij hoeft. De ring ligt in de box-shadow en
   niet in de border, zodat de kaart niet 2px groter wordt dan zijn buren en
   de rij scheef gaat lopen.
   -------------------------------------------------------------------------- */

.pb-main .pb-step-list article.is-aanmelden{
  background:#fff;
  box-shadow:0 0 0 2px var(--accent), var(--shadow2);
  border-color:transparent;
}

/* --------------------------------------------------------------------------
   3) Geen scheidingslijnen tussen de secties

   pb-werkwijze.css trekt een streepje van 1px tussen elke twee opeenvolgende
   flow-secties:

     .pb-main .pb-flow-section + .pb-flow-section::before

   Op /werkwijze/ blijft dat staan — daar hebben bijna alle secties dezelfde
   achtergrondkleur en is die lijn het enige wat ze uit elkaar houdt. Op deze
   pagina niet: de nestjes-sectie heeft een warme tint en het slotblok een
   bruin paneel, dus het ritme komt al uit de vlakken zelf en zijn de lijntjes
   alleen maar onrust.

   Uitzetten in plaats van weghalen bij de bron, want dat bestand is gedeeld.
   -------------------------------------------------------------------------- */

.pb-main .pb-flow-section + .pb-flow-section::before{display:none}

/* De hero heeft om dezelfde reden geen onderrand meer nodig. */
.pb-main .pb-flow-hero{border-bottom:0}