/* =========================================================================
   Vesmo werk-strip.

   De gepinde rij die zijwaarts schuift terwijl je verticaal scrolt, naar het
   voorbeeld van de .type-section op eindhovendesigndistrict.com. Alleen de
   opmaak; het mechanisme staat in vesmo-strip.js en de markup in
   inc/werk-strip.php.

   Alleen geregistreerd in functions.php; de shortcode zet dit bestand pas in de
   wachtrij als hij ook echt gebruikt wordt.

   MATEN. De kantlijn van het spoor is sinds 08-09-2026 var(--vs-kant) (56,
   32, 24, 20), dezelfde als elke andere sectie; tot dan stond hier een vaste
   30px uit augustus, toen de rest van de pagina ook op 30 stond, en onder
   1023px viel de kantlijn van de typewand zelfs helemaal weg (tekst op de
   schermrand, gemeten op een telefoon). De reisafstand is de spoorbreedte min
   de vensterbreedte; vesmo-strip.js meet die zelf (scrollWidth), dus een
   andere kantlijn vraagt hier geen rekenwerk.

   --vs-strip-loop is de pinlengte en daarmee de enige knop aan het gevoel. De
   verhouding horizontaal-per-verticaal komt daarmee op 0,87 bij 1440, 1,00 bij
   1280 en 0,97 bij 1024. Eindhoven zit op 0,93 (2516px reis over 2700px pin),
   dus dat is dezelfde tred.

   PER 02-09-2026 ZIJN DE WAARDEN HIERONDER ALLEEN NOG TERUGVAL. vesmo-strip.js
   meet de echte reis (spoor.scrollWidth min pin.clientWidth) en zet die als
   inline --vs-strip-loop op de sectie, bij het opstarten en bij elke resize.
   Reden: de reis krimpt naarmate het venster groeit, want het spoor heeft een
   vaste breedte. Bij 1440 is hij 1152 en klopt de 1200 hieronder toevallig;
   bij 2048 is hij nog 547 en hield de pin dus 653px langer vast dan er te zien
   was. Alle drie de kaarten staan daar al naast elkaar, dus dat las als
   anderhalf scherm stilstand.

   Deze waarden blijven staan voor het geval het script niet draait. Dan is de
   strip te lang op een breed scherm, en dat is beter dan een pin van nul.
   ========================================================================= */

:root {
  --vs-strip-loop: 1500px;   /* terugval, 1024 tot 1279 */
  /* --vs-strip-hoogte is per 30-08-2026 (derde ronde) vervallen. Het was de
     hoogte van de band waarin de zigzag zich uitspreidde; die zigzag is weg en
     het spoor is nu zo hoog als de langste kaart. Zie .vs-strip__spoor. */
}

@media only screen and (min-width: 1280px) {
  :root {
    --vs-strip-loop: 1200px;   /* terugval */
  }
}

/* --- de drie lagen -------------------------------------------------------- */

/* Wit en niet meer het gebroken wit, per 30-08-2026 (derde ronde). De kaarten
   hierin zijn wit met een haarlijn, precies als de pakketkaarten onderaan de
   pagina, en die staan daar ook op een witte sectie (gemeten: .vs-pak is
   rgb(255,255,255)). Witte kaart op wit vlak met alleen een randje is op deze
   site dus geen experiment maar het bestaande patroon.

   LET OP: de boog onderaan de hero heeft dezelfde kleur, want die boog IS deze
   sectie die omhoog komt. Wijzigt de een, dan de ander. Zie .vs-hero__boog. */
.vs-strip {
  position: relative;
  background-color: var(--vs-wit);
}

/* De rij eromheen krijgt van WPBakery standaard padding-top-120 en
   padding-bottom-120 mee, wat in dit thema neerkomt op 150px. Dat staat op wit
   terwijl de strip grijs is, dus er liep een witte strook van 150px tussen de
   band en het blauwe slotvlak eronder. De banden horen naadloos in elkaar over
   te lopen (blok 30 van vesmo-style.css), vandaar deze regel. Het thema kent
   geen padding-top-0, anders had het een attribuut in het bouwscript kunnen
   zijn. Vandaar row_class="vs-strip-rij" op die rij. */
.tu-global-sec.vs-strip-rij > div {
  padding-top: 0;
  padding-bottom: 0;
}

.vs-strip--pin {
  height: calc(100vh + var(--vs-strip-loop));
}

