/* Mobile Hero Layout - ONLY affects phones, keeps existing HTML */

/* Small phones (320px - 374px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 1.6rem !important;
    }
    
    .hero-description {
        font-size: 14px !important;
    }
    
    .hero-btn {
        font-size: 12px !important;
        padding: 14px 28px !important;
    }
    
    .topic-item {
        min-width: 240px !important;
        width: 240px !important;
    }
}

/* Medium phones (375px - 413px) */
@media (min-width: 375px) and (max-width: 413px) {
    .hero-title {
        font-size: 1.75rem !important;
    }
}

/* Large phones (414px - 767px) */
@media (min-width: 414px) and (max-width: 767px) {
    .hero-title {
        font-size: 1.95rem !important;
    }
    
    .topic-item {
        min-width: 280px !important;
        width: 280px !important;
    }
}

/* All phones (320px - 767px) */
@media (max-width: 767px) {
    /* Hero Section */
    .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-top: 80px;
    }

    /* Background with gradient overlays */
    .hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .hero-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(2, 4, 8, 0.7) 0%, rgba(2, 4, 8, 0.5) 60%, rgba(10, 17, 31, 0.2) 100%);
        z-index: 2;
    }

    .hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(2, 4, 8, 0.6) 0%, rgba(2, 4, 8, 0.3) 50%, transparent 100%);
        z-index: 3;
    }

    .hero-video {
        display: none;
    }

    .hero-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../image/transportphone.jpg');
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    /* Content */
    .hero-content {
        position: relative;
        z-index: 10;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 24px 20px;
        max-width: 100%;
        text-align: left;
    }

    /* Badge */
    .hero-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: 2px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        width: fit-content;
        margin-bottom: 24px;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #FFB800;
        opacity: 0;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    }

    .hero-tag::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #FFB800;
        animation: pulse 2s infinite;
    }

    /* Title */
    .hero-title {
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 24px;
        max-width: 100%;
        opacity: 0;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    }
    
    @supports (-webkit-touch-callout: none) {
        .hero {
            min-height: -webkit-fill-available;
        }
    }

    /* Description */
    .hero-description {
        color: #8890A0;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px;
        max-width: 100%;
        opacity: 0;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }

    /* Button */
    .hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 16px 32px;
        background: #FFB800 !important;
        background-image: none !important;
        color: #020408 !important;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        text-decoration: none;
        border: none;
        border-radius: 2px;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%) !important;
        box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
        transition: all 0.3s ease;
        width: 100%;
        min-width: auto !important;
        min-height: auto !important;
        opacity: 0;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    }

    .hero-btn:hover {
        background: white;
    }

    .hero-btn:active {
        transform: scale(0.98);
    }

    /* Topics Bar - Bottom Trust Bar */
    .hero-topics {
        position: relative;
        z-index: 20;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(2, 4, 8, 0.5);
        backdrop-filter: blur(12px);
        padding: 16px 0;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: block;
    }

    .hero-topics::-webkit-scrollbar {
        display: none;
    }

    .hero-topics-container {
        padding: 0;
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hero-topics-container::-webkit-scrollbar {
        display: none;
    }

    .topics-list {
        display: flex;
        gap: 32px;
        list-style: none;
        padding: 0 24px;
        margin: 0;
        border: none;
        width: max-content;
        min-width: 100%;
    }

    .topic-item {
        min-width: 260px;
        width: 260px;
        flex-shrink: 0;
        opacity: 0;
        animation: fadeIn 1s ease forwards;
        padding: 0;
        border: none;
        backdrop-filter: none;
        background: transparent;
    }

    .topic-item:nth-child(1) { animation-delay: 0.5s; }
    .topic-item:nth-child(2) { animation-delay: 0.6s; }
    .topic-item:nth-child(3) { animation-delay: 0.7s; }
    .topic-item:nth-child(4) { animation-delay: 0.8s; }
    .topic-item:nth-child(5) { animation-delay: 0.9s; }

    .topic-item:hover {
        backdrop-filter: none;
        background: transparent;
    }

    .topic-content {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .topic-content::after {
        display: none;
    }

    .topic-content p {
        font-size: 13px;
        font-weight: 600;
        color: white;
        margin: 0;
        line-height: 1.4;
    }

    /* Style topics to look like trust badges */
    .topic-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .topic-content::before {
        content: '';
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 2px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: 18px;
        background-position: center;
        background-repeat: no-repeat;
    }

    .topic-item:nth-child(1) .topic-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E");
    }

    .topic-item:nth-child(2) .topic-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    }

    .topic-item:nth-child(3) .topic-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    }

    .topic-item:nth-child(4) .topic-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    }

    .topic-item:nth-child(5) .topic-content::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB800' stroke-width='2'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
    }

    /* Make topic text look like title + subtitle */
    .topic-content p {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* Scroll padding */
    .topics-list::after {
        content: '';
        display: block;
        width: 4px;
        flex-shrink: 0;
    }

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

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
}