/*
 * projectMedia — beeld naast een kop met tekst op een projectpagina.
 *
 * Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440, 1330, 1195, 1105, 1024,
 * 767 en 390px. De kolommen zijn `width: 100%` met een `max-width` en
 * `space-between` ertussen; ze wrappen dus in plaats van te krimpen. De
 * tussenruimte is wat er overblijft — 40px bij de ene verhouding, 30px bij de
 * andere — en staat daarom niet als gap in de CSS.
 */

.projectMedia {
  margin-block: 100px;
}

.projectMediaInner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.projectMediaBody,
.projectMediaMedia {
  width: 100%;
}

/* Bij een deel van de secties begint de tekst lager dan het beeld ernaast. */
.projectMediaBody {
  padding-top: var(--projectMediaTextOffset, 0px);
}

/* De twee verhoudingen die de bestaande site kent, en verder geen. */
.projectMediaWideText .projectMediaMedia {
  max-width: 600px;
}

.projectMediaWideText .projectMediaBody {
  max-width: 640px;
}

.projectMediaWideMedia .projectMediaMedia {
  max-width: 640px;
}

.projectMediaWideMedia .projectMediaBody {
  max-width: 610px;
}

/*
 * Een sectie zonder beeld is één kolom en geen halve kolom met lucht ernaast.
 * Hoe breed die kolom is verschilt: standaard de hele container, met een veld
 * voor een smallere maat (op samdesign.nl één keer 820px, gecentreerd).
 */
.projectMedia .projectMediaBody:only-child {
  max-width: var(--projectMediaBodyWidth, none);
  margin-inline: auto;
}

/* De tekst staat als eerste in de markup; het beeld links is een kwestie van order. */
.projectMediaLeft .projectMediaMedia {
  order: -1;
}

/* Hangt de ene kolom in het midden als de andere hoger is? */
.projectMediaAlignText .projectMediaBody,
.projectMediaAlignBoth .projectMediaBody,
.projectMediaAlignMedia .projectMediaMedia,
.projectMediaAlignBoth .projectMediaMedia {
  align-self: center;
}

/* ------------------------------------------------------------------
   De tekst
   ------------------------------------------------------------------ */

.projectMediaTitle {
  margin-bottom: var(--projectMediaTitleGap, 40px);
}

/*
 * Een opsomming in een projecttekst heeft géén roze vinkje en staat niet naar
 * binnen. Dat wijkt af van .richText elders op de site, maar het is wat
 * samdesign.nl doet: daar staat op deze lijsten `list-style: none` zonder
 * padding, dus lopen de regels gewoon door. Zie docs/beslissingen.md.
 */
.projectMediaText ul li {
  padding-left: 0;
  background: none;
}

/*
 * Een tussenkop in de lopende tekst. Komt één keer voor (de vijf stappen bij
 * Regina Floral Feelings) en is daar een vette h4 van 24px onder een h2; bij ons
 * een h3, zodat de koppenreeks heel blijft (§6). De maten zijn wel die van daar.
 */
.projectMediaText h3 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
}

/*
 * Vier secties op samdesign.nl zetten de marge onder hun alinea's op nul, dus
 * sluiten die daar zonder witregel op elkaar aan. Twee classes, want .richText p
 * in main.css zet de marge met een shorthand.
 */
.projectMediaTight .projectMediaText p {
  margin-bottom: 0;
}

/*
 * Een kop die op een vraagteken eindigt krijgt in main.css een roze stip over
 * de punt van dat vraagteken (`.headingQuery`, van /offerte-aanvraag/). Op een
 * projectpagina heeft het vraagteken gewoon de kleur van de kop, dus zetten we
 * die stip hier uit.
 */
.projectMediaTitle .headingQuery::after {
  content: none;
}

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

/*
 * Flex en niet gewoon een blok: dan lopen de negatieve marges van het beeld
 * niet door de figure heen naar buiten, maar maken ze de figure lager. Dat is
 * precies wat samdesign.nl doet — de sectie wordt niet hoger van een beeld dat
 * erboven of eronder uitsteekt.
 */
