/* PIOUS Foundation — Founder portrait overlay on hero carousel
   
   HOW IT WORKS:
   .main-slider is position:relative — our portrait is position:absolute
   inside it, anchored to the bottom-right. It sits above the slides
   (z-index higher than the overlay) so it appears to "hang over" the
   carousel. The image must have its background already removed (PNG
   with transparent bg, or use CSS mix-blend-mode as fallback).
   
   HTML to add: one <div class="founder-overlay"> inside .main-slider,
   as a direct child (sibling to the swiper wrapper), see snippet below.
*/

/* ============================================================
   PORTRAIT CONTAINER
   ============================================================ */

.founder-overlay {
  position: absolute;
  bottom: 0;                        /* sits flush with carousel bottom */
  right: 8%;                        /* breathing room from edge */
  z-index: 50;                      /* above slides (z:1) and overlay (z:2), below nav (z:100) */
  pointer-events: none;             /* never blocks slide interaction */
  display: flex;
  align-items: flex-end;
}

.founder-overlay__img {
  display: block;
  height: clamp(320px, 100vh, 600px);   /* scales with viewport, never tiny or massive */
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  /* Subtle entrance — fades in with the slide content */
  animation: founderReveal 1.2s ease 0.4s both;
  /* If image still has a background, this blends it away on dark slides */
  mix-blend-mode: luminosity;
}

/* If founder.jpg has no background (PNG/transparent), remove mix-blend-mode */
.founder-overlay__img.no-bg {
  mix-blend-mode: normal;
}

/* Soft vignette at feet — makes portrait look grounded, not floating */
.founder-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(2, 1, 73, 0.55) 0%, transparent 100%);
  pointer-events: none;
}

@keyframes founderReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   TABLET — 768px to 1199px
   Smaller, shifted slightly more centre-right
   ============================================================ */

@media (max-width: 1199px) and (min-width: 768px) {
  .founder-overlay {
    right: 4%;
  }

  .founder-overlay__img {
    height: clamp(240px, 52vh, 520px);
  }
}


/* ============================================================
   MOBILE — max-width: 767px
   Portrait moves to bottom-centre, smaller, partially visible
   so it doesn't dominate the text
   ============================================================ */

@media (max-width: 767px) {
  .founder-overlay {
    right: 0;
    left: 0;
    bottom: 0;
    justify-content: center;        /* centre horizontally */
    opacity: 1;
    pointer-events: none;
  }

  .founder-overlay__img {
    height: clamp(320px, 78vh, 560px);
    max-width: 52vw;   /* never overflow narrow phone widths */
    /* On mobile the portrait is now a prominent hero image, not a watermark */
    mix-blend-mode: normal;
  }

  .founder-overlay::after {
    height: 90px;
  }
}