/*
 * /webshop-laten-maken/ — de uitzonderingen van deze pagina.
 *
 * De veertien secties komen uit het atelier en hebben hun opmaak bij hun
 * component. Wat hier staat is wat op deze pagina anders is dan wat die
 * componenten standaard doen.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/webshop-laten-maken/ (R9) op
 * 1440, 1024, 767 en 390px.
 *
 * Laadt alleen op deze pagina; zie inc/assets.php.
 */

/* ==================================================================
   De hero
   ================================================================== */

/*
 * De USP's staan hier onder elkaar met 5px ertussen. Op /website-laten-maken/
 * staan er twee naast elkaar en dat is wat serviceHero.css doet; hier zijn het
 * er vier, dus wordt de rij weer een gewone lijst.
 */
.serviceHeroUsps ul {
  display: block;
}

.serviceHeroUsps li + li {
  margin-top: 5px;
}

/* ==================================================================
   "Waarom een webshop laten maken door SAM Design?"
   ------------------------------------------------------------------
   De enige sectie met het beeld links, dus te herkennen aan die class.
   ================================================================== */

/*
 * De lopende tekst is hier 18/30 en niet de 20/33 van de rest van de site. Dat
 * is de maat die samdesign.nl in deze twee secties instelt; de witregel tussen
 * twee alinea's (1,5em) zakt daarmee vanzelf mee naar 27px.
 */
.mediaTextLeft .mediaTextText {
  font-size: 18px;
  line-height: 30px;
}

/*
 * Het beeld vult zijn kolom niet: het is 83% breed en staat in het midden. Op
 * een telefoon is dat 46%.
 */
.mediaTextLeft .mediaTextImage {
  width: 83%;
}

/* ==================================================================
   "Een webshop op maat laten bouwen"
   ================================================================== */

/* Dezelfde 18/30 als hierboven. */
.textSectionText {
  font-size: 18px;
  line-height: 30px;
}

/* ==================================================================
   Het streepje links van de lopende tekst
   ------------------------------------------------------------------
   mediaText.css zet er een rand over de volle hoogte van de tekst; op deze
   pagina is het een streepje van 122px vanaf de bovenkant. Vandaar dat de
   rand hier weg is en er een ::before in de plaats komt.
   ================================================================== */

.mediaTextTextRule {
  position: relative;
  border-left: 0;
}

.mediaTextTextRule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 122px;
  background: currentColor;
}

/* ==================================================================
   Vouwende kolommen
   ------------------------------------------------------------------
   Alle vijf de vouwende secties op deze pagina lijnen hun kolommen van
   boven uit en houden 70px over als ze onder elkaar staan; mediaText.css
   houdt daar 40px aan.

   Het component lijnt de tékstkolom zelf al van boven uit
   (`.mediaTextWrap .mediaTextBody { align-self: flex-start }`) en laat de
   beeldkolom in het midden staan. Deze regel doet dus alleen nog dat
   laatste erbij, en dat is nodig bij "Waarom een webshop laten maken door
   SAM Design?": de beeldkolom is daar door zijn negatieve bovenmarge 608,1
   hoog tegen 618 van de tekst, en gecentreerd zou het beeld 5px te laag
   staan.
   ================================================================== */

.mediaTextWrap .mediaTextInner {
  align-items: flex-start;
  row-gap: 70px;
}

/* ==================================================================
   De witregel onder de laatste alinea
   ------------------------------------------------------------------
   Op samdesign.nl blijft die witregel staan (1,5em, dus 27px bij tekst van
   18px) en wordt er met een negatieve marge 30px van afgetrokken. Netto is
   het tekstblok daar dus 3px korter dan zijn regels. Onze reset haalt die
   witregel helemaal weg en komt op 0 uit; dit is precies dat verschil.

   Boven 768px raakt het alleen de twee secties met tekst van 18px — bij
   20px is de witregel 30 en valt hij tegen die -30px precies weg, en dan
   klopt onze 0 al. Onder 768px is de tekst overal 15px en de witregel 22,5,
   dus geldt het daar voor elke sectie.
   ================================================================== */

.mediaTextLeft .mediaTextText,
.textSectionText {
  margin-bottom: -3px;
}