.vs-strip__pin {
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  /* Ruimte bovenaan omdat Locomotive een sticky element met de bovenkant tegen
     y=0 plakt zonder offset; die marge moet dus in het element zelf zitten. Zie
     blok 34 in vesmo-paginas.css, waar het werkwijze-label hetzelfde doet.

     Was 100px voor de vaste witte kopbalk. Die is op 30-08 vervangen door het
     zwevende Tumar-logo, dat tot 43px komt, dus 60px volstaat. De 40px die dat
     oplevert is precies wat de hogere kaart nodig heeft. */
  padding: 60px 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.vs-strip__spoor {
  display: flex;
  align-items: stretch;
  gap: 60px;
  width: max-content;
  /* height: auto sinds de derde ronde van 30-08-2026. Er stond
     min(--vs-strip-hoogte, 100%) omdat de zigzag een band nodig had om zich in
     uit te spreiden. Die zigzag is weg, en met een vaste band viel de knop van
     de hogere pakketkaart-variant buiten .vs-strip__pin, dat op overflow:hidden
     staat. Met auto is het spoor zo hoog als de langste kaart en trekt
     align-items:stretch op .vs-strip__kaarten ze alsnog gelijk. */
  height: auto;
  padding: 0 var(--vs-kant);
  box-sizing: content-box;
  will-change: transform;
}

.vs-strip__kaarten {
  display: flex;
  align-items: stretch;
  gap: 60px;
}

/* GEEN ZIGZAG MEER sinds de tweede ronde van 30-08-2026. Hier stonden twee
   nth-child-regels die oneven kolommen bovenaan en even kolommen onderaan zetten,
   naar het voorbeeld van Eindhoven. Daan wil alle items even hoog.

   Let op waar de knop zit: de kaarten zijn kleinkinderen van het spoor, want ze
   staan in .vs-strip__kaarten dat zelf één flex-kind van het spoor is.
   align-items op het spoor raakt ze dus niet; het moet op .vs-strip__kaarten,
   en dat staat al op stretch. Door de twee nth-child-regels weg te halen valt
   die stretch vanzelf terug op zijn plek. */
.vs-strip__intro {
  align-self: stretch;
}

/* --- de introkolom -------------------------------------------------------- */

.vs-strip__intro {
  width: 380px;
  flex: 0 0 380px;
}

.vs-strip__label {
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-muted);
}

.vs-strip__kop {
  margin: 16px 0 0;
  font-family: var(--vs-font);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-strip__tekst {
  margin: 20px 0 0;
  font-family: var(--vs-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--vs-tekst);
}

.vs-strip__knop {
  display: inline-block;
  margin-top: 28px;
  padding: 16px 32px;
  border: 1px solid var(--vs-ink);
  border-radius: var(--vs-radius-pill);
  font-family: var(--vs-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--vs-ink);
  text-decoration: none;
  text-transform: none;
  transition: background-color .25s ease, color .25s ease;
}

.vs-strip__knop:hover {
  background-color: var(--vs-ink);
  color: #ffffff;
}

/* --- de kaarten ----------------------------------------------------------- */

/* DE KAART IS VERTICAAL EN WIT sinds de tweede ronde van 30-08-2026. Hiervoor
   was het een liggende kaart van 620px met het beeld links en een tekstkolom van
   280px ernaast. Nu: beeld boven, tekst eronder, knop onderaan.

   flex-direction column met de knop op margin-top:auto is de hele reden dat dit
   een flexkolom is en geen stapel blokken: zo staan de knoppen van alle drie de
   kaarten op één lijn, ook als de ene samenvatting twee regels langer is.

   De schaduw is niet nieuw bedacht. Het zijn de vier gestapelde lagen uit
   assets/work-ticker.css r. 70-75, letterlijk de schaduw die op velvele.studio
   onder de werkkaarten ligt en die al in dit thema staat. Eén bron, geen tweede
   recept. Let wel: op 30-08 zijn schaduwen elders juist overal weggehaald omdat
   elk beeld een zwevende kaart werd; hier is het een bewuste uitzondering. */
/* IN DE STIJL VAN DE PAKKETKAART, per 30-08-2026 (derde ronde). Die staat in
   vesmo-home.css als .vs-pkaart: wit, een haarlijn van 1px, RECHTE hoeken, geen
   schaduw, 40px binnenmarge, en de knop onderaan over de volle breedte.

   Dat vervangt de vier schaduwlagen en de 8px hoeken van eerder vandaag. Bewust:
   de twee kaartsoorten staan op dezelfde pagina en moesten één familie worden.

   overflow:hidden blijft, want het beeld loopt tot de rand en zou anders over de
   haarlijn heen vallen. */
.vs-strip__kaart {
  width: 440px;
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--vs-line);
  border-radius: 0;
  background-color: var(--vs-wit);
  box-shadow: none;
  overflow: hidden;
}

