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

/* =====================================================================
   ABOUT BANNER (Kiddino .breadcumb-wrapper, restyled)
   ===================================================================== */
.lavi-about .lv-about-banner {
  position: relative;
  padding: 80px 0 64px;
  background: linear-gradient(115deg, #fff9ef 0%, #fff9ef 45%, #f1e8f5 100%);
  overflow: hidden;
}
.lavi-about .lv-about-banner .breadcumb-content { position: relative; z-index: 2; max-width: 640px; }
.lavi-about .lv-about-banner .breadcumb-title {
  font-size: clamp(40px, 6vw, 70px);
  color: var(--vs-secondary-color);
  margin: 0 0 14px;
  line-height: 1.1;
}
.lavi-about .lv-about-banner .breadcumb-text { font-size: 19px; margin: 0; max-width: 520px; }
.lavi-about .lv-about-banner .breadcumb-menu-wrap { margin: 34px 0 0; min-height: 0; }
.lavi-about .lv-about-banner .breadcumb-menu { display: inline-block; border-radius: 50px; padding: 12px 28px; }
.lavi-about .lv-about-banner .breadcumb-menu a:hover { color: var(--theme-color2); }

/* decorative brand shapes (CSS only, palette colours) */
.lavi-about .lv-about-banner__shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.lavi-about .lv-about-banner__shape--ring {
  width: 340px; height: 340px; right: 6%; top: 50%; transform: translateY(-50%);
  border: 34px solid rgba(181, 138, 53, 0.28);
  animation: lv-about-float 9s ease-in-out infinite;
}
.lavi-about .lv-about-banner__shape--blob {
  width: 220px; height: 220px; right: 17%; top: 22%;
  background: rgba(194, 56, 114, 0.14);
  border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  animation: lv-about-float 7s ease-in-out infinite reverse;
}
.lavi-about .lv-about-banner__shape--dot {
  width: 26px; height: 26px; right: 36%; bottom: 20%;
  background: var(--lv-pink, #c23872);
  animation: lv-about-float 5s ease-in-out infinite 0.5s;
}
@keyframes lv-about-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 14px)); } }
.lavi-about .lv-about-banner__shape--blob,
.lavi-about .lv-about-banner__shape--dot { animation-name: lv-about-bob; }
@keyframes lv-about-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

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

@media (max-width: 991px) {
  .lavi-about .lv-about-banner { padding: 56px 0 48px; }
  .lavi-about .lv-about-banner__shape--ring { width: 240px; height: 240px; border-width: 24px; right: -60px; }
  .lavi-about .lv-about-banner__shape--blob { right: 8%; width: 150px; height: 150px; }
}
@media (max-width: 575px) {
  .lavi-about .lv-about-banner { padding: 44px 0 40px; }
  .lavi-about .lv-about-banner .breadcumb-text { font-size: 17px; }
  .lavi-about .lv-about-banner__shape--ring { width: 180px; height: 180px; border-width: 18px; right: -70px; opacity: 0.8; }
  .lavi-about .lv-about-banner__shape--blob,
  .lavi-about .lv-about-banner__shape--dot { display: none; }
}

/* =====================================================================
   WHO WE ARE (Kiddino img-box2 + transform-banner + vs-circle.jump; image on the right)
   ===================================================================== */
