/*
 * projectStory + projectStoryImage — het verhaalblok van vijf projecten.
 *
 * Maten 1-op-1 van samdesign.nl (R9). De typografie is hier anders dan in de
 * rest van het ontwerp: de kop 40px en zwaarder, de tekst 16px en lichter, en
 * alles gecentreerd. Dat is geen vergissing van ons maar wat die vijf
 * projectpagina's doen — zie docs/beslissingen.md.
 */

.projectStory {
  margin-top: var(--projectStorySpaceBefore, 100px);
  margin-bottom: var(--projectStorySpaceAfter, 100px);
  padding-top: var(--projectStoryPadTop, 100px);
  padding-bottom: var(--projectStoryPadBottom, 100px);
}

.projectStoryInner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  /* Bovenop de lucht van .container; valt pas op als de kolom smaller wordt
     dan de tekstbreedte. */
  padding-inline: calc(var(--containerPadding) + var(--projectStoryPadInline, 20px));
}

.projectStoryBody {
  width: 100%;
  max-width: var(--projectStoryWidth, 788px);
  margin-inline: auto;
  color: var(--projectStoryColor, inherit);
  text-align: center;
}

/* Een beeld dat wél meeloopt: gewone flow, dus de sectie wordt er hoger van. */
.projectStoryImageInFlow {
  position: static;
  flex: none;
  width: var(--projectStoryImageWidth, auto);
  max-width: 100%;
}

.projectStoryTitle {
  margin: 0 var(--projectStoryTitleInset, 0px) 65px;
  font-size: 40px;
  font-weight: 600;
  line-height: 50px;
  letter-spacing: -2px;
}

/*
 * De -6px onderaan: op samdesign.nl staat op het tekstblok een marge van -30px
 * en op de laatste alinea een van 24, samen 6px minder ruimte onder de tekst dan
 * de sectie zelf aangeeft. Zonder deze regel is elk verhaalblok 6px hoger.
 */
.projectStoryText {
  margin-bottom: -6px;
  font-size: 16px;
  font-weight: 200;
  line-height: 30px;
  letter-spacing: -0.8px;
}

.projectStoryText p,
.projectStoryText ul,
.projectStoryText ol {
  margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   De losse beelden
   ------------------------------------------------------------------ */

/*
 * Uit de flow: de sectie wordt er niet hoger van, precies als op samdesign.nl,
 * waar deze beelden met negatieve marges op hun plek worden gezet. De
 * verschuiving is gerekend vanaf de linkerbovenhoek van de inhoud — vandaar de
 * containerPadding erbij, want een absolute plaatsing rekent vanaf de
 * padding-rand van de container.
 */
.projectStoryImage {
  position: absolute;
  top: var(--projectStoryImageY, 0px);
  left: calc(var(--containerPadding) + var(--projectStoryImageX, 0px));
  width: var(--projectStoryImageWidth, auto);
  max-width: none;
  margin: 0;
}

.projectStoryImageFile {
  width: 100%;
  max-width: none;
  height: auto;
}

/*
 * Tot 767px verandert er op samdesign.nl niets aan de maten van een
 * verhaalblok: op 1024px staat het er precies zo als op 1440. Alleen het
 * handwerk vervalt eerder: de losse beelden komen bij ons vanaf 1025px onder de
 * tekst in plaats van vanaf 768. Versiering die over de tekst valt helpt op een
 * smal scherm niemand — zie docs/beslissingen.md.
 */
@media (max-width: 1024px) {
  .projectStoryImage {
    position: static;
    width: auto;
    max-width: 100%;
    margin: 30px auto 0;
  }
}

/*
 * Op mobiel valt de eigen typografie weg en krijgt de kop de maten van een
 * gewone sectiekop (.sectionTitleSmall onder 768px), met 20px eronder in plaats
 * van 65. De ruimte om de sectie gaat van 100 naar 70px.
 */
@media (max-width: 767px) {
  .projectStory {
    margin-block: 70px;
    padding-block: 70px;
  }

  .projectStoryTitle {
    margin: 0 0 20px;
    font-size: 35px;
    font-weight: 500;
    line-height: 35px;
    letter-spacing: -1.75px;
  }
}