/* Mobile swipe row for packages */
@media (max-width: 767px){
  .msc-swipe-row{
    overflow-x: auto;
    overflow-y: visible;
    display: flex;
    gap: 16px;
    padding-left: 16px;
    padding-right: 8px; /* tiny to show peek */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .msc-swipe-row::-webkit-scrollbar{
    display:none;
  }
  .msc-swipe-card{
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px){
  /* Masterclass chooser swipe row */
  .mc-swipe{
    overflow-x: auto;
    display: flex;
    gap: 16px;
    padding-left: 16px;
    padding-right: 8px; /* shows peek of next card */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mc-swipe::-webkit-scrollbar{
    display:none;
  }
  .mc-swipe-card{
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px){
  /* make hero act as positioning parent */
  .msc-hero-mobile{ position: relative; }
}

@media (max-width: 767px){
  .msc-hero-mobile{
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 80% at 20% 10%, rgba(198,167,109,0.18) 0%, rgba(42,67,116,1) 55%);
  }
  .msc-hero-mobile::after{
    content:"";
    position:absolute;
    inset:-30%;
    background: radial-gradient(circle at 70% 30%, rgba(59,130,246,0.18), transparent 45%),
                radial-gradient(circle at 30% 80%, rgba(198,167,109,0.14), transparent 45%);
    animation: mscHeroFloat 10s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes mscHeroFloat{
    0%,100%{ transform: translate3d(0,0,0); }
    50%{ transform: translate3d(-3%, 2%, 0); }
  }
  .msc-hero-mobile > *{
    position: relative;
    z-index: 2;
  }
}

/* Off-canvas mobile menu: keep dropdowns inside the drawer */
.msc-mobile-drawer .msc-drawer-menu .sub-menu{
  position: static !important;      /* stops flyout */
  transform: none !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin: 8px 0 0 0 !important;
  padding-left: 14px !important;    /* indent submenu */
  border-left: 1px solid #E6E9EE;   /* Soft Steel divider */
}

/* Ensure submenu items are block-level and don’t overflow */
.msc-mobile-drawer .msc-drawer-menu .sub-menu li,
.msc-mobile-drawer .msc-drawer-menu .sub-menu a{
  display: block;
  width: 100%;
}

/* Optional: tighten submenu link styling */
.msc-mobile-drawer .msc-drawer-menu .sub-menu a{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Drawer menu: keep label + dropdown indicator on one line */
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  white-space: nowrap;            /* stops awkward wrapping */
}

.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a .sub-arrow,
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a .elementor-item__toggle{
  margin-left: auto !important;   /* pushes indicator to the right */
  display: inline-flex !important;
  align-items: center !important;
}

/* If your menu labels are long, allow label to wrap but keep arrow aligned */
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a .elementor-item{
  white-space: normal !important;
}

/* Drawer menu: keep submenus inside + toggle open/close cleanly */
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > ul.sub-menu{
  display: none;                 /* closed by default */
}

.msc-mobile-drawer .msc-drawer-menu li.msc-submenu-open > ul.sub-menu{
  display: block;                /* open when class applied */
}

.msc-mobile-drawer a[href="#"]{ pointer-events: auto; }

/* Off-canvas: only the arrow toggles submenus (prevents parent collapsing) */
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a{
  pointer-events: none;               /* disables clicking the whole label row */
}

/* Re-enable clicks on the submenu indicator/arrow only */
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a .sub-arrow,
.msc-mobile-drawer .msc-drawer-menu li.menu-item-has-children > a .elementor-item__toggle{
  pointer-events: auto;
}

/* Blog card hover */
.msc-blog-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.msc-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(36, 48, 56, 0.08);
  border-color: #D7DDE6;
}

/* Post content spacing */
.msc-post-content h2 {
  margin-top: 40px;
  margin-bottom: 16px;
}
.msc-post-content h3 {
  margin-top: 32px;
  margin-bottom: 12px;
}
.msc-post-content p,
.msc-post-content ul,
.msc-post-content ol {
  margin-bottom: 20px;
}

/* Sidebar cards */
.msc-sidebar-card {
  border: 1px solid #E6E9EE;
  border-radius: 18px;
  background: #FFFFFF;
}

/* Category chips */
.msc-chip a {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #E6E9EE;
  border-radius: 999px;
  color: #2A4374;
  text-decoration: none;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.msc-chip a:hover {
  border-color: #C6A76D;
  color: #2A4374;
}