/* Lettergroottes en breedtes van de huidige (live) site, 2026-11-05.
   Bron: live templates/yootheme_custom/scss/custom.scss + YOOtheme-thema (html 18px, uk-container 1200 + 15/20/40px padding).
   Dit bestand staat bewust NIET in een @layer en wordt als laatste geladen, zodat het de Sketch-maten (in @layer utilities) overschrijft.
   Uitzetten = de <link> naar live-scale.css in site/snippets/head.php weghalen. */

/* ---------- Breedte: inhoud max. 1200px, zoals live .uk-container ---------- */
.container-content,
.wj-block .container-content { max-width: 1230px; padding-inline: 15px; }
@media (min-width: 640px) { .container-content, .wj-block .container-content { max-width: 1240px; padding-inline: 20px; } }
@media (min-width: 960px) { .container-content, .wj-block .container-content { max-width: 1280px; padding-inline: 40px; } }
/* projecten-/blogslider (live: inhoud start op de 1200-lijn) */
@media (min-width: 1024px) {
  .lv-cases:not(.lv-cases--blog) .lv-cases-inner { --sk-left: max(40px, calc((100vw - 1200px) / 2)); }
}

/* ---------- Paginakop (live .intro) ---------- */
/* titel: live clamp(2.5rem, 6vw, 6rem) op html 18px = 45–108px */
.sk-hero:not(.sk-hero--center) .sk-hero-inner > :is(h1, h2) {
  font-size: clamp(45px, 6vw, 108px); line-height: clamp(45px, 5.5vw, 99px); letter-spacing: normal;
}
/* ondertitel: live intro h2 clamp(1.8rem, 4vw, 3rem) = 32.4–54px */
.sk-hero:not(.sk-hero--center) .sk-hero-sub {
  font-size: clamp(32.4px, 4vw, 54px); line-height: clamp(32.4px, 3.5vw, 45px);
}
/* introtekst: live 18px */
.sk-hero:not(.sk-hero--center) .prose { font-size: 18px; line-height: 1.625; font-weight: 500; letter-spacing: normal; }
/* homepage-titel: live clamp(30px, 5vw, 77px) */
.sk-hero--center .sk-hero-inner > :is(h1, h2) { font-size: clamp(30px, 5vw, 77px); line-height: 1.2; }

/* ---------- Lopende tekst: live 18px / 29.25px, geen extra letterafstand ---------- */
.prose, .text-body,
.sk-ti .prose, .sk-story .prose, .usp-text,
.wj-block--faq .accordion-panel .prose { font-size: 18px; line-height: 1.625; letter-spacing: normal; }
.sk-ti .prose p + p, .sk-story .prose p + p { margin-top: 18px; }

/* ---------- Koppen in blokken (live: h2 clamp(30px,4vw,40px), blokkoppen max 46px) ---------- */
.text-display, .text-display-2 { font-size: clamp(45px, 6vw, 108px); line-height: 1; letter-spacing: normal; } /* buiten de paginakop */
.text-h1 { font-size: clamp(45px, 6vw, 83px); line-height: 1.05; }
.text-h2 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; }
.text-h3 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.text-h4 { font-size: clamp(30px, 4vw, 40px); line-height: clamp(35px, 4.5vw, 43px); }
.text-h5 { font-size: clamp(20px, 2vw, 26px); }
.text-h6 { font-size: clamp(20px, 2vw, 28px); }
/* oranje/roze subkop onder blokkop (live: 22px) */
.sk-ti .sk-ti-sub, .sk-story .sk-story-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.3; }

/* ---------- Lijsten en kaarten: live 18px ---------- */
.sk-ti .checklist li, .sk-ti .prose ul li, .sk-ti .sk-ti-listtitle,
.usp-check .checklist li, .sk-packages li, .lv-cslider-list li,
.sk-team .team-card p { font-size: 18px; }
.sk-packages li, .sk-packages .text-body, .lv-cslider-list li { letter-spacing: normal; }

/* ---------- Header: logo schaalt mee met de schermbreedte; menu pas tonen als het ruim past, anders hamburger ---------- */
@media (min-width: 960px) {
  .lh-header .lh-logo img { width: clamp(120px, 10.1vw, 194px); height: clamp(120px, 10.1vw, 194px); }
  .lh-header .lh-nav a, .lh-header .lh-nav button { white-space: nowrap; }
}
@media (max-width: 1399px) { .lh-header .lh-nav { display: none; } }

/* ---------- Mobiele balk op kleine telefoons (tot 300px): logo schaalt mee, knoppen compacter, 16px van de randen ---------- */
@media (max-width: 959px) {
  .lh-mobile .lh-container, .lh-offcanvas-top .lh-container { padding-left: 16px; padding-right: 16px; }
  .lh-mobile .lh-logo img, .lh-offcanvas-top .lh-logo img { width: clamp(64px, 22vw, 100px); height: clamp(64px, 22vw, 100px); }
}
@media (max-width: 419px) {
  .lh-mobile .lh-tools, .lh-offcanvas-top .lh-tools { gap: 6px; margin-top: 18px; }
  .lh-mobile .lh-toggler, .lh-offcanvas-top .lh-toggler { margin-right: 0; }
  .lh-mobile .lh-search, .lh-mobile .lh-search input:not(.is-expanded):not(:focus), .lh-mobile .lh-search button,
  .lh-offcanvas-top .lh-search, .lh-offcanvas-top .lh-search input:not(.is-expanded):not(:focus), .lh-offcanvas-top .lh-search button { width: 40px; height: 40px; }
  .lh-mobile .lh-search input, .lh-offcanvas-top .lh-search input { height: 40px; }
  .lh-mobile .lh-search input.is-expanded, .lh-mobile .lh-search input:focus { width: calc(100vw - 32px - 76px); }
  .lh-mobile-open { width: 34px; background-size: 28px; }
  /* kat + ballon iets kleiner zodat hij niet over de titel valt */
  .wj-neko { gap: 6px; }
  .wj-neko__cat { width: 54px; height: 54px; }
  .wj-neko__bubble { font-size: 11px; padding: 8px 10px; }
}

