/* =========================================================
   HHC ESG Impact Fusion – externalized
   File: /wp-content/uploads/hh-assets/hh-esg-impact-fusion.css
   Scope: #hh-inline-esg-impact-fusion
   ========================================================= */

#hh-inline-esg-impact-fusion{
  --ink:#0f172a;
  --ink-muted:#475569;
  --muted:#64748b;

  --accentA:#2563eb;
  --accentB:#38bdf8;

  --card-r:20px;
  --border:rgba(0,0,0,.06);
  --shadow:0 12px 32px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.04);

  --card-minh:220px;

  --surface-r:20px;
  --surface-bg:rgba(255,255,255,.80);
  --inset-r:16px;

  --clip-safe-top:16px;
  --clip-safe-x:14px;
  --clip-safe-bottom:12px;

  --hh-accentA:#2563eb;
  --hh-accentB:#38bdf8;

  --esg-hover-scale:1.02;
  --esg-hover-y:-6px;

  --esg-hover-shadow:
    0 0 30px rgba(56,189,248,.45),
    0 0 60px rgba(37,99,235,.30),
    0 12px 32px rgba(0,0,0,.07);

  --esg-hover-border:rgba(56,189,248,.35);
  --esg-hover-bgTop:rgba(255,255,255,.96);
  --esg-hover-bgBot:rgba(224,242,254,.90);

  --esg-icon-hover-scale:1.12;

  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  box-sizing:border-box;
}

#hh-inline-esg-impact-fusion *,
#hh-inline-esg-impact-fusion *::before,
#hh-inline-esg-impact-fusion *::after{
  box-sizing:inherit;
}

#hh-inline-esg-impact-fusion .muted{
  color:var(--muted);
}

/* Section */
#hh-inline-esg-impact-fusion .hh-esg{
  padding:60px 20px;
  position:relative;
  isolation:isolate;
}

#hh-inline-esg-impact-fusion .hh-esg::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:18px;
  bottom:18px;
  border-radius:20px;
  background:#F0F8FF91;
  z-index:0;
  pointer-events:none;
}

#hh-inline-esg-impact-fusion .hh-esg-inner{
  max-width:1240px;
  margin:0 auto;
  overflow:visible;
  text-align:center;
  position:relative;
  z-index:1;
}

/* Headline */
#hh-inline-esg-impact-fusion .hh-esg-inner h2{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.45rem;
  line-height:1.25;
  font-size:clamp(26px,4vw,36px);
  font-weight:850;
  letter-spacing:-.02em;
  margin:0 0 14px;
  text-align:center;
}

@media (max-width:680px){
  #hh-inline-esg-impact-fusion .hh-esg-inner h2{
    flex-wrap:wrap;
  }
}

/* Lead */
#hh-inline-esg-impact-fusion .lead{
  font-size:clamp(16px,2.2vw,18px);
  color:var(--ink-muted);
  line-height:1.55;
  max-width:720px;
  margin:0 auto 28px;
}

/* Header emoji */
#hh-inline-esg-impact-fusion .esg-emoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:1.25em;
  line-height:1;
  transform:translateY(1px) scale(1);
  filter:drop-shadow(0 0 0 rgba(255,215,0,0));
  transition:transform .35s cubic-bezier(.22,.61,.36,1), filter .35s ease;
  will-change:transform,filter;
  pointer-events:none;
}

#hh-inline-esg-impact-fusion .hh-esg:hover .esg-emoji,
#hh-inline-esg-impact-fusion .hh-esg:focus-within .esg-emoji,
#hh-inline-esg-impact-fusion.in-view .esg-emoji{
  transform:translateY(1px) scale(1.08);
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.10))
    drop-shadow(0 0 4px rgba(255,223,88,.20))
    drop-shadow(0 0 10px rgba(255,200,40,.14));
}

@media (prefers-color-scheme: dark){
  #hh-inline-esg-impact-fusion .hh-esg:hover .esg-emoji,
  #hh-inline-esg-impact-fusion .hh-esg:focus-within .esg-emoji,
  #hh-inline-esg-impact-fusion.in-view .esg-emoji{
    filter:
      drop-shadow(0 1px 2px rgba(0,0,0,.25))
      drop-shadow(0 0 5px rgba(255,223,88,.26))
      drop-shadow(0 0 12px rgba(255,200,40,.18));
  }
}

/* Surface */
#hh-inline-esg-impact-fusion .esg-surface{
  position:relative;
  border-radius:var(--surface-r);
  padding:16px;
  margin:0 auto;
  isolation:isolate;
  overflow:visible;
}

