/* ================= BO INDUSTRIES WIDGET — default styling =================
   Scoped under .bo-industries-wrap. Reproduces .industries-wrap /
   .industry-pill / .about-panel(→.industry-panel) exactly. Fully
   self-contained — no dependency on other widgets' CSS files.
   ========================================================================= */

.bo-industries-wrap{
  --ind-navy: #031B39;
  --ind-accent: #1083E6;
  --ind-slate: #54627A;
  --ind-line: #E4E8EE;
  --ind-ease: cubic-bezier(.22,1,.36,1);
  --ind-ease-spring: cubic-bezier(.34,1.56,.64,1);

  --ind-section-bg: transparent;
  --ind-section-padding-top: 80px;
  --ind-section-padding-bottom: 80px;
  --ind-grid-gap: 60px;

  --ind-eyebrow-color: var(--ind-accent);
  --ind-heading-color: var(--ind-navy);
  --ind-desc-color: var(--ind-slate);

  --ind-pill-bg: #ffffff;
  --ind-pill-border: var(--ind-line);
  --ind-pill-hover-border: var(--ind-accent);
  --ind-pill-radius: 12px;
  --ind-pill-icon-color: var(--ind-navy);
  --ind-pill-icon-hover-color: var(--ind-accent);
  --ind-pill-label-color: var(--ind-navy);
  --ind-pill-gap: 12px;

  --ind-panel-bg: #ffffff;
  --ind-panel-border: var(--ind-line);
  --ind-panel-radius: 18px;

  --ind-image-fit: cover;
  --ind-image-position: center top;
  --ind-image-aspect: 16 / 8.5;
  --ind-image-radius: 13px;
  --ind-image-zoom-scale: 1;
  --ind-overlay-color: linear-gradient(rgba(3,27,57,.08), rgba(3,27,57,.25));

  font-family:'Roboto', sans-serif;
}

.bo-industries-wrap .industries-section{
  background: var(--ind-section-bg, transparent);
  padding: var(--ind-section-padding-top, 80px) 0 var(--ind-section-padding-bottom, 80px);
}
.bo-industries-wrap .ind-wrap{ max-width:1220px; margin:0 auto; padding:0 40px; }

.bo-industries-wrap .industries-wrap{
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--ind-grid-gap, 60px);
  align-items:center;
}
.bo-industries-wrap .industries-wrap.industries-wrap--flip{ direction: rtl; }
.bo-industries-wrap .industries-wrap.industries-wrap--flip > *{ direction: ltr; }

/* ---------- Copy side ---------- */
.bo-industries-wrap .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--ind-eyebrow-color, var(--ind-accent)); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.bo-industries-wrap .eyebrow::before{
  content:''; width:18px; height:1px; background: var(--ind-eyebrow-color, var(--ind-accent)); display:inline-block;
}
.bo-industries-wrap .ind-heading{
  font-family:'Roboto Slab', serif;
  font-weight:600; letter-spacing:-0.01em; line-height:1.12;
  color: var(--ind-heading-color, var(--ind-navy));
  font-size:30px;
  margin:16px 0 16px;
}
.bo-industries-wrap .ind-copy p{
  color: var(--ind-desc-color, var(--ind-slate)); line-height:1.6; font-size:15px;
}

