body.featured-modal-no-scroll { overflow: hidden; }
body.featured-modal-no-select { user-select: none; }

body.featured-modal-dark::before{
  content:'';
  position:fixed;
  inset:0;
  background-color: rgba(0,0,0,.6);
  z-index:10000;
}

#featured-overlay{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
}

#featured-overlay #featured-modal{
  position:relative;
  background-image:url('../img/espy-bg.jpg');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
  width:90vw;
  max-width:1400px;
  max-height:900px;
  overflow:auto;
  box-shadow:0 6px 32px rgba(0,0,0,.36);
  z-index:10002;
  display:flex;
  scrollbar-width:thin;
  scrollbar-color:#fff rgba(255,255,255,0.2);
}

/* Chrome, Edge, Safari */
#featured-overlay #featured-modal::-webkit-scrollbar{
  width:12px;
  background:rgba(255,255,255,.05);
}
#featured-overlay #featured-modal::-webkit-scrollbar-thumb{
  background:#fff;
  border-radius:8px;
  border:3px solid rgba(255,255,255,.15);
}
#featured-overlay #featured-modal::-webkit-scrollbar-track{
  background:rgba(255,255,255,.08);
  border-radius:8px;
}

#featured-overlay #featured-modal .close-btn{
  position:absolute;
  top:10px; right:10px;
  background:none;
  border:none;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  z-index:10003;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
#featured-overlay #featured-modal .close-btn.transition:hover{ color:#fff; }

#featured-overlay #featured-modal .img-wrapper {
    max-width: 550px;
}

#featured-overlay #featured-modal .box{
  position:relative;
  padding:15px;
  margin:15px;
  border-radius:10px;
  border:3px solid #39B54A;
  background-color:#002b518C;
  width:100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#featured-overlay #featured-modal .box.img {
    aspect-ratio: 3 / 2;
}

#featured-overlay #featured-modal h3 {
    line-height: 1;
}

/* Responsive tweaks */
@media (max-width: 1400px){
  #featured-overlay #featured-modal{ height:auto; }
}
@media (max-width: 1279.98px){
  #featured-overlay #featured-modal{ max-height:90vh; }
}
@media (max-width: 991.98px) {
    #featured-overlay #featured-modal .col-lg-4:not(:first-of-type) {
        display: none !important;
    }
}

/* -----------------------------
   STAGED REVEAL (SWING ONLY)
   ----------------------------- */

/* Boxes: start hidden */
#featured-overlay #featured-modal .box{
  opacity: 0;
  transform: translateY(14px) rotateX(35deg);
  transform-origin: top center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Copy + CTA blocks start hidden */
#featured-overlay #featured-modal .reveal-block,
#featured-overlay #featured-modal .reveal-buttons{
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

/* Triggered states */
#featured-overlay.is-open #featured-modal .box{
  animation: featuredBoxIn_swing 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}

#featured-overlay.reveal-copy #featured-modal .reveal-block{
  animation: featuredFadeUp 0.6s ease-out forwards;
}

#featured-overlay.reveal-cta #featured-modal .reveal-buttons{
  animation: featuredFadeUp 0.6s ease-out forwards;
}

/* Stagger boxes */
#featured-overlay.is-open #featured-modal .row > div:nth-child(1) .box{ animation-delay: 0s; }
#featured-overlay.is-open #featured-modal .row > div:nth-child(2) .box{ animation-delay: .35s; }
#featured-overlay.is-open #featured-modal .row > div:nth-child(3) .box{ animation-delay: .7s; }

/* Keyframes */
@keyframes featuredBoxIn_swing{
  0%   { opacity:0; transform: translateY(14px) rotateX(35deg); }
  65%  { opacity:1; transform: translateY(0) rotateX(-6deg); }
  100% { opacity:1; transform: translateY(0) rotateX(0deg); }
}

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

/* --- Mobile scroll + layout fixes --- */

/* Make modal scroll nicely on mobile */
#featured-overlay #featured-modal{
  overflow-y: auto;              /* explicit y-scroll */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: block;                /* IMPORTANT: don't be a flex container */
}

/* Your inner wrapper is centering everything vertically; override that */
#featured-overlay #featured-modal > .d-flex{
  align-items: flex-start !important;  /* stop vertical centering */
  justify-content: center;
  width: 100%;
}

/* Ensure there's room above content (close button area) */
/*
#featured-overlay #featured-modal .p-4{
  padding-top: 70px !important;
}
*/

/* Better mobile sizing: let modal fit viewport and scroll internally */
#featured-overlay{
  padding: 16px;                 /* keeps it off screen edges */
}

@media (max-width: 767.98px){
  #featured-overlay{
    align-items: flex-start;
  }

  #featured-overlay #featured-modal{
    padding-bottom: 1rem;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 32px);
  }

  /* Keep the close button visible and not "floating" weirdly */
  #featured-overlay #featured-modal .close-btn{
    position: sticky;
    top: 10px;
    margin-left: auto;
  }

  #featured-overlay #featured-modal .box {
    margin: 10px 0;
	padding: 10px;
  }

  #featured-overlay .img-wrapper {
    display: none;
  }

  #featured-overlay #featured-modal h1 {
    font-size: clamp(1rem, 3vw, 20px);
  }

  #featured-overlay #featured-modal h2 {
    font-size: clamp(1rem, .5vw, 20px);
  }
  #featured-overlay #featured-modal h3 {
    font-size: 22px;
  }

  #featured-overlay #featured-modal p {
    line-height: 20px;
  }
}