#hh-inline-esg-impact-fusion .esg-surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--surface-bg);
  border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.05);
  z-index:0;
  pointer-events:none;
}

#hh-inline-esg-impact-fusion .esg-surface::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:calc(var(--surface-r) - 10px);
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(56,189,248,.12) 0%, rgba(56,189,248,0) 60%),
    radial-gradient(120% 90% at 84% 76%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 62%);
  z-index:0;
  pointer-events:none;
  opacity:.90;
}

#hh-inline-esg-impact-fusion .esg-surface.has-progress{
  padding-bottom:54px;
}

/* Clip / Grid */
#hh-inline-esg-impact-fusion .esg-clip{
  position:relative;
  z-index:1;
  border-radius:inherit;
  overflow:visible;
}

#hh-inline-esg-impact-fusion .esg-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
  overflow:visible;
}

@media (max-width:720px){
  #hh-inline-esg-impact-fusion .esg-grid{
    gap:18px;
  }
}

@media (max-width:1100px){
  #hh-inline-esg-impact-fusion .esg-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:768px){
  #hh-inline-esg-impact-fusion .esg-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* Cards */
#hh-inline-esg-impact-fusion .esg-box{
  width:100%;
  max-width:none;
  min-height:220px;
  height:auto !important;

  padding:18px 18px 20px;
  border-radius:var(--card-r);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;

  isolation:isolate;
  outline:none;
  overflow:visible;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;

  will-change:transform, box-shadow, border-color, background;
}

#hh-inline-esg-impact-fusion .esg-icon{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-size:30px;
  line-height:1;
  margin:2px 0 10px;
  transition:transform .25s ease;
  will-change:transform;
  transform:translateZ(0);
}

#hh-inline-esg-impact-fusion .esg-title{
  width:100%;
  margin:0 0 8px;
  font-size:18px;
  font-weight:850;
  letter-spacing:-.01em;
  color:var(--ink);
  text-align:center;
}

#hh-inline-esg-impact-fusion .esg-text{
  width:100%;
  margin:0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-muted);

  display:block !important;
  overflow:visible !important;
  text-overflow:initial !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  max-height:none !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;

  flex:1 1 auto;
  min-height:0;
  text-align:center;
}

#hh-inline-esg-impact-fusion .esg-box:focus-visible{
  outline:2px solid var(--hh-accentA,#2563eb);
  outline-offset:2px;
}

@media (hover:hover) and (pointer:fine){
  #hh-inline-esg-impact-fusion .esg-box:hover{
    transform:translateY(var(--esg-hover-y)) scale(var(--esg-hover-scale));
    box-shadow:var(--esg-hover-shadow);
    border-color:var(--esg-hover-border);
    background:linear-gradient(
      180deg,
      var(--esg-hover-bgTop) 0%,
      var(--esg-hover-bgBot) 100%
    );
  }

  #hh-inline-esg-impact-fusion .esg-box:hover .esg-icon{
    transform:translateY(-1px) scale(var(--esg-icon-hover-scale));
  }
}

#hh-inline-esg-impact-fusion .esg-box.is-active{
  transform:translateY(var(--esg-hover-y)) scale(var(--esg-hover-scale));
  box-shadow:var(--esg-hover-shadow);
  border-color:var(--esg-hover-border);
  background:linear-gradient(
    180deg,
    var(--esg-hover-bgTop) 0%,
    var(--esg-hover-bgBot) 100%
  );
}

#hh-inline-esg-impact-fusion .esg-box.is-active .esg-icon{
  transform:translateY(-1px) scale(var(--esg-icon-hover-scale));
}

/* Mobile carousel */
@media (max-width:768px){
  #hh-inline-esg-impact-fusion .esg-clip{
    overflow:hidden;
    border-radius:var(--inset-r);
    position:relative;
  }

  #hh-inline-esg-impact-fusion .esg-clip::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      radial-gradient(120% 90% at 22% 22%, rgba(56,189,248,.12) 0%, rgba(56,189,248,0) 58%),
      radial-gradient(120% 90% at 82% 72%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 62%),
      rgba(255,255,255,.50);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.035);
    pointer-events:none;
    z-index:0;
  }

  #hh-inline-esg-impact-fusion .esg-grid{
    position:relative;
    z-index:1;
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:visible;
    margin:0 calc(-1 * var(--clip-safe-x)) 0;
    padding:20px 18px 14px;
    scroll-snap-type:x mandatory;
    scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:18px;
    scroll-padding-right:18px;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  #hh-inline-esg-impact-fusion .esg-grid::-webkit-scrollbar{
    display:none;
  }

  #hh-inline-esg-impact-fusion .esg-box{
    flex:0 0 86%;
    max-width:86%;
    scroll-snap-align:center;
    min-height:auto;
  }

  #hh-inline-esg-impact-fusion .esg-text{
    max-width:52ch;
  }
}

