/* Global Design System - Light Futurism */
/* Scoped to .baihua-home-scope to prevent global leaks */
.baihua-home-scope {
  /* Colors */
  --color-bg-body: #f5f7fa; /* Light Greyish Blue */
  --color-bg-card: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.7);
  --color-text-primary: #1a202c;
  --color-text-secondary: #4a5568;
  --color-accent-primary: #00d2ff; /* Cyber Cyan */
  --color-accent-secondary: #3a7bd5; /* Tech Blue */
  --color-border: #e2e8f0;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-shadow-hover: rgba(58, 123, 213, 0.2);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;

  /* Typography */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 36px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 6px -1px var(--color-shadow), 0 2px 4px -1px var(--color-shadow);
  --shadow-card-hover: 0 10px 15px -3px var(--color-shadow-hover), 0 4px 6px -2px var(--color-shadow-hover);
  --backdrop-blur: blur(10px);
  --transition-base: all 0.3s ease;

  /* Base Reset for Scope */
  font-family: var(--font-family-base);
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Reset & Base within Scope */
.baihua-home-scope * {
  box-sizing: border-box;
}

/* Specific Element Resets inside scope */
.baihua-home-scope h1, 
.baihua-home-scope h2, 
.baihua-home-scope h3, 
.baihua-home-scope p, 
.baihua-home-scope ul {
    margin: 0;
    padding: 0;
}

.baihua-home-scope a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

.baihua-home-scope ul {
  list-style: none;
}

.baihua-home-scope img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility Containers */
.baihua-home-scope .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.baihua-home-scope .section {
  padding: var(--spacing-xxl) 0;
  /* content-visibility: auto; - Removed to fix display issues */
  /* contain-intrinsic-size: 800px 1000px; - Removed to fix display issues */
}

.baihua-home-scope .grid-2-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.baihua-home-scope .grid-2-cols.no-sidebar {
  grid-template-columns: 1fr;
}

/* Section Titles */
.baihua-home-scope .section-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  margin-bottom: var(--spacing-xl);
  position: relative;
  display: inline-block;
  background: linear-gradient(
    135deg,
    var(--color-text-primary) 0%,
    var(--color-text-secondary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.baihua-home-scope .section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    var(--color-accent-secondary)
  );
  border-radius: var(--radius-sm);
}

/* Buttons */
.baihua-home-scope .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
}

.baihua-home-scope .btn-primary {
  background: linear-gradient(
    135deg,
    var(--color-accent-secondary) 0%,
    var(--color-accent-primary) 100%
  );
  color: white;
  box-shadow: 0 4px 6px rgba(58, 123, 213, 0.3);
}

.baihua-home-scope .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(58, 123, 213, 0.4);
}

/* Animations */
@keyframes baihuaFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.baihua-home-scope .animate-fade-in {
  opacity: 0;
  animation: baihuaFadeIn 0.8s ease-out forwards;
}

.baihua-home-scope .delay-100 {
  animation-delay: 0.1s;
}
.baihua-home-scope .delay-200 {
  animation-delay: 0.2s;
}
.baihua-home-scope .delay-300 {
  animation-delay: 0.3s;
}

/* Specific Modules */

/* Hero Carousel */
.baihua-home-scope .hero-carousel {
  position: relative;
  width: 100%;
  height: 600px; /* Taller for impact */
  overflow: hidden;
  background-color: #000;
  cursor: grab; /* Indicating swipe support */
}

.baihua-home-scope .hero-carousel:active {
  cursor: grabbing;
}

.baihua-home-scope .carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.baihua-home-scope .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.baihua-home-scope .carousel-slide.active {
  opacity: 1;
  z-index: 2;
}

.baihua-home-scope .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure full coverage */
}

.baihua-home-scope .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.1)
  );
  z-index: 3;
  pointer-events: none;
}

.baihua-home-scope .banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  color: white;
  width: 100%;
  max-width: 800px;
}