/* ---------- Pills ---------- */
.bo-industries-wrap .industry-pill-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap: var(--ind-pill-gap, 12px); margin-top:24px;
}
.bo-industries-wrap .industry-pill{
  border:1px solid var(--ind-pill-border, var(--ind-line));
  background: var(--ind-pill-bg, #fff);
  border-radius: var(--ind-pill-radius, 12px);
  padding:18px 14px; text-align:center;
  transition: all .35s var(--ind-ease-spring);
}
.bo-industries-wrap .industry-pill:hover{
  border-color: var(--ind-pill-hover-border, var(--ind-accent));
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 18px 32px -18px rgba(11,31,58,.2);
}
.bo-industries-wrap .industry-pill svg{
  width:20px; height:20px; stroke: var(--ind-pill-icon-color, var(--ind-navy)); margin:0 auto 9px;
  transition: stroke .3s var(--ind-ease);
}
.bo-industries-wrap .industry-pill:hover svg{ stroke: var(--ind-pill-icon-hover-color, var(--ind-accent)); }
.bo-industries-wrap .industry-pill span{
  font-size:12.5px; font-weight:600; color: var(--ind-pill-label-color, var(--ind-navy));
}

/* ---------- Image side ---------- */
.bo-industries-wrap .industry-panel{
  background: var(--ind-panel-bg, #fff);
  border:1px solid var(--ind-panel-border, var(--ind-line));
  border-radius: var(--ind-panel-radius, 18px);
  padding:6px; box-shadow:0 36px 70px -36px rgba(11,31,58,.25);
  transition: transform .5s var(--ind-ease);
}
.bo-industries-wrap .industry-panel-inner{
  position:relative;
  aspect-ratio: var(--ind-image-aspect, 16 / 8.5);
  overflow:hidden;
  border-radius: var(--ind-image-radius, 13px);
}
.bo-industries-wrap .industry-panel-inner img{
  width:100%; height:100%;
  display:block;
  object-fit: var(--ind-image-fit, cover);
  object-position: var(--ind-image-position, center top);
  transition:transform .8s var(--ind-ease);
}
.bo-industries-wrap .industry-panel:hover .industry-panel-inner img{
  transform:scale(var(--ind-image-zoom-scale, 1));
}
.bo-industries-wrap .industry-overlay{
  position:absolute; inset:0;
  background: var(--ind-overlay-color, transparent);
  pointer-events:none;
  transition: opacity .4s var(--ind-ease);
}
.bo-industries-wrap .industry-overlay.industry-overlay--hover-only{ opacity:0; }
.bo-industries-wrap .industry-panel:hover .industry-overlay.industry-overlay--hover-only{ opacity:1; }

/* ---------- Reveal helper ---------- */
.bo-industries-wrap .reveal-left{
  opacity:0; transform:translateX(-12px);
  transition:opacity .8s var(--ind-ease), transform .8s var(--ind-ease);
  will-change:transform;
}
.bo-industries-wrap .reveal-left.in{ opacity:1; transform:translateX(0); }
.bo-industries-wrap .reveal-right{
  opacity:0; transform:translateX(34px);
  transition:opacity .8s var(--ind-ease), transform .8s var(--ind-ease);
  will-change:transform;
}
.bo-industries-wrap .reveal-right.in{ opacity:1; transform:translateX(0); }

@media (prefers-reduced-motion: reduce){
  .bo-industries-wrap .reveal-left,
  .bo-industries-wrap .reveal-right{ opacity:1; transform:none; transition:none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   JS timing race. */
body.elementor-editor-active .bo-industries-wrap .reveal-left,
body.elementor-editor-active .bo-industries-wrap .reveal-right {
  opacity: 1 !important;
  transform: none !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .bo-industries-wrap .industries-wrap{ grid-template-columns:1fr; }
  .bo-industries-wrap .industries-wrap.industries-wrap--flip{ direction: ltr; }
}

@media (max-width:640px){
  .bo-industries-wrap .ind-wrap{ padding:0 16px; }
  .bo-industries-wrap .ind-heading{ font-size:26px; }
  .bo-industries-wrap .industry-pill-grid{
    grid-template-columns:repeat(3,1fr);
    gap:10px;
  }
  .bo-industries-wrap .industry-pill{
    padding:16px 8px;
    border-radius:11px;
  }
  .bo-industries-wrap .industry-pill svg{
    width:20px; height:20px; margin:0 auto 8px;
  }
  .bo-industries-wrap .industry-pill span{
    font-size:11.5px;
    line-height:1.3;
  }
}
@media (max-width:420px){
  .bo-industries-wrap .ind-wrap{ padding:0 14px; }
  .bo-industries-wrap .industry-pill-grid{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .bo-industries-wrap .industry-pill{
    padding:13px 6px;
    border-radius:10px;
  }
  .bo-industries-wrap .industry-pill svg{
    width:18px; height:18px; margin:0 auto 7px;
  }
  .bo-industries-wrap .industry-pill span{
    font-size:10.5px;
    line-height:1.25;
  }
}