/* =============================================================================
   landing-main.css — page-specific styles for the converted GROUP home page
   (Views/Home/Index.cshtml → Views/Shared/Schools/Main/Landing/_*.cshtml).

   Builds on landing.css (shared landing skeleton: kk-hero, kk-welcome, kk-strip,
   kk-awards) and components.css (kk-carousel, kk-video, kk-counter, kk-readmore).
   Every rule is scoped under .kk-landing--main. Values are copied from the
   page's generated Elementor CSS (post-9.css), not eyeballed.
   ============================================================================= */

.kk-landing--main {
    --kkl-awards-bg: #ecb444;   /* Awards & Recognition band (post-9: 6c8f81e)   */
}

/* -- Hero (4989c3d): taller than the school-landing default ------------------- */
.kk-landing--main .kk-hero { min-height: 565px; }
@media (max-width: 1024px) { .kk-landing--main .kk-hero { min-height: 400px; } }
@media (max-width: 767px)  { .kk-landing--main .kk-hero { min-height: 180px; } }

/* -- Welcome band (ff23625/0e6a3be): 40px title, no stat separators ------------ */
.kk-landing--main .kk-welcome__title { font-size: 40px; line-height: 43px; }
.kk-landing--main .kk-welcome__stat { border-right: 0; }
/* counter number + "+" suffix share the 65px style of .kk-welcome__big */
.kk-landing--main .kk-welcome__big .kk-counter__number { display: inline; font-size: inherit; font-family: inherit; color: inherit; }
@media (max-width: 1024px) { .kk-landing--main .kk-welcome__title { font-size: 30px; } }
@media (max-width: 767px)  { .kk-landing--main .kk-welcome__title { font-size: 25px; line-height: 31px; } }

