/* SDA About: Card styling */
#sda-about .our-story-card{
  background:#fff;
  padding:40px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);

  /* KEY: make the card a flex column so we can pin CTAs to bottom */
  display:flex;
  flex-direction:column;
  height:100%;
}

/* text shadow (optional) */
#sda-about .inner-title{
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
}

/* Make the desktop copy wrapper also flex so CTA can sit at bottom */
#sda-about .desktop-only{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Push buttons to the bottom of the card */
#sda-about .sda-about-cta-wrapper{
  margin-top:auto;          /* KEY */
  padding-top:16px;         /* space above buttons */
  padding-bottom:0;         /* remove extra bottom padding */
}

/* If buttons have padding/margins causing extra height, normalize */
#sda-about .cta-btn{
  margin-bottom:0 !important;
}

/* Kill the spacer (it’s what’s creating uneven bottoms) */
#sda-about .sda-about-bottom-spacer{
  display:none !important;
}

/* Ensure the image column can stretch with the row */
#sda-about .sda-about-img{
  height:100%;
}
#sda-about .sda-about-img img{
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius:12px;
}

/* Mobile: flatten radii for edge-to-edge look */
@media (max-width:768px){
  #sda-about .sda-about-img,
  #sda-about .sda-about-img img,
  #sda-about .our-story-card{
    border-radius:0 !important;
  }

  /* Optional: reduce padding on mobile for nicer proportions */
  #sda-about .our-story-card{
    padding:28px;
  }
}

/* Make object-fit/object-position actually apply (override Bootstrap img-fluid) */
@media (min-width: 992px) {
  #sda-about .sda-about-img {
    height: 100%;
    overflow: hidden; /* ensures crop behaves cleanly */
  }

@media (min-width: 992px) {
  /* Shift the image slightly RIGHT inside its column */
  #sda-about .sda-about-img img {
    margin-left: 20px;                 /* try 12px, 16px, 24px */
    max-width: calc(100% + 20px);
  }
}

/* Make image + caption feel like one rounded card */
#sda-about .sda-about-img {
  overflow: hidden;          /* important for clean rounding */
  border-radius: 12px;
  background: #fff;          /* so caption sits on white */
  box-shadow: 0 8px 20px rgba(0,0,0,0.05); /* optional: match card feel */
}

/* Image: rounded top only */
#sda-about .sda-about-img img.img-fluid {
  display: block;
  width: 100%;
  border-radius: 12px 12px 0 0 !important;
}

/* Make the whole image+caption block a rounded card */
#sda-about .sda-about-img{
  border-radius: 12px !important;
  overflow: hidden !important;  /* KEY: allows rounded corners to clip */
  background: #fff;             /* so caption has a clean base */
}

/* Ensure the image doesn't fight the rounding */
#sda-about .sda-about-img img.img-fluid{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0 !important; /* top corners only */
}

/* Caption: rounded bottom corners */
#sda-about .sda-about-caption{
  padding: 14px 18px;
  text-align: center;
  font-style: italic;
  color: rgba(0,0,0,0.55);
  border-radius: 0 0 12px 12px !important; /* bottom corners only */
}

#sda-about .our-story-body .integrated-model{
  font-weight: 700;

  /* pull the title color, then darken it slightly */
  color: color-mix(in srgb, currentColor 70%, #000 30%);

  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Subtle inline links (no spacing weirdness) */
#sda-about .integrated-model .model-link{
  color: var(--story-blue-dark);
  font-weight: 700;
  text-decoration: none !important;
  display: inline;                 /* KEY: keep inline punctuation tight */
  padding: 0;                      /* KEY: remove spacing */
  border-radius: 0;
  background: none;
  transition: color 180ms ease, box-shadow 180ms ease;
}

/* Cool-but-subtle hover: soft "glow" underline via shadow (not an actual underline) */
#sda-about .integrated-model .model-link:hover{
  box-shadow: inset 0 -0.45em 0 rgba(86, 97, 127, 0.12);
}

/* Keyboard focus: accessible */
#sda-about .integrated-model .model-link:focus-visible{
  outline: none;
  box-shadow:
    inset 0 -0.45em 0 rgba(86, 97, 127, 0.12),
    0 0 0 3px rgba(86, 97, 127, 0.22);
}

#sda-about .integrated-model .model-link:hover{
  box-shadow: inset 0 -0.28em 0 rgba(86, 97, 127, 0.10);
}

/* ==========================================
   ABOUT SDA — Shimmering gradient OVER image
   Uses #D1DCE3 as the highlight color
   (Assumes section id="about-sda")
========================================== */

#about-sda{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* creates a clean stacking context */
}

/* Ensure your content stays above the shimmer */
#about-sda > .container{
  position: relative;
  z-index: 2;
}

/* Shimmer layer (sits ABOVE the background image) */
#about-sda::before{
  content:"";
  position:absolute;
  inset:-25%;
  z-index: 1;          /* above bg image, below content */
  pointer-events:none;

  background:
    /* Soft sheen sweep */
    linear-gradient(135deg,
      rgba(255,255,255,0) 0%,
      rgba(209,220,227,.22) 35%,
      rgba(255,255,255,0) 70%
    ),

    /* Bottom-center glow */
    radial-gradient(1300px 780px at 50% 118%,
      rgba(209,220,227,.26) 0%,
      rgba(30,42,71,0) 64%
    ),

    /* Side lifts */
    radial-gradient(980px 720px at 14% 98%,
      rgba(209,220,227,.18) 0%,
      rgba(30,42,71,0) 60%
    ),
    radial-gradient(980px 720px at 86% 100%,
      rgba(209,220,227,.16) 0%,
      rgba(30,42,71,0) 60%
    ),

    /* Ambient plumes */
    radial-gradient(1250px 900px at 32% 36%,
      rgba(209,220,227,.14) 0%,
      rgba(30,42,71,0) 64%
    ),
    radial-gradient(1350px 980px at 72% 30%,
      rgba(209,220,227,.12) 0%,
      rgba(30,42,71,0) 66%
    );

  background-size: 190% 190%;
  background-position: 50% 50%;
  filter: blur(16px);
  opacity: 1;
  transform: translateZ(0);
  animation: aboutSdaAuroraDrift 20s ease-in-out infinite;
}

/* Optional vignette for readability */
#about-sda::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;          /* same layer as shimmer */
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 55%,
      rgba(0,0,0,0) 42%,
      rgba(10,14,28,.28) 100%
    );
}

/* Make sure the background image stays behind the shimmer.
   If your image is on the section via background-image, you're done.
   If you use a child .bg-image element, set it to z-index:0. */
#about-sda .bg-image{
  position:absolute;
  inset:0;
  z-index:0;
}

@keyframes aboutSdaAuroraDrift{
  0%{background-position: 50% 50%;}
  35%{background-position: 44% 58%;}
  70%{background-position: 58% 46%;}
  100%{background-position: 50% 50%;}
}

@media (prefers-reduced-motion: reduce){
  #about-sda::before{ animation:none; }
}