/*
 * /website-laten-maken/mobiele-website-laten-maken/ — CLAUDE.md §33.
 *
 * Alleen wat op deze pagina afwijkt van de componenten die erop staan. De
 * negen secties komen allemaal uit bestaande componenten; wat hier staat zijn
 * de maten die samdesign.nl per instantie anders heeft ingesteld.
 *
 * Gemeten op 1440, 1024, 767 en 390px met /root/samshots/mwlm/cmp.py.
 */

/* ------------------------------------------------------------------
   De hero
   ------------------------------------------------------------------ */

/*
 * Het streepje van 114px stond hier; sinds §37 staat het bij het component, bij
 * `.serviceHeroHasImage`. Het bleek niet van deze pagina te zijn maar van de
 * hele familie: op /webdesign-amsterdam/, /website-laten-maken-utrecht/,
 * /website-scan/, /webdesign-pakketten/ en /beste-website-bouwer-van-nederland/
 * meet het er ook 114.
 */

/*
 * En de link erin is hier wél onderstreept. `main.css` laat een link in een
 * inleiding bewust zonder streep (§28, gemeten op /nieuwsbrief-design/); op deze
 * pagina zet samdesign.nl er op elk tekstblok `text-decoration: underline` bij.
 */
.serviceHeroIntro a {
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   "Een 'normale' website heeft een standaardbreedte" — het blok boven
   de kolommen op de grijze band
   ------------------------------------------------------------------ */

/*
 * Het blok erboven staat hier gecentreerd; op /webdesign-utrecht/ en
 * /webdesign-zoetermeer/, waar `mediaTextLead` voor gemaakt is, staat het links
 * met een eigen kop erboven. Vandaar dat het component het niet zelf doet.
 */
.mediaTextLead .mediaTextText {
  text-align: center;
}

/* ------------------------------------------------------------------
   "Een mobiele website laten maken met WordPress"
   ------------------------------------------------------------------ */

/*
 * Vanaf 1024px naar beneden hangt de beeldkolom van deze sectie op samdesign.nl
 * aan een negatieve marge van 1px rondom (`margin: -1px` op
 * `.elementor-element-1f8a432 > .elementor-element-populated`). Het beeld staat
 * daardoor 1px hoger en alles eronder 2px — precies het verschil dat de meting
 * op 1024 en 767px liet zien. Alleen deze ene sectie heeft hem, dus staat hij
 * hier en niet bij het component.
 */
@media (max-width: 1024px) {
  .mediaText:not(.mediaTextBand) .mediaTextMedia {
    margin-block: -1px;
  }
}

/*
 * De knop onder die tekst staat onder 768px 17,5px onder de laatste regel, en
 * niet de 25 die het component daar aanhoudt. Dat verschil komt niet uit een
 * andere instelling maar uit het samenvallen van drie marges: de witregel onder
 * de laatste alinea (22,5px bij tekst van 15px), de vaste −30px van `textPull`
 * en de ruimte naar de knop. Die klappen bij ons samen tot
 * `max(22,5; ruimte) − 30`, dus is 47,5 nodig om op 17,5 uit te komen. Boven
 * 768px doet `actionsGap` dat werk wél (55 − 30 = 25).
 */
@media (max-width: 767px) {
  .mediaTextActions {
    margin-top: 47.5px;
  }
}

/* ------------------------------------------------------------------
   "Ons proces."
   ------------------------------------------------------------------ */

/*
 * Drie dingen die hier anders staan dan op /website-laten-maken/ zitten als veld
 * op de instantie en niet in dit bestand (§31): `headInset` (20px inspringen van
 * de kop en de inleiding), `rowGap` (100px onder de inleiding in plaats van 150)
 * en `rowFlush` (de rij loopt door tot de vensterrand: 1360 breed met kaarten
 * van 453,33 in plaats van 1340/446,67). Wat hier overblijft is de vorm van de
 * pijlen en de maat van de link.
 */

/*
 * Tussen 768 en 1024px loopt de rij van rand tot rand: de sectie heeft daar op
 * samdesign.nl geen padding, en de kolom `max-width: calc(50% + 640px)` met
 * `margin-right: 0`, wat in dat bereik altijd breder is dan het venster.
 * `rowFlush` regelt dat nu alleen boven 1024px; de rest van de breedtes staat
 * hier tot dat veld ook dit bereik dekt (gemeld bij §31).
 */
@media (min-width: 768px) and (max-width: 1024px) {
  .processSliderRow {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

/*
 * De pijlen zijn hier het kale pijltje van 26px zonder de ronde rand van
 * /website-laten-maken/ — daar staat `arrow_icon: my_icon` met een cirkel
 * omheen, hier zonder. Ze staan 52px boven de rij, op elke breedte.
 */
.processSlider .carouselArrow {
  top: -52px;
  width: 26px;
  height: 26px;
  border: 0;
}

.processSlider .carouselArrow:hover {
  background: none;
}

/*
 * "Alles bekijken" houdt onder 768px zijn 20/33 en zakt naar links. De maat is
 * het openstaande punt uit docs/openstaand.md dat op /website-laten-maken/ en
 * /webshop-laten-maken/ net zo speelt; het links uitlijnen is van deze pagina
 * alleen (`elementor-mobile-align-left` op het widget).
 */
.processSliderLink {
  font-size: 20px;
  line-height: 33px;
}

@media (max-width: 767px) {
  .processSliderActions {
    text-align: left;
  }

  /*
   * Het pijltje ernaast krimpt in `main.css` mee naar 15px; hier houdt de hele
   * link zijn maat, dus het pijltje ook. Zelfde uitzondering als bij de link van
   * "Ons portfolio" in portfolioLatest.css.
   */
  .processSliderLink .textLinkArrow {
    width: 20px;
  }
}

/* ------------------------------------------------------------------
   "Samen winnen."
   ------------------------------------------------------------------ */

/*
 * De inleiding heeft hier geen streepje ervoor. Op de homepage staat op dat
 * widget `border-left: 1px solid #092041` met `margin-left: 30px` op de alinea;
 * hier staat alleen `max-width: 683px` — net als in de rastervorm op /over-ons/.
 */
.teamSliderIntro {
  border-left: 0;
  padding-left: 0;
}

/*
 * De strook van de volgende kaart die in beeld blijft is hier onder 768px 50px
 * en niet de 55 van de homepage (`--swiper-offset-size`). Boven 768px is hij op
 * beide 50 en doet de standaard van het component het werk.
 */
@media (max-width: 767px) {
  .teamSlider {
    --teamPeek: 50px;
  }
}

/*
 * "Meer over ons" hangt hier aan de ónderkant van de inleiding in plaats van aan
 * de bovenkant, en zakt onder 768px naar rechts in plaats van naar het midden.
 * Gemeten op 1440px: de link staat op y 142 tegenover 110 bij ons, en op 767 en
 * 390px tegen de rechterrand van de sectie. Op de homepage, waar dit component
 * vandaan komt, staat hij juist bovenaan en in het midden — vandaar dat het hier
 * staat en niet bij het component.
 */
.teamSliderHeader {
  align-items: flex-end;
}

@media (max-width: 767px) {
  /*
   * Onder 768px zakt de link onder de inleiding, en dan staat hij er direct
   * tegenaan: de kolom heeft op samdesign.nl `margin-block-end: 0` tussen zijn
   * widgets. De `row-gap: 20px` van `.sectionHeader` moet er dus af, maar alleen
   * tussen de inleiding en de link — tussen de kop en de inleiding blijft hij
   * staan. Vandaar een negatieve marge op de link en niet `row-gap: 0`.
   */
  .teamSliderHeader > .textLink {
    margin-top: -20px;
    margin-inline: auto 0;
  }
}

/* ------------------------------------------------------------------
   De ruimte om "Succesverhalen." en "Samen winnen."
   ------------------------------------------------------------------ */

/*
 * Twee marges die samdesign.nl hier anders instelt dan de componenten
 * aanhouden. Ze staan los van elkaar maar horen bij elkaar: samen houden ze de
 * drie secties onderaan de pagina op dezelfde y als daar.
 *
 * "Succesverhalen." heeft onder 768px 75px boven en 100 onder in plaats van
 * 150/150; "Samen winnen." heeft op een tablet 100/100 in plaats van 150/150 en
 * onder 768px 40/40, wat het component daar zelf al doet.
 */
@media (max-width: 767px) {
  .reviewSlider {
    margin-block: 75px 100px;
  }
}

/* Alleen het tabletbereik: onder 768px wint de 40 van het component. */
@media (min-width: 768px) and (max-width: 1024px) {
  .teamSlider {
    margin-block: 100px;
  }
}