/* -- Meet Our Leaders (#our-leaders, 5638f3e) ---------------------------------- */
.kk-mlead {
    padding: 50px 0 0;
    background: url("/wp-content/uploads/2024/11/Leadership-Bg-1.webp") center left / cover no-repeat;
}
.kk-mlead__title { text-align: center; font-size: 40px; font-weight: 700; text-transform: uppercase; color: #44ACAF; }
.kk-mlead .kk-carousel { --kk-carousel-per: 1; --kk-carousel-per-tablet: 1; --kk-carousel-per-mobile: 1; --kk-carousel-gap: 10px; margin-top: 10px; padding-bottom: 20px; }
.kk-mlead__slide {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center;
    max-width: 1140px; margin: 0 auto; padding: 20px;
}
.kk-mlead__photo { display: flex; justify-content: center; }
.kk-mlead__photo img { width: 100%; max-width: 800px; height: auto; }
.kk-mlead__name { font-size: 35px; font-weight: 700; color: #1A1A1A; }
.kk-mlead__role { font-size: 20px; font-weight: 600; line-height: 31px; color: #202020; margin: 8px 0 0; }
.kk-mlead__text { font-size: 18px; font-weight: 500; line-height: 26px; color: #1D1D1D; margin: 14px 0 0; }
@media (max-width: 1024px) {
    .kk-mlead__title { font-size: 35px; }
    .kk-mlead__name { font-size: 25px; }
    .kk-mlead__role { font-size: 18px; line-height: 25px; }
    .kk-mlead__text { font-size: 16px; line-height: 25px; }
}
@media (max-width: 767px) {
    .kk-mlead__title { font-size: 30px; }
    .kk-mlead__slide { grid-template-columns: 1fr; gap: 16px; }
    .kk-mlead__role { font-size: 16px; line-height: 25px; }
    .kk-mlead__text { font-size: 14px; line-height: 23px; }
}

/* -- Our story (#our-story, ee80556) — read-more replaces the jQuery toggle ----- */
.kk-story { padding: 60px 0; }
.kk-story__title { text-align: center; font-size: 35px; line-height: 60px; font-weight: 700; text-transform: uppercase; color: #0F0F0F; }
.kk-story__divider { width: 72%; margin: 0 auto 10px; border: 0; border-top: 2px solid #B98E7F; }
.kk-story__text { font-size: 16px; font-weight: 400; color: #161616; padding: 5px 30px 0; }
.kk-story__text p { margin: 0 0 16px; }
.kk-story__more { text-align: center; margin: 4px 0 0; }
.kk-story__more .kk-readmore {
    background: transparent; border: 0; border-bottom: 1px solid #44ACAF;
    color: #44ACAF; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600;
    padding: 4px 8px; cursor: pointer;
}
.kk-story__more .kk-readmore:focus-visible { outline: 2px solid #44ACAF; outline-offset: 2px; }
@media (max-width: 1024px) {
    .kk-story { padding: 60px 10px; }
    .kk-story__title { font-size: 30px; line-height: 35px; }
    .kk-story__text { font-size: 14px; padding: 0; }
}
@media (max-width: 767px) {
    .kk-story { padding: 50px 10px; }
    .kk-story__title { font-size: 25px; line-height: 33px; }
}

/* -- Educating Generations (86e3d00): reuses .kk-strip, big banner heading ------ */
.kk-landing--main .kk-strip { margin-bottom: 0; }
.kk-landing--main .kk-strip::before { content: none; }   /* no texture overlay on this page */
.kk-landing--main .kk-strip__text {
    font-size: 65px; line-height: 70px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: #fff; padding-left: 50px;
}
@media (max-width: 1024px) {
    .kk-landing--main .kk-strip__text { font-size: 37px; line-height: 45px; padding-left: 20px; }
}
@media (max-width: 767px) {
    .kk-landing--main .kk-strip__text { font-size: 35px; line-height: 43px; padding: 20px 20px 20px 30px; }
}

/* -- Our Legacy timeline (#our-legacy, 7b93784/49e272f) -------------------------- */
.kk-legacy { padding: 70px 0; }
.kk-legacy__title { text-align: center; font-size: 45px; line-height: 43px; font-weight: 700; text-transform: uppercase; color: #44ACAF; }
.kk-legacy__map { position: relative; margin-top: 30px; overflow: hidden; }
.kk-legacy__map img { width: 100%; height: auto; display: block; }
/* Invisible click areas over the campuses drawn on the timeline image (the
   original hotspot widget: 154x137 boxes, white icon, transparent background).
   The boxes scale down on small screens instead of overflowing the image. */
.kk-legacy__spot {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: clamp(48px, 10vw, 154px); height: clamp(42px, 9vw, 137px); color: #fff;
}
.kk-legacy__spot svg { width: 20px; height: 20px; fill: currentColor; }
.kk-legacy__spot:focus-visible { outline: 2px solid #44ACAF; outline-offset: 2px; }
.kk-legacy__spot--1 { left: 2%;  top: 78%; transform: translate(-2%, -78%); }
.kk-legacy__spot--2 { left: 21%; top: 27%; transform: translate(-21%, -27%); }
.kk-legacy__spot--3 { left: 40%; top: 75%; transform: translate(-40%, -75%); }
.kk-legacy__spot--4 { left: 59%; top: 26%; transform: translate(-59%, -26%); }
.kk-legacy__spot--5 { left: 78%; top: 77%; transform: translate(-78%, -77%); }
.kk-legacy__spot--6 { left: 98%; top: 26%; transform: translate(-98%, -26%); }
@media (max-width: 1024px) { .kk-legacy__title { font-size: 35px; } }
@media (max-width: 767px)  {
    .kk-legacy__title { font-size: 30px; }
    .kk-legacy__spot svg { width: 14px; height: 14px; }
}

/* -- Mission / Vision (#vision-mission, 2465d09) ---------------------------------- */
.kk-vm { background: #44ACAF; padding: 50px 0; }
.kk-vm__cols { display: flex; gap: 30px; }
.kk-vm__box { flex: 1 1 0; min-width: 0; text-align: center; padding: 0 20px; }
.kk-vm__box img { width: 18%; height: auto; margin-bottom: 15px; }
.kk-vm__box h3 { font-size: 35px; font-weight: 700; text-transform: uppercase; color: #FFFFFF; }
.kk-vm__box p { font-size: 18px; font-weight: 500; line-height: 30px; color: #F4F4F4; margin: 10px 0 0; }
@media (max-width: 1024px) {
    .kk-vm__box h3 { font-size: 30px; }
    .kk-vm__box p { font-size: 15px; line-height: 27px; }
}
@media (max-width: 767px) {
    .kk-vm__cols { flex-direction: column; }
    .kk-vm__box h3 { font-size: 25px; }
    .kk-vm__box p { font-size: 14px; line-height: 24px; }
}

/* -- Key Highlights (f77eb59): video + icon list ----------------------------------- */
.kk-high { background: #F0F0F0; padding: 50px 0; }
.kk-high__cols { display: flex; align-items: stretch; }
.kk-high__media { flex: 8 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.kk-high__media .kk-video { border-radius: 25px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .5); }
.kk-high__body { flex: 5 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 30px 0 30px 30px; }
.kk-high__title {
    align-self: flex-start; font-size: 25px; line-height: 37px; font-weight: 800; text-transform: uppercase;
    color: #0F0F0F; border-left: 3px solid #44ACAF; padding: 5px 0 5px 15px;
}
.kk-high__list { margin-top: 16px; }
.kk-high__list li { font-size: 18px; color: #222222; margin: 14px 0; }
@media (max-width: 767px) {
    .kk-high__cols { flex-direction: column; }
    .kk-high__body { padding: 30px 0 0; }
    .kk-high__title { font-size: 20px; line-height: 27px; }
    .kk-high__list li { font-size: 15px; }
}

/* -- Awards carousel (1ea6820): pulled up over the yellow band ----------------------- */
.kk-mawards { position: relative; margin-top: -70px; padding-bottom: 80px; border-bottom: 1px solid #E6E6E6; }
.kk-mawards .kk-carousel { --kk-carousel-per: 4; --kk-carousel-per-tablet: 2; --kk-carousel-per-mobile: 1; --kk-carousel-gap: 20px; }
.kk-landing--main .kk-awards__card img { height: 200px; }   /* post-9 slide images are 200px, not 235px */
/* Equal-height cards: each carousel cell already stretches to the tallest slide;
   make the card fill its cell so shorter entries aren't rendered as shorter boxes. */
.kk-mawards .kk-carousel__track > li { display: flex; }
.kk-mawards .kk-carousel__track > li > .kk-awards__card { width: 100%; }

/* -- RBKEI Values (0ff6d7d) ------------------------------------------------------------ */
.kk-values { padding: 60px 0; }
.kk-values__title { text-align: center; font-size: 35px; line-height: 60px; font-weight: 700; text-transform: uppercase; color: #0F0F0F; }
.kk-values__divider { width: 18%; margin: 0 auto 20px; border: 0; border-top: 2px solid #B98E7F; }
.kk-values__intro { text-align: center; font-size: 16px; line-height: 37px; font-weight: 400; color: #161616; margin: 0 0 23px; }
.kk-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.kk-values__item { margin: 0; text-align: center; }
.kk-values__item img { width: 30%; height: auto; }
.kk-values__item h3 { font-size: 20px; font-weight: 600; color: #bc8c82; margin-top: 10px; }
@media (max-width: 1024px) { .kk-values__intro { font-size: 14px; } }
@media (max-width: 767px) {
    .kk-values__title { font-size: 30px; line-height: 40px; }
    .kk-values__intro { line-height: 25px; padding: 0 10px; }
    .kk-values__grid { grid-template-columns: repeat(2, 1fr); }
    .kk-values__item h3 { font-size: 16px; }
}

/* -- Group Ventures band (#group-ventures, 0c5a1a7) + cards (590bbf8) -------------------- */
.kk-gv { background: #f46474; padding: 60px 0 90px; }
.kk-gv__title { text-align: center; font-size: 45px; line-height: 43px; font-weight: 700; text-transform: uppercase; color: #FFFFFF; }
.kk-ventures { position: relative; margin-top: -50px; padding-bottom: 80px; }
.kk-ventures__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kk-ventures__card {
    background: #FFFFFF; border: 1px solid #B7B7B7; border-radius: 15px;
    padding-bottom: 20px; display: flex; flex-direction: column; gap: 10px;
}
.kk-ventures__card > img { width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 15px 15px 0 0; }
.kk-ventures__name { font-size: 25px; line-height: 25px; font-weight: 700; color: #282828; padding: 0 20px; }
.kk-ventures__text { font-size: 12px; line-height: 20px; font-weight: 500; color: #282828; padding: 0 20px; margin: 0; }
.kk-ventures__more { margin: auto 0 0; padding: 0 0 0 20px; }
.kk-ventures__more a {
    display: inline-flex; align-items: center; gap: 10px;
    color: #44ACAF; font-size: 14px; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid #44ACAF; padding: 0 30px 10px 5px;
    transition: color .2s ease, border-color .2s ease;
}
.kk-ventures__more svg { width: 14px; height: 14px; fill: currentColor; }
.kk-ventures__more a:hover, .kk-ventures__more a:focus { color: #EC666B; border-color: #EC666B; }
.kk-ventures__more a:focus-visible { outline: 2px solid #EC666B; outline-offset: 2px; }
@media (max-width: 767px) {
    .kk-gv__title { font-size: 30px; }
    .kk-ventures { padding: 0 10px 80px; }
    .kk-ventures__grid { grid-template-columns: 1fr; }
}

/* -- Affiliation / accreditation logo carousel (6848b84) ---------------------------------- */
.kk-affil { padding: 80px 0; }
.kk-affil .kk-carousel { --kk-carousel-per: 5; --kk-carousel-per-tablet: 5; --kk-carousel-per-mobile: 3; --kk-carousel-gap: 20px; }
.kk-affil .kk-carousel__track { align-items: center; }
.kk-affil .kk-carousel__track li { display: flex; align-items: center; justify-content: center; }
.kk-affil .kk-carousel__track img { display: block; max-width: 100%; height: auto; }