.baihua-home-scope .banner-content h1 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: -1px;
}

.baihua-home-scope .banner-content p {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-lg);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  font-weight: 300;
}

.baihua-home-scope .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.baihua-home-scope .carousel-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%) scale(1.1);
}

.baihua-home-scope .prev-btn {
  left: var(--spacing-lg);
}

.baihua-home-scope .next-btn {
  right: var(--spacing-lg);
}

.baihua-home-scope .carousel-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.baihua-home-scope .indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.baihua-home-scope .indicator.active {
  background: white;
  transform: scale(1.2);
}

/* Certifications Section (Merged from Ext) */
.baihua-home-scope .certifications-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.baihua-home-scope .certifications-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.baihua-home-scope .cert-intro { flex-shrink: 0; }
.baihua-home-scope .cert-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}
.baihua-home-scope .cert-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 4px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.baihua-home-scope .cert-badges {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.baihua-home-scope .cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--spacing-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.baihua-home-scope .cert-badge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.05) 0%, rgba(0, 210, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.baihua-home-scope .cert-badge:hover::before { opacity: 1; }
.baihua-home-scope .cert-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--color-accent-primary);
}

.baihua-home-scope .cert-badge img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.baihua-home-scope .cert-badge:hover img { transform: scale(1.1); }

.baihua-home-scope .cert-name {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.baihua-home-scope .cert-badge:hover .cert-name { color: var(--color-accent-secondary); }

/* Responsive Certifications */
@media (max-width: 768px) {
  .baihua-home-scope .certifications-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  .baihua-home-scope .cert-badges {
    width: 100%;
    justify-content: flex-start;
    gap: var(--spacing-md);
  }
  .baihua-home-scope .cert-badge {
    flex: 1;
    min-width: 80px;
  }
}

/* Products Series */
.baihua-home-scope .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: var(--spacing-lg);
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

/* On mobile, use flex row with scroll for "app store" feel */
@media (max-width: 768px) {
    .baihua-home-scope .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
      gap: 20px;
      overflow-x: visible;
      padding-bottom: 0;
    }
    
    .baihua-home-scope .product-card {
      flex: unset;
      width: auto;
      height: auto; /* Allow height to adapt */
      min-height: 320px;
    }
  }
  
  /* Apple-style Product Card */
  .baihua-home-scope .product-card {
    background: #fbfbfd;
    border-radius: 18px;
    padding: 20px 16px; /* Reduced padding */
    box-shadow: none;
    border: none;
    
    /* Flex Layout for Uniformity */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    
    /* Fixed Dimensions */
    flex: 0 0 300px; /* Fixed width for standard cards */
    height: 320px;   /* Adjusted height to 320px */
    scroll-snap-align: center;
    
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
  }

.baihua-home-scope .product-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft shadow on hover */
  background: white; /* Slight lift */
}

/* Image Wrapper: Fixed Height and Top Position */
.baihua-home-scope .product-image-wrapper {
    width: 100%;
    height: 200px; /* Slightly reduced image height */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px; /* Reduced margin */
    flex-shrink: 0; /* Prevent shrinking */
}

.baihua-home-scope .product-image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.baihua-home-scope .product-card:hover .product-image-wrapper img {
    transform: scale(1.08);
}

/* --- Company Intro Revamp --- */
.baihua-home-scope .intro-card-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0; /* Let image bleed or control padding internally */
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

@supports (display: grid) {
    .baihua-home-scope .intro-card-layout {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (min-width: 900px) {
    .baihua-home-scope .intro-card-layout {
        grid-template-columns: 1.2fr 1fr; /* Image wider */
        align-items: stretch;
        flex-direction: row;
    }
}

.baihua-home-scope .intro-image-area {
    position: relative;
    min-height: 400px;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 1;
}

.baihua-home-scope .intro-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg); /* Rounded corners for image */
}

/* Floating Stats Overlay */
.baihua-home-scope .intro-stats-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 2;
}

