/* =====================================
   Jungle Meditation — frontpage.css
   Sections: brand, layout, hero fix, intro,
   split “What is…”, buttons, connection strip,
   benefits grid, science cards (Swiper), utilities
   ===================================== */

/* ---------- Brand palette (helpers) ---------- */
.jm-bg  { background-color:#d8e4dd !important; }
.jm-bg2 { background-color:#ecf1ee !important; }

.jm-grey { color:#555555 !important; }
.jm-blue { color:#03023f !important; }
.jm-green{ color:#2bb271 !important; }
.jm-red  { color:#ac0707 !important; }
.jm-white{ color:#FFFFFF !important; }

.jm-orange      { color:#F9A825 !important; }
.jm-muted-blue  { background-color:#E8EAF6 !important; }
.jm-pale-yellow { background-color:#FFF5DC !important; }

/* Overlay-safe text helpers */
.jm-grey-ov { color:#555555 !important; }
.jm-blue-ov { color:#03023f !important; }
.jm-green-ov{ color:#2bb271 !important; }
.jm-red-ov  { color:#ac0707 !important; }
.jm-white-ov{ color:#FFFFFF !important; }

/* ---------- Layout + hero stacking ---------- */
.slider-element{position:relative;z-index:1}
.jm-section{position:relative;z-index:2}

/* Spacing helpers */
.jm-pad-0{padding:0!important}
.jm-pad-s{padding:24px 0}
.jm-pad-m{padding:40px 0}
.jm-pad-l{padding:56px 0}

/* ---------- Intro block ---------- */
.jm-intro{background:#e8eaf6;padding:40px 0}
.jm-intro .container{max-width:900px}
.jm-intro h1{margin:0 0 12px}
.jm-intro p{margin:12px auto 0}

/* ---------- Split “What is …” rows ---------- */
.jm-row--a{background:#d8e4dd !important;color:#03023f !important}
.jm-row--b{background:#ecf1ee !important;color:#03023f !important}
.jm-row--c{background:#f5f5f5 !important;color:#03023f !important}

.jm-split{display:flex;flex-wrap:wrap;min-height:100vh}
.jm-split__img{
  flex:1 1 50%;min-height:100vh;background-size:cover;background-position:center
}
.jm-split__content{
  flex:1 1 50%;padding:64px 40px;display:flex;flex-direction:column;justify-content:center
}
@media (min-width:768px){.jm-split--flip{flex-direction:row-reverse}}

.jm-card{
  background:#FAFAFA;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:24px
}
.jm-card h1,.jm-card h2,.jm-card h3{color:#03023f}
.jm-card p{color:#555;margin-bottom:.5rem}

/* ---------- Buttons ---------- */
.jm-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;
  font-weight:700;text-transform:uppercase;text-decoration:none;line-height:1;border:2px solid transparent
}
.jm-btn--solid{background:#2bb271;color:#fff !important;border-color:rgba(255,255,255,.85)}
.jm-btn--solid:hover{transform:scale(1.04);filter:brightness(.92);transition:transform .2s ease,filter .2s ease}
.jm-btn--ghost-dark{
  background:transparent;color:#fff !important;border-color:#fff !important;
  transition:border-color .25s ease,color .25s ease
}
.jm-btn--ghost-dark:hover{color:#ac0707 !important;border-color:#ac0707 !important}
.jm-btn--ghost-light{
  background:transparent;color:#2bb271 !important;border-color:#2bb271 !important;
  transition:border-color .25s ease,color .25s ease
}
.jm-btn--ghost-light:hover{color:#ac0707 !important;border-color:#ac0707 !important}

/* ---------- Connection strip ---------- */
.jm-connection__head{padding:56px 0}
.jm-connection__head .container{max-width:850px}
.jm-connection__strip{width:100%;min-height:42vh;background-size:cover;background-position:center}
.jm-connection__body{padding:56px 0}
.jm-connection__body .container{max-width:850px}
.jm-connection__panel{background:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.12);padding:24px}

/* ---------- Benefits grid ---------- */
.jm-benefits{background:#e8eaf6;padding:56px 0}
.jm-benefits .container.head{text-align:center;max-width:900px}
.jm-benefits .grid{margin-top:16px}
.jm-row{display:flex;flex-wrap:wrap;gap:24px}
.jm-col{flex:1 1 auto}
.jm-col-3{width:100%}
@media(min-width:768px){.jm-col-3{width:calc(33.333% - 16px)}}
@media(min-width:992px){.jm-col-3{width:calc(20% - 19px)}}
.jm-benefits .item{text-align:center}
.jm-benefits .item img{width:80px}
.jm-benefits .item h3{margin-top:12px;color:#F9A825;font-weight:700}
.jm-benefits .item p{color:#555}

/* ---------- Hero fixed background ---------- */
#hero-energy,#hero-mindfulness,#hero-relaxation,#hero-learning,#hero-info{
  position:relative;height:100vh;z-index:0
}
#hero-energy .slider-inner,#hero-mindfulness .slider-inner,#hero-relaxation .slider-inner,
#hero-learning .slider-inner,#hero-info .slider-inner{
  position:fixed;inset:0;z-index:0;background-size:cover!important;background-position:center!important
}
.hero-spacer{height:100vh}
#contentintro,#whatif,#overview,#benefits,#connection,#science-research{position:relative;z-index:2;background:#fff}

/* ================================
   Science cards (Swiper) — complete
   Pattern: center card full-width, neighbors half-peek
   ================================ */

/* Ensure shadows render and carousel has height */
.science-carousel,
.science-carousel .swiper-wrapper,
.science-carousel .swiper-slide { overflow: visible; }
.science-carousel { perspective: 1200px; min-height: 240px; }

/* Core layout for the 3-up view:
   - Each slide is exactly 50vw wide.
   - With centeredSlides, you see: 1 full center + 0.5 left + 0.5 right. */
.science-carousel .swiper-slide { width: 50vw !important; }

/* Card box inside each slide */
.science-card{
  height: 200px;
  width: calc(100% - 48px);   /* 24px side gap inside the slide for separation */
  margin: 0 24px;
  position: relative;
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  isolation: isolate;

  /* floating shadow */
  box-shadow:
    0 30px 70px rgba(0,0,0,0.35),
    0 14px 28px rgba(0,0,0,0.22),
    0 3px 8px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.65);
}
.science-card::after{
  content:"";
  position:absolute; left:-18px; right:-18px; top:100%; height:34px;
  border-radius:30px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0,0,0,0.38), transparent 70%);
  filter: blur(12px);
  z-index:-1;
}
.science-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(0,0,0,0.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* Active card emphasis */
.science-carousel .swiper-slide .science-card{
  transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.science-carousel .swiper-slide-active .science-card{
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 36px 80px rgba(0,0,0,0.38),
    0 18px 34px rgba(0,0,0,0.24),
    0 4px 10px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.science-carousel .swiper-slide:not(.swiper-slide-active) .science-card{ opacity:.92 }

/* Icon + title inline; larger type */
.science-card img{
  width: 48px !important;
  height: 48px !important;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
.science-card h3{
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}
.science-card p{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

/* Non-white faces */
.science-carousel .swiper-slide:nth-child(3n+1) .science-card{
  background: linear-gradient(165deg, #ffe08a 0%, #ffc64d 100%);
}
.science-carousel .swiper-slide:nth-child(3n+2) .science-card{
  background: linear-gradient(165deg, #b9f3e2 0%, #76e4c8 100%);
}
.science-carousel .swiper-slide:nth-child(3n) .science-card{
  background: linear-gradient(165deg, #d6ccff 0%, #b09cff 100%);
}

/* Arrows 50px from edges */
.science-carousel .swiper-button-prev,
.science-carousel .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.science-carousel .swiper-button-prev{ left: 50px; right: auto; }
.science-carousel .swiper-button-next{ right: 50px; left: auto; }

/* High quality 3D rendering */
.swiper-3d .swiper-slide .science-card{ transform-style: preserve-3d; }