/* ============================================================
   eInsights - v2 image-overlay outcome cards
   Real-photo background cards with a hover reveal (scrim
   darkens, image zooms, accent bar + arrow appear).
   Only loaded on the v2 page; v1 is untouched.
   ============================================================ */

.bento--img { grid-auto-rows: 1fr; }

.icard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 340px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--navy-900);
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  isolation: isolate;
}
.icard.span2 { grid-column: span 2; }
.icard:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); }

/* background photo (drop-zone or img) */
.icard__img { position: absolute; inset: 0; z-index: 0; line-height: 0; }
.icard__img image-slot, .icard__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .5s var(--ease);
  transform: scale(1.02);
}
.icard:hover .icard__img image-slot, .icard:hover .icard__img img { transform: scale(1.09); filter: saturate(1.08); }

/* gradient scrim for legibility - darkens further on hover */
.icard__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,28,44,0) 30%, rgba(7,28,44,.62) 68%, rgba(7,28,44,.92) 100%),
    linear-gradient(180deg, rgba(10,35,54,.30) 0%, rgba(10,35,54,0) 40%);
  transition: opacity .45s var(--ease); }
.icard::after { /* teal accent wash on hover */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(31,159,184,.0) 40%, rgba(31,159,184,.28) 100%);
  transition: opacity .45s var(--ease); }
.icard:hover::after { opacity: 1; }

/* top accent bar reveal */
.icard::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.icard:hover::before { transform: scaleX(1); }

/* text content over the photo */
.icard__body { position: relative; z-index: 2; padding: 26px 26px 24px;
  transition: transform .45s var(--ease); }
.icard:hover .icard__body { transform: translateY(-4px); }
.icard__ico { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background .4s var(--ease), color .4s var(--ease); }
.icard:hover .icard__ico { background: var(--teal); border-color: transparent; color: #fff; }
.icard__ico svg { width: 22px; height: 22px; }
.icard__stat { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1;
  text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.icard__stat span { font-size: 17px; color: rgba(255,255,255,.82); font-weight: 600; }
.icard__body h3 { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.45;
  color: rgba(255,255,255,.88); max-width: 42ch; text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* the empty drop-zone placeholder should read clearly on the dark card */
.icard__img image-slot::part(placeholder) { color: rgba(255,255,255,.7); }

@media (max-width: 1000px) {
  .bento--img { grid-template-columns: repeat(2, 1fr); }
  .icard.span2 { grid-column: span 2; }
  .icard { min-height: 300px; }
}
@media (max-width: 640px) {
  .bento--img { grid-template-columns: 1fr; }
  .icard.span2 { grid-column: span 1; }
  .icard { min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  .icard, .icard__img image-slot, .icard__body { transition: none; }
}