.lavi-about .lv-who { background: #fff; overflow: hidden; }
.lavi-about .lv-who .sec-title { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.15; margin-top: 0; color: var(--vs-secondary-color); }
.lavi-about .lv-who .sec-text { font-size: 18px; line-height: 1.7; }
.lavi-about .lv-who .img-box2 { max-width: 590px; margin: 0 auto 30px; }
.lavi-about .lv-who .transform-banner img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 8px solid #fff; box-shadow: 0 18px 44px rgba(72, 22, 95, 0.16); }
/* gold ring from the template, sized to sit behind the image without causing overflow */
.lavi-about .lv-who .vs-circle { --circle-size: 230px; --circle-border-size: 42px; --circle-border-color: var(--lv-gold, #b58a35); right: -4%; top: -4%; opacity: 0.9; }
.lavi-about .lv-who .info-style1 .info-title { color: var(--theme-color); }
.lavi-about .lv-who .info-style1 .info-text { color: var(--vs-secondary-color); font-weight: 600; }
@media (max-width: 575px) {
  .lavi-about .lv-who .vs-circle { --circle-size: 130px; --circle-border-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lavi-about .lv-who .vs-circle, .lavi-about .lv-who .transform-banner img { animation: none; }
}

/* =====================================================================
   VISION & MISSION (Kiddino index-8 about-layout: enrol-box style2 + img-box11; images on the left)
   ===================================================================== */
.lavi-about .lv-vm { position: relative; overflow: hidden; }
.lavi-about .lv-vm::before {
  content: ""; position: absolute; right: -110px; top: -110px; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(194, 56, 114, 0.09); pointer-events: none;
}
.lavi-about .lv-vm .sec-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin-top: 0; color: var(--vs-secondary-color); }
.lavi-about .lv-vm .img-box11 { align-items: flex-start; max-width: 620px; margin: 0 auto; padding-bottom: 30px; }
.lavi-about .lv-vm .img-box11 .img1 { width: 88%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 40px 186px; box-shadow: 0 18px 44px rgba(72, 22, 95, 0.15); }
.lavi-about .lv-vm .img-box11 .img2 {
  width: 54%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  margin: -130px 0 0 auto; border: 8px solid var(--smoke-color); border-radius: 40px 100px;
  box-shadow: 0 14px 34px rgba(72, 22, 95, 0.18);
}
/* Mission / Vision rows: brand colours on the template's icon discs */
.lavi-about .lv-vm .enrol-box.style2 { padding-right: 0; }
.lavi-about .lv-vm .enrol-box.style2 .enrol-icon { background-color: var(--lv-gold, #b58a35); border-color: var(--vs-secondary-color); }
.lavi-about .lv-vm .enrol-box.style2 + .enrol-box.style2 .enrol-icon { background-color: var(--theme-color); }
.lavi-about .lv-vm .enrol-content .title { color: var(--vs-secondary-color); font-size: 26px; margin-bottom: 8px; }
.lavi-about .lv-vm .enrol-content p { font-size: 17px; line-height: 1.7; color: var(--body-color); }
@media (max-width: 991px) {
  .lavi-about .lv-vm .img-box11 .img2 { margin-top: -90px; }
  .lavi-about .lv-vm .img-box11 { max-width: 560px; }
}
@media (max-width: 416px) {
  .lavi-about .lv-vm .enrol-box.style2 { padding-left: 0; }
  .lavi-about .lv-vm .img-box11 .img2 { margin-top: -60px; border-width: 6px; }
}

/* =====================================================================
   LEARNING PHILOSOPHY (Kiddino feature-style4 timeline, numbered steps)
   ===================================================================== */
.lavi-about .lv-philosophy { background: #fff; overflow: hidden; }
.lavi-about .lv-philosophy .title-area { margin-bottom: 40px; }
.lavi-about .lv-philosophy .sec-title { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin-top: 0; color: var(--vs-secondary-color); }
.lavi-about .lv-philosophy .feature-body:before { background-color: var(--lv-pink, #c23872); }
.lavi-about .lv-philosophy .feature-body:after { background-color: var(--vs-secondary-color); }
.lavi-about .lv-philosophy .feature-year { font-size: 40px; font-weight: 700; color: var(--lv-gold, #b58a35); letter-spacing: 0.02em; margin-bottom: 10px; }
.lavi-about .lv-philosophy .feature-title { color: var(--vs-secondary-color); font-size: 22px; }
.lavi-about .lv-philosophy .feature-text { font-size: 16.5px; line-height: 1.65; }
.lavi-about .lv-philosophy .feature-img { box-shadow: 0 10px 26px rgba(72, 22, 95, 0.12); }
.lavi-about .lv-philosophy .feature-img img { aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }
@media (max-width: 1199px) {
  /* the connecting line only makes sense in a single row of four */
  .lavi-about .lv-philosophy .feature-body:after { display: none; }
  .lavi-about .lv-philosophy .feature-style4 { margin-bottom: 36px; }
}

/* =====================================================================
   OUR COMMITMENT (overlapping tilted photos left, icon points right)
   ===================================================================== */
.lavi-about .lv-commit { position: relative; overflow: hidden; background: #fff9ef; }
@media (min-width: 992px) {
  .lavi-about .lv-commit__col-media { flex: 0 0 48%; max-width: 48%; }
  .lavi-about .lv-commit__col-text { flex: 0 0 52%; max-width: 52%; padding-left: 40px; }
}
.lavi-about .lv-commit__stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.08; margin: 0 auto; }
.lavi-about .lv-commit__circle { position: absolute; border-radius: 50%; z-index: 0; }
.lavi-about .lv-commit__circle--lav { width: 78%; aspect-ratio: 1; left: 8%; top: 8%; background: #e9dcf3; }
.lavi-about .lv-commit__circle--gold { width: 26%; aspect-ratio: 1; right: 4%; bottom: 8%; background: #f0d98d; opacity: 0.85; }
.lavi-about .lv-commit__photo {
  position: absolute; z-index: 2; display: block; height: auto; object-fit: cover;
  border: 7px solid #fff; border-radius: 26px; box-shadow: 0 16px 38px rgba(72, 22, 95, 0.2);
}
.lavi-about .lv-commit__photo--top { width: 50%; aspect-ratio: 4 / 5; left: 4%; top: 2%; transform: rotate(-5deg); }
.lavi-about .lv-commit__photo--bottom { width: 52%; aspect-ratio: 4 / 5; right: 2%; bottom: 3%; transform: rotate(4deg); z-index: 3; }
.lavi-about .lv-commit__deco { position: absolute; z-index: 4; line-height: 1; pointer-events: none; }
.lavi-about .lv-commit__deco--h1 { left: 0; bottom: 30%; font-size: 26px; color: #c23872; transform: rotate(-12deg); }
.lavi-about .lv-commit__deco--h2 { right: 6%; top: 6%; font-size: 18px; color: #e08fb0; transform: rotate(14deg); }
.lavi-about .lv-commit__deco--s1 { left: 44%; top: 0; font-size: 20px; color: #b58a35; }
.lavi-about .lv-commit__deco--s2 { right: 0; top: 42%; font-size: 15px; color: #b58a35; }

.lavi-about .lv-commit__label {
  display: block; margin-bottom: 12px; color: var(--theme-color);
  font-family: var(--title-font); font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2;
}
.lavi-about .lv-commit__title { margin: 0 0 14px; color: var(--vs-secondary-color); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; font-weight: 600; text-transform: none; }
.lavi-about .lv-commit__desc { margin: 0 0 26px; max-width: 520px; color: #4d4255; font-size: 17px; line-height: 1.7; }
.lavi-about .lv-commit__list { margin: 0; padding: 0; display: grid; gap: 16px; }
.lavi-about .lv-commit__list li { display: flex; align-items: center; gap: 16px; margin: 0; }
.lavi-about .lv-commit__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; }
.lavi-about .lv-commit__icon--pink { background: #f9e1ec; color: #c23872; }
.lavi-about .lv-commit__icon--gold { background: #f5e8c4; color: #9a7329; }
.lavi-about .lv-commit__icon--lav { background: #e9dcf3; color: #48165f; }
.lavi-about .lv-commit__text { color: var(--vs-secondary-color); font-family: var(--title-font); font-weight: 500; font-size: 18px; line-height: 1.4; }
@media (max-width: 991px) {
  .lavi-about .lv-commit { padding-top: 56px; padding-bottom: 56px; }
  .lavi-about .lv-commit__stage { max-width: 440px; }
}
@media (max-width: 575px) {
  .lavi-about .lv-commit { padding-top: 44px; padding-bottom: 44px; }
  .lavi-about .lv-commit__stage { max-width: 340px; }
  .lavi-about .lv-commit__photo { border-width: 5px; border-radius: 20px; }
  .lavi-about .lv-commit__deco--h2, .lavi-about .lv-commit__deco--s2 { display: none; }
  .lavi-about .lv-commit__icon { width: 42px; height: 42px; font-size: 17px; }
  .lavi-about .lv-commit__text { font-size: 16.5px; }
}

/* =====================================================================
   CONTACT CTA (Kiddino flat bg-theme band)
   ===================================================================== */
.lavi-about .lv-about-cta .sec-subtitle { margin-bottom: 14px; }
.lavi-about .lv-about-cta .sec-title { font-size: clamp(28px, 3.6vw, 42px); }
.lavi-about .lv-about-cta .vs-btn.style2 { background-color: #fff; color: var(--vs-secondary-color); }
.lavi-about .lv-about-cta .vs-btn.style2:hover { background-color: var(--lv-gold, #b58a35); color: #fff; }

/* =====================================================================
   REVIEW FIXES
   ===================================================================== */
/* intrinsic width/height attributes are set for layout stability; keep CSS in charge of the final size */
.lavi-about main img { height: auto; }
/* painting photo: show the hands, brush and paint rather than the top of the head */

/* =====================================================================
   MEET OUR EDUCATORS (arch portraits on ivory, text beneath, no card boxes)
   ===================================================================== */
.lavi-about .lv-educators { background: #fff; overflow: hidden; padding-bottom: 56px; }
.lavi-about .lv-educators__head { max-width: 640px; margin: 0 auto 48px; }
.lavi-about .lv-educators__label {
  display: block; margin-bottom: 12px; color: var(--theme-color);
  font-family: var(--title-font); font-weight: 600; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2;
}
.lavi-about .lv-educators__title { margin: 0 0 14px; color: var(--vs-secondary-color); font-size: clamp(30px, 4vw, 44px); line-height: 1.15; font-weight: 600; text-transform: none; }
.lavi-about .lv-educators__desc { margin: 0; color: #4d4255; font-size: 18px; line-height: 1.7; }

/* grid: 6 columns, each profile spans 2 (3 per row); profiles 4 and 5 are centred on row two.
   Every profile is a subgrid of 6 shared rows (photo / name / role / extra / qualification / experience),
   so those rows line up across a whole grid row no matter how the text wraps. */
.lavi-about .lv-educators__grid {
  margin: 0 auto; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; row-gap: 0;
}
.lavi-about .lv-edu {
  margin: 0 0 30px; padding: 0 14px; min-width: 0; text-align: center; grid-column: span 2; grid-row: span 5;
  display: grid; grid-template-rows: subgrid; justify-items: center; align-content: start;
}
.lavi-about .lv-edu:nth-child(4) { grid-column: 2 / span 2; }
.lavi-about .lv-edu:nth-child(n+4) { margin-bottom: 0; }
.lavi-about .lv-edu:nth-child(5) { grid-column: 4 / span 2; }
.lavi-about .lv-edu > .lv-edu__photo { grid-row: 1; }
.lavi-about .lv-edu > .lv-edu__name { grid-row: 2; }
.lavi-about .lv-edu > .lv-edu__info { grid-row: 3; align-self: start; width: 100%; min-width: 0; }
.lavi-about .lv-edu > .lv-edu__qual { grid-row: 4; }
.lavi-about .lv-edu > .lv-edu__exp { grid-row: 5; }
.lavi-about .lv-edu > p, .lavi-about .lv-edu > h3, .lavi-about .lv-edu__info > p { width: 100%; min-width: 0; overflow-wrap: break-word; }
.lavi-about .lv-edu__photo {
  position: relative; width: 100%; margin: 0 0 22px; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px;
  background: #e9dcf3; padding: 6px; box-shadow: 0 8px 22px rgba(72, 22, 95, 0.1);
}
.lavi-about .lv-edu__photo--pink { background: #f5cfe0; }
.lavi-about .lv-edu__photo--gold { background: #f0dfae; }
.lavi-about .lv-edu__photo--lav { background: #dccbee; }
.lavi-about .lv-edu__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  border-radius: 999px 999px 18px 18px; background: #fff;
}
.lavi-about .lv-edu__name { margin: 0 0 8px; color: var(--vs-secondary-color); font-size: 26px; line-height: 1.25; font-weight: 600; text-transform: none; }
.lavi-about .lv-edu__role { margin: 0; color: var(--theme-color); font-family: var(--title-font); font-weight: 600; font-size: 17px; line-height: 1.4; text-wrap: balance; }
.lavi-about .lv-edu__extra { margin: 8px 0 0; text-wrap: balance; color: #4d4255; font-size: 16px; line-height: 1.5; }
.lavi-about .lv-edu__qual, .lavi-about .lv-edu__exp { margin: 0; color: var(--vs-secondary-color); font-size: 16px; line-height: 1.6; }
.lavi-about .lv-edu__qual { margin-top: 18px; }
.lavi-about .lv-edu__exp { margin-top: 2px; }
.lavi-about .lv-edu__qual span, .lavi-about .lv-edu__exp span {
  display: inline-block; margin-right: 8px; color: #9a7329; font-family: var(--title-font); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 991px) {
  .lavi-about .lv-educators { padding-top: 56px; padding-bottom: 44px; }
  .lavi-about .lv-educators__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 680px; column-gap: 16px; }
  .lavi-about .lv-edu:nth-child(n+4) { margin-bottom: 30px; }
  .lavi-about .lv-edu:nth-child(4) { grid-column: span 2; }
  .lavi-about .lv-edu:nth-child(5) { margin-bottom: 0; }
  .lavi-about .lv-edu:nth-child(5) { grid-column: 2 / span 2; }
  .lavi-about .lv-educators__head { margin-bottom: 36px; }
}
@media (max-width: 575px) {
  .lavi-about .lv-educators { padding-top: 44px; padding-bottom: 44px; }
  .lavi-about .lv-educators__grid { grid-template-columns: minmax(0, 300px); justify-content: center; column-gap: 0; }
  .lavi-about .lv-edu, .lavi-about .lv-edu:nth-child(4), .lavi-about .lv-edu:nth-child(5) { grid-column: 1; margin-bottom: 36px; }
  .lavi-about .lv-edu:nth-child(5) { margin-bottom: 0; }
  .lavi-about .lv-edu__photo { width: 100%; }
  .lavi-about .lv-edu__name { font-size: 24px; }
}

/* =====================================================================
   ABOUT BANNER: children cut-out on the right (over the existing decorative circles)
   ===================================================================== */
.lavi-about .lv-about-banner__kids {
  position: absolute; z-index: 2; right: 3%; bottom: 0; display: block; line-height: 0; pointer-events: none;
  width: clamp(260px, 38vw, 560px);
}
.lavi-about .lv-about-banner__kids img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 991px) {
  .lavi-about .lv-about-banner__kids { width: clamp(220px, 34vw, 330px); right: 2%; }
}
/* phones: the image moves below the text, centred, inside the banner */
@media (max-width: 767px) {
  .lavi-about .lv-about-banner__kids { position: relative; right: auto; bottom: auto; width: min(82%, 380px); margin: 28px auto 0; z-index: 2; }
  .lavi-about .lv-about-banner:has(.lv-about-banner__kids) { padding-bottom: 0; }
}

/* Learning Philosophy: hover frame on the photos in brand gold (template default was pink) */
.lavi-about .lv-philosophy .feature-style4 .feature-img::before { border: 3px solid var(--lv-gold, #b58a35); }

/* phones: hide the banner picture (overrides the stacked layout above) */
@media (max-width: 575px) {
  .lavi-about .lv-about-banner__kids { display: none; }
  .lavi-about .lv-about-banner:has(.lv-about-banner__kids) { padding-bottom: 44px; }
}