.projectMediaMedia {
  display: flex;
  justify-content: center;
  margin: 0;
}

.projectMediaImage {
  flex: none;
  width: calc(
    (100% + var(--projectMediaBleedLeft, 0px) + var(--projectMediaBleedRight, 0px)) *
    var(--projectMediaScale, 1)
  );
  max-width: none;
  height: auto;
  margin:
    calc(-1 * var(--projectMediaBleedTop, 0px))
    calc(-1 * var(--projectMediaBleedRight, 0px))
    calc(-1 * var(--projectMediaBleedBottom, 0px))
    calc(-1 * var(--projectMediaBleedLeft, 0px));
  border-radius: var(--projectMediaRadius, 0);
}

/* ------------------------------------------------------------------
   Breekpunten
   ------------------------------------------------------------------
   Vier eigen grenzen van samdesign.nl, geen van onze twee gebruikelijke: het
   beeld krimpt op 1330 en 1195, de tekst op 1105, en op 1024 gaan ze onder
   elkaar. Zonder die stappen zouden de kolommen tussen 1025 en 1440 wrappen.
   ------------------------------------------------------------------ */

@media (max-width: 1330px) {
  .projectMedia .projectMediaMedia {
    max-width: 480px;
  }
}

@media (max-width: 1195px) {
  .projectMedia .projectMediaMedia {
    max-width: 390px;
  }
}

@media (max-width: 1105px) {
  .projectMedia .projectMediaBody {
    max-width: 590px;
  }
}

/*
 * Onder elkaar: beide kolommen 510px breed en gecentreerd, de tekst ook
 * gecentreerd, en het beeld hangt niet meer buiten zijn kolom. De ruimte
 * ertussen is 30px bij de ene verhouding en 40px bij de andere, net als op
 * samdesign.nl.
 */
@media (max-width: 1024px) {
  .projectMedia {
    margin-block: 50px;
  }

  .projectMediaInner {
    flex-direction: column;
    align-items: center;
  }

  .projectMedia .projectMediaMedia {
    max-width: 510px;
  }

  /* De tekst is hier 510 of 480 breed, per sectie anders op samdesign.nl. */
  .projectMedia .projectMediaBody {
    max-width: var(--projectMediaStackWidth, 510px);
  }

  .projectMediaWideText .projectMediaInner {
    row-gap: 30px;
  }

  .projectMediaWideMedia .projectMediaInner {
    row-gap: 40px;
  }

  /* Bij het stapelen bepaalt één veld wat er bovenaan staat, niet de kant. */
  .projectMediaLeft .projectMediaMedia {
    order: 0;
  }

  .projectMediaStackMedia .projectMediaMedia {
    order: -1;
  }

  .projectMediaTitle,
  .projectMediaText {
    text-align: center;
  }

  /*
   * Het overstek boven en onder valt weg zodra de kolommen stapelen, precies
   * als op samdesign.nl. Links en rechts blijft het staan: bij een paar secties
   * is het beeld daar 150px breder dan zijn kolom, en dat is daar ook onder
   * 1025px nog zo. Wel begrensd op de container, want anders schuift de pagina
   * op een telefoon horizontaal — zie docs/beslissingen.md.
   */
  .projectMediaImage {
    max-width: calc(100vw - var(--containerPadding) * 2);
    margin-block: 0;
  }

  /* Onder elkaar heeft dat lager beginnen geen zin meer. */
  .projectMediaBody {
    padding-top: 0;
  }
}

/*
 * De kop is hier kleiner dan .sectionTitleSmall elders: 32px in plaats van 35.
 * Zo staat het op samdesign.nl, alleen op de projectpagina's.
 */
@media (max-width: 767px) {
  .projectMediaTitle {
    font-size: 32px;
    line-height: 35px;
    letter-spacing: -1.6px;
  }
}