/* =============================================
   DSS INFRABUILD - RESPONSIVE CSS
   (Theme保持不变 - Only Responsiveness)
   ============================================= */

/* =============================================
   LAPTOP / DESKTOP (1200px and below)
   ============================================= */
@media (max-width: 1200px) {
  .container {
    max-width: 95%;
  }
  
  .navbar__links > li > a {
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
  }
  
  .navbar__phone span { 
    display: none; 
  }
  
  .stats-parallax__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .footer__grid {
    gap: 1.5rem;
  }
}

/* =============================================
   TABLET LANDSCAPE (1024px and below)
   ============================================= */
@media (max-width: 1024px) {
  /* Navigation */
  .navbar__nav { 
    display: none; 
  }
  
  .navbar__phone { 
    display: none; 
  }
  
  .navbar__hamburger { 
    display: flex; 
  }
  
  .navbar__mobile { 
    display: flex; 
  }
  
  /* Grid Layouts - 2 Columns */
  .services__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .specialized__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .why__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .blog__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .hero__stats { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  .stats-parallax__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer */
  .footer__grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  /* About Page */
  .journey__grid { 
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .mission-vision__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .core-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Contact Page */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  /* Project Details */
  .project-detail__wrapper {
    grid-template-columns: 1fr;
  }
  
  .project-sidebar {
    position: static;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .related-projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Intro Section */
  .intro__grid { 
    gap: 3rem; 
  }
  
  .intro__experience-badge { 
    left: 1rem; 
  }
  
  /* CTA Banner */
  .cta-banner-improved__wrapper {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
  }
  
  .cta-banner-improved__actions {
    justify-content: center;
  }
}

/* =============================================
   TABLET PORTRAIT (768px and below)
   ============================================= */
@media (max-width: 768px) {
  /* Hero Section */
  .hero__content { 
    padding: 6rem 0 4rem; 
  }
  
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  
  /* Grid Layouts - 1 Column */
  .services__grid { 
    grid-template-columns: 1fr; 
  }
  
  .specialized__grid { 
    grid-template-columns: 1fr; 
  }
  
  .why__grid { 
    grid-template-columns: 1fr; 
  }
  
  .blog__grid { 
    grid-template-columns: 1fr; 
  }
  
  .footer__grid { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  
  .mission-vision__grid {
    grid-template-columns: 1fr;
  }
  
  .core-values__grid {
    grid-template-columns: 1fr;
  }
  
  .stats-parallax__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .related-projects__grid {
    grid-template-columns: 1fr;
  }
  
  /* Intro Section */
  .intro__grid { 
    grid-template-columns: 1fr; 
  }
  
  .intro__image { 
    height: 350px; 
  }
  
  .intro__experience-badge { 
    left: 1rem; 
    bottom: 1rem; 
  }
  
  .intro__corner-accent { 
    display: none; 
  }
  
  /* Section Headers */
  .services__header,
  .projects__header,
  .testimonials__header,
  .blog__header { 
    flex-direction: column; 
    align-items: flex-start; 
  }
  
  /* Cards */
  .project-card { 
    flex: 0 0 85%; 
  }
  
  .testimonial-card { 
    flex: 0 0 85%; 
  }
  
  .clientele__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Process Timeline - Convert to Vertical */
  .process__track { 
    flex-direction: column; 
    align-items: center; 
    gap: 1.5rem; 
  }
  
  .process__track::before,
  .process__track::after { 
    display: none; 
  }
  
  .process__step { 
    flex-direction: row; 
    text-align: left; 
    gap: 1rem; 
    width: 100%; 
  }
  
  .process__step-dot { 
    flex-shrink: 0; 
    width: 50px; 
    height: 50px; 
  }
  
  .process__step-desc { 
    max-width: 100%; 
  }
  
  .process__step-content { 
    max-width: 100%; 
  }
  
  /* Footer */
  .footer__bottom { 
    flex-direction: column; 
    text-align: center; 
  }
  
  .footer__legal { 
    justify-content: center; 
  }
  
  .footer__social {
    justify-content: center;
  }
  
  /* Emergency CTA - Mobile */
  .emergency-cta { 
    bottom: 1rem; 
    right: 1rem; 
  }
  
  .emergency-cta__text { 
    display: none; 
  }
  
  .emergency-cta__icon { 
    width: 36px; 
    height: 36px; 
    font-size: 0.9rem; 
  }
  
  /* Certifications Bar */
  .certs-bar__item:not(:last-child)::after { 
    display: none; 
  }
  
  .certs-bar { 
    flex-direction: column; 
    gap: 0.5rem; 
  }
  
  /* Contact Form */
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .contact__form-wrapper,
  .contact__form-card {
    padding: 1.5rem;
  }
  
  /* FAQ */
  .faq-question {
    padding: 1rem;
    font-size: 0.85rem;
  }
  
  /* Project Details */
  .project-detail-hero {
    min-height: 50vh;
    padding: 6rem 0 2rem;
  }
  
  .project-detail-hero__stats {
    gap: 1rem;
  }
  
  .project-detail-hero__stat-value {
    font-size: 1.2rem;
  }
  
  .challenge-solution {
    grid-template-columns: 1fr;
  }
  
  .specs-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .timeline-item {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  /* Leadership */
  .leader-card__image {
    height: 220px;
  }
  
  /* Gallery Swiper */
  .gallery-main-swiper .swiper-button-next,
  .gallery-main-swiper .swiper-button-prev {
    width: 30px;
    height: 30px;
  }
  
  .gallery-main-swiper .swiper-button-next:after,
  .gallery-main-swiper .swiper-button-prev:after {
    font-size: 0.8rem;
  }
  
  /* Partners Section */
  .partners__slide {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .partner-logo {
    padding: 1rem;
    min-height: 100px;
  }
  
  .partner-logo img {
    max-height: 100px;
  }
  
  .partners__nav-btn {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  /* Hero - Video Background */
  .hero__video {
    object-position: center;
  }
}

/* =============================================
   MOBILE LANDSCAPE (576px and below)
   ============================================= */
@media (max-width: 576px) {

  section {
    padding: 3rem 0 !important;
  }
  /* Typography */
  .hero__heading { 
    font-size: 2rem; 
  }
  
  .hero__sub { 
    font-size: 0.9rem; 
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .page-hero__title {
    font-size: 1.8rem;
  }
  
  /* Stats */
  .hero__stat-value { 
    font-size: 1.4rem; 
  }
  
  .stats-parallax__grid {
    grid-template-columns: 1fr;
  }
  
  /* CTA Banner */
  .cta-banner__title { 
    font-size: 1.6rem; 
  }
  
  .cta-banner__actions { 
    flex-direction: column; 
    align-items: center; 
  }
  
  /* Cards */
  .service-card { 
    padding: 1.5rem; 
  }
  
  .spec-card { 
    padding: 1.5rem 1.25rem; 
  }
  
  /* Project & Testimonial Cards */
  .project-card { 
    flex: 0 0 100%; 
  }
  
  .testimonial-card { 
    flex: 0 0 100%; 
    padding: 1.5rem; 
  }
  
  /* Gallery */
  .gallery-grid { 
    grid-template-columns: 1fr; 
  }
  
  .gallery-thumbs-swiper .swiper-slide {
    width: 70px;
  }
  
  /* Modal */
  .modal { 
    width: 95%; 
  }
  
  /* Table */
  .table-responsive { 
    overflow-x: auto; 
  }
  
  .data-table { 
    min-width: 600px; 
  }
  
  /* Page Hero */
  .page-hero {
    min-height: 30vh;
    padding: 5rem 0 2rem;
  }
  
  /* Contact Details */
  .contact__detail-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  /* Buttons */
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
  
  /* Clientele Grid */
  .clientele__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .clientele__item {
    padding: 1rem;
  }
  
  /* Partners Section */
  .partners__slide {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .partner-logo {
    padding: 0.75rem;
    min-height: 150px;
  }
  
  .partner-logo img {
    max-height: 150px;
  }
  
  .partners__nav-btn {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  
  /* Blog Cards */
  .blog-card__image {
    height: 180px;
  }
  
  .blog-card__content {
    padding: 1rem;
  }
}

/* =============================================
   SMALL MOBILE (480px and below)
   ============================================= */
@media (max-width: 480px) {
  /* Typography */
  .hero__heading {
    font-size: 1.8rem;
  }
  
  .section-title {
    font-size: 1.3rem;
  }
  
  /* Hero Stats */
  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero__stat-value {
    font-size: 1.2rem;
  }
  
  .hero__stat-label {
    font-size: 0.6rem;
  }
  
  /* Gallery */
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-item {
    aspect-ratio: 1/1;
  }
  
  /* Forms */
  .form-group input,
  .form-group textarea,
  .form-group select {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
  }
  
  /* Footer */
  .footer__brand-desc {
    max-width: 100%;
  }
  
  .footer__social {
    justify-content: center;
  }
  
  /* Buttons - Full Width on Mobile */
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .navbar__actions .btn {
    width: auto;
  }
  
  /* CTA Banner */
  .cta-banner-improved__title {
    font-size: 1.3rem;
  }
  
  /* Project Details Hero */
  .project-detail-hero__stat-value {
    font-size: 1rem;
  }
  
  .project-detail-hero__stat-label {
    font-size: 0.6rem;
  }
  
  /* Timeline */
  .timeline-item__date {
    min-width: auto;
  }
  
  /* Cards */
  .service-card__title {
    font-size: 0.9rem;
  }
  
  .service-card__desc {
    font-size: 0.75rem;
  }
  
  /* Testimonials */
  .testimonial-card__text {
    font-size: 0.8rem;
  }
  
  .testimonial-card__name {
    font-size: 0.8rem;
  }
  
  /* Clientele Grid */
  .clientele__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   EXTRA SMALL (380px and below)
   ============================================= */
@media (max-width: 380px) {
  /* Navigation Mobile */
  .navbar__mobile {
    width: 85%;
  }
  
  /* Hero */
  .hero__heading {
    font-size: 1.5rem;
  }
  
  .hero__badge {
    font-size: 0.5rem;
    padding: 0.3rem 0.8rem;
  }
  
  /* Stats Grid - Admin Panel */
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Filters Bar - Admin Panel */
  .filters-bar .btn-primary {
    width: 100%;
    justify-content: center;
  }
  
  /* Cards Grid - Admin Panel */
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  /* Modal - Admin Panel */
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 1rem;
  }
  
  /* Toast - Admin Panel */
  .toast-container {
    left: 1rem;
    right: 1rem;
  }
  
  .toast {
    width: 100%;
    min-width: auto;
  }

  /* Blog Cards */
  .blog-card__title {
    font-size: 0.9rem;
  }
}

/* =============================================
   TOUCH DEVICES OPTIMIZATION
   (No theme change, only interaction)
   ============================================= */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-item,
  .card,
  .stat-card,
  .gallery-item,
  .project-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn:active {
    transform: scale(0.98);
  }
  
  /* Make overlays always visible on touch */
  .project-card__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%);
  }
  
  /* Make dropdowns always open on touch */
  .service-card__dropdown {
    max-height: none;
    opacity: 1;
  }
  
  .service-card__toggle {
    display: none;
  }
}

/* =============================================
   LANDSCAPE MODE FIXES
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
  }
  
  .hero__content {
    padding: 4rem 0 2rem;
  }
  
  .hero__stats {
    margin-top: 1rem;
  }
  
  .navbar__inner {
    height: 60px;
  }
  
  .page-hero {
    min-height: auto;
    padding: 4rem 0 2rem;
  }
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  .navbar,
  .emergency-cta,
  .footer,
  .hero__scroll,
  .projects__nav,
  .testimonials__nav,
  .partners__nav-btn,
  .cta-banner__actions .btn,
  .contact__form-wrapper,
  .sidebar,
  .dashboard-header,
  .filters-bar,
  .action-buttons,
  .btn,
  .pagination {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
  }
  
  .content-wrapper {
    padding: 0 !important;
  }
  
  .card,
  .table-container,
  .stat-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  a {
    text-decoration: none !important;
    color: black !important;
  }
  
  .hero__overlay,
  .cta-banner__overlay {
    background: rgba(0,0,0,0.5) !important;
  }
  
  .hero__content,
  .cta-banner__content {
    color: black !important;
  }
}

/* =============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero__bg {
    animation: none;
    transform: scale(1);
  }
  
  .emergency-cta {
    animation: none;
  }
  
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
  }
}

/* =============================================
   4K SCREENS (2560px and above)
   ============================================= */
@media (min-width: 2560px) {
  .container {
    max-width: 1600px;
  }
  
  .hero__heading {
    font-size: 5rem;
  }
  
  .hero__sub {
    font-size: 1.3rem;
  }
  
  .section-title {
    font-size: 2.5rem;
  }
  
  .services__grid,
  .specialized__grid,
  .why__grid {
    gap: 2rem;
  }
}

/* =============================================
   DARK MODE SUPPORT (System Preference Only)
   ============================================= */
@media (prefers-color-scheme: dark) {
  /* Only add dark mode if user prefers - doesn't change original theme */
  .dark-mode-support {
    /* This is just a placeholder - original theme remains unchanged */
  }
}
@media (max-width: 1650px) {
.md-none{
  display: none !important;
}
}