.vs-strip__beeld {
  width: 100%;
  flex: 0 0 auto;
  /* aspect-ratio en niet height: dan verschuift er niets als een beeld
     binnenkomt, en Locomotive hoeft zijn scrolllimiet niet te herzien. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--vs-band);
}

.vs-strip__beeld img,
.vs-strip__blanco {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Een schermafdruk van een site hoort van boven te beginnen. Het beeld van
     VUSK is 1200x1500 staand; met de standaard center-uitsnede zou je precies
     de kop van die site kwijt zijn. */
  object-position: center top;
  /* Voor de hover-zoom hieronder. */
  transition: transform .6s var(--vs-ease);
}

/* DE MOCKUP OP DE KAART (06-09-2026). Een studio-mockup op een doorzichtige
   ondergrond hoort niet gesneden te worden: contain in plaats van cover, met
   lucht eromheen en het papier van de site als ondergrond, zodat de kaart
   hetzelfde beeld toont als /diensten/ en de klantband. Zie werk-strip.php. */
.vs-strip__beeld--mockup {
  padding: 7% 6%;
  box-sizing: border-box;
  background-color: var(--vs-papier);
}

.vs-strip__beeld--mockup img {
  object-fit: contain;
  object-position: center;
}

/* HOVER-ZOOM, 3% en niet meer; zelfde recept als de tegels op /werk/. De
   kaartonthulling transformt de kaart en niet de img, dus geen conflict. */
@media (hover: hover) {
  .vs-strip__kaart:hover .vs-strip__beeld img {
    transform: scale(1.03);
  }
}

.vs-strip__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: auto;
  padding: 40px;
}

.vs-strip__kaartkop {
  margin: 0;
  font-family: var(--vs-font);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

/* Drie regels en niet meer. De samenvattingen komen uit het portfolio en lopen
   van 117 tot 132 tekens; in deze kolom is dat net drie regels. Eén langere
   samenvatting duwde de knop anders buiten de kaart, en .vs-strip__kaart staat
   op overflow:hidden, dus die knop was dan gewoon weg. Gemeten, niet bedacht:
   de twee wachtende kaarten liepen 5px over. */
.vs-strip__kaarttekst {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 12px 0 32px;
  font-family: var(--vs-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--vs-tekst);
}

/* Het mono-nummer boven de titel, zoals op de kaart in de handoff. */
.vs-strip__nr {
  margin: 0 0 8px;
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-accent);
}

/* DE KNOP OP DE KAART. Kleinere variant van .vs-strip__knop uit de introkolom.
   margin-top:auto duwt hem naar de onderkant van de kaart, zodat de knoppen van
   alle drie de kaarten op één lijn staan ongeacht hoe lang de tekst erboven is.

   De uitgeschakelde variant is een <span> en geen <a>. Een verwijzing die nergens
   heen gaat maar wel in de tabvolgorde staat en wel een pointer toont, is een
   valkuil op zich: met de toets bereik je hem en er gebeurt niets. Een span heeft
   dat probleem niet, en aria-disabled vertelt een schermlezer wat er aan de hand
   is. */
/* Dezelfde knop als op de pakketkaart: 56px hoog, pil, haarlijnrand, volle
   breedte, en 32px lucht erboven via margin-top:auto zodat de drie knoppen op
   één lijn eindigen.

   Bewust een eigen klasse en niet .vs-hknop hergebruiken: die staat in
   vesmo-home.css en dat bestand laadt alleen op de homepage, terwijl deze strip
   op elke pagina inzetbaar moet blijven. De maten zijn wel één op één
   overgenomen; wijzigt .vs-hknop, dan hier mee. */
.vs-strip__kaartknop {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  margin-top: auto;
  padding: 0 24px;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-pill);
  background-color: transparent;
  font-family: var(--vs-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--vs-ink);
  text-decoration: none;
  text-transform: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

a.vs-strip__kaartknop:hover,
a.vs-strip__kaartknop:focus-visible {
  background-color: var(--vs-inkt);
  border-color: var(--vs-inkt);
  color: var(--vs-wit);
}

.vs-strip__kaartknop--uit {
  border-color: var(--vs-line);
  color: var(--vs-tekst);
  cursor: default;
}

/* De verwijzing met een vierkant blokje ervoor en de groeiende onderlijn,
   dezelfde lijn als in de voettekst (blok 38 van vesmo-style.css). */
