/* Mobile Styles - Applies to screens up to 480px */
@media (max-width: 480px) {
    .about-headshot {
        display: none;
    }

    body {
        grid-template-columns: 1fr;
        font-size: 1.0625rem;
        line-height: 1.7;
    }
    
    main {
        padding: 1rem;
    }
    
    h1 {
        font-size: 2.25rem;
    }
    
    h2 {
        font-size: 1.4rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    h4 {
        font-size: 1.15rem;
    }

    p,
    li {
        line-height: 1.7;
    }

    #about > p {
        font-size: 1.0625rem;
    }

    .about-headshot {
        width: clamp(7rem, 38%, 9rem);
        margin-left: 0.75rem;
    }
    
    /* Overview section - full width stacked layout */
    section#overview {
        flex-direction: column;
        gap: 1rem;
    }
    
    section#overview > section {
        flex: 1 1 100%;
        min-width: auto;
    }
    
    /* All projects stack vertically on mobile */
    section#otherProjects {
        flex-direction: column;
        gap: 1rem;
    }
    
    section#otherProjects article {
        flex: 1 1 100%;
        min-width: auto;
    }
    
    /* Reduce spacing for mobile */
    section {
        margin: 1.5rem 0;
        padding: 1.25rem;
        border-radius: 6px;
    }
    
    article {
        padding: 1rem;
        margin: 1rem 0;
        border-left-width: 3px;
    }
    
    article:hover {
        transform: translateX(3px);
    }
    
    /* Form optimizations for mobile */
    form {
        padding: 1.25rem;
    }
    
    form div {
        margin: 1.25rem 0;
    }
    
    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    textarea {
        font-size: 16px;
    }
    
    /* Full width submit button on mobile */
    input[type="submit"] {
        width: 100%;
        padding: 0.75rem;
    }
    
    /* Footer adjustments */
    footer {
        padding: 1.5rem 1rem;
        font-size: 0.9rem;
    }

    .ask-frame {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        padding: 0.85rem;
    }

    .ask-frame h3 {
        font-size: 1rem;
    }

    .chat-history {
        max-height: 180px;
        min-height: 140px;
    }

    .chat-bubble {
        max-width: 95%;
    }

}