/* =============================================================================
   LANGUAGE-SPECIFIC CSS FIXES
   This file contains CSS overrides for different languages to handle
   text length differences and layout issues when switching languages.
   ============================================================================= */

/* =============================================================================
   ENGLISH LANGUAGE FIXES
   ============================================================================= */

.lang-en {
  /* Global English text adjustments */
  --text-scale-factor: 0.95; /* Slightly smaller text for English */
}

/* -----------------------------------------------------------------------------
   NAVIGATION FIXES
   ----------------------------------------------------------------------------- */
.lang-en .navbar-nav .nav-link {
  font-size: clamp(13px, 1.1vw, 15px);
  padding: 0.5rem clamp(8px, 1vw, 12px);
}

.lang-en .navbar-brand img {
  max-height: clamp(40px, 5vw, 50px);
}

/* Dropdown menu fixes */
.lang-en .dropdown-item {
  font-size: clamp(13px, 1vw, 14px);
  padding: 0.4rem 1rem;
}

/* -----------------------------------------------------------------------------
   courses.html Fixes
   ----------------------------------------------------------------------------- */
.lang-en .hero-text h1 {
  line-height: 1.2 !important;
  margin-bottom: clamp(20px, 2.5vw, 35px) !important;
}

.lang-en .hero-text p {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  line-height: 1.4 !important;
  margin-bottom: clamp(15px, 2vw, 25px) !important;
}

/* Hero stats fixes */
.lang-en .hero-stats-text {
  font-size: clamp(12px, 1.4vw, 16px) !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

.lang-en .hero-stats-num {
  font-size: clamp(24px, 3vw, 36px) !important;
}

.lang-en .hero-stats-unit {
  font-size: clamp(14px, 1.6vw, 18px) !important;
}

.lang-en body > section.hero > div.hero-text > div.hero-stats > div:nth-child(1) > div.hero-stats-num > span {
  display: none;
}

.lang-en .hero-text {
  max-width: 413.13px;
}

.lang-en body > section.hero > div.hero-text > h1 {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.lang-en section.hero > div.hero-text > p {
  font-size: 16px !important;
}

.lang-en .hero-stats {
  justify-content: flex-start;
}

.lang-en body > section.hero > div.hero-text > h1 > br {
  display: none;
}


.lang-en body > section.video-showcase > h2 {
  font-size: 30px !important;
  width: 50%;
  margin: 0 auto;
}

.lang-en body > section.video-showcase > h2 > br,
.lang-en body > section.video-showcase > p > br:nth-child(1),
.lang-en body > section.video-showcase > p > br:nth-child(2) {
  display: none !important;
}

.lang-en #courses-programs > div.courses-programs-text > h2,
.lang-en #courses-programs > div.courses-programs-text > div {
  margin-bottom: 0 !important;
}

.lang-en #courses-programs > div.courses-programs-text > p,
.lang-en body > section.career > p,
.lang-en body > section.video-showcase > p {
  text-align: center;
  width: 85%;
  margin: 0 auto;
}

.lang-en #courses-programs > div.courses-programs-text > p > br {
  display: none;
}

.lang-en .courses-program h3{
  text-wrap: wrap; 
  text-align: center;
}

.lang-en body > section.advantages > div.advantages-content-container > div.advantages-text > div > div > h3 {
  font-size: 1.5rem;
}

.lang-en #navbarSupportedContent > ul > li:nth-child(2) > div.dropdown-menu {
  width: fit-content;
}

.lang-en .advantages {
  margin-top: 0;
}

.lang-en .class-feature {
  font-size: 13px;
}

.lang-en body > section.hero > div.hero-text > h1 {
  text-wrap: wrap !important;
}
/* -----------------------------------------------------------------------------
   BUTTON FIXES
   ----------------------------------------------------------------------------- */
.lang-en .btn-primary {
  padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.5vw, 28px) !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  white-space: nowrap;
  min-height: 44px; /* Ensure touch-friendly buttons */
}

.lang-en .btn-secondary {
  padding: clamp(8px, 1vw, 12px) clamp(16px, 2vw, 24px) !important;
  font-size: clamp(13px, 1.1vw, 15px) !important;
}

