/*
 * /onze-aanpak/ — de uitzonderingen van deze pagina.
 *
 * De zes 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: het ritme op mobiel onderaan de pagina, en de verzendknop van
 * het formulier.
 *
 * Alles 1-op-1 gemeten op https://www.samdesign.nl/onze-aanpak/ (R9) op 1440,
 * 1024, 767 en 390px.
 *
 * Laadt alleen op deze pagina; zie inc/assets.php.
 */

/* ==================================================================
   De donkerblauwe kaart onderaan
   ------------------------------------------------------------------
   Dezelfde kaart als op /over-ons/, maar smaller op een tablet en met een
   andere verzendknop. Elke sectie op samdesign.nl heeft daar zijn eigen
   instellingen; deze pagina is later gebouwd dan die andere.
   ================================================================== */

/*
 * Even breed als een veld van het formulier en 69px hoog, met een verloop dat
 * bij hover een tint donkerder schuift in plaats van stil te staan.
 *
 * De breedte volgt de veldenrij: die is 20px breder dan de kaart (de velden
 * hebben 10px lucht aan weerszijden), en een veld is er een kwart van min die
 * 20px. Onder 1025px zijn de velden een half zo breed, en onder 768px vult de
 * knop de kaart — dat laatste staat al in contactCta.css.
 */
.contactCtaBand .contactFormSubmitBand {
  width: calc((100% + 20px) / 4 - 20px);
  height: 69px;
  padding: 15px;
  background-image: none;
}

.contactCtaBand .contactFormSubmitBand::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #c4044c 0%,
    var(--colorPinkDeep) 50%,
    var(--colorPinkLight) 100%
  );
  transition: right 0.4s;
}

.contactCtaBand .contactFormSubmitBand:hover::before {
  right: -100%;
}

/* ==================================================================
   "Tips & trends." — de link onderaan zijn regel
   ------------------------------------------------------------------
   Op de homepage staat deze link op de bovenrand van de inleiding, hier op de
   onderrand. Dezelfde uitzondering als op /over-ons/ (pages/overOns.css) en
   onder een bericht (pages/post.css); zie docs/openstaand.md.
   ================================================================== */

@media (min-width: 768px) {
  .blogSliderHeader > .textLink {
    align-self: flex-end;
  }
}

/*
 * En op mobiel blijft hij in de kop staan, rechts onder de inleiding, in plaats
 * van gecentreerd onder de kaarten te zakken zoals op de homepage.
 */
@media (max-width: 767px) {
  .blogSlider > .container {
    display: block;
  }

  .blogSliderHeader {
    display: flex;
  }

  .blogSliderHeader > .textLink {
    order: 0;
    margin-top: 0;
    margin-inline: 0 0;
    margin-left: auto;
  }
}

/* ==================================================================
   Het ritme tussen de secties
   ------------------------------------------------------------------
   Boven 1024px is het overal 150px, precies wat de componenten zelf doen.
   Onder 768px houdt deze pagina er twee eigen maten op na. Marges van buren
   klappen samen, dus telt telkens de grootste van de twee.
   ================================================================== */

/*
 * Tussen 768 en 1024px: de kaart is 800px breed en houdt aan alle kanten 75px
 * lucht; op /over-ons/ blijft hij zo breed als de pagina met 115px aan de
 * zijkanten. Onder 768px geldt weer wat contactCta.css doet (50px en 41px), dus
 * heeft dit blok een ondergrens.
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .contactCta > .container {
    max-width: calc(800px + var(--containerPadding) * 2);
  }

  .contactCtaBand .contactCtaCard {
    padding: 75px;
  }

  /* Een veld is hier een halve rij in plaats van een kwart. */
  .contactCtaBand .contactFormSubmitBand {
    width: calc((100% + 20px) / 2 - 20px);
  }
}

@media (max-width: 767px) {
  /* De knop loopt hier van rand tot rand van de kaart. */
  .contactCtaBand .contactFormSubmitBand {
    width: 100%;
  }

  /* 57px in plaats van 150 boven en onder de klantverhalen. */
  .reviewSlider {
    margin-block: 57px;
  }

  /* En 100px in plaats van 150 naar de kaart met het formulier. */
  .contactCta {
    margin-top: 100px;
  }
}