/* Vimukthi Yoga & Wellness — Calm Yoga Theme (no pure white) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

:root{
  /* Palette: sage, eucalyptus, lavender, sand */
  --sage:#dceee4;
  --euca:#bfe3d1;
  --deep-sage:#587a6b;

  --lav:#e7e4f4;
  --lav-mid:#cfc8ec;
  --lav-deep:#6a5c99;

  --sand:#f2e9da;
  --sand-mid:#e6dcc9;

  --ink:#31443c;          /* primary text */
  --ink-soft:#4b6a60;     /* soft text */
  --accent:#7ac6a9;       /* green accent */
  --accent-2:#9a8fe0;     /* lavender accent */
  --shadow:0 18px 40px rgba(54,70,64,.18);
}

*{box-sizing:border-box}
html,body{margin:0}
body.yoga{
  font-family:Poppins, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 10% -8%, rgba(186, 222, 208, .55), transparent 60%),
    radial-gradient(700px 420px at 95% -10%, rgba(208, 202, 243, .45), transparent 60%),
    linear-gradient(160deg, #cfe5da 0%, #d7d2ed 60%, #e5dcc9 100%);
  overflow-x:hidden;
}

.yoga-container{width:min(1100px,92%); margin-inline:auto}

/* Aura blobs */
.yoga-blob{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(186, 222, 208, .85), transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(207, 200, 236, .85), transparent 70%);
  filter:blur(40px); opacity:.35; z-index:0; pointer-events:none;
  animation:y-drift 22s ease-in-out infinite alternate;
}
.yoga-blob.b2{right:-120px; top:28vh; animation-duration:28s}
@keyframes y-drift{from{transform:translate(-40px,-20px)} to{transform:translate(40px,30px)}}