/* Multi-line button support for very long text */
.lang-en .btn-multiline {
  white-space: normal !important;
  line-height: 1.3 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.lang-en body > section.join-us > div.join-us-text > p {
  text-wrap: wrap;
}

.lang-en body > section.video-showcase > div.video-showcase-bottom > div.video-showcase-bottom-text > h2 {
  text-wrap: wrap;
  font-size: 30px !important;
}

@media (width <= 1100px) {
  .lang-en body > section.video-showcase > div.video-showcase-bottom > div.video-showcase-bottom-text > h2 {
    font-size: 25px !important;
  }
}



/* -----------------------------------------------------------------------------
   ABOUT PAGES FIXES
   ----------------------------------------------------------------------------- */
.lang-en h1 {
  font-size: min(2.5vw, 36px) !important;
  margin-bottom: clamp(40px, 6vw, 80px) !important;
}

.lang-en h2 {
  font-size: clamp(24px, 3vw, 44px) !important;
  line-height: 1.3 !important;
  margin-bottom: clamp(20px, 2.5vw, 30px) !important;
}

.lang-en p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

/* Our Philosophy page fixes */
.lang-en .content-container h2 {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.4 !important;
}

.lang-en .table-content {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
  width: 40%;
}

.lang-en .table-title p {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 600 !important;
}

.lang-en body > section:nth-child(8) > h2 {
  font-size: 2.7vw !important;
  width: 90%;
  font-size: min(2.7vw, 50px) !important;
}

.lang-en .content-container {
  gap: 4vw;
}

.lang-en body.our_philosophy > section {
  max-width: inherit;
  margin: 0 auto;
  margin-bottom: 8vw;
}

.lang-en .table-title {
  text-wrap: wrap; 
  width: 20%;
}
.lang-en body > section:nth-child(9) > div:nth-child(3) > h2 {
  width: 60%;
}

.lang-en body > section:nth-child(9) > div:nth-child(3) > div.content.ci-ai-grid-container {
  width: 100%;
}

@media (width <= 650px) {
  .lang-en .table-content p {
    font-size: 13px !important;
  }
}

@media (width <= 575px) {
  .lang-en .table-title p {
    font-size: 15px !important;
  }
}

/* Our History timeline fixes */
.lang-en .timeline-nav li {
  font-size: clamp(24px, 2.8vw, 36px) !important;
}

.lang-en .timeline-desc-text h2 {
  font-size: clamp(20px, 2.4vw, 32px) !important;
  line-height: 1.3 !important;
}

.lang-en .timeline-desc-text p {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.5 !important;
}

.lang-en .table-content p {
  text-align: center;
}

.lang-en body > section:nth-child(9) > div:nth-child(3) > div.content.ci-ai-grid-container > table > tbody > tr:nth-child(1) > td:nth-child(2) > p,
.lang-en body > section:nth-child(9) > div:nth-child(3) > div.content.ci-ai-grid-container > table > tbody > tr:nth-child(1) > td:nth-child(3) > p  {
  text-align: center;
}


/* Our Stories mission cards */
.lang-en .mission-card p {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
}

.lang-en .mission-card-back h3 {
  font-size: clamp(18px, 2vw, 22px) !important;
  margin-bottom: 12px !important;
}

.lang-en .mission-card-back p {
  font-size: clamp(13px, 1.3vw, 15px) !important;
  line-height: 1.4 !important;
}

.lang-en body > header > div.header-text > h2 {
  font-size: min(2vw, 60px) !important;
}

.lang-en #our-missions > div > div > div.mission-card.flipped > div > div.mission-card-back > p {
  font-size: 11px !important;
}

.lang-en #companies > div.companies-text > h2 {
  font-size: min(2vw, 60px) !important;
}

.lang-en #our-missions > h2 {
  margin: 0 auto;
}

.lang-en #our-missions > div {
  width: auto;
}

@media (width <= 768px) {
  .lang-en #founder > div.founder-top > div.founder-top-main > div.founder-top-img {
    width: 200px !important;
  }
}

