/* =============================================
   MOBILE RESPONSIVENESS - Comprehensive Overhaul
   ============================================= */

/* ---- Prevent horizontal overflow globally ---- */
body {
    overflow-x: hidden !important;
    max-width: 100vw;
    position: relative;
}

/* ==============================================
   TABLET BREAKPOINT (769px - 1024px)
   ============================================== */
@media screen and (max-width: 1024px) {

    /* Hero: stack to single column on tablets */
    .hero-main-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }

    .hero-text-section {
        text-align: center;
        order: 2;
    }

    .hero-photo-section {
        order: 1;
    }

    .cta-buttons {
        justify-content: center;
    }

    /* Showcase: keep 2 cols on tablet */
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem;
    }

    /* Skills: 2 cols on tablet */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    /* Certifications: 2 cols on tablet */
    .certifications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    /* Projects grid: 2 cols on tablet */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Expertise: stack icon above text */
    .expertise-highlight {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .expertise-icon {
        justify-self: center;
    }

    .expertise-tags {
        justify-content: center;
    }

    /* Contact info: stack on tablet */
    .contact-info {
        grid-template-columns: 1fr !important;
    }

    /* Involvement: stack on tablet */
    .involvement-content {
        grid-template-columns: 1fr !important;
    }

    /* Featured project button: reduce size */
    .featured-project .project-link .btn {
        min-width: auto !important;
        width: 100%;
        max-width: 320px;
        font-size: 1.1rem !important;
        padding: 1rem 2rem !important;
    }
}


