/* =============================================================================
   gesignaleerd/bekijk.php — één gesignaleerd dier
   -----------------------------------------------------------------------------
   Voorvoegsel: .gb-

   Wie hier komt is meestal zelf een dier kwijt en wil weten: is dit het mijne?
   Daarom staat bovenaan waar en wanneer het dier gezien is, met de foto ernaast
   en de contactknop er direct onder. Het signalement en de stappen volgen daarna.

   Een signalering is geen alarm. Geen rood, geen uitroeptekens: dit is een
   waarneming die misschien ergens bij past.
   ============================================================================= */

/* ── 1. Waar en wanneer ───────────────────────────────────────────────────── */
.gb-kern {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.gb-kern-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: start;
}

.gb-kernzin {
  font-size: 1.14rem;
  line-height: 1.55;
  margin: 0 0 1.35rem;
  max-width: 40ch;
}
.gb-kernzin strong { color: var(--blue-dark); }

.gb-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem 1.4rem;
  margin: 0 0 1.4rem;
}
.gb-feiten > div { border-left: 3px solid var(--band-blauw-rand); padding-left: .85rem; }
.gb-feiten dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .15rem;
}
.gb-feiten dd { margin: 0; font-size: 1rem; font-weight: 600; }
.gb-feiten dd .bi { color: var(--blue); margin-right: .2rem; }

.gb-acties { display: flex; flex-wrap: wrap; gap: .7rem; }
.gb-acties .btn { font-weight: 600; }
.gb-acties-noot { color: var(--text-muted); font-size: .87rem; margin: .7rem 0 0; max-width: 44ch; }

.gb-geen-contact {
  display: flex; gap: .65rem; align-items: flex-start;
  background: var(--band-blauw);
  border: 1px solid var(--band-blauw-rand);
  border-radius: var(--radius-sm);
  padding: .85rem 1.05rem;
  margin: 0;
  font-size: .93rem;
  color: var(--text);
}
.gb-geen-contact .bi { color: var(--blue-dark); font-size: 1.1rem; flex-shrink: 0; }

.gb-foto {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-warm);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}
.gb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-geenfoto {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  aspect-ratio: 4 / 3;
  background: var(--surface-warm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: .92rem;
}
.gb-geenfoto .bi { font-size: 2.6rem; color: var(--border-strong); }

/* ── 2. Signalement ───────────────────────────────────────────────────────── */
.gb-signalement {
  background: var(--surface-warm);
  border-bottom: 1px solid var(--border);
  padding: clamp(1.5rem, 3.5vw, 2.25rem) 0;
}
.gb-signalement h2 {
  font-size: 1.12rem; margin: 0 0 .6rem;
  font-family: var(--font-body); font-weight: 700;
}
.gb-beschrijving { margin: 0 0 1rem; line-height: 1.7; max-width: 68ch; }
.gb-bron {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .45rem 1rem;
  margin: 0;
  font-size: .88rem;
  color: var(--text-muted);
}
.gb-bron .bi { color: var(--blue); }
.gb-bron a { color: var(--blue-dark); font-weight: 600; text-decoration: none; }
.gb-bron a:hover { text-decoration: underline; }

/* ── 3. Wat kun je doen ───────────────────────────────────────────────────── */
.gb-doen {
  background: var(--band-blauw);
  border-bottom: 1px solid var(--band-blauw-rand);
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}
.gb-doen h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin: 0 0 .5rem; color: var(--blue-darker); }
.gb-doen-intro { color: var(--text-muted); margin: 0 0 1.75rem; max-width: 58ch; }
.gb-stappen {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem;
}
.gb-stap-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-weight: 700; font-size: .95rem;
  margin-bottom: .7rem;
}
.gb-stappen h3 { font-size: 1rem; margin: 0 0 .3rem; font-family: var(--font-body); font-weight: 700; }
.gb-stappen p { color: var(--text-muted); font-size: .92rem; margin: 0; line-height: 1.6; }
.gb-stappen p a { color: var(--blue-dark); font-weight: 600; }

.gb-doen-acties { display: flex; flex-wrap: wrap; gap: .7rem; }
.gb-doen-acties .btn { background: var(--surface); font-weight: 600; }

@media (max-width: 900px) {
  .gb-kern-grid { grid-template-columns: 1fr; }
  .gb-kern-foto { order: -1; }
}
@media (max-width: 575px) {
  .gb-acties .btn, .gb-doen-acties .btn { width: 100%; }
}

/* Grid-kind: zonder min-width 0 duwt een lange zin het raster breder dan de kolom. */
.gb-kern-tekst { min-width: 0; }