/* ==========================================================================
   DHB Camera's en DHB Sensoren

   Gegenereerd uit het ontwerp (dhb-sectie-cameras.html, dhb-sectie-sensoren.html). Geen enkele waarde is
   overgetypt; wie iets wil veranderen past het ontwerp aan en bouwt opnieuw.

   Opbouw:
     1. de kleuren en letters van het ontwerp, als variabelen op de omhulling
     2. de omhulling zelf: wat in het ontwerp op <body> staat
     3. een regel die thema en kit terugdraait voor kale elementen
     4. de regels van het ontwerp, elk met dezelfde omhulling ervoor
     5. een paar aanvullingen voor keuzes die het ontwerp niet kent

   De namen beginnen met dhbs- in plaats van dhb-: .dhb-btn en .dhb-eyebrow
   bestaan al elders in de plugin en mogen hier niet doorheen lekken.
   ========================================================================== */


/* 1. kleuren en letters */
.dhbs{--dhbs-orange:#FF4400; --dhbs-orange-text:#D93A00; --dhbs-orange-soft:#FFF0EA; --dhbs-ink:#161616; --dhbs-ground:#F5F3F0; --dhbs-white:#FFFFFF; --dhbs-line:#E7E3DE; --dhbs-muted:#5F5A55; --dhbs-muted-dark:#C4BEB7; --dhbs-display:'Montserrat',system-ui,sans-serif; --dhbs-body:'Poppins',system-ui,sans-serif; --dhbs-radius:28px}

/* 2. de omhulling: wat in het ontwerp op <body> staat */
.dhbs.dhbs.dhbs{font-family:var(--dhbs-body);color:var(--dhbs-ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:normal;font-weight:400;font-style:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;text-align:left;text-indent:0;text-shadow:none;white-space:normal;font-variant:normal;overflow-wrap:normal;word-break:normal;hyphens:manual}

/* 3. thema en kit terugdraaien voor kale elementen. Lichter dan elke
   regel hieronder, zwaarder dan wat een kit schrijft. */
.dhbs.dhbs.dhbs :is(div,section,article,figure,figcaption,h1,h2,h3,h4,h5,h6,p,a,span,strong,b,em,i,small,ul,ol,li,hr,img,br){all:revert}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten *{box-sizing:border-box}

/* 5a. aanvulling: een link op een plek waar het ontwerp er geen heeft */
.dhbs.dhbs.dhbs.dhbs-w-productkaarten :where(p a:not([class])){color:var(--dhbs-orange-text);font-weight:600;text-underline-offset:3px}

/* 4. het ontwerp */
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-sprite{position:absolute;width:0;height:0;overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-section a:focus-visible{outline:3px solid var(--dhbs-orange);outline-offset:3px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-pill-label{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 14px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:999px;font-size:14px;font-weight:500}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-pill-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-h2{margin:0;font-family:var(--dhbs-display);font-weight:800;font-size:clamp(34px,4.2vw,52px);line-height:1.1;letter-spacing:-0.02em}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-h2 em{font-style:normal;color:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-checks li{display:flex;gap:12px;align-items:flex-start}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-check{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--dhbs-orange-soft);color:var(--dhbs-orange-text);display:flex;align-items:center;justify-content:center}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-check svg{width:14px;height:14px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .is-featured .dhbs-check{background:var(--dhbs-orange);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras{padding:96px 0;background:var(--dhbs-white)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:end}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__head .dhbs-pill-label{background:var(--dhbs-ground);margin-bottom:20px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__intro{margin:0;font-size:18px;line-height:1.7;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__intro strong{font-weight:600;color:var(--dhbs-orange-text)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__grid{margin-top:72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam{position:relative;display:flex;flex-direction:column;background:var(--dhbs-ground);border:1px solid var(--dhbs-line);border-radius:var(--dhbs-radius);overflow:hidden}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__photo{position:relative;aspect-ratio:5/3;background:#1E1E1E;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__ph{display:flex;flex-direction:column;align-items:center;gap:12px;color:#8C857E;font-size:13px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__ph svg{width:72px;height:72px;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__badge{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--dhbs-orange);font-size:14px;font-weight:600;color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__badge svg{width:14px;height:14px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__body{display:flex;flex-direction:column;flex-grow:1;padding:32px 32px 36px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__name{margin:0;font-family:var(--dhbs-display);font-weight:800;font-size:24px;letter-spacing:-0.01em}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__tag{padding:6px 14px;border-radius:999px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);font-size:13px;font-weight:500;color:var(--dhbs-ink);white-space:nowrap}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__desc{margin:16px 0 0;font-size:16px;line-height:1.7;color:#4A4641}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam .dhbs-checks{margin-top:24px;font-size:15px;gap:12px;color:#3A3632}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam .dhbs-check{width:22px;height:22px;background:var(--dhbs-white)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured{margin:-20px 0;background:var(--dhbs-ink);border-color:var(--dhbs-ink);color:#fff;box-shadow:0 40px 80px -32px rgba(22,22,22,.55)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured .dhbs-cam__desc{color:var(--dhbs-muted-dark)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured .dhbs-checks{color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured .dhbs-check{background:var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured .dhbs-cam__tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured .dhbs-cam__photo{border-bottom:3px solid var(--dhbs-orange)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook{margin-top:64px;padding:20px 32px;background:var(--dhbs-ground);border:1px solid var(--dhbs-line);border-radius:24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__label{font-family:var(--dhbs-display);font-weight:700;font-size:15px;color:var(--dhbs-muted);padding-right:24px;border-right:1px solid var(--dhbs-line)}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__chips{display:flex;gap:12px;flex-wrap:wrap}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-chip{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 12px;background:var(--dhbs-white);border:1px solid var(--dhbs-line);border-radius:999px;font-weight:600;font-size:15px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-chip .dhbs-check{width:22px;height:22px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__link{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px;color:var(--dhbs-ink);text-decoration:none}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__link svg{width:18px;height:18px;color:var(--dhbs-orange-text);transition:transform .2s}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__link:hover svg{transform:translateX(4px)}
@media (max-width:1040px){
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;gap:24px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam.is-featured{margin:0;order:-1}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__head{grid-template-columns:1fr;gap:24px;align-items:start}
}
@media (max-width:640px){
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-wrap{padding:0 20px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras{padding:64px 0}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__grid{margin-top:40px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cam__body{padding:24px 24px 28px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook{padding:20px;gap:16px}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__label{border-right:0;padding-right:0;width:100%}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__link{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-ook__link svg{transition:none}
}

/* 5b. aanvulling: een ander aantal kolommen dan de drie van het ontwerp.
   Alleen op brede schermen; daaronder geldt gewoon het ontwerp. */
@media (min-width:1041px){
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__grid[data-kolommen="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.dhbs.dhbs.dhbs.dhbs-w-productkaarten .dhbs-cameras__grid[data-kolommen="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}