/* Red Hat AI Mobile Styles */

/* 모바일 전용 요소 기본 숨김 */
.mobile-only {
    display: none;
}

/* 모바일에서만 표시 */
@media (max-width: 768px) {
    .mobile-only {
        display: inline;
    }
    
    br.mobile-only {
        display: block;
    }
}

/* Hero Section Mobile */
@media (max-width: 768px) {
    .product-hero {
        min-height: 500px;
        height: auto;
        padding: 80px 0 60px;
    }

    .product-hero-content {
        padding: 0 1rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 8px 16px;
        margin-bottom: 1.5rem;
        letter-spacing: 0.08em;
        white-space: normal;
        line-height: 1.4;
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 2rem;
        padding: 0 10px;
    }

    .hero-subtitle br {
        display: none;
    }

    /* 버튼 스타일 */
    .hero-cta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0 10px;
    }

    .hero-btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .hero-btn-primary {
        background: linear-gradient(135deg, #ee0000 0%, #cc0000 100%) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 5px 15px rgba(238, 0, 0, 0.3) !important;
    }
    
    .hero-btn-primary::before {
        display: none !important;
    }
    
    .hero-btn-primary:hover {
        background: linear-gradient(135deg, #cc0000 0%, #aa0000 100%) !important;
        transform: none !important;
        box-shadow: 0 5px 15px rgba(238, 0, 0, 0.3) !important;
    }
    
    .hero-btn-primary:active {
        background: linear-gradient(135deg, #aa0000 0%, #880000 100%) !important;
    }
    
    .hero-btn-secondary {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        color: white !important;
        padding: calc(1rem - 2px) calc(2rem - 2px) !important;
    }
    
    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        transform: none !important;
    }
}

/* CTA Section Mobile */
@media (max-width: 768px) {
    .ai-cta {
        padding: 60px 0;
    }

    .cta-content {
        padding: 0 1rem;
    }

    .cta-title {
        font-size: 1.25rem;
        margin-bottom: 15px;
        line-height: 1.4;
        word-break: keep-all;
    }

    .cta-title br {
        display: none;
    }

    .cta-desc {
        font-size: 0.875rem;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .cta-desc br {
        display: none;
    }

    .cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0 10px;
    }

    .cta-btn {
        width: 100% !important;
        max-width: 300px !important;
        padding: 15px 40px !important;
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }

    .cta-btn-primary {
        background: linear-gradient(135deg, #ee0000, #cc0000) !important;
        color: white !important;
        box-shadow: 0 5px 15px rgba(238, 0, 0, 0.3) !important;
        border: none !important;
    }
    
    .cta-btn-primary:hover {
        background: linear-gradient(135deg, #cc0000, #aa0000) !important;
        transform: none !important;
    }
    
    .cta-btn-primary:active {
        background: linear-gradient(135deg, #aa0000, #880000) !important;
    }

    .cta-btn-secondary {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        color: white !important;
        padding: calc(15px - 2px) calc(40px - 2px) !important;
    }
    
    .cta-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
        transform: none !important;
    }
}

/* 특정 섹션 애니메이션 유지 */
@media (max-width: 768px) {
    /* 화살표 애니메이션은 모바일에서도 유지 */
    @keyframes arrowMove {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(5px); }
    }

    .hero-btn-primary svg {
        animation: arrowMove 1.5s ease-in-out infinite;
    }

    .cta-btn-primary svg {
        animation: arrowMove 1.5s ease-in-out infinite;
    }
}