.vs-strip__link {
  display: inline-flex;
  align-items: baseline;
  margin-top: 20px;
  font-family: var(--vs-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vs-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 1.15em;
  transition: background-size .6s cubic-bezier(.165, .84, .44, 1);
}

.vs-strip__link:hover {
  background-size: 100% 1px;
}

.vs-strip__link:before {
  content: '';
  display: inline-block;
  width: .875em;
  height: .875em;
  margin-right: .7em;
  background-color: var(--vs-accent);
  flex: 0 0 auto;
}

/* De onthulling per kaart. Bewust pas actief zodra vesmo-strip.js de klasse
   vs-strip--klaar heeft gezet: draait dat script niet, dan staan de kaarten
   gewoon zichtbaar in plaats van op opacity 0. Dat is precies de valkuil waar
   het thema zelf op stukloopt, en die maken we hier niet na. */
.vs-strip--klaar .vs-strip__kaart {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.17, .85, .438, .99),
              transform .8s cubic-bezier(.17, .85, .438, .99);
}

.vs-strip--klaar .vs-strip__kaart.is-zichtbaar {
  opacity: 1;
  transform: none;
}

/* --- geen pin: onder 1024px en bij prefers-reduced-motion ------------------ */

/* Geen pin en geen JavaScript. Het spoor wordt een veegbare rij met peek, net
   als Eindhovens Flickity-variant maar zonder bibliotheek. De teller "1 / 3"
   die zij eronder zetten nemen we niet over: dat vraagt JavaScript en de peek
   vertelt hetzelfde. Dezelfde tak geldt voor .vs-strip--vrij, de uitweg als de
   gepinde variant zou trillen. */
@media only screen and (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .vs-strip--pin {
    height: auto;
  }
}

@media only screen and (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .vs-strip__pin {
    height: auto;
    min-height: 0;
    padding: 60px 0;
    display: block;
    overflow: visible;
  }

  .vs-strip__spoor {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    transform: none !important;
  }

  .vs-strip__intro {
    width: auto;
    padding: 0 var(--vs-kant);
    margin-bottom: 32px;
  }

  .vs-strip__kop {
    font-size: 32px;
  }

  .vs-strip__kaarten {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
    padding: 0 var(--vs-kant);
    /* Zonder scroll-padding snapt de eerste kaart naar x = 0 en is de
       kantlijn weggescrold voordat iemand iets deed (valkuil 34). */
    scroll-padding-inline: var(--vs-kant);
  }

  .vs-strip__kaart {
    width: min(78vw, 300px);
    flex: 0 0 min(78vw, 300px);
    flex-direction: column;
    align-items: stretch;
    align-self: auto;
    gap: 16px;
    scroll-snap-align: start;
  }

  .vs-strip__kaarten > :nth-child(odd),
  .vs-strip__kaarten > :nth-child(even) {
    align-self: auto;
  }

  .vs-strip__beeld,
  .vs-strip__body {
    width: auto;
    flex: 0 0 auto;
  }

  .vs-strip__kaartkop {
    font-size: 23px;
  }

  .vs-strip__kaarttekst {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Zonder pin is er geen voortgang om de onthulling aan op te hangen. */
  .vs-strip--klaar .vs-strip__kaart {
    opacity: 1;
    transform: none;
  }
}

/* .vs-strip--vrij valt op elke breedte in de veegbare tak. */
.vs-strip--vrij .vs-strip__pin {
  height: auto;
  min-height: 0;
  padding: 60px 0;
  display: block;
  overflow: visible;
}

.vs-strip--vrij .vs-strip__spoor {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  transform: none !important;
}

.vs-strip--vrij .vs-strip__intro {
  width: auto;
  max-width: 620px;
  padding: 0 var(--vs-kant);
  margin-bottom: 40px;
}

.vs-strip--vrij .vs-strip__kaarten {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--vs-kant);
  scroll-padding-inline: var(--vs-kant);
}

.vs-strip--vrij .vs-strip__kaart {
  scroll-snap-align: start;
  align-self: auto;
}

/* -------------------------------------------------------------------------
   De typewand en de voortgangsbalk (30-08-2026, tweede herontwerp)

   Uit de handoff, Vesmo Homepage.dc.html r. 302-359. De wand is het eerste ding
   in het spoor: twee regels op ooghoogte die als eerste in beeld staan en met
   het spoor mee naar links schuiven. Hij blijft dus niet plakken; dat is in de
   handoff ook zo.

   De maten schalen op vh en niet op vw, want de wand moet passen bij de hoogte
   van het gepinde venster en niet bij de breedte van het spoor.
   ------------------------------------------------------------------------- */

.vs-strip__wand {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-right: 70px;
}

.vs-strip__wand-klein,
.vs-strip__wand-groot {
  margin: 0;
  font-family: var(--vs-kop);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  white-space: nowrap;
  color: var(--vs-ink);
}