.lang-en #our-missions > div > div.left-cards > div:nth-child(1) > div > div.mission-card-front {
  padding: 0;
}

.lang-en #our-missions > div > div > div > div > div.mission-card-front > p {
  text-wrap: wrap;
}

@media (width <= 500px) {
  .lang-en #our-missions > div > div > div.mission-card.flipped > div > div.mission-card-back > p {
    font-size: 9px !important;
  }
}

/* -----------------------------------------------------------------------------
   COURSES PAGE FIXES
   ----------------------------------------------------------------------------- */
.lang-en .course-title {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

.lang-en .course-hour span,
.lang-en .course-language span {
  font-size: clamp(12px, 1.1vw, 14px) !important;
}

.lang-en .course-label {
  font-size: clamp(11px, 1vw, 13px) !important;
  padding: 0.2vw 0.8vw !important;
  white-space: nowrap !important;
}

/* Course grid adjustments */
.lang-en .course-detail {
  padding: clamp(12px, 1.5vw, 18px) !important;
}

/* Teacher carousel fixes */
.lang-en .teacher-info h3 {
  font-size: clamp(16px, 1.6vw, 18px) !important;
}

.lang-en .teacher-info p {
  font-size: clamp(13px, 1.2vw, 14px) !important;
}

/* Career section fixes */
.lang-en .job-title h3 {
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.3 !important;
}

.lang-en .job {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
}

.lang-en .advantage {
  align-self: flex-start !important;
}

.lang-end .advantages {
  margin-top: 0;
}

.lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
  bottom: 3vw;
}

.lang-en #courses-programs {
  padding-top: 0;
}

.lang-en #courses-programs > div.courses-programs-text > h2 {
  font-size: 100px !important;
}

.lang-en body > section.advantages > h2 {
  width: 70%;
  margin: 0 auto;
}

.lang-en #courses-programs > div.courses-programs-cards.aos-init.aos-animate > a > div {
  height: 100%;
}

@media (width <= 1260px) {
  .lang-en body > section.hero > div.hero-img {
    justify-content: center;
  }
}

@media (width <= 1200px) {
  .lang-en body > section.career > div.career-content-container {
    width: auto;
  }
}

@media (width <= 1100px) {
  .lang-en body > section.hero {
    flex-direction: column-reverse;
  }

  .lang-en body > section.hero > div.hero-text > h1 {
    text-align: center;
    width: 70%;
  }

  .lang-en body > section.hero > div.hero-img {
    width: 100%;
  }

  .lang-en body > section.video-showcase {
    margin-top: 0;
  }

  .lang-en body > section.video-showcase > h2 {
    width: auto;
  }

  .lang-en body > section.career > h2 {
    margin-bottom: 0 !important;
  }

  .lang-en #courses-programs {
    margin-bottom: 0;
  }

  .lang-en body > section.hero > div.hero-text {
    max-width: none;
    align-items: center;
  }
}

@media (width <= 935px) {
  .lang-en body > section.career > div.dotted-square {
    left: 32vw;
  }

  .lang-en body > section.join-us > div.dotted-square {
    left: 58vw;
    bottom: -4vw;
  }
}

@media (width <= 642px) {
  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
    bottom: auto !important;
  }

  .lang-en body > section.join-us {
    gap: 5rem;
  }

  .lang-en body > section.join-us > div.join-us-imgs {
    position: relative;
  }

  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
    position: absolute;
    right: auto;
    left: -10vw;
  }
}

