/**
 * P3 Pro Landing Page - Mobile Fixes
 * 专门修复移动端适配问题
 *
 * @package Laifen_Russia
 */

/* ============================================
   全局溢出修复 - 防止水平滚动
   ============================================ */

/* 防止整个页面水平溢出 - 仅在 body 层级设置 clip，避免破坏 position: sticky */
body.page-template-template-p3-pro-landing {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
}

.p3-pro-landing {
    width: 100%;
    max-width: 100vw;
}

.p3-pro-landing > * {
    max-width: 100vw;
}

/* ============================================
   移动端容器修复
   ============================================ */

@media (max-width: 768px) {
    /* 确保所有容器都有正确的 padding 和不溢出 */
    .p3-pro-landing section {
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* 修复所有容器类 */
    .p3-pro-landing .lf-container,
    .p3-pro-landing .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Early Bird Product 特殊修复 */
    .p3-pro-early-bird {
        padding: 40px 0 !important;
    }

    .p3-pro-early-bird__container {
        padding: 0 20px !important;
        margin: 0 auto;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .p3-pro-early-bird__content {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .p3-pro-early-bird__image-wrapper {
        padding: 0 !important;
        margin: 0 0 30px 0 !important;
    }

    /* 按钮容器修复 */
    .p3-pro-early-bird__buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* 按钮样式修复 */
    .p3-pro-early-bird__button {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        text-align: center !important;
        padding: 15px 20px !important;
        font-size: 15px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* 确保按钮不会溢出 */
    .p3-pro-early-bird__button--primary,
    .p3-pro-early-bird__button--secondary {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 图片容器修复 */
    .p3-pro-early-bird__image-wrapper {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .p3-pro-early-bird__image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* 文本内容修复 */
    .p3-pro-early-bird__heading {
        font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) !important;
        word-wrap: break-word;
    }

    .p3-pro-early-bird__subheading {
        font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) !important;
        word-wrap: break-word;
    }

    .p3-pro-early-bird__description {
        font-size: 14px !important;
        word-wrap: break-word;
    }
}

@media (max-width: 480px) {
    .p3-pro-landing section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .p3-pro-early-bird {
        padding: 30px 0 !important;
    }

    .p3-pro-early-bird__container {
        padding: 0 15px !important;
    }

    .p3-pro-early-bird__image-wrapper {
        margin: 0 0 20px 0 !important;
    }

    .p3-pro-early-bird__button {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    .p3-pro-early-bird__heading {
        font-size: 1.5rem !important;
    }

    .p3-pro-early-bird__subheading {
        font-size: 1rem !important;
    }
}

/* ============================================
   Sticky Navigation 移动端修复
   ============================================ */

@media (max-width: 768px) {
    /* 修复 sticky nav 容器溢出 */
    .p3-pro-sticky-nav {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .p3-pro-sticky-nav__wrapper {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .p3-pro-sticky-nav__container {
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .p3-pro-sticky-nav__inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .p3-pro-sticky-nav__buttons {
        display: flex;
        gap: 8px;
        margin-left: auto;
        flex-shrink: 0;
        max-width: 60%;
    }

    .p3-pro-sticky-nav__btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
        box-sizing: border-box;
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* 移动端导航滚动区域 */
    .p3-pro-sticky-nav__mobile-nav {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .p3-pro-sticky-nav__mobile-scroll {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 480px) {
    .p3-pro-sticky-nav__container {
        padding: 0 10px;
    }
    
    .p3-pro-sticky-nav__btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    
    .p3-pro-sticky-nav__buttons {
        gap: 6px;
    }
}

/* ============================================
   防止内容溢出的全局规则
   ============================================ */

@media (max-width: 768px) {
    /* 确保所有元素使用 border-box */
    .p3-pro-landing *,
    .p3-pro-landing *::before,
    .p3-pro-landing *::after {
        box-sizing: border-box;
    }

    /* 图片响应式 */
    .p3-pro-landing img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* 按钮和链接 */
    .p3-pro-landing button,
    .p3-pro-landing a.button,
    .p3-pro-landing .button,
    .p3-pro-landing a {
        max-width: 100%;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    
    /* 视频响应式 */
    .p3-pro-landing video {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* 防止文本溢出 */
    .p3-pro-landing h1,
    .p3-pro-landing h2,
    .p3-pro-landing h3,
    .p3-pro-landing h4,
    .p3-pro-landing h5,
    .p3-pro-landing h6,
    .p3-pro-landing p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* ============================================
   Choose Shaver 移动端修复
   ============================================ */

@media (max-width: 1000px) {
    .choose-shaver {
        padding: 40px 0 20px !important;
    }
    
    .choose-shaver__inner {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .choose-shaver__grid {
        padding: 10px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .choose-shaver__product {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .choose-shaver__product-top {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .choose-shaver__product-info {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    .choose-shaver__image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .choose-shaver__image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
    
    .choose-shaver__button-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .choose-shaver__features {
        width: 100% !important;
        padding: 50px 5px 15px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .choose-shaver__inner {
        padding: 0 10px !important;
    }
    
    .choose-shaver__grid {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .choose-shaver__product-top {
        padding: 8px !important;
    }
}

/* ============================================
   Hero Section 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .p3-pro-hero {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .p3-pro-hero__background {
        width: 100%;
        max-width: 100vw;
    }
    
    .p3-pro-hero__container {
        width: 100%;
        max-width: 100vw;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    .p3-pro-hero__content {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .p3-pro-hero__container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ============================================
   Video Banner 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .ins-video-banner__section {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .ins-video-banner__container {
        width: 100%;
        max-width: 100vw;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    
    .ins-video-banner__content {
        width: 100%;
        max-width: 100%;
    }
    
    .ins-video-banner__video-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .ins-video-banner__video {
        width: 100%;
        max-width: 100%;
    }

    /* 全屏铺满模式 - 移动端视频全宽展示 */
    .ins-video-banner__section--full-bleed {
        overflow-x: clip !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ins-video-banner__section--full-bleed .ins-video-banner__container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }

    .ins-video-banner__section--full-bleed .ins-video-banner__header {
        padding: 0 20px !important;
    }

    .ins-video-banner__section--full-bleed .ins-video-banner__content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ins-video-banner__section--full-bleed .ins-video-banner__video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }

    .ins-video-banner__section--full-bleed .ins-video-banner__video.mobile {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
}

/* ============================================
   Anchor Blocks 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .ins-anchor-blocks {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .ins-anchor-blocks__container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    
    .ins-anchor-blocks__grid {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   Product Comparison 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .product-comparison-showcase {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .product-comparison-showcase .lf-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

/* ============================================
   Shaver Technology 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .shaver-technology-showcase {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .shaver-technology-showcase .lf-container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .shaver-technology-showcase__grid {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   CNC Machining 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .cnc-machining-time {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cnc-machining-time__container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

/* ============================================
   Accessories 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .p3-pro-accessories {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .p3-pro-accessories__container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .p3-pro-accessories__items {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   References 移动端修复
   ============================================ */

@media (max-width: 768px) {
    .p3-pro-references {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .p3-pro-references__container {
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

/* ============================================
   修复可能导致溢出的特定元素
   ============================================ */

@media (max-width: 768px) {
    /* 修复任何使用 100vw 的元素 */
    .p3-pro-landing [style*="width: 100vw"],
    .p3-pro-landing [style*="width:100vw"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 修复可能的固定宽度 */
    .p3-pro-landing [style*="width: 1400px"],
    .p3-pro-landing [style*="width: 1200px"],
    .p3-pro-landing [style*="width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 修复 margin 负值可能导致的溢出 */
    .p3-pro-landing [style*="margin-left: -"],
    .p3-pro-landing [style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}