.baihua-home-scope .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.baihua-home-scope .stat-num {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.baihua-home-scope .stat-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.baihua-home-scope .intro-text-area {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto; /* Allow scrolling if text is too long */
    max-height: 600px; /* Match image height approximately */
}

/* Scoped Intro Body Styles */
.baihua-home-scope .intro-body {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

.baihua-home-scope .intro-body p {
    margin-bottom: 1.2em;
}

.baihua-home-scope .intro-body strong {
    color: var(--color-text-primary);
    font-weight: 600;
}

.baihua-home-scope .intro-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-top: auto; /* Push to bottom */
}

.baihua-home-scope .link-secondary {
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.baihua-home-scope .link-secondary:hover {
    background: rgba(0,0,0,0.05);
    color: var(--color-text-primary);
}

/* Scenarios Section */
.baihua-home-scope .scenario-grid {
  display: flex;
  gap: var(--spacing-lg);
  overflow-x: auto;
  padding: 0 52px 20px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.baihua-home-scope .scenario-grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.baihua-home-scope .tech-scenario-card {
  min-width: 300px;
  height: 220px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
  scroll-snap-align: start;
}

.baihua-home-scope .tech-scenario-card:hover {
  min-width: 350px; /* Expand on hover */
}

.baihua-home-scope .tech-scenario-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.baihua-home-scope .tech-scenario-card:hover img {
  transform: scale(1.1);
}

.baihua-home-scope .scenario-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 20px;
  color: white;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.baihua-home-scope .tech-scenario-card:hover .scenario-overlay {
  transform: translateY(0);
}

.baihua-home-scope .data-tag {
  display: inline-block;
  background: rgba(0, 210, 255, 0.3);
  backdrop-filter: blur(4px);
  border: 1px solid var(--color-accent-primary);
  padding: 2px 8px;
  font-size: 10px;
  color: #00d2ff;
  border-radius: 4px;
  margin-bottom: 5px;
  font-family: 'Courier New', monospace;
}

.baihua-home-scope .scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.35);
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  backdrop-filter: blur(6px);
}

.baihua-home-scope .scroll-btn.left {
  left: 8px;
}

.baihua-home-scope .scroll-btn.right {
  right: 8px;
}

.baihua-home-scope .scroll-btn:hover {
  background: rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.4);
}

/* Marquee Styles (Reused from Partner Wall) */
.baihua-home-scope .style-marquee-container {
    overflow: hidden;
    position: relative;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.baihua-home-scope .style-marquee-track {
    display: flex;
    gap: 30px; /* Gap between items */
    width: max-content;
    /* animation defined inline or via class modifiers */
}

.baihua-home-scope .scroll-left {
    animation: marquee-left linear infinite;
}

.baihua-home-scope .scroll-right {
    animation: marquee-right linear infinite;
}

.baihua-home-scope .style-partner-item {
    flex: 0 0 auto;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 15px;
    transition: transform 0.3s ease;
}

.baihua-home-scope .style-partner-item:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.baihua-home-scope .style-partner-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s;
}

.baihua-home-scope .style-partner-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Marquee Animations */
@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Assumes track is duplicated once (original + copy), so -50% is one full set */
}

@keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Pause on hover */
.baihua-home-scope .style-marquee-track:hover {
    animation-play-state: paused;
}

/* Scenario Marquee Specifics */
.baihua-home-scope .scenario-marquee-container {
    overflow: hidden;
    position: relative;
    padding: 0; /* No padding for full bleed feel if desired, or adjust */
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* No mask for scenarios to keep images vivid, or add soft mask */
}

.baihua-home-scope .scenario-marquee-item {
    flex: 0 0 auto;
    width: 300px; /* Fixed width for scenario cards */
    height: 200px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.baihua-home-scope .scenario-marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.baihua-home-scope .scenario-marquee-item:hover img {
    transform: scale(1.1);
}

/* Footer & Contact (Merged from Ext) */
.baihua-home-scope .contact-section {
    background-color: #fff; /* Ext Override */
    color: #000;
    padding: var(--spacing-xxl) 0;
}

.baihua-home-scope .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.baihua-home-scope .contact-group h3 {
    font-size: 18px;
    margin-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-accent-primary);
    padding-bottom: 8px;
    display: inline-block;
    color: #000;
}

