/**
 * responsive.css
 * ============================================================================
 * tctheme — Responsive overrides
 * ----------------------------------------------------------------------------
 * 3 档断点（必须与 layout-grid.css 一致）：
 *   - 桌面  ≥ 1024px    默认样式（main.css / layout-grid.css 已定义）
 *   - 平板  768-1023px  2 列布局 / 侧栏折叠 / 字号缩减
 *   - 手机  ≤ 767px     单列布局 / 全宽按钮 / 浮动按钮缩小
 *
 * 编码规范：
 *   - 仅包含响应式覆盖规则，不重复 main.css 的基础样式
 *   - 使用 var(--tctheme-*) 引用 design tokens
 *   - 不使用任何外部资源（字体 / 图片 / url()）
 *   - 4 空格缩进，/* === Section === */ 区块分隔
 *   - 断点写法与 layout-grid.css 保持一致
 * ============================================================================
 */

/* ==========================================================================
   桌面 ≥ 1024px（Desktop）
   ----------------------------------------------------------------------------
   默认样式由 main.css 与 layout-grid.css 提供，此处无需覆盖。
   12 列网格、4 列卡片网格、完整导航、sticky 侧栏均在桌面生效。
   ========================================================================== */

/* 桌面无覆盖规则 */

/* ==========================================================================
   平板 768px - 1023px（Tablet）
   ----------------------------------------------------------------------------
   网格降级为 2 列，主导航隐藏并显示汉堡菜单，侧栏折叠为抽屉覆盖层，
   双栏布局（产品详情、关于页、联系页）合并为单列，标题字号缩减。
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* === 1. Top Bar === */
    .top-bar-inner {
        gap: 12px;
    }

    .top-bar-left,
    .top-bar-right {
        gap: 14px;
    }

    .top-bar-contact:nth-of-type(n+2) {
        display: none;
    }

    /* === 2. Site Header / Navigation === */
    .site-header-center {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-header-inner {
        gap: 16px;
    }

    /* === 3. Hero Section === */
    .hero-section,
    .hero-slide {
        min-height: 480px;
    }

    .hero-slide__title {
        font-size: var(--tctheme-font-size-5xl);
    }

    .hero-slide__subtitle {
        font-size: var(--tctheme-font-size-base);
    }

    .hero-slide__content {
        padding-block: 60px;
    }

    /* === 4. Stats Bar === */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    /* === 5. Section Header === */
    .section-header {
        margin-bottom: 36px;
    }

    .section-header__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    /* === 6. Factory Showcase === */
    .factory-showcase-section {
        min-height: 400px;
    }

    .factory-showcase__title {
        font-size: var(--tctheme-font-size-4xl);
    }

    /* === 7. CTA Banner === */
    .cta-banner-section {
        min-height: 300px;
    }

    .cta-banner__title {
        font-size: var(--tctheme-font-size-4xl);
    }

    /* === 8. Products Layout === */
    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-layout__aside {
        order: -1;
        margin-bottom: 24px;
    }

    .filter-sidebar__mobile-toggle {
        display: inline-flex;
    }

    .filter-sidebar {
        position: relative;
    }

    /* === 9. Compare Bar === */
    .compare-bar__inner {
        gap: 12px;
        padding: 12px 20px;
    }

    /* === 10. Project Filter Bar === */
    .project-filter-form__fields {
        gap: 12px;
    }

    .project-filter-form__field {
        flex: 1 1 180px;
    }

    /* === 11. About: Timeline === */
    .timeline::before {
        left: 20px;
    }

    .timeline__item,
    .timeline__item:nth-child(even) {
        width: 100%;
        left: 0;
        padding: 0 0 32px 48px;
        text-align: left;
    }

    .timeline__item:nth-child(odd) {
        text-align: left;
    }

    .timeline__marker,
    .timeline__item:nth-child(even) .timeline__marker {
        left: 12px;
        right: auto;
    }

    /* === 12. About: Profile CTA === */
    .profile-cta {
        gap: 18px;
    }

    /* === 13. Footer === */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .footer-widgets {
        padding-block: 48px;
    }

    /* === 14. Contact Grid === */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* === 15. Product Single Summary === */
    .product-summary-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* === 16. Compare Modal === */
    .compare-modal__dialog,
    .project-modal__dialog {
        max-width: 90vw;
    }

}

/* ==========================================================================
   手机 ≤ 767px（Mobile）
   ----------------------------------------------------------------------------
   单列布局、全宽按钮、容器内边距收紧、字号进一步缩减、浮动按钮缩小。
   ========================================================================== */

