/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — pagina /kennismaking/

   Alleen wat deze pagina extra nodig heeft rond de agenda. De agenda
   zelf krijgt haar vorm van /afspraak/agenda.css en haar kleuren van
   /afspraak/thema.css. Laadt na style.css en tekstpagina.css.
   ═══════════════════════════════════════════════════════════ */

.km-blok{ padding-top:clamp(1rem,2vw,2rem); }

/* Breder dan een leeskolom, want de kalender en de uren staan naast
   elkaar. Smaller dan de hele wrap, anders wordt het een spreadsheet. */
.km-agenda{ max-width:920px; }

/* Het h3 van de site is 800 vet met strakke regelafstand; in de agenda
   is dat te zwaar voor "Kies een dag". */
.km-agenda .ag__stapkop,
.km-agenda .ag__klaarkop{ line-height:1.25; }

/* De ring van de eigen muisaanwijzer (js/main.js) groeit vanzelf boven
   knoppen en velden, dus ook boven die van de agenda. Niets extra nodig. */

/* ── De twee andere wegen ──────────────────────────────── */
.km-anders{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
  max-width:920px;
  margin-top:clamp(2rem,4vw,3rem);
}
/* Drie kaarten sinds 13 september 2026 (DM, bellen, de gratis review).
   auto-fit zet ze naast elkaar zodra er plaats is en laat er anders
   eentje netjes onder vallen, zonder dat een derde kaart alleen op een
   rij komt te staan. */
@media (min-width:700px){ .km-anders{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } }

.km-anders__kaart{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--glass);
  padding:1.4rem 1.5rem;
  display:flex; flex-direction:column; align-items:flex-start;
}
.km-anders__kaart h2{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.02em;
  font-size:1.15rem; line-height:1.2; margin:0 0 .5rem;
}
/* flex:1 duwt de link in elke kaart naar de onderrand, ook als de tekst
   erboven korter is (de bel-kaart heeft drie regels, de andere vier). */
.km-anders__kaart p{ color:var(--ash-2); font-size:.95rem; margin:0 0 1rem; flex:1; }

.km-link{
  display:inline-block; color:var(--ash); font-weight:600; font-size:.95rem;
  border-bottom:1px solid var(--line-2); padding-bottom:.1rem;
  transition:border-color .3s;
}
.km-link:hover{ border-color:var(--ember); }