/* ============================================
   MOBILE-ONLY STYLES (PHASE 3 IMPLEMENTATION)
   Breakpoint: max-width 768px
   Desktop files (main.css, tokens.css) remain UNTOUCHED
   ============================================ */

/* Hide "See more" button on desktop by default */
.about-see-more {
    display: none;
}

@media (max-width: 768px) {

    /* ==========================================
     VIEWPORT OVERFLOW FIXES (Critical)
     Prevents horizontal scroll on mobile
     ========================================== */

    /* Unified mobile horizontal gutter */
    :root {
        --mobile-gutter: 1.5rem;
    }

    /* Prevent overflow from any source */
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Header: Use mobile gutter */
    .header {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    /* Header content: Remove desktop centering on mobile */
    .header-content {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Logo container: Prevent name wrapping on small screens */
    .logo-container {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .logo {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .availability-badge {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 10px !important;
        padding: 0.3rem 0.7rem !important;
        letter-spacing: 0.6px !important;
    }

    /* Extra small screens (390px and below) - Further optimize header */
    @media (max-width: 390px) {
        .logo {
            font-size: 13px !important;
        }

        .availability-badge {
            font-size: 9px !important;
            padding: 0.25rem 0.6rem !important;
            letter-spacing: 0.5px !important;
        }

        .logo-container {
            gap: 0.4rem !important;
        }
    }

    /* Hero: Use mobile gutter, remove desktop centering */
    .hero {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    /* All sections: Use mobile gutter, remove desktop centering */
    section {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    /* Fix profile container exceeding viewport */
    .profile-container {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
    }

    /* Hide decorative elements that extend beyond container - but not for mobile container */
    .profile-container-desktop .profile-slashes,
    .profile-container-desktop .profile-plus {
        display: none !important;
    }

    /* Scale down large section background text - Make more visible */
    section::before {
        font-size: 3rem !important;
        opacity: 0.5 !important;
        color: var(--color-accent) !important;
        /* Use accent color instead of faded for better visibility */
    }

    /* Convert hero to flex column for better mobile flow */
    .hero {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        align-items: center !important;
    }

    /* Hide desktop profile container on mobile */
    .profile-container-desktop {
        display: none !important;
    }

    /* Mobile hero typography */
    .hero-content {
        text-align: center;
        margin-bottom: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }

    .hero-intro {
        font-size: 16px !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 1rem !important;
    }

    .hero-tagline {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 2rem !important;
        /* CSS-only truncation using line-clamp */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-cta {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        margin-top: 0 !important;
    }

    /* ==========================================
       PHASE 3.2: MOBILE PROFILE PHOTO
       Match desktop style - asymmetric rings
       Positioned between tagline and CTA buttons
       ========================================== */

    /* Show mobile profile container - between tagline and CTA */
    .profile-container-mobile {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        height: 300px !important;
        margin: 0 auto 2.5rem !important;
        position: relative !important;
    }

    .resume-btn,
    .calendar-btn {
        width: 100%;
        padding: 1rem 2rem !important;
        font-size: 16px !important;
        text-align: center;
    }

    /* Match desktop asymmetric ring design - scaled down */
    .profile-container-mobile .profile-outer-ring {
        position: absolute !important;
        left: 0% !important;
        right: 2.57% !important;
        top: 3.14% !important;
        bottom: 0% !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 50% !important;
    }

    .profile-container-mobile .profile-inner-ring {
        position: absolute !important;
        /* Desktop asymmetric offset */
        left: 2.57% !important;
        right: 0% !important;
        top: 0% !important;
        bottom: 3.14% !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: #000000 !important;
    }

    .profile-container-mobile .profile-photo {
        position: absolute !important;
        left: 0% !important;
        right: 0% !important;
        top: 0% !important;
        bottom: 0% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: scale(1.01) !important;
    }

    /* Show decorative elements on mobile - refined styling for better balance */
    .profile-container-mobile .profile-slashes {
        display: block !important;
        position: absolute !important;
        bottom: 15% !important;
        right: -28px !important;
        font-size: 1.3rem !important;
        font-weight: var(--font-weight-bold) !important;
        color: var(--color-text-primary) !important;
        letter-spacing: 2.5px !important;
        opacity: 0.75 !important;
        transform: rotate(-3deg) !important;
        z-index: 5 !important;
        white-space: nowrap !important;
    }

    .profile-container-mobile .profile-plus {
        display: block !important;
        position: absolute !important;
        top: 6% !important;
        right: -22px !important;
        font-size: 2rem !important;
        color: var(--color-text-primary) !important;
        font-weight: var(--font-weight-bold) !important;
        opacity: 0.75 !important;
        transform: rotate(12deg) !important;
        z-index: 5 !important;
        line-height: 1 !important;
    }

    /* Clear vertical separation: Hero → About */
    .hero {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important;
    }

    /* ==========================================
       PHASE 3.3: ABOUT SECTION PROGRESSIVE DISCLOSURE
       Collapsed by default, one-way expansion
       ========================================== */

    .about-text-expandable {
        display: none;
    }

    .about-text.expanded .about-text-expandable {
        display: block;
    }

    /* Show "See more" button on mobile */
    .about-see-more {
        display: block;
        margin-top: 1.5rem;
        padding: 0.75rem 1.5rem;
        background-color: transparent;
        color: var(--color-accent);
        border: 2px solid var(--color-accent);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: all var(--transition-base);
        width: 100%;
        text-align: center;
    }

    .about-see-more:hover {
        background-color: var(--color-accent);
        color: var(--color-text-primary);
    }

    .about-text.expanded .about-see-more {
        display: none;
    }

    /* ==========================================
     PHASE 3.1: MOBILE HEADER + HAMBURGER MENU
     ========================================== */

    /* Header: Hide desktop elements on mobile */
    .header-right {
        display: none !important;
    }

    /* Show hamburger toggle */
    .mobile-menu-toggle {
        display: flex !important;
        z-index: 1001;
    }

    /* Backdrop overlay - completely removed to prevent screen fade */
    .nav-menu-backdrop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Override ALL desktop nav styles - Slide from right on mobile */
    .nav-menu {
        /* Position - override desktop absolute */
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 80% !important;
        max-width: 320px !important;
        background-color: var(--color-bg-primary) !important;
        z-index: 1000 !important;

        /* Layout - override desktop flex */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2rem !important;
        padding: 2rem !important;
        flex: none !important;

        /* Transform - override desktop translateY */
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
        
        /* Visibility - override desktop hidden states */
        opacity: 1 !important;
        visibility: visible !important;
        border-top: none !important;
    }

    /* Mobile menu open state - Slide in from right */
    .nav-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile nav links */
    .nav-link {
        font-size: 20px;
        font-weight: 600;
        padding: 1rem 0;
        width: 100%;
        text-align: center;
    }

    /* Mobile menu close button (will be added via JS) */
    .mobile-menu-close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        background: none;
        border: none;
        font-size: 32px;
        color: var(--color-text-primary);
        cursor: pointer;
        padding: 0.5rem;
        line-height: 1;
    }

    /* Resume button inside mobile menu */
    .nav-menu .header-resume-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 2rem;
        background-color: var(--color-accent);
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: 16px;
        font-weight: 600;
        border: 2px solid var(--color-accent);
        border-radius: var(--radius-sm);
        margin-top: 1rem;
    }

    /* Social icons inside mobile menu */
    .nav-menu .social-icons {
        display: flex;
        gap: 1.5rem;
        margin-top: 1rem;
    }

    .nav-menu .social-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ==========================================
       MOBILE SKILLS SECTION - Enhanced Visibility
       ========================================== */

    .skills {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .skills .work-intro {
        font-size: 16px !important;
        margin-bottom: 2rem !important;
        line-height: 1.6 !important;
    }

    .skills-list {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }

    .skill-item {
        padding: 1.25rem !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-sm) !important;
        margin-bottom: 0.5rem !important;
    }

    .skill-name {
        font-size: 18px !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-primary) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .skill-context {
        font-size: 14px !important;
        color: var(--color-text-secondary) !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ==========================================
       MOBILE WORK/PROJECTS SECTION - Enhanced Visibility
       ========================================== */

    .work {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .work .work-intro {
        font-size: 16px !important;
        margin-bottom: 2rem !important;
        line-height: 1.6 !important;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .project-card {
        margin-bottom: 1.5rem !important;
    }

    .project-image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: var(--radius-sm) !important;
        margin-bottom: 1rem !important;
    }

    .project-date {
        font-size: 13px !important;
        color: var(--color-text-primary) !important;
        margin-bottom: 0.5rem !important;
        font-weight: var(--font-weight-medium) !important;
    }

    .project-title {
        font-size: 20px !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-primary) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .project-description {
        font-size: 15px !important;
        color: var(--color-text-primary) !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .project-impact {
        font-size: 14px !important;
        color: var(--color-text-secondary) !important;
        line-height: 1.5 !important;
        padding: 1rem !important;
        background-color: var(--color-bg-secondary) !important;
        border-left: 3px solid var(--color-accent) !important;
        border-radius: var(--radius-sm) !important;
        margin-top: 1rem !important;
    }

    .project-link {
        font-size: 15px !important;
        margin-top: 1rem !important;
        display: inline-block !important;
    }

    .temple-btn {
        font-size: 15px !important;
        padding: 0.875rem 1.75rem !important;
        margin-top: 1rem !important;
    }

    /* ==========================================
       MOBILE SERVICES/HELP SECTION - Reduce Padding
       ========================================== */

    .help {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .help .work-intro {
        font-size: 16px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    .help-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }

    .help-item {
        padding: 1rem !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-sm) !important;
        margin-bottom: 0.5rem !important;
    }

    .help-title {
        font-size: 18px !important;
        font-weight: var(--font-weight-semibold) !important;
        color: var(--color-text-primary) !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.3 !important;
    }

    .help-description {
        font-size: 14px !important;
        color: var(--color-text-secondary) !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    /* ==========================================
       MOBILE ACHIEVEMENTS SECTION - Alignment Fix
       ========================================== */

    .achievements {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .achievements .work-intro {
        font-size: 16px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    .achievements-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }

    .achievement-item {
        padding: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ==========================================
       MOBILE ACTIVITY SECTION - Alignment Fix
       ========================================== */

    .activity {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .activity .work-intro {
        font-size: 16px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    /* ==========================================
       MOBILE CONTACT SECTION - Alignment Fix
       ========================================== */

    .contact {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    /* ==========================================
       MOBILE PERSONAL WORK SECTION - Alignment Fix
       ========================================== */

    .personal-work {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    .personal-work .work-intro {
        font-size: 16px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.6 !important;
    }

    /* ==========================================
       MOBILE ABOUT SECTION - Consistent Padding
       ========================================== */

    .about {
        padding-top: 3rem !important;
        padding-bottom: 2rem !important;
    }

    /* ==========================================
       MOBILE UX ENHANCEMENTS
       ========================================== */

    /* Ensure minimum touch target size (44x44px) */
    .mobile-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
    }

    .nav-link {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .about-see-more,
    .resume-btn,
    .calendar-btn,
    .temple-btn,
    .project-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Better touch feedback - active states */
    .resume-btn:active,
    .calendar-btn:active,
    .about-see-more:active,
    .temple-btn:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
    }

    .nav-link:active {
        opacity: 0.7 !important;
        transform: scale(0.98) !important;
    }

    .skill-item:active,
    .help-item:active,
    .project-card:active {
        transform: scale(0.99) !important;
    }

    /* Improved scroll-to-top button */
    .scroll-to-top {
        min-width: 48px !important;
        min-height: 48px !important;
        bottom: 5.5rem !important;
        right: 1.5rem !important;
    }

    /* Mobile Floating Contact Button */
    .mobile-contact-fab {
        display: flex !important;
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        width: 56px !important;
        height: 56px !important;
        background-color: var(--color-accent) !important;
        color: var(--color-text-primary) !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        z-index: 99 !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-contact-fab:active {
        transform: scale(0.95) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    .mobile-contact-fab svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Better focus states for accessibility */
    .nav-link:focus,
    .resume-btn:focus,
    .calendar-btn:focus,
    .about-see-more:focus {
        outline: 2px solid var(--color-accent) !important;
        outline-offset: 2px !important;
    }

    /* Smooth scroll behavior */
    html {
        scroll-behavior: smooth !important;
    }

    /* Optimize scrolling performance */
    section,
    .section-content {
        will-change: auto !important;
        transform: translateZ(0) !important;
    }

    /* Better image loading - prevent layout shift */
    .project-image {
        background-color: var(--color-bg-secondary) !important;
    }

    /* Improve readability with better line spacing */
    .about-text,
    .project-description,
    .help-description {
        line-height: 1.7 !important;
    }

    /* Better spacing between interactive elements */
    .skill-item,
    .help-item,
    .project-card {
        margin-bottom: 1rem !important;
    }

    /* Enhanced visual hierarchy for section titles */
    .work-intro {
        font-weight: var(--font-weight-medium) !important;
    }

    /* Better touch feedback for links */
    .project-link:active,
    .contact-link:active {
        opacity: 0.8 !important;
    }

    /* Prevent text selection on buttons during tap */
    .resume-btn,
    .calendar-btn,
    .about-see-more,
    .temple-btn,
    .mobile-menu-toggle {
        -webkit-tap-highlight-color: rgba(245, 238, 132, 0.3) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* Better spacing for timeline items */
    .timeline-item {
        margin-bottom: 1.5rem !important;
    }

    /* Improve contact section spacing */
    .contact-links {
        gap: 1.25rem !important;
    }

    .contact-link {
        min-height: 44px !important;
        padding: 0.5rem 0 !important;
    }

    /* ==========================================
       ADDITIONAL MOBILE ENHANCEMENTS
       ========================================== */

    /* Safe area insets for notched devices (iPhone X+) */
    @supports (padding: max(0px)) {
        .header {
            padding-left: max(var(--mobile-gutter), env(safe-area-inset-left)) !important;
            padding-right: max(var(--mobile-gutter), env(safe-area-inset-right)) !important;
        }

        section {
            padding-left: max(var(--mobile-gutter), env(safe-area-inset-left)) !important;
            padding-right: max(var(--mobile-gutter), env(safe-area-inset-right)) !important;
        }

        .hero {
            padding-left: max(var(--mobile-gutter), env(safe-area-inset-left)) !important;
            padding-right: max(var(--mobile-gutter), env(safe-area-inset-right)) !important;
        }
    }

    /* Better momentum scrolling on iOS */
    body,
    html {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    /* Prevent pull-to-refresh on mobile */
    body {
        overscroll-behavior: none !important;
    }

    /* Better image loading - prevent layout shift */
    .project-image,
    .contact-image {
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%) !important;
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .nav-menu {
            transition: transform 0.01ms !important;
        }
    }

    /* Better focus visibility for keyboard navigation */
    *:focus-visible {
        outline: 2px solid var(--color-accent) !important;
        outline-offset: 2px !important;
    }

    /* Improve text rendering on mobile */
    body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }

    /* Better tap highlight for iOS */
    a,
    button {
        -webkit-tap-highlight-color: rgba(245, 238, 132, 0.2) !important;
    }

    /* Prevent text size adjustment on iOS */
    html {
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
    }

    /* Better scrollbar styling (for browsers that support it) */
    ::-webkit-scrollbar {
        width: 6px !important;
    }

    ::-webkit-scrollbar-track {
        background: var(--color-bg-primary) !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--color-accent) !important;
        border-radius: 3px !important;
    }

    /* Improve section background text positioning on very small screens */
    @media (max-width: 375px) {
        section::before {
            font-size: 2.5rem !important;
            left: 10px !important;
            top: 5px !important;
        }
    }

    /* Better spacing for very small screens */
    @media (max-width: 375px) {
        :root {
            --mobile-gutter: 1rem;
        }
    }
}