/* ==============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================== */
@media screen and (max-width: 768px) {

    /* ---- Responsive Typography ---- */
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.35rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    /* ---- Container padding ---- */
    .container {
        padding: 0 1rem !important;
    }

    /* ---- Section spacing ---- */
    section {
        padding: 3rem 0 !important;
    }

    /* ---- Navbar ---- */
    .nav-menu {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--header-height, 85px);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        padding: 2rem 1.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        text-align: center;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 999;
        overflow-y: auto;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 0.875rem 0;
        width: 100%;
        display: block;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-menu a::before {
        display: none;
    }

    .hamburger {
        display: flex !important;
    }

    .nav-container {
        padding: 0 1rem !important;
    }


    /* ---- Hero Section ---- */
    .hero {
        padding: calc(var(--header-height, 85px) + 1.5rem) 0 2rem !important;
        min-height: auto !important;
    }

    .hero-main-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 1.5rem;
    }

    .hero-text-section {
        text-align: center;
        order: 2;
    }

    .hero-photo-section {
        order: 1;
        width: 100%;
    }

    .hero h1 {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    }

    .hero h2 {
        font-size: clamp(0.95rem, 3vw, 1.15rem) !important;
    }

    .hero p {
        font-size: 1rem !important;
    }

    .hero-wrapper {
        padding: 0 !important;
    }

    /* CTA buttons */
    .cta-buttons {
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        gap: 0.75rem !important;
    }

    .cta-buttons .btn {
        width: 100% !important;
        max-width: 300px;
    }

    /* Photo sizing */
    .photo-container {
        justify-content: center;
    }

    .photo-frame,
    .photo-placeholder {
        width: 220px !important;
        height: 220px !important;
        min-width: unset !important;
        min-height: unset !important;
    }

    .photo-placeholder img {
        width: 220px !important;
        height: 220px !important;
        min-width: unset !important;
        min-height: unset !important;
    }

    /* Decorations */
    .hero-decoration,
    .geometric-shape {
        display: none !important;
    }


    /* ---- About Section ---- */
    .about-intro {
        text-align: center;
    }

    .about-description {
        font-size: 1rem;
    }

    /* Stats grid: 2 cols */
    .about-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem;
    }

    .stat {
        padding: 1.25rem !important;
    }

    .stat h3 {
        font-size: 2rem !important;
    }

    .stat p {
        font-size: 0.75rem !important;
    }

    .stat-icon i {
        font-size: 1.5rem !important;
    }


    /* ---- Expertise Grid ---- */
    .expertise-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    .expertise-highlight {
        grid-template-columns: 1fr !important;
        text-align: center;
        padding: 1.5rem !important;
        gap: 1rem !important;
    }

    .expertise-icon {
        justify-self: center;
        width: 70px !important;
        height: 70px !important;
    }

    .expertise-icon i {
        font-size: 2rem !important;
    }

    .expertise-tags {
        justify-content: center;
        flex-wrap: wrap;
    }

    .expertise-tags span {
        font-size: 0.8rem !important;
    }


    /* ---- Education Timeline ---- */
    .education-timeline,
    .experience-timeline,
    .projects-timeline {
        max-width: 100% !important;
        padding-left: 0 !important;
    }

    /* Timeline items: stack to single column */
    .timeline-item {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
    }

    /* Remove timeline vertical line and dots */
    .timeline-item::before,
    .timeline-item::after {
        display: none !important;
    }

    .education-timeline::before,
    .experience-timeline::before,
    .projects-timeline::before {
        display: none !important;
    }

    /* Timeline date badges: compact, centered, no stretching */
    .timeline-date {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        text-align: center !important;
        justify-self: center !important;
        align-self: start !important;
        padding: 0.5rem 1.25rem !important;
        font-size: 0.9rem !important;
        border-radius: 2rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
        flex-shrink: 0 !important;
    }

    .timeline-date::after {
        display: none !important;
    }

    /* Timeline content cards */
    .timeline-content {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
    }

    /* Disable timeline slide animations */
    .timeline-item.animate-slide-left,
    .timeline-item.animate-slide-right {
        transform: none !important;
        opacity: 1 !important;
    }


    /* ---- Agriculture Showcase ---- */
    .showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .showcase-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 1.5rem !important;
        text-align: center;
    }

    .showcase-icon {
        align-self: center;
    }

    .showcase-tags {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .showcase-demo {
        width: 100% !important;
    }

    .demo-satellite,
    .demo-timeseries,
    .demo-r-analysis,
    .demo-ai-system {
        width: 100% !important;
    }

    .ai-components {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .component {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }

    /* Featured project */
    .featured-project {
        padding: 1.5rem !important;
    }

    .featured-project .project-link .btn {
        min-width: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
        min-height: 50px !important;
    }

    .project-insights {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .insight-card {
        padding: 1.25rem !important;
    }

    .section-intro {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }


    /* ---- Software Projects Section ---- */
    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

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

    .project-features {
        gap: 0.5rem !important;
    }

    .project-features .feature-item {
        font-size: 0.9rem !important;
    }

    .tech-stack {
        gap: 0.4rem !important;
        flex-wrap: wrap !important;
    }

    .tech-tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.6rem !important;
    }


    /* ---- Skills Section ---- */
    .skills-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .skill-category {
        padding: 1.25rem !important;
    }

    .skill-category h3 {
        font-size: 1.2rem !important;
    }


    /* ---- Projects Timeline ---- */
    .project-technologies {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .project-technologies span {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.6rem !important;
    }

    .project-highlights ul {
        padding-left: 1.25rem;
    }

    .project-link a {
        display: inline-flex;
        font-size: 0.9rem;
    }

    .legacy-projects h3 {
        font-size: 1.25rem !important;
        margin-top: 2rem !important;
    }


    /* ---- Blog Section ---- */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .blog-card {
        padding: 1.25rem !important;
    }

    .blog-icon i {
        font-size: 2rem !important;
    }

    .blog-content h3 {
        font-size: 1.15rem !important;
    }

    .blog-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .blog-cta {
        margin-top: 1.5rem;
    }

    .blog-cta .btn {
        width: 100%;
        max-width: 300px;
    }


    /* ---- Certifications ---- */
    .certifications-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    .certification-card {
        padding: 1.5rem !important;
    }

    .cert-icon i {
        font-size: 2.5rem !important;
    }


    /* ---- Involvement Section ---- */
    .involvement-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .involvement-section h3 {
        font-size: 1.3rem !important;
        justify-content: center;
    }

    .involvement-item,
    .achievement-item {
        padding: 1.25rem !important;
    }

    .involvement-item:hover,
    .achievement-item:hover {
        transform: translateX(4px) !important;
    }


    /* ---- Resume Section ---- */
    .resume-card {
        padding: 1.5rem !important;
    }

    .resume-icon i {
        font-size: 3rem !important;
    }

    .resume-card h3 {
        font-size: 1.5rem !important;
    }

    .resume-features {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .resume-actions {
        flex-direction: column !important;
        width: 100% !important;
        align-items: center;
        gap: 0.75rem !important;
    }

    .resume-actions .btn {
        width: 100% !important;
        max-width: 280px;
    }


    /* ---- Contact Section ---- */
    .contact p {
        font-size: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .contact-info {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin-bottom: 2rem !important;
    }

    .contact-item {
        flex-direction: column !important;
        text-align: center !important;
        padding: 1.5rem !important;
        gap: 1rem !important;
        min-height: auto !important;
    }

    .contact-item p {
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 1rem !important;
    }

    .contact-item i {
        font-size: 2rem !important;
        padding: 0.75rem !important;
    }

    /* Social links */
    .social-links {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        justify-content: center !important;
    }

    .social-link {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.25rem !important;
    }

    .social-label {
        display: none !important;
    }

    /* Contact form */
    .contact-form-section {
        padding: 1.25rem !important;
        margin: 0 !important;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px !important;
        /* Prevents iOS zoom */
    }

    .contact-form .btn {
        width: 100%;
    }

    .form-note {
        font-size: 0.85rem !important;
    }


    /* ---- Footer ---- */
    footer {
        padding: 2rem 0 !important;
    }

    footer p {
        font-size: 0.9rem !important;
    }


    /* ---- Global Button Fix ---- */
    .btn {
        width: auto !important;
        max-width: 100%;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
    }

    /* ---- Animation Cleanup ---- */
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Floating elements / decoration */
    .floating-element,
    .photo-glow,
    .photo-decoration {
        display: none !important;
    }
}


/* ==============================================
   SMALL MOBILE (max-width: 480px)
   ============================================== */
@media screen and (max-width: 480px) {

    html {
        font-size: 13px;
    }

    .hero h1 {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    }

    .hero h2 {
        font-size: clamp(0.85rem, 2.8vw, 1rem) !important;
    }

    .photo-frame,
    .photo-placeholder {
        width: 180px !important;
        height: 180px !important;
    }

    .photo-placeholder img {
        width: 180px !important;
        height: 180px !important;
    }

    .about-stats {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    .stat h3 {
        font-size: 1.75rem !important;
    }

    .showcase-item {
        padding: 1rem !important;
    }

    .showcase-tags span,
    .expertise-tags span {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    .timeline-content {
        padding: 1rem !important;
    }

    .timeline-date {
        font-size: 0.8rem !important;
        padding: 0.4rem 1rem !important;
    }

    .skill-category {
        padding: 1rem !important;
    }

    .certification-card {
        padding: 1rem !important;
    }

    .involvement-item,
    .achievement-item {
        padding: 1rem !important;
    }

    .contact-item {
        padding: 1rem !important;
    }

    .social-link {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.1rem !important;
    }

    .btn {
        padding: 0.6rem 1.25rem !important;
        font-size: 0.85rem !important;
    }

    .contact-form-section {
        padding: 1rem !important;
    }

    .resume-card {
        padding: 1.25rem !important;
    }

    .blog-card {
        padding: 1rem !important;
    }

    .insight-card {
        padding: 1rem !important;
    }

    .project-card {
        padding: 1rem !important;
    }
}


/* ==============================================
   VERY SMALL SCREENS (max-width: 360px)
   ============================================== */
@media screen and (max-width: 360px) {

    .hero h1 {
        font-size: 1.3rem !important;
    }

    .hero h2 {
        font-size: 0.85rem !important;
    }

    .photo-frame,
    .photo-placeholder,
    .photo-placeholder img {
        width: 150px !important;
        height: 150px !important;
    }

    .container {
        padding: 0 0.75rem !important;
    }

    .cta-buttons .btn {
        max-width: 100% !important;
        font-size: 0.8rem !important;
    }
}