@media (width <= 768px) {
  .lang-en body > section.career > div.career-content-container {
    width: 80vw;
  }

  .lang-en body > section.hero > div.hero-text > h1 {
    width: auto;
    text-wrap: wrap;
  }

  .lang-en body > section.hero > div.hero-text > p {
    text-wrap: wrap;
  }

  .lang-en body > section.career > p {
    text-wrap: wrap;
  }

  .lang-en .hero-stats-text {
    font-size: 20px !important;
  }

  .lang-en .hero-stats-num {
    font-size: 40px !important;
  }

  .lang-en body > section.career > div:nth-child(1) {
    top: 37vw;
  }

  .lang-en .career-left {
    justify-content: flex-start !important;
  }
  
  /* Mobile horizontal scrolling for job navigation in English */
  .lang-en .jobs-container {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    padding: 10px 0;
    margin: 10px 0;
    width: 100%;
    max-width: 100vw; /* Prevent container from expanding beyond viewport */
    position: relative;
  }
  
  /* Add a subtle gradient to indicate scrollability */
  .lang-en .jobs-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
    pointer-events: none;
    z-index: 1;
  }
  
  /* Webkit scrollbar styling */
  .lang-en .jobs-container::-webkit-scrollbar {
    height: 4px;
  }
  
  .lang-en .jobs-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
  }
  
  .lang-en .jobs-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }
  
  .lang-en .jobs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  
  .lang-en .jobs {
    display: flex;
    flex-direction: row !important;
    gap: 4vw;
    padding: 0 4vw 0 2vw;
    width: max-content;
    align-items: center;
    height: auto; /* Allow natural height */
  }
  
  .lang-en .job {
    flex-shrink: 0;
    padding-bottom: 0;
    min-width: auto;
  }
  
  .lang-en .job-title {
    white-space: nowrap;
    padding: 10px 8px;
    min-width: auto;
    width: auto;
  }
  
  .lang-en .job-title h3 {
    font-size: 14px !important;
    margin: 0;
    line-height: 1.2;
  }
  
  .lang-en .job-title.active h3,
  .lang-en .job-title[data-active="true"] h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  /* Default state for non-active items */
  .lang-en .job-title:not(.active):not([data-active="true"]) {
    opacity: 0.5 !important;
    transform: scale(0.9) !important;
  }
  
  /* Active state */
  .lang-en .job-title.active,
  .lang-en .job-title[data-active="true"] {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  
  .lang-en .career-left {
    flex-direction: column;
  }
  
  .lang-en .indication-bar {
    display: none; /* Hide indication bar on mobile English */
  }

  .lang-en body > section.courses-cta {
    width: 80%;
  }

  .lang-en body > section.hero > div.hero-text > h1 > br {
    display: block !important;
  }
}

/* Additional mobile breakpoints for very small screens */
@media (max-width: 480px) {
  .lang-en .jobs {
    gap: 3vw;
    padding: 0 3vw 0 1.5vw;
  }
  
  .lang-en .job-title {
    padding: 8px 6px;
  }
  
  .lang-en .job-title h3 {
    font-size: 13px !important;
  }
  
  .lang-en .job-title.active h3 {
    font-size: 15px !important;
  }
}

@media (width <= 563px) {
  .lang-en body > section.video-showcase > div.class-features-row > div {
    font-size: 13px;
  }
}

@media (width <= 480px) {
  .lang-en body > section.video-showcase > p,
  .lang-en body > section.career > p,
  .lang-en #courses-programs > div.courses-programs-text > p {
    width: auto;
  }

  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
    width: 30vw;
    height: 30vw;
  }
}

@media (width <= 550px) {
  .lang-en body > section.join-us {
    flex-direction: column-reverse;
  }

  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
    position: static;
  }

  .lang-en body > section.join-us {
    gap: 1rem;
  }

  .lang-en body > section.join-us > div.join-us-imgs {
    justify-content: space-between;
  }

  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(1) {
    width: 50%;
  }
  
  .lang-en body > section.join-us > div.join-us-imgs > img:nth-child(2) {
    position: relative;
    left: -5vw;
    bottom: -15vw;
    width: 40%
  }

  .lang-en body > section.join-us > div.dotted-square {
    top: 30vw;
    left: 40vw !important;
  }
}

@media (width <= 415px) {
  .lang-en body > section.hero > div.hero-text > div.hero-stats {
    flex-direction: column;
  }

  .lang-en body > section.video-showcase > h2 {
    font-size: inherit !important;
  }
}

@media (width <= 460px) {
  .lang-en #teachers-carousel-section > h2 {
    font-size: inherit !important;
  }
}