/* ==================================================================
   "Een webshop laten maken, met SEO in gedachte."
   ------------------------------------------------------------------
   De enige sectie met twee beelden in één kolom. Ze staan versprongen:
   het eerste tegen de linkerrand, het tweede tegen de rechter, en het
   tweede valt 63px over het eerste heen. mediaText geeft ze de kolom;
   deze maten zijn van deze instantie.
   ================================================================== */

.mediaTextMediaStack .mediaTextMedia .mediaTextImage {
  max-width: 425.93px;
  height: 490.5px;
  margin-inline: 0 auto;
}

.mediaTextMediaStack .mediaTextMediaSecond .mediaTextImage {
  max-width: 428.14px;
  height: 482.08px;
  margin-inline: auto 0;
}

.mediaTextMediaStack .mediaTextMediaSecond {
  margin-top: -63px;
}

/* ==================================================================
   De FAQ
   ------------------------------------------------------------------
   De kop is 530px breed en staat gecentreerd, zodat de tweede regel op
   dezelfde plek breekt als daar.
   ================================================================== */

/*
 * Padding en geen max-width: in de vorm met twee kolommen is de kop een flexitem
 * dat de hele regel moet vullen, anders komt de eerste lijst met vragen ernaast
 * te staan. Met padding blijft hij 100% breed en is zijn tekst 530. Een
 * negatieve uitkomst klemt de browser op nul, dus onder 768px doet de regel
 * niets meer.
 */
.faqSectionTitle {
  padding-inline: calc((100% - 530px) / 2);
}

/* ==================================================================
   De knop onder "Klaar om een WooCommerce webshop te laten maken?"
   ------------------------------------------------------------------
   De enige knop in een mediaText op deze pagina. Hij staat 50px onder de
   tekst (mediaText.css houdt 40 aan, en 25 onder 768px) en lijnt uit met
   de tekst ernaast, dus 39px naar binnen — net als het streepje.
   ================================================================== */

.mediaTextActions {
  margin-top: 50px;
  padding-left: 39px;
}

/* ==================================================================
   Kleiner dan 1025
   ================================================================== */

@media (max-width: 1024px) {
  /* De twee versprongen beelden worden hier smaller en vallen 90px over elkaar. */
  .mediaTextMediaStack .mediaTextMedia .mediaTextImage,
  .mediaTextMediaStack .mediaTextMediaSecond .mediaTextImage {
    max-width: 360px;
    height: 441.38px;
  }

  .mediaTextMediaStack .mediaTextMediaSecond {
    margin-top: -90px;
  }
}

/* ==================================================================
   Kleiner dan 768
   ================================================================== */

@media (max-width: 767px) {
  /* De USP's in de hero zakken mee met de lopende tekst. */
  .serviceHeroUsps li {
    font-size: 15px;
    line-height: 25px;
  }

  /*
   * De twee secties met tekst van 18/30 zakken naar 15/25, net als elke andere
   * lopende tekst onder 768px.
   */
  .mediaTextLeft .mediaTextText,
  .textSectionText {
    font-size: var(--textSize);
    line-height: var(--textLine);
  }

  /*
   * De witregel is hier 22,5px tegen dezelfde -30px, dus netto -7,5. De eerste
   * selector is er alleen om even zwaar te wegen als de -3px hierboven.
   */
  .mediaTextLeft .mediaTextText,
  .mediaTextText,
  .textSectionText {
    margin-bottom: -7.5px;
  }

  /*
   * De ruimte onder de kop blijft ook onder 768px staan zoals hij is ingesteld;
   * textSection.css zet er 20px van. Zie docs/openstaand.md.
   */
  .textSectionTitle {
    margin-bottom: 27px;
  }

  .mediaTextLeft .mediaTextImage {
    width: 46%;
  }

  /*
   * "Een webshop laten maken, met SEO in gedachte." houdt hier 25px onder de
   * kop in plaats van de 57 van een breed scherm. `:not(.mediaTextBand)` wijst
   * die ene sectie aan — de andere vouwende secties op deze pagina staan alle
   * vier op een band — en weegt zwaarder dan de regel in mediaText.css die voor
   * deze vorm de brede maat vasthoudt.
   */
  .mediaTextWrap:not(.mediaTextBand) .mediaTextTitle {
    margin-bottom: 25px;
  }

  /* En nog een maat kleiner. */
  .mediaTextMediaStack .mediaTextMedia .mediaTextImage,
  .mediaTextMediaStack .mediaTextMediaSecond .mediaTextImage {
    max-width: 280px;
    height: 340px;
  }
}