/* ===========================================================================
   profiel-hero.css — de donkerblauwe kop van de sprekerspagina

   Deze regels stonden in een <style>-blok middenin item-profiel.php, dus
   NA de opmaak van de hero. De browser tekende de kop daardoor eerst
   zonder vormgeving en zette hem daarna in een keer goed: de flikkering
   bij het verversen. Nu staan ze in de <head>, dus ze zijn er al voordat
   er iets getekend wordt.

   Een op een overgenomen; er is geen regel veranderd, toegevoegd of
   weggehaald.
   =========================================================================== */

/* ===========================================================================
   HERO SPREKERSPAGINA

   Donkerblauw vlak, tekst links, profielfoto rechts in een afgeronde
   uitsnede. Eén opzet voor alle sprekers.

   De foto wordt niet bijgesneden of aangepast: object-fit zorgt voor de
   uitsnede, object-position houdt het hoofd in beeld.
   =========================================================================== */

.new-speaker-hero {
  position: relative;
  overflow: hidden;
  background: #002d55;
  color: #fff;
}

.new-speaker-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.new-speaker-hero__content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}

/* --- de foto ------------------------------------------------------------- */
.new-speaker-hero__foto {
  flex: 0 0 auto;
  width: 380px;
  max-width: 40%;
}

.new-speaker-hero__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Bovenaan uitlijnen: bij een staand portret houdt dat het hoofd in
     beeld, waar 'center' het midden van de foto zou pakken. */
  object-position: center 20%;
  border-radius: 20px;
  display: block;
}

/* --- de tekst ------------------------------------------------------------ */
.new-speaker-hero__breadcrumb {
  font-size: .9rem;
  margin-bottom: 1.25rem;
  color: rgb(255 255 255 / .75);
}
.new-speaker-hero__breadcrumb a { color: rgb(255 255 255 / .85); text-decoration: underline; }
.new-speaker-hero__breadcrumb a:hover { color: #fff; }
.new-speaker-hero__breadcrumb span { margin: 0 .35rem; }

.new-speaker-hero__kop {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f56c20;
  margin-bottom: .5rem;
}

.new-speaker-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  color: #fff;
  margin-bottom: .6rem;
}

.new-speaker-hero h2,
.new-speaker-hero__subtitle {
  color: #fff;
  font-size: clamp(1.1rem, 1.8vw, 1.55rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.new-speaker-hero__lead,
.new-speaker-hero__content > p {
  max-width: 560px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgb(255 255 255 / .9);
}

/* --- tablet -------------------------------------------------------------- */
@media (max-width: 991px) {
  .new-speaker-hero__inner { gap: 32px; }
  .new-speaker-hero__foto { width: 300px; }
}

/* --- mobiel -------------------------------------------------------------- */
/*  Foto boven de tekst, breed en niet te hoog, zodat het gezicht altijd
    zichtbaar blijft zonder ingewikkelde uitsnede. */
@media (max-width: 767px) {
  .new-speaker-hero__inner {
    display: block;
    padding-top: 24px;
    padding-bottom: 36px;
  }

  .new-speaker-hero__foto {
    width: 100%;
    max-width: none;
    margin-bottom: 24px;
  }

  .new-speaker-hero__foto img {
    aspect-ratio: 16 / 10;
    object-position: center 15%;
    border-radius: 14px;
  }

  .new-speaker-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}