/*
  LaVi Bloom Academy - Services page layer (scoped to body.lavi-services).
  Loaded after style.css and lavi-home.css. Sections are appended here one at a time.
*/

/* =====================================================================
   SERVICES BANNER (Kiddino .breadcumb-wrapper, brand-purple variant)
   ===================================================================== */
.lavi-services .lv-services-banner {
  position: relative;
  padding: 80px 0 64px;
  background: linear-gradient(120deg, #48165f 0%, #5a1e75 60%, #7a2a74 100%);
  overflow: hidden;
}
.lavi-services .lv-services-banner .breadcumb-content { position: relative; z-index: 2; max-width: 720px; }
.lavi-services .lv-services-banner .breadcumb-title {
  font-size: clamp(36px, 5.4vw, 64px);
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.12;
}
.lavi-services .lv-services-banner .breadcumb-text { font-size: 19px; color: #eadff0; margin: 0; max-width: 560px; }
.lavi-services .lv-services-banner .breadcumb-menu-wrap { margin: 34px 0 0; min-height: 0; }
/* breadcrumb pill: white on the purple band, "Home / Services" */
.lavi-services .lv-services-banner .breadcumb-menu {
  display: inline-block; border-radius: 50px; padding: 12px 28px; background-color: #fff;
}
.lavi-services .lv-services-banner .breadcumb-menu li,
.lavi-services .lv-services-banner .breadcumb-menu a { color: var(--vs-secondary-color); }
.lavi-services .lv-services-banner .breadcumb-menu a:hover { color: var(--theme-color); }
.lavi-services .lv-services-banner .breadcumb-menu li:not(:last-child):after { content: "/"; margin-left: 12px; margin-right: 8px; color: var(--theme-color2); }

/* right-hand illustration: transparent programs collage, centred vertically, never over the text */
.lavi-services .lv-services-banner__collage {
  position: absolute; z-index: 1; right: 2%; top: 50%; transform: translateY(-50%);
  display: block; line-height: 0; pointer-events: none;
  width: clamp(300px, 42vw, 620px);
}
.lavi-services .lv-services-banner__collage img { display: block; width: 100%; height: auto; object-fit: contain; }

/* entrance */
.lavi-services .lv-services-banner .breadcumb-content > * { animation: lv-svc-rise 0.7s ease both; }
.lavi-services .lv-services-banner .breadcumb-text { animation-delay: 0.1s; }
.lavi-services .lv-services-banner .breadcumb-menu-wrap { animation-delay: 0.2s; }
@keyframes lv-svc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lavi-services .lv-services-banner .breadcumb-content > * { animation: none; }
}

@media (max-width: 991px) {
  .lavi-services .lv-services-banner { padding: 56px 0 48px; }
  .lavi-services .lv-services-banner__collage { top: auto; bottom: 0; transform: none; right: 1%; width: clamp(180px, 27.5vw, 260px); }
}
@media (max-width: 575px) {
  .lavi-services .lv-services-banner { padding: 44px 0 40px; }
  .lavi-services .lv-services-banner .breadcumb-text { font-size: 17px; }
  .lavi-services .lv-services-banner__collage { width: 172px; right: 0; }
}

/* =====================================================================
   SHARED SECTION HEADINGS
   ===================================================================== */
.lavi-services .sec-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin-top: 0; color: var(--vs-secondary-color); }
.lavi-services .sec-text { font-size: 18px; line-height: 1.7; }
.lavi-services section { position: relative; }
.lavi-services #preschool, .lavi-services #music, .lavi-services #dance, .lavi-services #arts, .lavi-services #tuition { scroll-margin-top: 90px; }

/* =====================================================================
   PROGRAMS INTRODUCTION (compact two-column: text left, 4:3 classroom photo right)
   ===================================================================== */