/* -----------------------------------------------------------------------------
   INDIVIDUAL COURSE PAGE FIXES
   ----------------------------------------------------------------------------- */
.lang-en .course-hero-title h1 {
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.2 !important;
}

.lang-en .course-hero-title h2 {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.3 !important;
}

.lang-en .course-hero-desc p {
  font-size: clamp(16px, 1.6vw, 18px) !important;
  line-height: 1.5 !important;
}

.lang-en .stat-label {
  font-size: clamp(12px, 1.2vw, 14px) !important;
}

.lang-en .feature-header h3 {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.3 !important;
}

.lang-en .feature-subtitle {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
}

.lang-en .schedule-content h3 {
  font-size: clamp(18px, 2vw, 22px) !important;
  line-height: 1.3 !important;
}

.lang-en .career-card h3 {
  font-size: clamp(16px, 1.8vw, 20px) !important;
  line-height: 1.3 !important;
}

.lang-en .career-card p {
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.4 !important;
}

/* -----------------------------------------------------------------------------
   FOOTER FIXES
   ----------------------------------------------------------------------------- */
.lang-en .footer__links a {
  font-size: clamp(13px, 1.2vw, 14px) !important;
  padding: 0.4rem 0.6rem !important;
}

.lang-en .footer__copyright {
  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.5 !important;
}

/* -----------------------------------------------------------------------------
   SEARCH AND FORM FIXES
   ----------------------------------------------------------------------------- */
.lang-en .suggestion-title {
  font-size: clamp(14px, 1.3vw, 15px) !important;
  line-height: 1.3 !important;
}

.lang-en .suggestion-code {
  font-size: clamp(12px, 1.1vw, 13px) !important;
}

/* -----------------------------------------------------------------------------
   MOBILE-SPECIFIC ENGLISH FIXES
   ----------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .lang-en h1 {
    font-size: clamp(24px, 6vw, 36px) !important;
    margin-top: clamp(60px, 15vw, 100px) !important;
  }
  
  .lang-en h2 {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  .lang-en p {
    font-size: clamp(14px, 3.5vw, 16px) !important;
  }
  
  .lang-en .btn-primary {
    white-space: normal !important;
    line-height: 1.4 !important;
    padding: 12px 20px !important;
  }
  
  .lang-en .hero-text h1 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
  
  .lang-en .course-title {
    font-size: 16px !important;
  }
  
  .lang-en .mission-card-back p {
    font-size: 13px !important;
  }
  
  .lang-en .timeline-nav li {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  
  /* Navigation mobile fixes */
  .lang-en .navbar-nav .nav-link {
    font-size: 14px !important;
    padding: 0.6rem 1rem !important;
  }
  
  .lang-en .dropdown-item {
    font-size: 13px !important;
    padding: 0.5rem 1rem !important;
  }

  .lang-en .founder-bottom {
    flex-direction: column !important;
  }
}

/* -----------------------------------------------------------------------------
   TABLET-SPECIFIC FIXES
   ----------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .lang-en .hero-text h1 {
    font-size: clamp(30px, 5vw, 42px) !important;
  }
  
  .lang-en .mission-card {
    padding: clamp(16px, 2vw, 22px) !important;
  }
}

/* =============================================================================
   TRADITIONAL CHINESE SPECIFIC FIXES (if needed)
   ============================================================================= */
.lang-zh-hant {
  /* Traditional Chinese specific adjustments */
}

.lang-zh-hant .traditional-chinese-text {
  /* Any Traditional Chinese specific text adjustments */
  letter-spacing: 0.02em; /* Slightly increase spacing for Traditional Chinese */
}

/* Extra large screens */
@media (min-width: 1400px) {
  
  .lang-en h2 {
    font-size: 48px !important;
  }
  
}

/* Small mobile devices */
@media (max-width: 480px) {
  .lang-en h1 {
    margin-top: clamp(80px, 18vw, 120px) !important;
    font-size: clamp(20px, 7vw, 28px) !important;
  }
  
  .lang-en .btn-primary {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  
  
  .lang-en .course-label {
    font-size: 10px !important;
    padding: 0.15vw 0.6vw !important;
  }
}