/* =========================================================
   ATREBO BLOCKS · shared styles for HTML widgets in Elementor
   Load once site-wide (WPCode > CSS snippet > Site Wide Header).
   Every block: <section class="atr atr-[name]"> … </section>
   Colours and fonts follow the Elementor kit (elementor-kit-8335);
   the hex values after the comma are fallbacks only.
   ========================================================= */

/* ---------- 1. Design tokens (from the Elementor kit) ---------- */
.atr {
  --atr-green:  var(--e-global-color-primary,   #00B596); /* brand green */
  --atr-navy:   var(--e-global-color-text,      #18315A); /* text / headings */
  --atr-mint:   var(--e-global-color-secondary, #E5F8F5); /* mint tiles */
  --atr-blue:   var(--e-global-color-accent,    #E7F1FF); /* light blue bands */
  --atr-cyan:   var(--e-global-color-0cada9c,   #0AF0D2); /* bright cyan (dark blocks, demo button) */
  --atr-teal:   var(--e-global-color-66bca72,   #1BCEB6);
  --atr-slate:  var(--e-global-color-55caa70e,  #525F81); /* secondary text */
  --atr-ink:    var(--e-global-color-6d83b38,   #000811); /* near-black */
  --atr-white:  #FFFFFF;
  --atr-font:   var(--e-global-typography-primary-font-family, "Montserrat"), sans-serif;
  --atr-radius: 15px;   /* same as cards and tiles on the site */
  --atr-pill:   25px;   /* same as buttons on the site */
  --atr-gap:    24px;
}

/* ---------- 2. Reset inside blocks (beats theme and kit styles) ---------- */
.atr.atr { font-family: var(--atr-font); color: var(--atr-navy); line-height: 1.5; box-sizing: border-box; }
.atr.atr * { box-sizing: border-box; margin: 0; padding: 0; }
.atr.atr p, .atr.atr li, .atr.atr span { line-height: 1.45 !important; }
.atr.atr ul { list-style: none; }

/* ---------- 3. Shared pieces (reusable in any block) ---------- */
.atr.atr .atr-intro { text-align: center !important; margin: 0 0 clamp(24px, 3vw, 36px) !important; }
.atr.atr .atr-eyebrow { color: var(--atr-green) !important; font-weight: 800 !important; font-size: clamp(18px, 2vw, 24px) !important;
  line-height: 1.2 !important; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 2px !important; padding: 0 !important; }
.atr.atr .atr-h2 { color: var(--atr-navy) !important; font-weight: 800 !important; font-size: clamp(30px, 4.2vw, 52px) !important;
  line-height: 1.1 !important; margin: 0 0 6px !important; padding: 0 !important; text-transform: none !important; }
.atr.atr .atr-lead { color: var(--atr-slate) !important; font-size: clamp(16px, 1.6vw, 20px) !important; line-height: 1.4 !important;
  max-width: 820px; margin: 0 auto !important; padding: 0 !important; }
.atr.atr .atr-check { display: flex; gap: 14px; align-items: flex-start; font-size: clamp(15px, 1.2vw, 16px); margin-bottom: 16px; }
.atr.atr .atr-check:last-child { margin-bottom: 0; }
.atr.atr .atr-check svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; color: var(--atr-green); }
.atr.atr .atr-tag { display: inline-block; background: var(--atr-green); color: var(--atr-white); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 4px 14px; }

/* Dark theme for any block: add class "atr--dark" to the section */
.atr.atr--dark { background: var(--atr-ink); color: var(--atr-white); border-radius: 20px; padding: clamp(28px, 5vw, 56px); }
.atr.atr--dark .atr-eyebrow { color: var(--atr-cyan) !important; }
.atr.atr--dark .atr-h2 { color: var(--atr-white) !important; }
.atr.atr--dark .atr-lead { color: #C9D3D8 !important; }
.atr.atr--dark .atr-check { color: var(--atr-white); }
.atr.atr--dark .atr-check svg { color: var(--atr-cyan); }
.atr.atr--dark .atr-tag { background: var(--atr-cyan); color: var(--atr-ink); }

/* ---------- 4. Block: AI agents (atr-ai) ---------- */
.atr.atr-ai .atr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atr-gap); }
.atr.atr-ai .atr-card { background: #0F181D; border: 1px solid color-mix(in srgb, var(--atr-cyan) 35%, transparent);
  border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.atr.atr-ai .atr-head { display: flex; align-items: center; gap: 22px; padding-bottom: 24px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .14); }
.atr.atr-ai .atr-icon { flex: 0 0 auto; width: 96px; height: 96px; border: 2px solid var(--atr-cyan); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--atr-cyan); }
.atr.atr-ai .atr-icon svg { width: 44px; height: 44px; }
.atr.atr-ai .atr-tag { margin-bottom: 8px; }
.atr.atr-ai .atr-h3 { color: var(--atr-white) !important; font-weight: 800 !important; font-size: clamp(20px, 2.1vw, 27px) !important;
  line-height: 1.2 !important; margin: 0 0 4px !important; text-transform: none !important; }
.atr.atr-ai .atr-sub { color: var(--atr-cyan); font-size: 15px; }
.atr.atr-ai .atr-sub strong { font-weight: 800; margin-right: 4px; }
.atr.atr-ai .atr-powered { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.atr.atr-ai .atr-powered-label { color: var(--atr-cyan); font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; margin-right: 12px; }
.atr.atr-ai .atr-flow { border: 1px solid color-mix(in srgb, var(--atr-cyan) 35%, transparent); border-radius: 999px;
  padding: 12px 26px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--atr-cyan); white-space: nowrap; }
.atr.atr-ai .atr-flow--on { background: var(--atr-cyan); border-color: var(--atr-cyan); color: var(--atr-ink); }
.atr.atr-ai .atr-arrow { color: var(--atr-cyan); font-size: 18px; line-height: 1; }
.atr.atr-ai .atr-note { color: #C9D3D8; font-size: 14px; flex: 1 1 240px; margin-left: 8px; }
.atr.atr-ai .atr-claim { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 28px; padding-top: 18px;
  font-weight: 800; font-size: clamp(15px, 1.4vw, 18px); }

@media (max-width: 900px) {
  .atr.atr-ai .atr-grid { grid-template-columns: 1fr; }
  .atr.atr-ai .atr-note { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 520px) {
  .atr.atr-ai .atr-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .atr.atr-ai .atr-icon { width: 72px; height: 72px; }
  .atr.atr-ai .atr-icon svg { width: 34px; height: 34px; }
  .atr.atr-ai .atr-arrow { display: none; }
  .atr.atr-ai .atr-powered-label { flex-basis: 100%; }
}