/*
 * projectHero — de kop van een projectpagina.
 *
 * Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440, 1250, 1024, 767 en
 * 390px. De twee kolommen zijn geen raster maar `width: 100%` met een
 * `max-width` en `space-between` ertussen: precies wat de bestaande site doet,
 * en het laat de kolommen wrappen in plaats van krimpen.
 *
 * Het beeld staat los van de flow (`position: absolute`). Op samdesign.nl is
 * het een blok dat met negatieve marges 150px breder is dan zijn kolom; dat
 * blok is onzichtbaar maar duwt de pagina wel breder dan het venster tussen
 * 1206 en 1400px. Wij zetten de afbeelding op dezelfde plek zonder dat lege
 * blok, dus zonder die horizontale schuifbalk — zie docs/beslissingen.md.
 */

.projectHero {
  margin-top: 80px;
}

.projectHeroInner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.projectHeroContent {
  width: 100%;
  max-width: 616px;
}

.projectHeroEyebrow {
  margin: 0 0 20px;
  color: #a3a6b1;
  font-size: 25px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1.25px;
}

/* 40px = de 20px onder de kop plus de 20px boven de inleiding. */
.projectHeroTitle {
  margin-bottom: 40px;
}

/*
 * Een lange projectnaam staat op samdesign.nl kleiner dan de 100px van
 * .sectionTitle — 85px bij zeven projecten, 70 bij één. De letterafstand is
 * daar altijd -5% van de grootte. Alleen op desktop: onder 1025px gelden de
 * maten van .sectionTitle, en die wil deze regel niet overschrijven. Vandaar
 * een min-width, de enige in dit project.
 */
@media (min-width: 1025px) {
  .projectHeroTitle {
    font-size: var(--projectHeroTitleSize, 100px);
    letter-spacing: calc(var(--projectHeroTitleSize, 100px) * -0.05);
  }
}

/*
 * De inleiding staat 30px naar binnen met een streepje ervoor. Het streepje is
 * 114px hoog en dus niet zo hoog als de tekst; zo staat het op samdesign.nl,
 * daarom is het hier een pseudo-element en niet de border-left van
 * .sectionIntro.
 */
.projectHeroIntro {
  position: relative;
  margin-bottom: 50px;
}

/* Zonder link eronder valt de 20px weg die tussen de twee zat. */
.projectHeroContent > .projectHeroIntro:last-child {
  margin-bottom: 30px;
}

.projectHeroIntro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 114px;
  background: var(--colorNavy);
}

/*
 * Twee classes nodig: .richText p in main.css zet de marge met een shorthand,
 * en dat weegt zwaarder dan één class hier.
 */
.richText.projectHeroIntro > * {
  max-width: 570px;
  margin-left: 30px;
}

/* ------------------------------------------------------------------
   De link naar de site van de klant
   ------------------------------------------------------------------ */

/* Even ver naar binnen als de inleiding erboven. */
.projectHeroContent > .projectLink {
  margin-left: 30px;
}

.projectLink {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--colorNavy);
  font-size: var(--textSize);
  line-height: var(--textLine);
  text-decoration: none;
  transition: padding-left 0.3s;
}

.projectLink:hover {
  padding-left: 10px;
}

.projectLink:hover .projectLinkLabel {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* De pijl in een roze schijfje, dat bij hover donkerblauw wordt. */
.projectLinkIcon {
  flex: none;
  display: flex;
  align-items: center;
  padding: 8px 18px 9px;
  border-radius: 99px;
  background: var(--colorPink);
  color: var(--colorWhite);
  transition: background-color 0.3s;
}

.projectLink:hover .projectLinkIcon {
  background: var(--colorNavy);
}

/* De reset zet svg op max-width:100%; in een flexbox schrompelt dat weg. */
.projectLinkIcon svg {
  flex: none;
  width: 14px;
  height: auto;
}

/* ------------------------------------------------------------------
   Het beeld
   ------------------------------------------------------------------ */

.projectHeroMedia {
  position: relative;
  width: 100%;
  max-width: 545px;
  /*
   * Het beeld zelf staat buiten de flow, dus brengt de kolom de hoogte mee die
   * het beeld op samdesign.nl aan de sectie geeft. Zonder dit wordt de sectie
   * alleen zo hoog als de tekst en zakt hij bij een hoog beeld in.
   */
  min-height: var(--projectHeroMediaHeight, 0);
  margin: 0;
}

/*
 * Het beeld hangt buiten zijn kolom. --projectHeroBleed* zegt hoeveel aan
 * welke kant; die waarden verschillen per project en komen als custom property
 * van het component mee. De breedte is die van de kolom plus wat er links en
 * rechts buiten valt, en het middelpunt schuift mee met het verschil tussen de
 * twee overstekken — daarmee staat het beeld op dezelfde plek als op
 * samdesign.nl, waar dat met marges op een extra blok gaat.
 */
.projectHeroImage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(
    (100% + var(--projectHeroBleedLeft, 0px) + var(--projectHeroBleedRight, 0px)) *
    var(--projectHeroImageScale, 1)
  );
  max-width: none;
  height: auto;
  transform: translate(
    calc(-50% + (var(--projectHeroBleedRight, 0px) - var(--projectHeroBleedLeft, 0px)) / 2),
    calc(-50% + (var(--projectHeroBleedBottom, 0px) - var(--projectHeroBleedTop, 0px)) / 2)
  );
}

/*
 * Vanaf 1205px naar beneden valt het beeld weg en houdt de kop alleen tekst
 * over. Die grens is van samdesign.nl en niet een van onze twee gebruikelijke
 * breekpunten.
 */
@media (max-width: 1205px) {
  .projectHeroMedia {
    display: none;
  }
}

/*
 * Zonder beeld staat de tekstkolom niet meer links maar in het midden, in een
 * container die smaller is dan de rest van de pagina: 800px inhoud op tablet,
 * 400px op mobiel. De 40px hieronder is de lucht die .container zelf meeneemt.
 */
@media (max-width: 1024px) {
  .projectHeroInner {
    max-width: 840px;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .projectHeroInner {
    max-width: 440px;
  }

  /* Het schijfje om de pijl is op mobiel hoger; zo staat het op samdesign.nl. */
  .projectLinkIcon {
    padding: 12px 18px 13px;
  }
}