/*
 * quoteSection — lopende tekst met één klantcitaat op een donkere kaart ernaast.
 *
 * De vorm komt van samonlinemarketing.nl/over-ons/ ("Meer dan 12+ jaar winnen"):
 * links de kop met het reuzenwoord erachter en twee alinea's, rechts een
 * donkerblauwe kaart met een flinke radius, een groot aanhalingsteken in de
 * linkerbovenhoek en het logo van de klant in een rondje dat over de onderrand
 * hangt (§20).
 *
 * De kaart is `align-self: start`: hij is korter dan de tekst en hoort met zijn
 * bovenkant mee te lijnen, niet uitgerekt te worden tot de hoogte van de tekst.
 */

.quoteSection {
  margin-block: var(--sectionSpaceTop, 150px) var(--sectionSpaceBottom, 150px);
}

.quoteSectionInner {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 50px var(--quoteSectionGap, 50px);
}

/*
 * De tekstkolom vult wat er overblijft, tenzij er een breedte is ingesteld. De
 * basis van 320px zorgt dat de twee kolommen omvouwen zodra ze niet meer passen,
 * zonder dat er een media query aan te pas komt — hetzelfde principe als de vorm
 * `wrap` van mediaText (§23).
 */
.quoteSectionBody {
  flex: 1 1 var(--quoteSectionTextWidth, 320px);
  max-width: var(--quoteSectionTextWidth, none);
  min-width: 0;
}

.quoteSectionAside {
  flex: 1 1 var(--quoteSectionCardWidth, 608px);
  max-width: var(--quoteSectionCardWidth, 608px);
  min-width: 0;
}

/* De kaart links in beeld, terwijl hij in de bron onder de tekst staat. */
.quoteSectionCardLeft .quoteSectionAside {
  order: -1;
}

.quoteSectionTitle {
  margin-bottom: var(--quoteSectionTitleGap, 40px);
}

/*
 * Twee kolommen lopende tekst — de openingssectie van samonlinemarketing.nl.
 * `break-inside: avoid` houdt een alinea heel: een alinea die halverwege naar de
 * tweede kolom springt leest slechter dan een ongelijke kolomhoogte.
 */
@media (min-width: 1025px) {
  .quoteSectionTextColumns {
    columns: 2;
    column-gap: 58px;
  }

  .quoteSectionTextColumns > * {
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------------
   De kaart
   ------------------------------------------------------------------ */

/*
 * `position: relative` is er voor het rondje, en de padding onderaan is ruimer
 * dan boven: daar hangt het rondje half over de rand en moet de naamregel er
 * niet tegenaan lopen.
 */
.quoteCard {
  position: relative;
  margin: 0 0 75px;
  padding: 60px 60px 70px;
  border-radius: 20px;
  background: var(--colorNavy);
  color: var(--colorWhite);
}

/*
 * Het grote aanhalingsteken. Versiering om een citaat dat al een <blockquote>
 * is, dus een pseudo-element en geen tekst in de markup (§6). Het staat linksbóven
 * de eerste regel en loopt er half achter door, precies als op
 * samonlinemarketing.nl.
 */
.quoteCardQuote {
  position: relative;
  margin: 0;
}

.quoteCardQuote::before {
  content: '\201C';
  position: absolute;
  top: -52px;
  left: -30px;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff1f;
}

.quoteCardQuote p {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 33px;
}

.quoteCardName {
  margin-top: 33px;
  font-size: 20px;
  font-weight: 500;
  line-height: 33px;
}

/*
 * Het rondje met het logo hangt over de onderrand: 45px binnen de kaart en 75px
 * eronder. Die 75 is ook de marge onder de kaart, zodat de sectie erna niet
 * tegen het logo aan komt, en de 70px onderpadding van de kaart houdt de
 * naamregel 25px vrij van de bovenkant van het rondje.
 */
.quoteCardBadge {
  position: absolute;
  bottom: -75px;
  left: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  padding: 18px;
  border: 1px solid var(--colorNavSubBorder);
  border-radius: 50%;
  background: var(--colorWhite);
}

.quoteCardBadgeImage {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 84px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .quoteSection {
    margin-block:
      var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 150px))
      var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 150px));
  }

  /*
   * Omgevouwen staat de kaart altijd ónder de tekst, ook in de vorm met de kaart
   * links: de bronvolgorde is dan de leesvolgorde en `order` zou daar tegenin
   * gaan.
   */
  .quoteSectionCardLeft .quoteSectionAside {
    order: 0;
  }

  .quoteSectionAside {
    max-width: none;
  }

  /*
   * De onderpadding houdt het rondje vrij van de naamregel: 45px daarvan zit ín
   * de kaart, dus 70 laat er 25 tussen — dezelfde marge als op een breed scherm.
   */
  .quoteCard {
    padding: 50px 40px 70px;
  }

  .quoteCardQuote::before {
    top: -44px;
    left: -18px;
    font-size: 96px;
  }
}

@media (max-width: 767px) {
  .quoteSection {
    margin-block:
      var(--sectionSpaceTopMobile, var(--sectionSpaceTopTablet, var(--sectionSpaceTop, 75px)))
      var(--sectionSpaceBottomMobile, var(--sectionSpaceBottomTablet, var(--sectionSpaceBottom, 75px)));
  }

  .quoteSectionInner {
    gap: 35px;
  }

  /* Het rondje is hier 90px en hangt er 45 onder; vandaar dezelfde rekensom. */
  .quoteCard {
    margin-bottom: 45px;
    padding: 40px 25px 70px;
  }

  .quoteCardQuote p,
  .quoteCardName {
    font-size: 17px;
    line-height: 28px;
  }

  .quoteCardName {
    margin-top: 25px;
  }

  .quoteCardQuote::before {
    top: -34px;
    left: -10px;
    font-size: 76px;
  }

  /* Kleiner rondje, en de marge eronder blijft de helft van de hoogte. */
  .quoteCardBadge {
    bottom: -45px;
    left: 25px;
    width: 90px;
    height: 90px;
    padding: 14px;
  }

  .quoteCardBadgeImage {
    max-height: 62px;
  }
}