/* ==========================================================================
   pb-aanmelden.css
   Patty Bakker — pagina "Aanmelden voor een event" (pupflow v12 → Bricks)
   --------------------------------------------------------------------------
   Laad NA pb-common.css. Alles is gescoped onder .pb-main zodat het de Bricks
   default (display:flex op elk .brxe-*) verslaat via source-order.

   Bevat de pagina-eigen componenten (form-dark, event-line, prototype-list,
   simple-card) PLUS een klein blok "pb-common divergentie-fixes": een paar
   gedeelde primitives (eyebrow, section-head, .label) die pb-common ANDERS
   rendert dan het prototype. Die worden hier bewust overschreven zodat de
   pagina er 1:1 uitziet als het prototype (geverifieerd met een Bricks-DOM
   computed-style diff op 1280 én 390 — 0 echte verschillen).

   DESKTOP-FIRST: desktop = default (geen media query); mobiel/tablet-afwijkingen
   staan in @media (max-width:767px) onderaan.
   ========================================================================== */

/* ==========================================================================
   pb-common DIVERGENTIE-FIXES  (prototype = waarheid)
   ========================================================================== */

/* .eyebrow — prototype = CRÈME PILL (components.css main .eyebrow), pb-common
   geeft platte 12px/500 tekst. Herstel de pill (geldt voor beide eyebrows:
   "Stap 1" op het bruine blok én "Liever puppy-interesse?"). */
.pb-main .eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  padding-top:0;
  padding-right:12px;
  padding-bottom:0;
  padding-left:12px;
  font-size:10px;
  font-weight:900;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:14px;
}

/* .section-head — prototype centreert op 1180px en gebruikt 28px bodemmarge;
   pb-common geeft geen max-width en 14px. */
.pb-main .section-head{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:28px;
}

/* .label — desktop is een pill (responsive.css .app main .label pill);
   pb-common houdt 2px vast. Mobiel blijft 2px (zie media query onderaan). */
.pb-main .label{border-radius:var(--r-pill)}

/* ==========================================================================
   Donkere formuliersectie (bruin blok rond het Formidable-form)
   ========================================================================== */
.pb-main .form-dark{
  background:#7f5a44;
  color:#fff;
  padding-top:18px;
  padding-right:18px;
  padding-bottom:18px;
  padding-left:18px;
}
/* titel binnen het bruine blok wit; de eyebrow blijft de crème pill hierboven */
.pb-main .form-dark .h2{color:#fff}

/* Notitie onder het formulier — lichte pill op het bruine blok
   (reproduceert prototype: main .form-note{background:#f7f0e9;color:muted}) */
.pb-main .form-dark .form-note{
  background:#f7f0e9;
  color:var(--muted);
  border-radius:14px;
  padding-top:14px;
  padding-right:16px;
  padding-bottom:14px;
  padding-left:16px;
  line-height:1.55;
  font-size:13px;
  margin-top:10px;
  margin-right:2px;
  margin-bottom:0;
  margin-left:2px;
}

/* ==========================================================================
   Event-regel (SEP · 14 · Kennismaking voor gastgezinnen)
   NB: .event-line/.event-date staan óók al in de nieuwere new css/pb-common.css
   (r459-464), maar NIET in OUDE CSS/pb-common.css. Hier met identieke waarden,
   zodat de pagina klopt ongeacht welke pb-common geladen wordt.
   ========================================================================== */
.pb-main .event-line{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:11px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  padding-top:9px;
  padding-right:9px;
  padding-bottom:9px;
  padding-left:9px;
}
.pb-main .event-date{
  min-height:58px;
  background:var(--brown);
  color:#fff;
  display:grid;
  place-items:center;
  text-align:center;
  border-radius:var(--r);
  font-weight:850;
  line-height:1;
  padding-top:8px;
  padding-right:4px;
  padding-bottom:8px;
  padding-left:4px;
}
.pb-main .event-date b{display:block;font-size:18px}
.pb-main .event-date span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.pb-main .event-line h3{
  font-family:Manrope,system-ui,sans-serif;
  font-size:16px;
  line-height:1.15;
  letter-spacing:.01em;
  margin-top:3px;
  margin-right:0;
  margin-bottom:4px;
  margin-left:0;
  color:var(--brown);
  font-weight:850;
}
.pb-main .event-line p{font-size:12px;color:var(--muted);line-height:1.35;margin:0}

/* ==========================================================================
   "Op zoek naar een pup?" — twee eenvoudige kaarten
   ========================================================================== */
.pb-main .prototype-list{display:grid;gap:10px}

.pb-main .simple-card{
  position:relative;              /* anker voor de gestretchte .card-link */
  background:#fff8f1;
  border:1px solid var(--line);
  box-shadow:var(--shadow2);
  border-radius:var(--r-lg);      /* desktop: 10px (responsive.css .app main .simple-card) */
  padding-top:14px;
  padding-right:14px;
  padding-bottom:14px;
  padding-left:14px;
}
.pb-main .simple-card h3{font-size:17px;color:var(--brown);font-weight:800;margin:0 0 6px}
.pb-main .simple-card p{font-size:13px;line-height:1.45;color:var(--muted);margin:0 0 10px}
/* leeg <a> dat de hele kaart klikbaar maakt (kaart-<a> met kinderen wordt
   door Bricks gestript → plain div + gestretchte leaf-link, zie memory) */
.pb-main .simple-card .card-link{position:absolute;inset:0;z-index:1}

/* Desktop hover-lift op de kaarten (responsive.css .app main .simple-card:hover) */
@media (hover:hover) and (min-width:768px){
  .pb-main .simple-card{transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease}
  .pb-main .simple-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(77,51,34,.16)}
}

/* ========================= MOBIEL (max 767) ========================= */
@media (max-width:767px){
  /* section-head stapelt op mobiel (prototype = display:block; pb-common houdt flex) */
  .pb-main .section-head{display:block}
  /* label terug naar 2px op mobiel (prototype base) */
  .pb-main .label{border-radius:2px}
  /* kaarten iets minder rond op mobiel (prototype base = var(--r) 4px) */
  .pb-main .simple-card{border-radius:var(--r)}
}