/* Aidem Pinned Stack Cards widget
   Ported verbatim from the working hand-applied page CSS (the
   "WHERE CREATIVITY MEETS STRATEGY" section), re-scoped to this widget's
   own markup (.aidem-pin-stack / .aidem-stack-*) so no page-level Custom
   CSS or manual class assignment is needed anymore.

   Pinning itself is NOT handled here - theme-gsap-interactions.js already
   picks up any .gsap-fixed-yes element (which this widget outputs) and
   pins/stacks/fades its children. This file is layout and visual styling
   only. */

.aidem-pin-stack {
  position: relative;
}

.aidem-stack-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 40px;
  min-height: 100svh;
  padding: 40px 60px;
  background: #0a0a0a;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  /* This is the element GSAP pins/transforms every scroll tick. Inside
     the widget it now sits three wrapper layers deeper than it did in
     the old hand-built page (Elementor's own .elementor-widget /
     .elementor-widget-container boilerplate around it) - without a
     proactive compositor-layer hint the browser can fall back to
     recalculating layout/paint on each transform update instead of a
     pure GPU composite, which shows up as a small stutter right before
     the card docks. will-change here fixes that (same technique used
     for the video-hero section elsewhere in this project). Safe to add:
     it does not change the containing block for this card's
     absolutely-positioned descendants (.aidem-stack-visual-title,
     .aidem-stack-more-btn, .aidem-stack-visual-bg) - .aidem-stack-visual
     (position: relative) already intercepts that closer in the tree. */
  will-change: transform;
  backface-visibility: hidden;
}

.aidem-stack-number {
  flex: 0 0 auto;
  font-size: clamp(60px, 8vw, 140px);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin: 0;
}

.aidem-stack-visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 24px !important;
  min-height: 60vh;
  max-height: 82svh;
  padding: 20px !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  background-image: linear-gradient(146.44deg, #202020 10.94%, #101010 47.57%) !important;
  border: none !important;
  overflow: hidden;
}

/* The art-directed desktop/portrait image (see the widget's per-instance
   <style> block for the actual @media background-image swap) - a plain
   div instead of <img> so it can sit as a CSS background inside the
   gradient frame padding exactly like the original <img> did. */
.aidem-stack-visual-bg {
  position: absolute;
  inset: 20px;
  border-radius: 14px !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Image Overlay (Style tab, 2026-09-19 fifth pass) - a plain, optional
   colour wash the user sets via a responsive Elementor colour picker
   (background-color comes entirely from the widget's own generated CSS,
   nothing here). Positioned identically to .aidem-stack-visual-bg/::after
   (same inset/radius at every breakpoint below) so it lines up exactly
   with the image underneath it. Sits BELOW the existing bottom-fade
   gradient (z-index 1) and title/button (z-index 2) so those always stay
   legible on top of it; no z-index of its own needed - being a real
   element declared after .aidem-stack-visual-bg in the markup, at the
   default z-index:auto it already paints above the image and below both
   of those. Transparent by default (no background-color) = fully
   invisible/no-op until a colour is actually chosen in the panel. */
.aidem-stack-visual-overlay {
  position: absolute;
  inset: 20px;
  border-radius: 14px !important;
  pointer-events: none;
}

.aidem-stack-visual::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}

.aidem-stack-visual-title {
  position: absolute !important;
  left: 60px !important;
  bottom: 120px !important;
  right: 60px !important;
  z-index: 2 !important;
  color: #ffffff !important;
}

.aidem-stack-visual-title h3,
.aidem-stack-visual-title p {
  color: #ffffff;
  margin: 0 0 8px;
}

.aidem-stack-more-btn {
  position: absolute !important;
  left: 50% !important;
  bottom: 60px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
}

/* Pin mechanics support (same as the current live page) */
.gsap-pin-off { min-height: 10vh; }
.gsap-fixed .pin-spacer > *,
.gsap-fixed-yes .pin-spacer > * { transition: unset !important; }

@media (max-width: 1024px) {
  .aidem-stack-card {
    /* Number is now overlaid on the image (absolute, positioned off
       .aidem-stack-visual below), so the card no longer needs to reserve
       flex-row space for it above the image - this is what removes the
       black gap the number used to sit in. */
    display: block !important;
    position: relative;
    padding: 30px 24px;
    min-height: 100svh;
    max-width: 100%;
  }
  .aidem-stack-number {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 3;
    font-size: clamp(40px, 10vw, 90px);
    text-shadow: 0 2px 18px rgba(0,0,0,0.65);
  }
  .aidem-stack-visual {
    position: relative;
    width: 100%;
    /* Grown from 50vh/70svh so taller Portrait images crop far less. */
    min-height: 62vh;
    max-height: 85svh;
    border-radius: 16px !important;
    padding: 12px !important;
  }
  .aidem-stack-visual-bg { inset: 12px; border-radius: 10px !important; }
  .aidem-stack-visual-overlay { inset: 12px; border-radius: 10px !important; }
  .aidem-stack-visual::after { inset: 12px; border-radius: 10px; }
  .aidem-stack-visual-title { left: 36px !important; right: 36px !important; bottom: 96px !important; }
  .aidem-stack-more-btn { left: 50% !important; bottom: 30px !important; transform: translateX(-50%) !important; }
}

@media (max-width: 768px) {
  .aidem-stack-number {
    top: 24px;
    left: 24px;
    font-size: clamp(40px, 14vw, 70px);
  }
  .aidem-stack-visual {
    /* Grown from 50vh/68svh so taller Portrait images crop far less. */
    min-height: 60vh;
    max-height: 83svh;
    border-radius: 16px !important;
    padding: 10px !important;
  }
  .aidem-stack-visual-bg { inset: 10px; border-radius: 8px !important; }
  .aidem-stack-visual-overlay { inset: 10px; border-radius: 8px !important; }
  .aidem-stack-visual::after { inset: 10px; border-radius: 8px; }
  .aidem-stack-visual-title { left: 30px !important; right: 30px !important; bottom: 86px !important; }
}

@media (max-width: 736px) {
  .aidem-stack-card { padding: 24px 20px; }
  .aidem-stack-number {
    top: 18px;
    left: 18px;
    font-size: clamp(36px, 15vw, 60px);
  }
  .aidem-stack-visual {
    /* Grown from 46vh (and inherited 68svh max) so taller Mobile images
       crop far less - this is the main fix for the "image height cut
       off" issue on phones. */
    min-height: 58vh;
    max-height: 80svh;
    padding: 8px !important;
  }
  .aidem-stack-visual-bg { inset: 8px; }
  .aidem-stack-visual-overlay { inset: 8px; }
  .aidem-stack-visual::after { inset: 8px; }
  .aidem-stack-visual-title { left: 22px !important; right: 22px !important; bottom: 76px !important; }
  .aidem-stack-more-btn { bottom: 22px !important; }
}