/* ---------- Reviewstippen op smalle telefoons: niet tot de rand (12 stippen = precies 300px) ---------- */
@media (max-width: 479px) {
  .sk-dots { flex-wrap: wrap; justify-content: center; gap: 8px; padding-inline: 16px; }
}

/* ---------- Pijlen en koppen op telefoons altijd min. 16px van de rand ---------- */
@media (max-width: 767px) {
  .wj-block--process-slider [data-slider-prev] { left: 16px; }
  .wj-block--process-slider [data-slider-next] { right: 16px; }
}
@media (max-width: 639px) {
  .lv-cslider-prev { left: -4px; }
  .lv-cslider-next { right: -4px; }
}
@media (max-width: 959px) {
  .lv-cases-inner > h2, .lv-cases-inner > h3 { padding-right: 20px; }
}
@media (max-width: 639px) {
  .lv-ander:not(.lv-ander--zz) .lv-ander-nav.lv-ander-prev { left: 16px; }
  .lv-ander:not(.lv-ander--zz) .lv-ander-nav.lv-ander-next { right: 16px; }
}
/* zeer smalle telefoons (< 360px): paginatitel iets kleiner zodat lange woorden niet tegen de rand komen */
@media (max-width: 359px) {
  .sk-hero:not(.sk-hero--center) .sk-hero-inner > :is(h1, h2) { font-size: 38px; line-height: 40px; }
}
@media (max-width: 1023px) { .wj-block--link-cards-collage h2 { white-space: normal; } }
@media (max-width: 359px) { .sk-hero--center .sk-hero-inner > :is(h1, h2) { font-size: 25px; } }
/* telefoons: inhoud 20px van de rand (live: 15px) */
@media (max-width: 639px) { .container-content, .wj-block .container-content, .lv-container { padding-inline: 20px; } }
/* pakketkaarten: module-chips mogen nooit uit de (smalle) kaart lopen */
@media (max-width: 1399px) {
  .sk-packages article ul.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .sk-packages article .sk-chip { padding: 0 10px; font-size: 16px; white-space: normal; height: auto; min-height: 38px; }
}

/* ---------- Foto + tekst (sk-ti) en verhaalkaart (sk-story) onder 1024px: foto nooit schermvullend hoog ---------- */
/* tablet (768–1023): foto en tekst naast elkaar, foto 2/5 */
@media (min-width: 768px) and (max-width: 1023px) {
  .sk-ti .sk-ti-grid:not(.sk-ti-grid--noimg) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 40px; align-items: center; }
  .sk-ti .sk-ti-grid--right:not(.sk-ti-grid--noimg) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .sk-ti .sk-ti-grid--right .sk-ti-media { order: 2; }
  .sk-ti.wj-ti-live .sk-ti-media { max-width: none; }
}
/* telefoon (< 768): foto over de breedte maar liggend bijgesneden, max. 60% van de schermhoogte */
@media (max-width: 767px) {
  .sk-ti .sk-ti-media img, .sk-ti.wj-ti-live .sk-ti-media img { aspect-ratio: 4 / 3; max-height: 60svh; object-fit: cover; }
  .sk-ti.wj-ti-live .sk-ti-media { max-width: none; }
}
/* verhaalkaart (o.a. teamcollage, "Webjongens & AI") onder elkaar: beeld liggend i.p.v. hoger dan het scherm */
@media (max-width: 1023px) {
  .sk-story .sk-story-media { aspect-ratio: 4 / 3; max-height: 70svh; min-height: 0; }
  .sk-story .sk-story-media img { height: 100%; }
}


/* ---------- Statement-blok (foto + grote kop, o.a. homepage "Branding, Content…") ---------- */
/* telefoon (< 768, onder elkaar): zoals afgesproken, niet meer aanpassen */
@media (max-width: 767px) {
  .lv-bloktext-img { max-width: 440px; }
  .lv-bloktext-img img { aspect-ratio: 565 / 680; height: auto; min-height: 0; } /* zelfde vorm als desktop */
  .lv-bloktext h2 { margin-top: -60px; }
}
/* naast elkaar (≥ 768): de desktop-opmaak (foto links, grote kop die over de foto valt) schaalt mee; bij 1400+ precies zoals voorheen (565 + 70 + 565) */
@media (min-width: 768px) {
  .lv-bloktext-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5.5vw, 70px); }
  .lv-bloktext-img img { height: auto; aspect-ratio: 565 / 680; min-height: 0; }
  .lv-bloktext h2 { margin-left: calc(-1 * clamp(60px, 10vw, 130px)); margin-top: calc(-1 * clamp(50px, 7.2vw, 100px)); font-size: clamp(48px, 7.6vw, 110px); line-height: .955; }
}
@media (min-width: 768px) and (max-width: 959px) {
  main .lv-bloktext, .lv-bloktext { padding-top: clamp(120px, 15vw, 200px) !important; } /* ruimte voor de kop die boven de foto uitsteekt */
}