/* ===========================================================================
   hsb-sprekerkaart.css — DE sprekerskaart

   Eén kaart voor drie plekken: het overzicht (/sprekers), de themapagina's
   (/sprekers/thema/...) en het blok "vergelijkbare sprekers" onderaan een
   profiel. De opmaak stond verspreid over sprekers.css en hsb-sprekers.css
   en gold dus alleen op het overzicht; de andere twee hadden hun eigen
   kaart, en die liepen uit de pas.

   Een op een overgenomen uit die twee bestanden, in dezelfde volgorde, en
   daar weggehaald. Beide pagina's laden dit bestand erbij.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   DE KLEUREN VAN DE KAART

   Deze variabelen stonden in sprekers.css en hsb-sprekers.css. Die twee
   worden alleen op /sprekers geladen, dus zonder deze regels zou de kaart op
   de themapagina's en de profielpagina kleurloos zijn.

   Een op een overgenomen, inclusief de donkere variant. Dat ze op /sprekers
   twee keer voorkomen maakt niets uit: het zijn dezelfde waarden.
   --------------------------------------------------------------------------- */

:root {
  --sb-navy: #0e1e3c;
  --sb-muted: #667082;
  --sb-line: #e5e8ef;
  --sb-soft: #f6f7fa;
  --sb-orange: #fb6a1b;
  --sb-orange-d: #ec5d0c;
}

:root {
  --sb-kaart: #ffffff;
  --sb-fotovlak: #e7edf3;
  --sb-lijn: #e3e8ee;
  --sb-lijn-hover: #c6d0da;
  --sb-grijs: #5b6b7c;
  --sb-blauw: #103856;
  --sb-knop: #c24d16;
  --sb-knop-donker: #a63f0f;
  --sb-glas: rgba(255, 255, 255, .5);
  --sb-glas-tekst: #103856;
}

:root[data-thema="donker"] {
  --sb-kaart: #17181c;
  --sb-fotovlak: #22242a;
  --sb-lijn: #2b2d33;
  --sb-lijn-hover: #4a4e57;
  --sb-grijs: #a3a8b0;
  --sb-blauw: #f2f3f5;
  --sb-knop: #ed6e26;
  --sb-knop-donker: #f58a4b;
  --sb-glas: rgba(255, 255, 255, .55);
  --sb-glas-tekst: #10131a;
}


@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --sb-kaart: #17181c;
    --sb-fotovlak: #22242a;
    --sb-lijn: #2b2d33;
    --sb-lijn-hover: #4a4e57;
    --sb-grijs: #a3a8b0;
    --sb-blauw: #f2f3f5;
    --sb-knop: #ed6e26;
    --sb-knop-donker: #f58a4b;
    --sb-glas: rgba(255, 255, 255, .55);
    --sb-glas-tekst: #10131a;
  }
}