@media (max-width: 767px) {

    /* === 1. Containers / Section Padding === */
    .tctheme-container,
    .tctheme-container-narrow,
    .tctheme-container-wide,
    .tctheme-container-full {
        padding-inline: 16px;
    }

    .section-padding,
    .section-padding-y {
        padding-block: var(--tctheme-section-padding-sm);
    }

    .page-header {
        padding-block: var(--tctheme-section-padding-sm);
    }

    /* === 2. Top Bar === */
    .top-bar-inner {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding-block: 8px;
    }

    .top-bar-left,
    .top-bar-right {
        gap: 12px;
        justify-content: center;
    }

    .top-bar-contact:nth-of-type(n+2) {
        display: none;
    }

    /* === 3. Site Header / Navigation === */
    .site-header-center {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .site-header-inner {
        gap: 12px;
        min-height: 60px;
    }

    .site-logo-text {
        font-size: var(--tctheme-font-size-lg);
    }

    .cta-button {
        padding: 8px 14px;
        font-size: var(--tctheme-font-size-sm);
    }

    /* === 4. Hero Section === */
    .hero-section,
    .hero-slide {
        min-height: 420px;
    }

    .hero-slide__content {
        padding-block: 44px;
    }

    .hero-slide__eyebrow {
        font-size: var(--tctheme-font-size-xs);
        margin-bottom: 12px;
    }

    .hero-slide__title {
        font-size: var(--tctheme-font-size-4xl);
        margin-bottom: 14px;
    }

    .hero-slide__subtitle {
        font-size: var(--tctheme-font-size-base);
        margin-bottom: 24px;
    }

    .hero-slide__actions {
        flex-direction: column;
        gap: 12px;
    }

    .hero-slide__cta,
    .hero-slide__cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-swiper .swiper-button-next,
    .hero-swiper .swiper-button-prev {
        display: none;
    }

    /* === 5. Stats Bar === */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .stats-item {
        padding: 8px;
    }

    .stats-item__icon {
        font-size: 32px;
    }

    .stats-item__value {
        font-size: var(--tctheme-font-size-3xl);
    }

    /* === 6. Section Header === */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 28px;
    }

    .section-header__title {
        font-size: var(--tctheme-font-size-2xl);
    }

    .section-header__subtitle {
        font-size: var(--tctheme-font-size-base);
    }

    .section-header__link {
        width: 100%;
    }

    .section-footer {
        margin-top: 32px;
    }

    .section-footer__btn {
        width: 100%;
    }

    /* === 7. Factory Showcase === */
    .factory-showcase-section {
        min-height: 360px;
    }

    .factory-showcase__content {
        padding-block: 44px;
    }

    .factory-showcase__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .factory-showcase__subtitle {
        font-size: var(--tctheme-font-size-base);
    }

    /* === 8. Applications === */
    .applications-swiper {
        padding-bottom: 44px;
    }

    /* === 9. CTA Banner === */
    .cta-banner-section {
        min-height: 280px;
    }

    .cta-banner__content {
        padding-block: 40px;
    }

    .cta-banner__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .cta-banner__subtitle {
        font-size: var(--tctheme-font-size-base);
        margin-bottom: 24px;
    }

    .cta-banner__actions {
        flex-direction: column;
        gap: 12px;
    }

    .cta-banner__btn,
    .cta-banner__btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* === 10. Products Layout === */
    .products-layout {
        grid-template-columns: 1fr;
    }

    .products-layout__aside {
        order: -1;
        margin-bottom: 20px;
    }

    .filter-sidebar__mobile-toggle {
        display: inline-flex;
    }

    .products-layout__toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* === 11. Product Card === */
    .product-card__body {
        padding: 18px;
    }

    .product-card__actions {
        flex-direction: column;
    }

    .product-card__link-details,
    .product-card__link-inquire {
        width: 100%;
    }

    /* === 12. Project Card === */
    .project-card__body {
        padding: 18px;
    }

    /* === 13. News Card === */
    .news-card__body {
        padding: 18px;
    }

    /* === 14. Filter Sidebar === */
    .filter-sidebar__header {
        padding: 14px 18px;
    }

    .filter-sidebar__body {
        padding: 18px;
        gap: 20px;
    }

    /* === 15. Compare Bar === */
    .compare-bar__inner {
        gap: 10px;
        padding: 12px 16px;
    }

    .compare-bar__label {
        font-size: var(--tctheme-font-size-sm);
    }

    .compare-bar__actions {
        width: 100%;
        justify-content: space-between;
    }

    /* === 16. Project Filter Bar === */
    .project-filter-form__fields {
        flex-direction: column;
        gap: 12px;
    }

    .project-filter-form__field {
        flex: 1 1 100%;
    }

    .project-filter-form__submit {
        width: 100%;
    }

    /* === 17. Project / Compare Modal === */
    .compare-modal,
    .project-modal {
        padding: 12px;
    }

    .compare-modal__dialog,
    .project-modal__dialog {
        max-width: 100%;
        max-height: 94vh;
    }

    .compare-modal__header {
        padding: 16px 18px;
    }

    .compare-modal__body {
        padding: 16px 18px;
    }

    .project-modal__content {
        padding: 24px 18px;
    }

    /* === 18. About: Intro === */
    .about-intro-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-intro__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    /* === 19. About: Mission & Vision === */
    .about-mv-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* === 20. About: Timeline === */
    .timeline::before {
        left: 16px;
    }

    .timeline__item,
    .timeline__item:nth-child(even) {
        width: 100%;
        left: 0;
        padding: 0 0 28px 40px;
        text-align: left;
    }

    .timeline__item:nth-child(odd) {
        text-align: left;
    }

    .timeline__marker,
    .timeline__item:nth-child(even) .timeline__marker {
        left: 8px;
        right: auto;
    }

    .timeline__content {
        padding: 16px;
    }

    /* === 21. About: Factory Gallery === */
    .factory-gallery-grid {
        grid-template-columns: 1fr;
    }

    /* === 22. About: Team === */
    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 16px;
    }

    .team-card__avatar {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 72px;
        height: 72px;
    }

    /* === 23. About: Partners === */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* === 24. About: Profile CTA === */
    .profile-cta {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .profile-cta__icon {
        margin-inline: auto;
    }

    .profile-cta__action {
        width: 100%;
    }

    .profile-cta__btn,
    .profile-cta__soon {
        width: 100%;
        justify-content: center;
    }

    /* === 25. Contact === */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-header__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .contact-header__description {
        font-size: var(--tctheme-font-size-base);
    }

    /* === 26. Inquiry Form === */
    .inquiry-form-wrap {
        padding: 18px;
    }

    .inquiry-form__title {
        font-size: var(--tctheme-font-size-xl);
    }

    .btn-submit {
        width: 100%;
        padding: 14px 24px;
        font-size: var(--tctheme-font-size-base);
        align-self: stretch;
        justify-content: center;
    }

    /* === 27. Response Process === */
    .response-process-grid {
        grid-template-columns: 1fr;
    }

    /* === 28. FAQ === */
    .faq-item__question {
        padding: 14px 16px;
        font-size: var(--tctheme-font-size-sm);
    }

    .faq-item__answer {
        padding: 0 16px 16px;
    }

    /* === 29. Blog === */
    .category-filter {
        gap: 6px;
    }

    .category-filter__link {
        padding: 6px 12px;
        font-size: var(--tctheme-font-size-xs);
    }

    .post-card__body {
        padding: 18px;
    }

    .post-meta {
        gap: 12px;
    }

    /* === 30. Product Single === */
    .product-summary-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product-summary__info {
        padding: 18px;
    }

    .product-summary__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .product-summary__actions {
        gap: 8px;
    }

    .product-brochure-cta {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 18px;
    }

    .product-brochure-cta__icon {
        margin-inline: auto;
    }

    .product-brochure-cta__link {
        width: 100%;
    }

    .product-brochure-cta__link .btn {
        width: 100%;
    }

    .product-inquiry-cta__title {
        font-size: var(--tctheme-font-size-2xl);
    }

    .product-inquiry-cta__btn {
        width: 100%;
    }

    /* === 31. Specs Table === */
    .specs-table th,
    .specs-table td {
        padding: 10px 12px;
        font-size: var(--tctheme-font-size-sm);
    }

    /* === 32. Page Header / Archive Header === */
    .page-title,
    .archive-title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .page-description,
    .archive-description {
        font-size: var(--tctheme-font-size-base);
    }

    /* === 33. Pagination === */
    .products-pagination,
    .pagination,
    .nav-links {
        margin-top: 32px;
        gap: 4px;
    }

    .page-numbers {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: var(--tctheme-font-size-sm);
    }

    /* === 34. Footer === */
    .footer-widgets {
        padding-block: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom-inner {
        padding-block: 16px;
    }

    .footer-copyright {
        font-size: var(--tctheme-font-size-xs);
    }

    /* === 35. WhatsApp Float === */
    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 22px;
        right: 14px;
        bottom: 14px;
    }

    /* === 36. Buttons === */
    .btn {
        padding: 10px 20px;
        font-size: var(--tctheme-font-size-sm);
    }

    .btn-block {
        width: 100%;
    }

    .hero-slide__cta,
    .hero-slide__cta-secondary,
    .factory-showcase__cta,
    .cta-banner__btn,
    .cta-banner__btn-secondary {
        padding: 12px 22px;
        font-size: var(--tctheme-font-size-sm);
    }

    /* === 37. Swiper === */
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

}