.vs-strip__wand-klein {
  font-size: clamp(30px, 6.4vh, 58px);
  line-height: 1.1;
}

.vs-strip__wand-groot {
  font-size: clamp(88px, 21vh, 190px);
  line-height: .9;
  /* line-height onder 1 knipt staarten in een blok met overflow; hier staat
     geen huls omheen, maar de wand zelf zit wél in .vs-strip__pin met
     overflow:hidden. Vandaar de ruimte eronder. Valkuil 10. */
  padding-bottom: .06em;
}

/* De balk onderin het gepinde venster. Meet hoe ver het spoor is; vesmo-strip.js
   zet de breedte in dezelfde lus die ook het spoor verschuift. */
.vs-strip__voortgang {
  position: absolute;
  left: var(--vs-kant, 56px);
  right: var(--vs-kant, 56px);
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  pointer-events: none;
}

.vs-strip__baan {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--vs-line);
}

.vs-strip__balk {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 1px;
  background-color: var(--vs-ink);
}

/* De mono-regel op een kaart die nog geen schermafdruk heeft. Staat op de plek
   van de verwijzing, zodat de kaart even hoog blijft als de andere. */
/* De mono-regel bij een project dat nog niet online is. Staat boven de knop en
   krijgt daarom geen margin-top:auto; die zit op de knop zelf. */
.vs-strip__wacht {
  margin: 16px 0 32px;
  color: var(--vs-tekst);
}

/* Zonder pin schuift er niets, dus dan hoort er ook geen balk te staan. En als
   de vrije tak aangaat, stapelt de wand mee in plaats van ernaast. */
.vs-strip--vrij .vs-strip__voortgang {
  display: none;
}

@media only screen and (max-width: 1023px) {
  /* DE BALK BLIJFT STAAN, MAAR ONDER DE KAARTEN (01-09-2026).

     Hij stond hier op display:none. Op een telefoon is de rij een veegbare
     scroller met scroll-snap, en dat was aan niets te zien: de tweede kaart
     stond half in beeld tegen de schermrand en las als een afsnijfout in plaats
     van als "er staat hier meer". Een halve kaart is pas een uitnodiging als er
     iets bij staat dat zegt waar je bent.

     position: static, want de absolute plaatsing hoort bij de gepinde variant;
     op mobiel is .vs-strip__pin height:auto en zou bottom:26px hem over de
     kaarten heen leggen. De vulling volgt --vs-kant, sinds 08-09-2026 net als
     de kaartenrij zelf (die stond op een vaste 20px), zodat de baan precies
     onder de eerste kaart begint. */
  .vs-strip__voortgang {
    position: static;
    margin: 28px var(--vs-kant, 20px) 0;
  }

  /* Het spoor heeft hier geen padding meer, dus de wand zet zijn eigen
     kantlijn; tot 08-09-2026 stond "Bekijk" op een telefoon op x = 0. */
  .vs-strip__wand {
    align-self: flex-start;
    margin: 0 0 40px;
    padding: 0 var(--vs-kant);
  }

  .vs-strip__wand-klein {
    font-size: clamp(20px, 5.4vw, 26px);
  }

  .vs-strip__wand-groot {
    font-size: clamp(52px, 14vw, 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vs-strip__voortgang {
    display: none;
  }

  .vs-strip__beeld img,
  .vs-strip__kaart:hover .vs-strip__beeld img {
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   Korte vensters

   De kaart is met 40px marge, een 3:2-beeld en drie regels tekst ongeveer 668px
   hoog. De werkruimte in de pin is de vensterhoogte min 100px, dus onder een
   venster van ongeveer 780px past hij niet meer en knipt overflow:hidden de
   onderkant eraf. Gemeten op 700px: 34px te veel.

   Dit is een breekpunt op HOOGTE en niet op breedte, want het probleem is de
   hoogte. De verticale tak van de strip hangt aan de breedte (1024px) en die
   helpt hier dus niet: een venster van 1440 bij 700 blijft gewoon gepind.

   Drie dingen tegelijk, samen ruim 90px: kleinere marge, een platter beeld en
   twee regels tekst in plaats van drie.
   ------------------------------------------------------------------------- */

@media only screen and (max-height: 780px) {
  .vs-strip__body {
    padding: 28px;
  }

  .vs-strip__beeld {
    aspect-ratio: 16 / 9;
  }

  .vs-strip__kaarttekst {
    -webkit-line-clamp: 2;
    margin-bottom: 24px;
  }

  .vs-strip__wacht {
    margin: 12px 0 24px;
  }

  .vs-strip__kaartknop {
    height: 50px;
  }
}