.baihua-home-scope .contact-list,
.baihua-home-scope .contact-list-home {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.baihua-home-scope .contact-list li,
.baihua-home-scope .contact-list-home li {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.6;
    font-size: 14px;
}

.baihua-home-scope .contact-list .label,
.baihua-home-scope .contact-list-home .label {
    width: 90px;
    color: #000; /* Ext Override */
    flex-shrink: 0;
}

.baihua-home-scope .contact-list .valueLabel,
.baihua-home-scope .contact-list-home .valueLabel {
    color: rgba(0,0,0,0.9); /* Ext Override */
    text-decoration: none;
    transition: color 0.2s;
    font-size: 15px; /* Ext Override */
    align-content: center;
}
.baihua-home-scope .contact-list-home .valueLabel { font-size: 16px; }

.baihua-home-scope .contact-list a.valueLabel:hover,
.baihua-home-scope .contact-list-home a.valueLabel:hover {
    color: var(--color-accent-primary);
}

.baihua-home-scope .contact-list .highlight,
.baihua-home-scope .contact-list-home .highlight {
    font-size: 16px;
    color: #000;
    font-weight: 500;
}

.baihua-home-scope .sub-header { color: #000; font-size: 14px; }
.baihua-home-scope .base-item strong { color: #000; font-size: 14px; }
.baihua-home-scope .base-item p { color: #000; }

/* =========================================
   Pad (Tablet) Responsiveness (Added)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 1. Hero Carousel: Intermediate height */
    .baihua-home-scope .hero-carousel {
        height: 450px;
    }

    /* 2. Banner Content */
    .baihua-home-scope .banner-content h1 {
        font-size: 2.5rem; /* Smaller than desktop 3rem */
    }

    /* 3. Intro Section */
    /* Ensure the intro card layout is optimized.
       Between 769px and 899px, it falls back to 1 column (default) which is good.
       Above 900px it goes 2 columns.
       We just need to make sure the overlay isn't covering everything if height is small. */
    .baihua-home-scope .intro-stats-overlay {
        /* On tablets, we might want this to be relative if the image is short, 
           but usually absolute is fine if we have enough height. 
           Let's keep it absolute but ensure it's not too huge. */
        padding: 15px;
    }
    
    .baihua-home-scope .stat-num {
        font-size: 20px;
    }

    /* 4. Product Grid */
    .baihua-home-scope .product-card {
        flex: 0 0 280px; /* Slightly smaller cards than desktop 300px */
    }
}

/* =========================================
   Mobile Responsiveness (Added)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Global Spacing Adjustments */
    .baihua-home-scope {
        --spacing-xxl: 32px; /* Reduce section spacing */
        --spacing-xl: 24px;
        --font-size-xxl: 24px; /* Reduce section title size */
    }

    .baihua-home-scope .section {
        padding: 30px 0;
    }

    /* 2. Hero Carousel Adjustments */
    .baihua-home-scope .hero-carousel {
        height: 350px; /* Reduce height from 600px */
    }

    .baihua-home-scope .banner-content {
        margin-top: 40px; /* Reduce top margin */
        padding: 0 20px;
        text-align: center; /* Center align for better mobile read */
    }

    .baihua-home-scope .banner-content h1 {
        font-size: 1.8rem; /* Reduce from 3rem */
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .baihua-home-scope .banner-content p {
        font-size: 1rem; /* Reduce from 1.5rem */
        max-width: 100%;
        line-height: 1.4;
    }
    
    .baihua-home-scope .carousel-btn {
        padding: 8px 12px;
        font-size: 1.2rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .baihua-home-scope .prev-btn { left: 10px; }
    .baihua-home-scope .next-btn { right: 10px; }

    /* 3. Company Intro Adjustments */
    .baihua-home-scope .intro-card-layout {
        gap: 0; /* Remove gap, stack vertically */
        border-radius: var(--radius-md); /* Smaller radius */
        display: flex;
        flex-direction: column;
    }

    .baihua-home-scope .intro-image-area {
        min-height: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .baihua-home-scope .intro-main-img {
        height: 250px; /* Fixed height for image only on mobile */
        width: 100%;
        object-fit: cover;
    }

    .baihua-home-scope .intro-stats-overlay {
        position: relative; /* Change from absolute to flow naturally */
        bottom: auto;
        left: auto;
        right: auto;
        margin: -30px 10px 0 10px; /* Adjust overlap */
        padding: 12px 8px;
        display: grid; /* Use Grid for better stability */
        grid-template-columns: repeat(2, 1fr); /* 2 columns for 4 items */
        gap: 10px;
        background: rgba(255, 255, 255, 0.98);
        z-index: 2;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    .baihua-home-scope .stat-item {
        text-align: center;
        padding: 5px;
        background: rgba(240, 244, 248, 0.5); /* Slight bg for contrast */
        border-radius: 4px;
    }
    
    .baihua-home-scope .stat-num {
        font-size: 16px; /* Slightly smaller */
        display: block;
        font-weight: 700;
        color: var(--color-primary);
    }
    
    .baihua-home-scope .stat-label {
        font-size: 11px;
        color: var(--text-secondary);
        white-space: nowrap; /* Prevent breaking */
    }

    .baihua-home-scope .intro-text-area {
        padding: 20px; /* Reduced padding for mobile to prevent content squeezing */
        height: auto !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    
    .baihua-home-scope .intro-body {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .baihua-home-scope .partner-wall-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
    }
}

/* =========================================
   Hotfixes for Online Deployment
   ========================================= */

/* 1. Ensure Main Content is Full Width */
/* Overrides any external styles that might restrict the main content width */
/* .baihua-home-scope .main-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex: none !important; 
} */

/* 2. Ensure Section Consistency */
/* All sections should behave the same within the scope */
/* .baihua-home-scope .section {
    width: 100%;
    box-sizing: border-box;
} */

/* 3. Scenario Marquee Container Definition */
/* Ensuring this class is defined if it was missing */
.baihua-home-scope .scenario-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* 4. Reset Grid Layout if it affects the main structure */
/* If external CSS sets .layout-grid, we might need to reset it */
/* .baihua-home-scope .layout-grid {
    display: block !important; 
    grid-template-columns: none !important;
} */

/* =========================================
   Safeguard: Product Grid Layout Fixes
   ========================================= */

/* Ensure Product Grid behaves correctly in container */
.baihua-home-scope .product-grid {
    display: grid !important;
    gap: var(--spacing-lg) !important;
    width: 100% !important;
    /* Mobile First: 1 or 2 columns based on space */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* Force 4 columns on Desktop (standard container width ~1200px) */
@media (min-width: 1200px) {
    .baihua-home-scope .product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Ensure Product Cards fit within the grid cells */
.baihua-home-scope .product-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important; /* Disable flex sizing in favor of grid */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* =========================================
   Safeguard: Company Intro Height Fixes
   ========================================= */

/* Ensure text area expands to fit content, no internal scrollbar */
.baihua-home-scope .intro-text-area {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; /* Disable scrollbar */
    flex: 1 1 auto !important; /* Allow growing */
}

/* Ensure body text expands fully */
.baihua-home-scope .intro-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important; /* Disable scrollbar */
}

/* Ensure container expands */
.baihua-home-scope .intro-card-layout {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Fix for menu layout issue where gap is too large */
@media (min-width: 1024px) {
    .lg\:gap-x-12 {
        column-gap: 1rem !important; /* Reduced from 3rem to prevent menu collapse */
        -moz-column-gap: 1rem !important;
    }
}