.lavi-services .lv-intro { background: #fff; overflow: hidden; }
.lavi-services .lv-intro .sec-title { margin-bottom: 18px; }
.lavi-services .lv-intro .sec-text { max-width: 560px; }
.lavi-services .lv-intro__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  border-radius: 28px; box-shadow: 0 18px 44px rgba(72, 22, 95, 0.16);
}
/* desktop: roughly 55% text / 45% photo */
@media (min-width: 992px) {
  .lavi-services .lv-intro__text { flex: 0 0 55%; max-width: 55%; padding-right: 36px; }
  .lavi-services .lv-intro__media { flex: 0 0 45%; max-width: 45%; }
}
/* tablet and phone: text first, photo below at a comfortable width */
@media (max-width: 991px) {
  .lavi-services .lv-intro { padding-top: 56px; padding-bottom: 56px; }
  .lavi-services .lv-intro__media img { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .lavi-services .lv-intro { padding-top: 44px; padding-bottom: 44px; }
  .lavi-services .lv-intro__media img { border-radius: 22px; }
}

/* =====================================================================
   PRESCHOOL PROGRAMS (class-2 class-style1: horizontal cards)
   ===================================================================== */
.lavi-services .lv-preschool { overflow: hidden; }
.lavi-services .lv-preschool .title-area { margin-bottom: 40px; }
.lavi-services .lv-preschool .class-style1 .class-img { flex: 0 0 46%; align-self: stretch; }
@media (min-width: 1200px) {
  .lavi-services .lv-preschool .class-style1 .class-img + .class-content { margin-left: -28px; }
}
.lavi-services .lv-preschool .class-style1 .class-img img { height: 100%; min-height: 210px; aspect-ratio: 4 / 3; object-fit: cover; }
.lavi-services .lv-preschool .class-style1 .class-content { padding: 28px 80px 28px 40px; border-color: #e6d9ee; }
.lavi-services .lv-preschool .class-style1 .class-title { font-size: 26px; color: var(--vs-secondary-color); margin-bottom: 8px; }
.lavi-services .lv-preschool .class-style1 .class-text { margin: 0; font-size: 16.5px; line-height: 1.6; }
.lavi-services .lv-preschool .class-style1 .class-content { padding-right: 36px; }
@media (max-width: 1199px) {
  .lavi-services .lv-preschool .class-style1 .class-content { padding: 24px 28px 24px 32px; }
}
@media (max-width: 575px) {
  .lavi-services .lv-preschool .class-style1 { flex-direction: column; align-items: stretch; }
  .lavi-services .lv-preschool .class-style1 .class-img { flex: none; }
  .lavi-services .lv-preschool .class-style1 .class-img + .class-content { margin: -40px 12px 0; }
  .lavi-services .lv-preschool .class-style1 .class-content { padding: 22px 22px 22px 22px; }
}

/* =====================================================================
   MUSIC PROGRAMS (index-7 service-style7: colour cards, icon disc overlaps the top edge)
   ===================================================================== */
.lavi-services .lv-music { background: #fff; overflow: hidden; }
.lavi-services .lv-music .title-area { margin-bottom: 30px; }
.lavi-services .lv-music .service-style7 .service-body { margin: 80px 0 40px; padding: 0 30px 34px; background: none; }
.lavi-services .lv-music .service-style7 .service-body::before { opacity: 1; box-shadow: 0 16px 36px rgba(72, 22, 95, 0.16); }
.lavi-services .lv-music .service-style7 .service-icon {
  width: 112px; height: 112px; margin: -56px auto 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 26px rgba(72, 22, 95, 0.2); border: 5px solid var(--smoke-color);
}
.lavi-services .lv-music .service-style7 .service-icon i { font-size: 42px; color: var(--vs-secondary-color); }
.lavi-services .lv-music .service-style7.color3 .service-icon i { color: var(--theme-color); }
.lavi-services .lv-music .service-style7 .service-title { font-size: 26px; margin-bottom: 10px; }
.lavi-services .lv-music .service-style7 .service-text { font-size: 16.5px; line-height: 1.6; margin-bottom: 0; }
/* readable text on each card colour */
.lavi-services .lv-music .service-style7.color1 .service-title,
.lavi-services .lv-music .service-style7.color1 .service-text { color: #2f0d40; }
.lavi-services .lv-music .service-style7.color2 .service-title,
.lavi-services .lv-music .service-style7.color2 .service-text,
.lavi-services .lv-music .service-style7.color3 .service-title,
.lavi-services .lv-music .service-style7.color3 .service-text { color: #fff; }
.lavi-services .lv-music .service-style7 .service-link > i { background: #fff; color: var(--vs-secondary-color); font-size: 24px; box-shadow: 0 6px 16px rgba(72, 22, 95, 0.22); }
.lavi-services .lv-music .service-style7.color1 .service-link > i { background: var(--vs-secondary-color); color: #fff; }
.lavi-services .lv-music .service-style7.color2 .service-link > i { background: var(--theme-color2); color: #fff; }
.lavi-services .lv-music .service-style7 .service-link:hover > i { background: var(--theme-color); color: #fff; }
@media (max-width: 1199px) {
  .lavi-services .lv-music .service-style7 .service-body { margin: 80px 0 40px; }
}

/* =====================================================================
   DANCE PROGRAMS (index-8 git-layout1: shaped ivory background + chips)
   ===================================================================== */
.lavi-services .lv-dance { overflow: hidden; z-index: 0; background: #fff; }
.lavi-services .lv-dance .git-bg-shape { height: 100%; width: 88%; max-width: 1296px; z-index: -1; }
.lavi-services .lv-dance__chips { display: grid; gap: 22px; }
.lavi-services .lv-dance .lv-chip {
  position: static; max-width: none; width: 100%; gap: 22px; align-items: center;
  padding: 28px 34px; border-radius: 50px 0 65px 0; box-shadow: 0 14px 34px rgba(72, 22, 95, 0.14);
}
.lavi-services .lv-dance .lv-chip--gold { background-color: var(--theme-color2); }
.lavi-services .lv-dance .lv-chip--pink { background-color: var(--theme-color); margin-left: 40px; }
.lavi-services .lv-dance .lv-chip__icon {
  flex: none; width: 70px; height: 70px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  font-size: 28px; color: var(--vs-secondary-color);
}
.lavi-services .lv-dance .lv-chip .select-title { color: #fff; font-size: 26px; margin: 0 0 4px; }
.lavi-services .lv-dance .lv-chip p { margin: 0; color: #fff; font-size: 17px; }
@media (max-width: 991px) {
  .lavi-services .lv-dance .git-bg-shape { width: 100%; border-radius: 0; }
  .lavi-services .lv-dance .lv-chip--pink { margin-left: 0; }
}
@media (max-width: 575px) {
  .lavi-services .lv-dance .lv-chip { padding: 22px 22px; gap: 16px; }
  .lavi-services .lv-dance .lv-chip__icon { width: 56px; height: 56px; font-size: 22px; }
  .lavi-services .lv-dance .lv-chip .select-title { font-size: 22px; }
}

/* =====================================================================
   CREATIVE ARTS (index-6 img-box8 collage + quote block)
   ===================================================================== */
.lavi-services .lv-arts { background: #fff; overflow: hidden; }
/* collage: three photos placed with percentages inside one fixed-proportion box, so it scales evenly */
.lavi-services .lv-arts .img-box8 { position: relative; width: 100%; max-width: 540px; aspect-ratio: 9 / 10; margin: 0 auto; padding: 0; }
.lavi-services .lv-arts .img-box8 .img1,
.lavi-services .lv-arts .img-box8 .img2,
.lavi-services .lv-arts .img-box8 .img3 {
  position: absolute; margin: 0; display: block; overflow: hidden; background: #fff;
  border: 8px solid #fff; border-radius: 22px; box-shadow: 0 14px 34px rgba(72, 22, 95, 0.18);
}
.lavi-services .lv-arts .img-box8 .img1 { left: 0; top: 0; width: 58%; aspect-ratio: 1000 / 1462; z-index: 1; }
.lavi-services .lv-arts .img-box8 .img2 { right: 0; top: 8%; width: 46%; aspect-ratio: 1200 / 1020; z-index: 2; }
.lavi-services .lv-arts .img-box8 .img3 { left: 18%; bottom: 0; width: 60%; aspect-ratio: 1200 / 840; z-index: 3; }
.lavi-services .lv-arts .img-box8 img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 767px) {
  .lavi-services .lv-arts .img-box8 .img1,
  .lavi-services .lv-arts .img-box8 .img2,
  .lavi-services .lv-arts .img-box8 .img3 { border-width: 5px; border-radius: 16px; display: block; }
  .lavi-services .lv-arts .img-box8 { max-width: 420px; }
}
.lavi-services .lv-arts .lv-quote { margin-bottom: 0; padding: 24px 28px; gap: 20px; border-radius: 20px; }
.lavi-services .lv-arts .lv-quote::after { display: none; }
.lavi-services .lv-arts .lv-quote__icon {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--theme-color); color: #fff;
  display: grid; place-items: center; font-size: 22px;
}
.lavi-services .lv-arts .lv-quote p { margin: 0; font-family: var(--title-font); font-size: 20px; font-weight: 500; color: var(--vs-secondary-color); line-height: 1.4; }

/* =====================================================================
   ACADEMIC TUITION (two-column: photo left, content right)
   ===================================================================== */
.lavi-services .lv-tuition { overflow: hidden; }
.lavi-services .lv-tuition__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 28px; border: 6px solid #fff; box-shadow: 0 18px 44px rgba(72, 22, 95, 0.16);
}
.lavi-services .lv-tuition .sec-subtitle { margin-bottom: 14px; }
.lavi-services .lv-tuition .sec-title { margin-bottom: 14px; }
.lavi-services .lv-tuition .sec-text { max-width: 520px; margin-bottom: 20px; }
.lavi-services .lv-tuition__tag {
  display: inline-block; margin-bottom: 26px; padding: 8px 20px; border-radius: 50px;
  background: #fff; border: 2px solid var(--theme-color2); color: var(--theme-color);
  font-family: var(--title-font); font-weight: 600; font-size: 16px; letter-spacing: 0.04em; line-height: 1.2;
}
@media (min-width: 992px) {
  .lavi-services .lv-tuition__media { flex: 0 0 45%; max-width: 45%; }
  .lavi-services .lv-tuition__content { flex: 0 0 55%; max-width: 55%; padding-left: 32px; }
}
@media (max-width: 991px) {
  .lavi-services .lv-tuition { padding-top: 56px; padding-bottom: 56px; }
  .lavi-services .lv-tuition__media img { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .lavi-services .lv-tuition { padding-top: 44px; padding-bottom: 44px; }
  .lavi-services .lv-tuition__media img { border-radius: 22px; border-width: 4px; }
}

/* =====================================================================
   ENQUIRY CTA (compact horizontal panel)
   ===================================================================== */
.lavi-services .lv-svc-cta { background: #fff; overflow: hidden; padding-top: 64px; padding-bottom: 64px; }
.lavi-services .lv-cta-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 40px 48px; border-radius: 32px; border-top: 4px solid var(--theme-color2);
  background: linear-gradient(120deg, #3b1050 0%, #48165f 55%, #5d2077 100%);
  box-shadow: 0 18px 44px rgba(72, 22, 95, 0.22);
}
.lavi-services .lv-cta-panel__text { max-width: 640px; }
.lavi-services .lv-cta-panel__label {
  display: block; margin-bottom: 10px; color: var(--theme-color2);
  font-family: var(--title-font); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
}
.lavi-services .lv-cta-panel__title { margin: 0 0 10px; color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; font-weight: 600; text-transform: none; }
.lavi-services .lv-cta-panel__desc { margin: 0; color: #e6d9ee; font-size: 17px; line-height: 1.6; }
.lavi-services .lv-cta-panel__btns { display: flex; flex: none; gap: 14px; }
.lavi-services .lv-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  height: 50px; padding: 0 28px; border-radius: 50px; border: 2px solid transparent;
  font-family: var(--title-font); font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lavi-services .lv-cta-btn--primary { background: var(--theme-color); color: #fff; }
.lavi-services .lv-cta-btn--primary:hover { background: #a02c5c; color: #fff; transform: translateY(-2px); }
.lavi-services .lv-cta-btn--ghost { background: transparent; color: #fff; border-color: var(--theme-color2); }
.lavi-services .lv-cta-btn--ghost:hover { background: var(--theme-color2); color: #fff; transform: translateY(-2px); }
.lavi-services .lv-cta-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 991px) {
  .lavi-services .lv-svc-cta { padding-top: 48px; padding-bottom: 48px; }
  .lavi-services .lv-cta-panel { flex-direction: column; align-items: flex-start; gap: 24px; padding: 34px 32px; }
}
@media (max-width: 575px) {
  .lavi-services .lv-cta-panel { padding: 28px 22px; border-radius: 26px; }
  .lavi-services .lv-cta-panel__btns { flex-direction: column; width: 100%; }
  .lavi-services .lv-cta-btn { width: 100%; }
  .lavi-services .lv-cta-panel__desc { font-size: 16px; }
}
@media (max-width: 359px) {
  .lavi-services .lv-services-banner__collage { width: 130px; }
}

/* phones: hide the banner picture */
@media (max-width: 575px) { .lavi-services .lv-services-banner__collage { display: none; } }