/* ===== uit sprekers.css ===== */
.sb-card{
      display:flex; flex-direction:column; background:#fff; border:1px solid var(--sb-line);
      border-radius:16px; overflow:hidden; height:100%;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
.sb-card:hover{ transform:translateY(-5px); box-shadow:0 18px 38px rgba(14,30,60,.12); border-color:#d7dce6; }
.sb-card-media{ position:relative; height:200px; max-height:200px; overflow:hidden; background:var(--sb-soft); }
.sb-card-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.sb-card:hover .sb-card-img{ transform:scale(1.05); }
.sb-fav{
      position:absolute; top:12px; right:12px; width:38px; height:38px; border:none; border-radius:50%;
      background:rgba(255,255,255,.94); backdrop-filter:blur(4px); color:var(--sb-navy);
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      box-shadow:0 3px 10px rgba(0,0,0,.14); transition:transform .12s, color .12s; font-size:1rem;
    }
.sb-fav:hover{ transform:scale(1.08); }
.sb-fav.is-active{ color:var(--sb-orange); }
.sb-card-badge{
      position:absolute; left:12px; top:12px; display:inline-flex; align-items:center;
      color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.2px;
      padding:6px 12px; border-radius:50px; box-shadow:0 4px 12px rgba(0,0,0,.16);
    }
.sb-card-badge.is-green{ background:#16a34a; }
.sb-card-badge.is-orange{ background:#f97316; }
.sb-card-badge.is-blue{ background:#2563eb; }
.sb-card-badge.is-purple{ background:#7c3aed; }
.sb-card-badge.is-gold{ background:#d99000; }
.sb-card-main{ display:flex; flex-direction:column; flex:1; padding:18px; }
.sb-card-body{ flex:1; }
.sb-card-name{ font-size:1.12rem; font-weight:800; color:var(--sb-navy); margin:0 0 .35rem; letter-spacing:-.2px; }
.sb-card-tags{
      color:var(--sb-orange); font-size:.82rem; font-weight:600; margin-bottom:.55rem;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
.sb-card-desc{
      color:var(--sb-muted); font-size:.86rem; line-height:1.5; margin-bottom:.75rem;
      display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
.sb-card-price{ font-size:.92rem; font-weight:700; color:var(--sb-navy); white-space:nowrap; }
.sb-card-foot{
      margin-top:14px; padding-top:14px; border-top:1px solid var(--sb-line);
      display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    }
.sb-card-link{
      color:var(--sb-navy); font-weight:700; font-size:.88rem; text-decoration:none;
      display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
    }
.sb-card-link:hover{ color:var(--sb-orange-d); }
.sb-card-link .bi{ transition:transform .15s; }
.sb-card:hover .sb-card-link .bi{ transform:translateX(3px); }

/* ===== uit hsb-sprekers.css ===== */
.sb-card {
    background: transparent;
    border: 0;
    border-radius: 24px 2px 24px 2px;
    overflow: visible;
}
.sb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(16, 56, 86, .10);
}
.sb-card:hover .sb-card-main {
    border-color: var(--sb-lijn-hover);
}
.sb-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: none;
    border-radius: 24px 2px 0 0;
    overflow: hidden;
    background: var(--sb-fotovlak);
}
.sb-card-media > a {
    display: block;
    width: 100%;
    height: 100%;
}
.sb-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sb-card-main {
    flex: 1 1 auto;
    background: var(--sb-kaart);
    border: 1px solid var(--sb-lijn);
    border-top: 0;
    border-radius: 0 0 24px 2px;
    padding: 20px 22px 22px;
    transition: border-color .2s;
}
.sb-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--sb-blauw);
    margin: 0 0 5px;
    letter-spacing: -.2px;
}
.sb-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--sb-grijs);
    margin: 0 0 16px;
    height: 2.95em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sb-card-media .sb-fav {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: var(--sb-glas);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(16, 56, 86, .12);
    color: var(--sb-glas-tekst);
}
.sb-card-media .hsb-kaart__talen {
    bottom: 12px;
    left: 12px;
}
.sb-card-tarief {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--sb-glas);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(16, 56, 86, .12);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--sb-glas-tekst);
    white-space: nowrap;
}
.sb-card-foot {
    margin-top: auto;
    padding-top: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.sb-card-chip {
    padding: 5px 10px;
    border: 1px solid var(--sb-lijn);
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--sb-grijs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.sb-card-link {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background: var(--sb-knop);
    color: #fff;
}
.sb-card-link:hover {
    background: var(--sb-knop-donker);
    color: #fff;
}
.sb-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1);
}
.sb-card:hover .sb-card-link svg { transform: translateX(3px); }
.sb-lijst .sb-card { flex-direction: row; }
.sb-lijst .sb-card-media {
    flex: 0 0 200px;
    width: 200px;
    border-radius: 24px 0 0 2px;
}
.sb-lijst .sb-card-main {
    min-height: 200px;
    border: 1px solid var(--sb-lijn);
    border-left: 0;
    border-radius: 0 2px 24px 0;
    justify-content: center;
}
.sb-lijst .sb-card-desc {
    height: auto;
    -webkit-line-clamp: 2;
}
.sb-lijst .sb-card-body { flex: 0 0 auto; }
.sb-lijst .sb-card-foot { margin-top: 14px; }
@media (max-width: 575.98px) {
.sb-lijst .sb-card { flex-direction: column; }.sb-lijst .sb-card-media { flex: none; width: auto; border-radius: 24px 2px 0 0; }.sb-lijst .sb-card-main { min-height: 0; border-left: 1px solid var(--sb-lijn); border-top: 0; border-radius: 0 0 24px 2px; }.sb-lijst .sb-card-foot { margin-top: auto; }
}
.hsb-kaart__talen .visually-hidden,
.sb-card-tarief .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
}
:root[data-thema="donker"] .sb-card:hover   { box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }


/* ---------------------------------------------------------------------------
   DE BOVENKOP

   Alleen op de landingspagina's. Daar staat per thema een eigen functietitel
   bij de spreker, zoals "TRENDWATCHER & AI-EXPERT". Elders is dat veld leeg
   en staat er niets, dus de kaart blijft daar precies zoals hij is.
   --------------------------------------------------------------------------- */
.sb-card-bovenkop {
  display: block;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5b6b7c;
}