/* Header */
.yoga-header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg, #d4e8df, #ddd7f4);
  border-bottom:1px solid rgba(49,68,60,.12);
  box-shadow:var(--shadow);
}
.yoga-header-inner{display:flex; justify-content:space-between; align-items:center; padding:14px 0}
.yoga-brand{display:flex; gap:10px; text-decoration:none; align-items:center}
.yoga-mark{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#1f2d27; padding:6px 12px; border-radius:12px; font-weight:800
}
.yoga-name{
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(270deg, var(--accent), var(--accent-2));
  background-size:300% 300%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shift 10s ease infinite;
}
@keyframes shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.yoga-nav{display:flex; gap:10px; flex-wrap:wrap}
.yoga-nav a{
  color:#2c3f37; text-decoration:none; font-weight:700; padding:10px 14px; border-radius:12px; transition:.25s;
}
.yoga-nav a:hover{background:#e5eff5}
.yoga-nav a.active{background:#e9e4f5}

/* HERO */
.y-hero{
  margin-top:22px; border-radius:26px; overflow:hidden; position:relative; z-index:1;
  background:linear-gradient(120deg, #d9eedf, #ece7ff 60%, #efe5cf);
  box-shadow:var(--shadow);
}
.y-hero-grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:stretch;
  padding:clamp(22px,5vw,54px);
}
.y-hero-copy{display:flex; flex-direction:column; justify-content:center}
.y-hero h1{font-size:clamp(28px,4.2vw,52px); line-height:1.04; margin:.2rem 0 12px; color:#22322d}
.y-hero p{color:var(--ink-soft); margin:0 0 18px}
.y-hero .y-row{display:flex; gap:10px; flex-wrap:wrap}
.y-chip{
  display:inline-block; background:linear-gradient(90deg, #cfe7dd, #e7e2ff);
  color:#2c3f37; padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.35px
}
.y-hero-media{
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  outline:6px solid rgba(122,198,169,.45);
}
.y-hero-media img{width:100%; height:100%; display:block; object-fit:cover; aspect-ratio:auto}

/* Buttons */
.y-btn{display:inline-block; padding:12px 18px; border-radius:14px; text-decoration:none; font-weight:800; transition:.25s transform, .25s box-shadow}
.y-btn:hover{transform:translateY(-2px)}
.y-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#1d2b25; box-shadow:0 12px 28px rgba(122,198,169,.35)
}
.y-primary:hover{box-shadow:0 0 16px rgba(122,198,169,.55), 0 0 30px rgba(154,143,224,.35)}
.y-outline{border:2px solid var(--accent); color:#1f3a31}
.y-outline:hover{background:#dceee4}

/* Sections */
.y-section{padding:54px 0; position:relative}
.y-section h2{font-size:clamp(22px,3.1vw,36px); margin:0 0 6px; color:#25362f}
.y-sub{color:var(--ink-soft); margin:0 0 18px}

/* Cards */
.y-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.y-card{
  background:linear-gradient(180deg, #e5f2eb, #ece8fb);
  border:1px solid rgba(49,68,60,.1); border-radius:16px; padding:16px; text-align:left;
  box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s
}
.y-card:hover{transform:translateY(-6px)}
.y-icon{font-size:26px; margin-bottom:6px}
.y-card h3{margin:.1rem 0 .35rem; color:#23332c}

/* Accordion (Itinerary) */
.y-accordion{display:grid; gap:12px}
.y-acc{
  background:linear-gradient(180deg,#eef6f1,#efeafc);
  border:1px solid rgba(49,68,60,.12); border-radius:14px; box-shadow:var(--shadow);
}
.y-acc-head{
  all:unset; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; font-weight:800; color:#2c3f37;
}
.y-acc-body{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 16px; color:#445f54;
}
.y-acc.open .y-acc-body{max-height:400px; padding:0 16px 14px}
.y-list{margin:12px 0; padding-left:18px}
.y-list li{margin:6px 0}
.y-note{margin-top:10px; color:#4b6a60; font-style:italic}

/* Instructors, Benefits, etc. (still available if reused) */
.y-instructors{display:grid; grid-template-columns:1fr; gap:14px}
.y-teacher{display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; background:linear-gradient(180deg,#e5f2eb,#ece8fb); border:1px solid rgba(49,68,60,.1); border-radius:16px; padding:12px; box-shadow:var(--shadow)}
.y-teacher img{width:120px; height:120px; object-fit:cover; border-radius:12px}

.y-benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.y-benefit{background:linear-gradient(180deg,#eaf6f0,#eee9fd); border:1px solid rgba(49,68,60,.1); border-radius:16px; padding:16px; text-align:left; box-shadow:var(--shadow)}
.y-benefit span{font-size:22px; display:inline-block; margin-bottom:4px}

/* Pricing / CTA */
.y-cta{
  background:linear-gradient(90deg,#e5f2eb,#ece8fb);
  border:1px solid rgba(49,68,60,.1); border-radius:18px; padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:var(--shadow)
}

/* FAQ */
.y-faq .q{background:linear-gradient(180deg,#eef6f1,#efeafc); border:1px solid rgba(49,68,60,.1); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:10px}
.y-faq .q button{all:unset; cursor:pointer; display:flex; justify-content:space-between; width:100%; padding:12px 14px; font-weight:800; color:#2b3b34}
.y-faq .q .a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 14px; color:#445f54}
.y-faq .q.open .a{max-height:240px; padding:10px 14px 14px}

/* Footer */
.yoga-footer{
  margin-top:44px; background:linear-gradient(180deg,#e5f1ea,#e9e4f5); border-top:1px solid rgba(49,68,60,.12); color:#2f413a
}
.y-footer-inner{padding:26px 0; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px}
.yoga-footer a{color:#30433c; text-decoration:none; font-weight:700}
.yoga-footer a:hover{color:#5d8a7a}
.y-bottom{border-top:1px solid rgba(49,68,60,.12); padding:12px 0; text-align:center; color:#4b6a60}

/* Floating bubble */
.y-bubble{
  position:fixed; right:24px; bottom:24px; z-index:40; width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:#1e2b25; font-size:28px; font-weight:800;
  box-shadow:0 8px 24px rgba(64,78,72,.28); animation:y-pulse 3s ease-in-out infinite
}
@keyframes y-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* Reveal */
.y-reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.y-reveal.in{opacity:1; transform:none}

/* Responsive */
@media (max-width:1024px){
  .y-card-grid{grid-template-columns:repeat(2,1fr)}
  .y-benefits{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:780px){
  .y-hero-grid{grid-template-columns:1fr}
  .y-hero-media{min-height:280px}
  .y-footer-inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  .y-card-grid{grid-template-columns:1fr}
  .y-benefits{grid-template-columns:1fr}
}

/* ---------- GALLERY ---------- */
.y-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}
.y-g-item{
  position:relative; overflow:hidden;
  border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.3);
  cursor:pointer;
  transition:transform .4s ease, box-shadow .4s ease;
}
.y-g-item img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
}
.y-g-item:hover img{transform:scale(1.08); filter:brightness(1.1)}
.y-g-item:hover{transform:translateY(-4px); box-shadow:0 0 20px rgba(255,255,255,.2)}

/* ---------- LIGHTBOX ---------- */
.y-lightbox{
  display:none; position:fixed;
  z-index:100; left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85);
  align-items:center; justify-content:center;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.y-lightbox-img{
  max-width:90%; max-height:85%;
  border-radius:16px;
  box-shadow:0 0 24px rgba(255,255,255,.25);
  animation:zoomIn .3s ease;
}
@keyframes zoomIn{from{transform:scale(.8)}to{transform:scale(1)}}
.y-close{
  position:absolute; top:20px; right:30px;
  font-size:38px; color:white; cursor:pointer;
  transition:.3s;
}
.y-close:hover{color:#ccc}

/* ---------- MOBILE RESPONSIVENESS ---------- */
.y-menu-toggle {
  display:none;
  background:none;
  border:2px solid var(--accent);
  color:#1f2d27;
  font-size:26px;
  padding:6px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
}
.y-menu-toggle:hover {
  background:var(--accent);
  color:white;
}

/* Mobile Nav */
.yoga-nav.open {
  display:flex;
  flex-direction:column;
  gap:10px;
  background:linear-gradient(180deg,#e5f2eb,#ece8fb);
  border-radius:12px;
  margin-top:10px;
  padding:10px;
}

/* Responsive layout tweaks */
@media (max-width:960px){
  .y-hero-grid{grid-template-columns:1fr;}
  .y-hero-media{min-height:280px;}
  .y-card-grid{grid-template-columns:repeat(2,1fr);}
  .y-benefits{grid-template-columns:repeat(2,1fr);}
  .y-footer-inner{grid-template-columns:1fr;}
  .y-cta{flex-direction:column; text-align:center;}
}
@media (max-width:600px){
  .y-menu-toggle{display:block;}
  .yoga-nav{display:none;}
  .yoga-nav.open{display:flex;}
  .y-card-grid,.y-benefits{grid-template-columns:1fr;}
  .y-gallery{grid-template-columns:1fr 1fr;}
  .y-hero h1{font-size:1.8rem;}
  .y-section{padding:40px 0;}
  .y-btn{padding:10px 16px;}
}