/* LinguaPro homepage cohesion layer (application/views/home/index.php).
 * Loaded only by the homepage and scoped to .lp-home. It does not rebuild
 * the approved sections (hub, promo, tutors, learning, services, Pro+). It
 * aligns their headings and CTAs to one system and brings the older
 * CMS/testimonial/Media Central blocks up to the same design language.
 * Theme breakpoints: 1199 / 991 / 767 / 600. */
.lp-home{
  --h-navy:#071b49;--h-ink:#14284d;--h-muted:#50627e;--h-cyan:#00a6e0;--h-bar:#14b2ec;--h-line:#e2edf5;
  --h-radius:22px;--h-shadow:0 10px 28px rgba(9,62,114,.08);--h-shadow-hover:0 18px 40px rgba(9,62,114,.14);
  --h-section-y:clamp(48px,5.2vw,76px);
  --h-btn-h:54px;--h-btn-grad:linear-gradient(110deg,#15b0d9,#0879ff);--h-btn-grad-hover:linear-gradient(110deg,#0ea2cb,#0068dd);
}

/* ---------- 1. Heading system ----------
 * One scale for every major section heading: same max size, weight,
 * colour, accent word, subtitle and divider bar. */
.lp-home .lp-top-tutors-header h2,
.lp-home .lp-learning-header h2,
.lp-home .lp-services-header h2,
.lp-home .lp-home-why .section__header h2,
.lp-home .lp-home-testimonials .section__header h2,
.lp-home .lp-mc-latest .section__header h2{
  font-size:clamp(30px,3vw,46px);font-weight:900;line-height:1.14;letter-spacing:-1px;color:var(--h-navy);margin:0;
}
.lp-home .lp-home-why .section__header h2 span,
.lp-home .lp-home-testimonials .section__header h2 span,
.lp-home .lp-mc-latest .section__header h2 span{color:var(--h-cyan)}
.lp-home .lp-home-why .section__header,
.lp-home .lp-home-testimonials .section__header,
.lp-home .lp-mc-latest .section__header{text-align:center;margin:0 auto clamp(26px,2.6vw,40px);max-width:820px}
.lp-home .lp-home-sub{max-width:640px;margin:12px auto 0;font-size:clamp(15px,1.2vw,19px);font-weight:600;line-height:1.5;color:var(--h-ink)}
.lp-home .lp-home-sub::after{content:"";display:block;width:76px;height:4px;border-radius:4px;background:var(--h-bar);margin:14px auto 0}
.lp-home .lp-top-tutors-header p,.lp-home .lp-learning-header p{color:var(--h-ink)}

/* ---------- 2. CTA system ----------
 * Primary: gradient pill, 54px, white text, arrow nudges on hover.
 * Secondary: white pill with cyan border. Section personalities keep their
 * own colours (service cards) but share height/radius/weight. */
.lp-home .lp-top-explore,
.lp-home .lp-learning-find,
.lp-home .lp-home-join .cta-card .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:var(--h-btn-h);height:auto;padding:0 34px;border:0;border-radius:999px;
  background:var(--h-btn-grad);color:#fff!important;font-size:17px;font-weight:800;letter-spacing:.01em;line-height:1.2;text-decoration:none;text-transform:none;
  box-shadow:0 10px 22px rgba(8,121,255,.26);transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.lp-home .lp-top-explore:hover,.lp-home .lp-learning-find:hover,.lp-home .lp-home-join .cta-card .btn:hover{
  background:var(--h-btn-grad-hover);color:#fff!important;transform:translateY(-2px);box-shadow:0 14px 28px rgba(8,121,255,.32);
}
.lp-home .lp-top-explore:active,.lp-home .lp-learning-find:active,.lp-home .lp-home-join .cta-card .btn:active{transform:translateY(0) scale(.985)}
.lp-home .lp-top-explore:focus-visible,.lp-home .lp-learning-find:focus-visible,.lp-home .lp-home-join .cta-card .btn:focus-visible,
.lp-home .lp-mc-latest .text-button:focus-visible,.lp-home .lp-mc-latest .blog-card .btn:focus-visible{outline:3px solid #ffcc45;outline-offset:3px}
.lp-home .lp-learning-find{border:0;font-size:17px;padding:0 40px}
.lp-home .lp-learning-find span,.lp-home .lp-top-explore span{font-size:1.2em;transition:transform .18s ease}
.lp-home .lp-learning-find:hover span,.lp-home .lp-top-explore:hover span{transform:translateX(4px)}
.lp-home .lp-home-join .cta-card .btn::after{content:"\2192";font-size:1.2em;line-height:1;transition:transform .18s ease}
.lp-home .lp-home-join .cta-card .btn:hover::after{transform:translateX(4px)}
/* Secondary pill: Media Central "Explore" link + card buttons. */
.lp-home .lp-mc-latest .text-button{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 10px 0 26px;border-radius:999px;border:2px solid #5ce1e6;
  background:#fff;color:#075e95;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(9,62,114,.06);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.lp-home .lp-mc-latest .text-button:hover{background:#e9f9ff;border-color:var(--h-bar);transform:translateY(-2px)}
.lp-home .lp-mc-latest .text-button .circle-arrow{width:34px;height:34px;margin:0;border-radius:50%;background:var(--h-btn-grad)}
.lp-home .lp-mc-latest .text-button::after,.lp-home .lp-mc-latest .text-button::before{display:none}
.lp-home .lp-mc-latest .blog-card .btn{min-height:42px;height:auto;padding:0 20px;border-radius:999px;border:2px solid #5ce1e6;background:#fff;color:#075e95;font-weight:800;font-size:14.5px;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.lp-home .lp-mc-latest .blog-card .btn:hover{background:#e9f9ff;border-color:var(--h-bar);color:var(--h-navy)}

/* ---------- 3. Section rhythm & transitions ----------
 * Journey: hub → promo → tutors (blue band) → learn (blue fade) → services
 * (fades to white) → social proof (soft lavender band) → why LinguaPro
 * (white) → join (blue band) → Media Central (white) → Pro+ → footer. */
.lp-home .section.lp-home-testimonials{position:relative;padding:var(--h-section-y) 0;
  background:radial-gradient(ellipse 50% 60% at 8% 0,rgba(167,123,243,.12),transparent 70%),radial-gradient(ellipse 45% 55% at 95% 100%,rgba(92,225,230,.18),transparent 70%),linear-gradient(180deg,#fff 0,#f5f3ff 18%,#eef7ff 100%)}
.lp-home .section.lp-home-why{padding:var(--h-section-y) 0 calc(var(--h-section-y) * .6);background:linear-gradient(180deg,#eef7ff 0,#fff 140px)}
.lp-home .section.lp-home-join{position:relative;padding:calc(var(--h-section-y) * .6) 0 calc(var(--h-section-y) * .45);background:linear-gradient(180deg,#fff 0,#eaf8ff 100%)}
.lp-home .section.lp-mc-latest{padding:calc(var(--h-section-y) * .75) 0 calc(var(--h-section-y) * .5);background:linear-gradient(180deg,#eaf8ff 0,#fff 180px)}
.lp-home .section.lp-home-proplus{padding-top:calc(var(--h-section-y) * .4);padding-bottom:var(--h-section-y)}

/* ---------- 4. Social proof (testimonials) ---------- */
.lp-home .lp-home-testimonials .testimonial-wrapper{position:relative;max-width:1000px;margin:0 auto;padding:30px clamp(18px,4vw,56px) 34px;background:#fff;border:1px solid #e6e1fb;border-radius:28px;box-shadow:var(--h-shadow)}
.lp-home .lp-home-testimonials .testimonial-wrapper::before{content:"\201C";position:absolute;left:26px;top:-34px;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(135deg,#a77bf3,#7b4ee6);color:#fff;font:900 54px/1 Georgia,serif;padding-top:22px;box-shadow:0 10px 22px rgba(123,78,230,.3)}
.lp-home .lp-home-testimonials .testimonial-user__pic img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #fff,0 0 0 6px #e6e1fb;transition:box-shadow .2s ease,transform .2s ease}
.lp-home .lp-home-testimonials .slick-center .testimonial-user__pic img,
.lp-home .lp-home-testimonials .slick-current .testimonial-user__pic img{box-shadow:0 0 0 4px #fff,0 0 0 7px #15b0d9,0 10px 24px rgba(8,121,255,.25)}
.lp-home .lp-home-testimonials .testimonial-user__details .name{font-size:17px;font-weight:800;color:var(--h-navy)}
.lp-home .lp-home-testimonials .testimonial-content{font-size:clamp(16px,1.35vw,20px);line-height:1.65;color:#2a3a5c;font-weight:500}
.lp-home .lp-home-testimonials .testimonials-main .slick-arrow{width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--h-line);box-shadow:0 5px 15px rgba(17,123,162,.12)}
.lp-home .lp-home-testimonials .testimonials-main .slick-arrow:hover{background:#e7faff}
.lp-home .lp-home-testimonials .testimonials-main .slick-list{background-image:none!important}
.lp-home .lp-home-testimonials .slick-dots li button{background:#d8d2f5}
.lp-home .lp-home-testimonials .slick-dots li.slick-active button{background:#7b4ee6}

/* ---------- 5. Why LinguaPro (CMS "Top Rated" cards) ---------- */
.lp-home .lp-home-why .lp-home-features.grid-blocks{gap:clamp(16px,2vw,26px);overflow:visible;padding-bottom:8px}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block{border:1px solid var(--h-line);border-radius:var(--h-radius);box-shadow:var(--h-shadow);transition:transform .2s ease,box-shadow .2s ease}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:hover{transform:translateY(-4px);box-shadow:var(--h-shadow-hover)}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block__media{padding:14px;background:linear-gradient(160deg,#eaf8ff,#f5f3ff);border-bottom:0}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block__media .media{border-radius:14px;overflow:hidden}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block__content{padding:18px 22px 22px;font-size:15.5px;color:#33425f}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:nth-child(1) .cms-block__content{border-top:4px solid #15b0d9}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:nth-child(2) .cms-block__content{border-top:4px solid #7b4ee6}
.lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:nth-child(3) .cms-block__content{border-top:4px solid #f29b1d}

/* ---------- 6. Join / Teach panels (CMS sign-up block) ---------- */
.lp-home .lp-home-join .grid-layout{gap:clamp(16px,2.2vw,30px)}
.lp-home .lp-home-join .cta-card{position:relative;overflow:hidden;align-items:center;gap:clamp(16px,2.4vw,36px);padding:clamp(22px,2.8vw,40px);border-radius:28px;
  border:1px solid #cfeaf6;box-shadow:var(--h-shadow);background:linear-gradient(140deg,#e3f7ff 0,#f4fcff 55%,#fff 100%)!important;transition:transform .2s ease,box-shadow .2s ease}
.lp-home .lp-home-join .grid-layout__item:nth-child(2) .cta-card{border-color:#ffe2a1;background:linear-gradient(140deg,#fff3d6 0,#fffaf0 55%,#fff 100%)!important}
.lp-home .lp-home-join .cta-card:hover{transform:translateY(-3px);box-shadow:var(--h-shadow-hover)}
.lp-home .lp-home-join .cta-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);pointer-events:none}
.lp-home .lp-home-join .cta-card__media{position:relative;flex:0 0 auto}
.lp-home .lp-home-join .cta-card__media img{width:clamp(140px,11vw,172px)!important;height:auto!important;border-radius:16px;box-shadow:0 14px 30px rgba(7,27,73,.18);transform:rotate(-2deg);transition:transform .25s ease}
.lp-home .lp-home-join .grid-layout__item:nth-child(2) .cta-card__media img{transform:rotate(2deg)}
.lp-home .lp-home-join .cta-card:hover .cta-card__media img{transform:rotate(0) scale(1.02)}
.lp-home .lp-home-join .cta-card__content h2{font-size:clamp(24px,2.1vw,32px);font-weight:900;line-height:1.18;letter-spacing:-.5px;color:var(--h-navy);margin:0 0 10px}
.lp-home .lp-home-join .cta-card__content p{font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:var(--h-ink);margin:0 0 22px}
.lp-home .lp-home-join .grid-layout__item:nth-child(2) .cta-card .btn{background:linear-gradient(110deg,#ffb347,#ff7a3d);box-shadow:0 10px 22px rgba(255,122,61,.28)}
.lp-home .lp-home-join .grid-layout__item:nth-child(2) .cta-card .btn:hover{background:linear-gradient(110deg,#ffa52e,#f2641f);box-shadow:0 14px 28px rgba(255,122,61,.34)}

/* ---------- 7. Media Central cards ---------- */
.lp-home .lp-mc-latest .blog-card{border:1px solid var(--h-line);border-radius:var(--h-radius);overflow:hidden;background:#fff;box-shadow:var(--h-shadow);transition:transform .2s ease,box-shadow .2s ease}
.lp-home .lp-mc-latest .blog-card:hover{transform:translateY(-4px);box-shadow:var(--h-shadow-hover)}
.lp-home .lp-mc-latest .blog-card__head{border-radius:0}
.lp-home .lp-mc-latest .blog-card-media img{transition:transform .35s ease}
.lp-home .lp-mc-latest .blog-card:hover .blog-card-media img{transform:scale(1.04)}
.lp-home .lp-mc-latest .blog-card-title h3{color:var(--h-navy);font-weight:800}
.lp-home .lp-mc-latest .slick-list{padding:10px 4px 26px}
.lp-home .lp-mc-latest .section__footer{margin-top:8px}

/* ---------- 8. Teacher cards → profile continuity ----------
 * Same star row as the profile (five full stars for 5.0), lift + photo
 * zoom on hover, CTA pinned to the card bottom so rows line up. */
.lp-home .lp-top-rating .star-rating__icon{margin-right:0}
.lp-home .lp-top-track>.lp-top-slide{display:flex!important;height:auto}
.lp-home .lp-top-card{flex:1;height:auto;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lp-home .lp-top-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,127,159,.16);border-color:#bfe7f4}
.lp-home .lp-top-photo>a>img{transition:transform .35s ease}
.lp-home .lp-top-card:hover .lp-top-photo>a>img{transform:scale(1.035)}
.lp-home .lp-top-profile{margin-top:4px;background:var(--h-btn-grad);box-shadow:0 8px 18px rgba(8,121,255,.22);transition:background .18s ease,box-shadow .18s ease}
.lp-home .lp-top-profile:hover{background:var(--h-btn-grad-hover);box-shadow:0 10px 22px rgba(8,121,255,.3)}
.lp-home .lp-top-card-body{flex:1}

/* ---------- 9. Tablet ---------- */
@media(max-width:991px) and (min-width:768px){
  /* Three CMS cards are too narrow side by side here: stack them as image-left rows. */
  .lp-home .lp-home-why .lp-home-features.grid-blocks{flex-direction:column}
  .lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block{flex:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch}
  .lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block__content{display:flex;align-items:center;border-top:0!important;border-left:4px solid #15b0d9}
  .lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:nth-child(2) .cms-block__content{border-left-color:#7b4ee6}
  .lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block:nth-child(3) .cms-block__content{border-left-color:#f29b1d}
}
@media(max-width:991px){
  .lp-home .lp-home-join .cta-card{flex-direction:row}
  .lp-home .lp-home-join .grid-layout{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 10. Phone ---------- */
@media(max-width:767px){
  .lp-home{--h-btn-h:52px;--h-section-y:44px}
  .lp-home .lp-top-tutors-header h2,.lp-home .lp-learning-header h2,.lp-home .lp-services-header h2,
  .lp-home .lp-home-why .section__header h2,.lp-home .lp-home-testimonials .section__header h2,.lp-home .lp-mc-latest .section__header h2{font-size:29px;letter-spacing:-.6px}
  .lp-home .lp-home-sub{font-size:15px}
  .lp-home .lp-home-why .section__header,.lp-home .lp-home-testimonials .section__header,.lp-home .lp-mc-latest .section__header{padding:0 16px}
  .lp-home .lp-top-explore,.lp-home .lp-learning-find{width:calc(100% - 32px);max-width:360px;font-size:16px;padding:0 24px}
  .lp-home .lp-home-testimonials .container{padding-left:16px;padding-right:16px}
  .lp-home .lp-home-testimonials .testimonial-wrapper{padding:34px 14px 26px;border-radius:22px;margin-top:44px}
  .lp-home .lp-home-testimonials .testimonial-wrapper::before{left:50%;transform:translateX(-50%);width:56px;height:56px;top:-28px;font-size:44px;padding-top:18px;border-radius:16px}
  .lp-home .lp-home-testimonials .testimonial-content{font-size:16px}
  .lp-home .lp-home-why .container,.lp-home .lp-home-join .container,.lp-home .lp-mc-latest .container{padding-left:16px;padding-right:16px}
  .lp-home .lp-home-why .lp-home-features.grid-blocks .cms-block__media .media{max-width:none}
  .lp-home .lp-home-join .cta-card{flex-direction:column;text-align:center;padding:24px 18px 26px;border-radius:24px}
  .lp-home .lp-home-join .cta-card__media img{width:150px!important}
  .lp-home .lp-home-join .cta-card__content{width:100%}
  .lp-home .lp-home-join .cta-card .btn{width:100%;max-width:360px}
  .lp-home .lp-mc-latest .text-button{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .lp-home *{transition:none!important}
}