/* ============================================================
   lu-hero.css — sectie 1 van /live-chat-uitbesteden/.
   Bouwt op widgets/shared/bconnect-lu.css (handle `bconnect-lu`).
   Bron: upgrade-uitbesteden.css, "1 HERO".

   `.lu-h1`, `.lu-eyebrow` en `.lu-in` staan in de gedeelde stylesheet.
   Hier de achtergrond, het raster, het chatvenster en de twee keyframes.
   ============================================================ */

.lu-hero { padding: clamp(48px, 6vw, 92px) 0 clamp(36px, 4vw, 56px); }
.lu-hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(720px 400px at 86% 14%, rgba(35, 1, 251, .065), transparent 60%), radial-gradient(560px 320px at 0% 62%, rgba(168, 2, 144, .045), transparent 55%), #fff; }
.lu-hero-bg::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(20, 20, 100, .14) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(58% 55% at 80% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(58% 55% at 80% 40%, #000 0%, transparent 72%); opacity: .55; }
.lu-hero > .container { position: relative; z-index: 1; }
.lu-hero-grid { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.lu-hero-copy { display: block; min-width: 0; box-sizing: border-box; }
.lu-hero-sub { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-text-muted); margin: 20px 0 0; max-width: 36em; text-wrap: pretty; }
.lu-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }

/* ---- het chatvenster ---------------------------------------
   `.lu-hw` is `width: 100%` met een plafond van 430px en staat als enig
   kind in een gecentreerde flexcontainer. Er staat dus GEEN kaart met
   een vaste breedte naast, en dat is precies waarom de stapelgrens hier
   op 1100px mag liggen: het venster kan niet leeggedrukt worden. Bij
   ac-hero stond `.ac-hcard` op `flex: 0 0 280px` naast een `.ac-hw` met
   `flex: 1 1 auto`, waardoor het venster het hele tekort slikte en de
   tekst afkapte tussen 981 en 1300px (commit 59bda83). Zet hier dus geen
   tweede element met een vaste breedte in `.lu-herofig`. */
.lu-herofig { position: relative; width: 100%; box-sizing: border-box; display: flex; justify-content: center; padding: 24px 0; }
.lu-herofig-blob { position: absolute; width: 78%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 56% 44% 48% 52% / 52% 48% 52% 48%; background: radial-gradient(circle, #e8e5f8 0%, #e8e5f8 56%, rgba(232, 229, 248, 0) 78%); filter: blur(8px); pointer-events: none; }
.lu-hw { position: relative; z-index: 2; display: block; width: 100%; max-width: 430px; min-width: 0; box-sizing: border-box; background: #fff; border: 1px solid #E3DFF5; border-radius: 12px; box-shadow: 0 18px 46px rgba(20, 20, 100, .14); }

.lu-hw-head { background: #141464; border-radius: 11px 11px 0 0; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.lu-hw-av { width: 38px; height: 38px; flex: none; border-radius: 999px; overflow: hidden; background: #ECEDFB; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.lu-hw-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lu-hw-name { font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: #fff; line-height: 1.1; }
.lu-hw-status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255, 255, 255, .86); line-height: 1.1; }
.lu-hw-status i { width: 8px; height: 8px; flex: none; border-radius: 999px; background: #39B54A; box-shadow: 0 0 0 3px rgba(57, 181, 74, .25); }
.lu-hw-body { padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.lu-hw-row { display: flex; }
.lu-hw-row.is-user { justify-content: flex-start; }
.lu-hw-row.is-op { justify-content: flex-end; }
.lu-hw-bub { max-width: 84%; font-size: 14.5px; line-height: 1.5; padding: 10px 14px; border-radius: 14px; text-wrap: pretty; }
.lu-hw-bub.is-user { background: #F4F2FB; color: var(--c-navy); border-bottom-left-radius: 4px; }
.lu-hw-bub.is-op { background: #141464; color: #fff; border-bottom-right-radius: 4px; }
.lu-hw-typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 15px; border-radius: 14px; background: #141464; }
.lu-hw-typing i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .7); animation: lu-hw-dot 1.3s var(--ease) infinite; }
.lu-hw-typing i:nth-child(2) { animation-delay: .18s; }
.lu-hw-typing i:nth-child(3) { animation-delay: .36s; }
.lu-hw-foot { padding: 0 16px 16px; }
.lu-hw-input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #E2E4EC; border-radius: 999px; padding: 9px 9px 9px 16px; font-size: 13px; color: #9A9AAE; }
.lu-hw-send { width: 28px; height: 28px; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-size: 14px; }

/* ---- beweging -----------------------------------------------
   Eigen keyframe-namen. `lu-hw-float` en `lu-hw-dot` bestaan nergens
   anders in het thema; `logo-marquee` wel (hero.css, lg-hero.css,
   mr-hero.css, au-hero.css), maar die gebruikt deze widget niet. */
@media (prefers-reduced-motion: no-preference) {
	.lu-hw { animation: lu-hw-float 6s var(--ease) infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
	.lu-hw-typing i { animation: none; }
}
@keyframes lu-hw-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes lu-hw-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 1100px) {
	.lu-hero-grid { grid-template-columns: 1fr; }
	.lu-hero-copy { max-width: 720px; }
}

@media (max-width: 768px) {
	.lu-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   HARDENING

   1. De avatar. `.lu-hw-av` klipt met overflow hidden en de <img>
      daarbinnen moet de cirkel vullen. Het thema zet elders
      `img { max-width: 100% }` en Elementor zet op zijn beurt
      `img { height: auto }`, en dat laatste maakt van de cirkel een
      ovaal zodra het bronbeeld niet vierkant is — en dat is het niet:
      lu-chat-avatar.jpg is 160x240. `height: 100%` moet dus winnen van
      `height: auto` op (0,1,1). `.elementor-widget-bconnect_lu_hero`
      erbij brengt het op (0,3,1) en dat is genoeg; !important is hier
      niet nodig.

   2. De knoppen in `.lu-hero-actions` zijn `.btn` uit de gedeelde laag
      en worden hier niet overschreven, op de mobiele volle breedte na.
   ============================================================ */
.elementor-widget-bconnect_lu_hero .lu-hw-av img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }