/*
 * Transiënt Groep – v8.0.8 – woorden netjes afbreken.
 *
 * De browser breekt niet meer zelf woorden af. Tot en met 8.0.7 stond dat aan voor alle tekst in kaarten,
 * kolommen en rijen; op telefoons werden daardoor ook gewone woorden midden in het woord afgebroken.
 * Een woord wordt nu alleen nog afgebroken als het echt niet past, en dan op een nette plek; dat regelt
 * assets/js/woordafbreking-v808.js. Als allerlaatste vangnet mag een woord dat nergens past binnen zijn
 * kader breken, zodat de pagina nooit zijwaarts gaat schuiven.
 */
html body.tg-phase1 :is(.kolom,.sector,.stap,.rij,[class*="-card"],[class*="kaart"]) :is(h2,h3,h4,p,li),
html body.tg-v52-bliksem .tg-bl-timeline-card p{
  -webkit-hyphens:manual !important;
  hyphens:manual !important;
}
main :is(h1,h2,h3,h4,p,li,summary,figcaption,blockquote),
footer :is(p,li,a){
  overflow-wrap:break-word;
}

/* Koppen op telefoons: iets kleiner op smalle schermen, zodat het langste woord van de site
   ("Bliksembeveiliging") op één regel past. Bij 34 px was dat woord op een telefoon van 390 px breed
   vier pixels te lang en viel de laatste letter op een nieuwe regel. Vanaf ruim 400 px breed is de
   grootte weer zoals voorheen. */
@media (max-width:767px){
  html body.tg-phase1 .lead{font-size:clamp(25px,calc((100vw - 76px) / 9.65),34px) !important;}
  html body.tg-phase1 :is(.donker,.oproep) .lead{font-size:clamp(28px,calc((100vw - 76px) / 8.63),38px) !important;}
}

/* Verzekeringsinspecties, inspectiemomenten: op de smalste telefoons (320 px) staken de zes kaarten
   rechts buiten beeld, waardoor de pagina zijwaarts kon schuiven. */
@media (max-width:1024px){
  .ti-modern-moments__grid{grid-template-columns:minmax(0,1fr) !important;}
  .ti-modern-moment{min-width:0;}
  .ti-modern-moment__text{min-width:0;}
}

/* Stappenkaarten op telefoon (startpagina "Werkwijze" en Bliksembeveiliging "Onze aanpak"): de vaste
   minimale hoogte is bedoeld voor kaarten naast elkaar. Onder elkaar gaf die een lege strook onder
   de tekst van iedere kaart. */
@media (max-width:767px){
  html body.home .home-werkwijze .stap{min-height:0 !important;}
  html body.tg-bl-v47 .tg-bl-timeline-card{min-height:0 !important;}
}

/* "Verder lezen" op Aarding en Bliksembeveiliging: dezelfde losse, afgeronde kaarten als op de andere
   pagina's. Deze twee pagina's hadden nog het oude aaneengesloten raster met rechte hoeken. */
html body.tg-phase1 main .verder:not([class*="readmore"]):not(.verder--advies):not(.verder--risico),
html body.tg-phase1 main .verder.tg-v52-readmore-original,
html body.tg-v52-bliksem main .verder{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
html body.tg-phase1 main .verder:not([class*="readmore"]):not(.verder--advies):not(.verder--risico) > a,
html body.tg-phase1 main .verder.tg-v52-readmore-original > a,
html body.tg-v52-bliksem main .verder > a{
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  background:#fff !important;
  border:1px solid rgba(34,54,88,.12) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 12px 28px rgba(22,35,63,.055) !important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
html body.tg-phase1 main .verder:not([class*="readmore"]):not(.verder--advies):not(.verder--risico) > a:hover,
html body.tg-phase1 main .verder.tg-v52-readmore-original > a:hover,
html body.tg-v52-bliksem main .verder > a:hover{
  transform:translateY(-1px);
  background:#fff !important;
  color:inherit !important;
  border-color:rgba(201,162,75,.30) !important;
  box-shadow:0 15px 32px rgba(22,35,63,.08) !important;
}
@media (max-width:1024px){
  html body.tg-phase1 main .verder:not([class*="readmore"]):not(.verder--advies):not(.verder--risico),
  html body.tg-phase1 main .verder.tg-v52-readmore-original,
  html body.tg-v52-bliksem main .verder{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;}
}
@media (max-width:767px){
  html body.tg-phase1 main .verder:not([class*="readmore"]):not(.verder--advies):not(.verder--risico),
  html body.tg-phase1 main .verder.tg-v52-readmore-original,
  html body.tg-v52-bliksem main .verder{grid-template-columns:minmax(0,1fr) !important;gap:12px !important;}
}