/* ==========================================================================
   补充响应式修复 — 三级菜单、移动端导航增强、网格自适应
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Desktop dropdowns hidden on tablet, mobile menu used */
    .nav-menu .sub-menu {
        display: none;
    }

    /* Ensure 3rd level also hidden */
    .nav-menu .sub-menu .sub-menu {
        display: none;
    }

    /* Grid-4-col becomes 2-col on tablet */
    .grid-4-col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Applications swiper cards */
    .applications-swiper,
    .certifications-swiper,
    .testimonials-swiper {
        padding-bottom: 48px;
    }

    /* Partner cards */
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer quick links columns work */
    .footer-quick-links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {

    /* Site header min-height for mobile */
    .site-header-inner {
        min-height: 56px;
    }

    /* Mobile nav fills width properly */
    .mobile-nav {
        left: 0;
        right: 0;
        max-height: calc(100vh - 56px);
    }

    /* Mobile menu link padding */
    .mobile-menu > li > a {
        padding: 14px 16px;
        font-size: 15px;
    }

    .mobile-menu .sub-menu a {
        padding: 12px 16px 12px 32px;
    }

    .mobile-menu .sub-menu .sub-menu a {
        padding-left: 48px;
    }

    /* Mobile sub-toggle button */
    .mobile-sub-toggle {
        width: 44px;
        height: 44px;
    }

    /* Hide CTA text on very small screens, keep icon only? No—keep full CTA but smaller */
    .cta-quote {
        padding: 8px 14px;
        font-size: 13px;
    }

    .cta-quote .fa-arrow-right {
        display: none;
    }

    /* Grid fallback for any remaining multi-col grids */
    .grid-2-col,
    .grid-3-col,
    .grid-4-col,
    .grid-12,
    .partners-grid,
    .team-grid,
    .advantages-grid,
    .applications-grid {
        grid-template-columns: 1fr;
    }

    /* Product and project cards on mobile */
    .product-card,
    .project-card,
    .news-card,
    .post-card {
        margin-bottom: 20px;
    }

    /* FAQ items */
    .faq-list {
        gap: 12px;
    }

    /* Breadcrumb on mobile */
    .breadcrumb {
        font-size: var(--tctheme-font-size-xs);
        padding: 8px 0;
    }

    /* Filter sidebar mobile */
    .filter-sidebar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85vw;
        max-width: 360px;
        height: 100vh;
        z-index: var(--tctheme-z-modal);
        overflow-y: auto;
        transition: right var(--tctheme-transition-base);
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    }

    .filter-sidebar.is-open {
        right: 0;
    }

    /* Stats bar items centered */
    .stats-item {
        text-align: center;
    }

    /* Section headers on mobile */
    .section-header__title {
        line-height: 1.2;
    }

    /* Inquiry form */
    .inquiry-form input[type="text"],
    .inquiry-form input[type="email"],
    .inquiry-form input[type="tel"],
    .inquiry-form select,
    .inquiry-form textarea {
        font-size: 16px; /* prevents iOS zoom */
    }

    /* Tables responsive scroll */
    .specs-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .specs-table {
        min-width: 500px;
    }

    /* Compare bar */
    .compare-bar__inner {
        flex-wrap: wrap;
    }

    /* Swiper pagination bottom spacing */
    .swiper-pagination {
        bottom: 10px !important;
    }

    /* Partner cards */
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .partner-card {
        padding: 16px 12px;
    }

    /* Footer */
    .footer-contact-list li {
        font-size: var(--tctheme-font-size-sm);
    }

    /* Language switcher mobile */
    .language-switcher {
        font-size: var(--tctheme-font-size-sm);
    }
}

/* Very small screens (≤380px) */
@media (max-width: 380px) {
    .site-logo-text {
        font-size: var(--tctheme-font-size-base);
    }

    .cta-quote {
        padding: 6px 10px;
        font-size: 12px;
    }

    .hero-slide__title {
        font-size: var(--tctheme-font-size-3xl);
    }

    .hero-slide__content {
        padding-block: 32px;
    }
}