/* Dots */
@media (hover:none) and (pointer:coarse){
  #hh-inline-esg-impact-fusion .esg-surface{
    position:relative;
  }

  #hh-inline-esg-impact-fusion .esg-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:14px;
    align-items:center;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    z-index:2;
  }

  #hh-inline-esg-impact-fusion .esg-dot{
    width:9px;
    height:9px;
    border-radius:999px;
    border:1px solid rgba(2,6,23,.18);
    background:rgba(148,163,184,.35);
    padding:0;
    margin:0;
    appearance:none;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }

  #hh-inline-esg-impact-fusion .esg-dot.esg-dot--active{
    background:rgba(56,189,248,.85);
    border-color:rgba(56,189,248,.55);
    box-shadow:
      0 0 12px rgba(56,189,248,.42),
      0 0 26px rgba(37,99,235,.22);
    transform:scale(1.18);
  }

  #hh-inline-esg-impact-fusion .esg-dot:focus-visible{
    outline:3px solid rgba(56,189,248,.55);
    outline-offset:3px;
  }
}

/* Progressbar + swipe hint */
@media (max-width:768px){
  #hh-inline-esg-impact-fusion .esg-progress{
    position:absolute;
    left:14px;
    right:14px;
    bottom:12px;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    user-select:none;
    pointer-events:none;
  }

  #hh-inline-esg-impact-fusion .esg-progress__track{
    position:relative;
    width:min(320px, 72vw);
    height:4px;
    border-radius:999px;
    background:rgba(15,23,42,.12);
    overflow:hidden;
  }

  #hh-inline-esg-impact-fusion .esg-progress__fill{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0%;
    border-radius:999px;
    background:rgba(37,99,235,.55);
    transition:width .35s ease;
  }

  #hh-inline-esg-impact-fusion .esg-swipe-hint{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.06);
    background:rgba(255,255,255,.92);
    box-shadow:0 8px 18px rgba(0,0,0,.06);
    color:rgba(15,23,42,.60);
    font-size:15px;
    line-height:1;
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    animation:hhEsgSwipeNudge 1.35s cubic-bezier(.22,.61,.36,1) infinite;
    will-change:transform, opacity;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  @keyframes hhEsgSwipeNudge{
    0%   { transform:translateX(0); opacity:.55; }
    45%  { transform:translateX(7px); opacity:.92; }
    80%  { transform:translateX(0); opacity:.70; }
    100% { transform:translateX(0); opacity:.55; }
  }

  #hh-inline-esg-impact-fusion .esg-swipe-hint.is-hidden{
    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    animation:none;
  }

  #hh-inline-esg-impact-fusion .esg-swipe-hint.is-prime{
    box-shadow:
      0 8px 18px rgba(0,0,0,.06),
      0 0 0 6px rgba(56,189,248,.10);
  }
}

/* hh-money / hh-amount helpers */
#hh-inline-esg-impact-fusion .hh-money,
#hh-inline-esg-impact-fusion .hh-amount{
  white-space:nowrap;
  font-weight:850;
  color:var(--ink);
}

#hh-inline-esg-impact-fusion .hh-money .hh-money-sub{
  font-weight:850;
  opacity:.9;
}

@media (max-width:360px){
  #hh-inline-esg-impact-fusion .hh-money,
  #hh-inline-esg-impact-fusion .hh-amount{
    white-space:normal;
  }

  #hh-inline-esg-impact-fusion .hh-money .hh-money-sub{
    display:block;
    margin-top:4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #hh-inline-esg-impact-fusion .esg-emoji,
  #hh-inline-esg-impact-fusion .esg-box,
  #hh-inline-esg-impact-fusion .esg-icon,
  #hh-inline-esg-impact-fusion .esg-dot,
  #hh-inline-esg-impact-fusion .esg-progress__fill,
  #hh-inline-esg-impact-fusion .esg-swipe-hint{
    transition:none !important;
    animation:none !important;
  }

  @media (max-width:768px){
    #hh-inline-esg-impact-fusion .esg-grid{
      scroll-snap-type:none;
    }
  }
}