/* ===================================
   ENHANCED RESPONSIVE DESIGN
   Full Mobile & Tablet Optimization
   Samsung, iPhone, Android, iPad
   =================================== */

/* ===================================
   MOBILE FIRST - SMALL PHONES (320px - 480px)
   iPhone SE, Samsung Galaxy S series, etc.
   =================================== */

@media (max-width: 480px) {

    /* Base Typography */
    :root {
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 22px;
        --font-size-3xl: 26px;
        --font-size-4xl: 32px;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 2.5rem;
        --spacing-3xl: 3rem;
    }

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

    /* Navigation - Ottimizzata per Mobile */
    .nav {
        padding: 0.4rem 0;
    }

    .nav-container {
        flex-wrap: nowrap;
        gap: 0.4rem;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        font-size: 1rem;
        flex-shrink: 0;
    }

    .nav-menu {
        display: flex;
        gap: 0.3rem;
        font-size: 10px;
        flex-wrap: nowrap;
        justify-content: center;
        flex-grow: 1;
        margin: 0;
        padding: 0;
    }

    .nav-link {
        padding: 0.2rem 0.35rem;
        white-space: nowrap;
    }

    /* Language Toggle */
    .language-toggle-nav {
        padding: 0.25rem 0.4rem;
        font-size: 9px;
        min-width: 32px;
        height: 28px;
        flex-shrink: 0;
        margin-left: 0.3rem;
    }

    /* Hero Section - Ridotto padding-top */
    .hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 2rem;
    }

    .hero-grid {
        gap: 1.5rem;
    }

    .blob-container {
        width: 180px;
        height: 180px;
    }

    .profile-photo {
        width: 160px;
        height: 160px;
        border-width: 3px;
    }

    .hero-greeting {
        font-size: 14px;
    }

    .hero-title {
        font-size: 2rem !important;
        margin-bottom: 0.25rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .hero-buttons {
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 14px;
    }

    .social-links {
        gap: 0.75rem;
    }

    .social-link {
        width: 36px;
        height: 36px;
    }

    .social-link svg {
        width: 18px;
        height: 18px;
    }

    /* Section Titles */
    .section-title {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem;
    }

    .section-subtitle,
    .colored-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1.5rem;
    }

    /* About Section */
    .about-text {
        font-size: 1rem !important;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .certifications {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .cert-badge {
        padding: 1rem;
        gap: 0.75rem;
        flex-direction: column;
        text-align: center;
    }

    .cert-icon {
        width: 36px;
        height: 36px;
    }

    .cert-title {
        font-size: 1rem;
    }

    .cert-desc {
        font-size: 12px;
    }

    /* Services Section */
    .services-grid {
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .service-card {
        padding: 1.25rem;
    }

    .service-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 0.75rem;
    }

    .service-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .service-description {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Portfolio Section */
    .subsection-title {
        font-size: 1.25rem !important;
        padding-left: 1rem !important;
        margin-bottom: 1.25rem !important;
    }

    .portfolio-grid {
        gap: 1.25rem;
        margin-top: 1.25rem;
        grid-template-columns: 1fr !important;
    }

    .n8n-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem;
    }

    .n8n-card,
    .project-card {
        border-radius: 12px;
    }

    .n8n-content,
    .project-content {
        padding: 1rem;
    }

    .n8n-title,
    .project-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .n8n-description,
    .project-description {
        font-size: 13px;
        line-height: 1.5;
    }

    .n8n-features {
        gap: 0.5rem;
        margin: 0.75rem 0;
    }

    .feature-pill {
        font-size: 10px;
        padding: 3px 8px;
    }

    .n8n-tech-stack {
        gap: 6px;
        padding-top: 0.75rem;
    }

    .tech-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .n8n-status {
        padding: 3px 8px;
        font-size: 10px;
    }

    /* IoT Section */
    .iot-grid {
        gap: 1.5rem !important;
    }

    .iot-card .n8n-content {
        padding: 1.25rem !important;
    }

    .iot-card .n8n-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .iot-card .n8n-description {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem !important;
    }

    .iot-features {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 1.25rem !important;
    }

    .iot-feature-item {
        font-size: 13px !important;
    }

    /* Contact Section */
    .contact-actions {
        margin-top: 1.5rem;
    }

    .contact-email-btn {
        font-size: 1rem;
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .contact-email-btn svg {
        width: 20px;
        height: 20px;
        margin-right: 0 !important;
    }

    .email-text {
        font-size: 14px;
    }

    /* Footer */
    .footer {
        padding: 1.5rem 0;
        margin-top: 2rem;
    }

    .footer-social {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .footer-copyright {
        font-size: 12px;
    }

    /* Scroll to Top */
    .scroll-to-top {
        width: 40px;
        height: 40px;
        right: 1rem;
        bottom: 1rem;
    }

    /* Hide cursor effects on mobile */
    .cursor-glow,
    .cursor-halo {
        display: none !important;
    }

    /* Preloader */
    .preloader-logo {
        font-size: 4rem !important;
    }
}

/* ===================================
   MEDIUM PHONES (481px - 640px)
   iPhone 12/13/14, Samsung Galaxy S21+
   =================================== */

/* iPhone 15 Pro Max & Samsung S24 Ultra Specific (430px - 480px) */
@media (min-width: 430px) and (max-width: 480px) {
    :root {
        --font-size-4xl: 36px;
        --font-size-3xl: 28px;
        --font-size-2xl: 24px;
    }

    .container {
        padding: 0 1.25rem;
    }

    .nav-menu {
        gap: 0.6rem;
        font-size: 13px;
    }

    .hero-title {
        font-size: 2.25rem !important;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-description {
        font-size: 15px;
    }

    .blob-container {
        width: 200px;
        height: 200px;
    }

    .profile-photo {
        width: 180px;
        height: 180px;
    }

    .section-title {
        font-size: 1.9rem !important;
    }

    .about-text {
        font-size: 1.1rem !important;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid,
    .n8n-grid {
        grid-template-columns: 1fr !important;
    }

    .subsection-title {
        font-size: 1.4rem !important;
    }

    .preloader-logo {
        font-size: 5rem !important;
    }

    /* Better button sizing for larger phones */
    .btn {
        padding: 0.9rem 1.5rem;
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .contact-email-btn {
        font-size: 1.1rem;
        padding: 1rem 2rem;
    }
}

@media (min-width: 481px) and (max-width: 640px) {
    :root {
        --font-size-4xl: 38px;
        --font-size-3xl: 30px;
        --font-size-2xl: 24px;
    }

    .container {
        padding: 0 1.25rem;
    }

    .nav-menu {
        gap: 0.75rem;
        font-size: 13px;
    }

    .hero-title {
        font-size: 2.25rem !important;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .blob-container {
        width: 220px;
        height: 220px;
    }

    .profile-photo {
        width: 200px;
        height: 200px;
    }

    .section-title {
        font-size: 2rem !important;
    }

    .about-text {
        font-size: 1.1rem !important;
    }

    .service-card {
        padding: 1.5rem;
    }

    .portfolio-grid,
    .n8n-grid {
        grid-template-columns: 1fr !important;
    }

    .preloader-logo {
        font-size: 5rem !important;
    }
}

/* ===================================
   LARGE PHONES / PHABLETS (641px - 767px)
   iPhone 14 Pro Max, Samsung Galaxy Ultra
   =================================== */

@media (min-width: 641px) and (max-width: 767px) {
    :root {
        --font-size-4xl: 42px;
        --font-size-3xl: 32px;
    }

    .container {
        padding: 0 1.5rem;
    }

    .nav-menu {
        gap: 1rem;
        font-size: 14px;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .blob-container {
        width: 260px;
        height: 260px;
    }

    .profile-photo {
        width: 240px;
        height: 240px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    .n8n-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================
   TABLETS - PORTRAIT (768px - 1023px)
   iPad, iPad Mini, Android Tablets
   =================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --font-size-4xl: 48px;
        --font-size-3xl: 36px;
        --font-size-2xl: 28px;
    }

    .container {
        padding: 0 2rem;
    }

    .nav-menu {
        gap: 1.25rem;
        font-size: 15px;
    }

    .hero {
        padding-top: 140px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-image-wrapper {
        order: -1;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: row;
    }

    .btn {
        width: auto;
    }

    .social-links {
        justify-content: center;
    }

    .blob-container {
        width: 320px;
        height: 320px;
    }

    .profile-photo {
        width: 300px;
        height: 300px;
    }

    .hero-title {
        font-size: 3rem !important;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .hero-description {
        font-size: 1.1rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-title {
        font-size: 2.5rem !important;
    }

    .about-text {
        font-size: 1.25rem !important;
    }

    .certifications {
        flex-direction: row;
        justify-content: center;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .n8n-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .subsection-title {
        font-size: 1.75rem !important;
    }

    .iot-features {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .contact-email-btn {
        font-size: 1.15rem;
        padding: 1.1rem 2.5rem;
    }
}

/* ===================================
   TABLETS - LANDSCAPE (1024px - 1199px)
   iPad Pro, Galaxy Tab S series
   =================================== */

@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .hero-image-wrapper {
        order: 0;
    }

    .blob-container {
        width: 350px;
        height: 350px;
    }

    .profile-photo {
        width: 320px;
        height: 320px;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .n8n-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================== */

@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    .btn {
        min-height: 48px;
        min-width: 48px;
    }

    .nav-link {
        padding: 0.5rem 0.75rem;
    }

    .social-link {
        min-width: 44px;
        min-height: 44px;
    }

    /* Disable hover-dependent overlays on touch */
    .project-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.6);
    }

    .project-card:hover .project-image {
        transform: none;
    }

    .project-card:hover {
        transform: none;
    }

    /* Remove cursor effects */
    .cursor-glow,
    .cursor-halo {
        display: none !important;
    }

    /* Disable complex hover animations */
    .service-card:hover,
    .n8n-card:hover {
        transform: none;
    }
}

/* ===================================
   LANDSCAPE PHONE OPTIMIZATION
   =================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 120px 0 2rem;
    }

    .hero-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 1.5rem;
    }

    .hero-image-wrapper {
        order: 0;
    }

    .blob-container {
        width: 150px;
        height: 150px;
    }

    .profile-photo {
        width: 130px;
        height: 130px;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .hero-buttons {
        flex-direction: row;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 13px;
        width: auto;
    }
}

/* ===================================
   HIGH DPI / RETINA DISPLAYS
   =================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .profile-photo {
        image-rendering: -webkit-optimize-contrast;
    }

    .project-image,
    .n8n-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ===================================
   DARK MODE IMPROVEMENTS (for OLED screens)
   =================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-primary: #000000;
        --color-bg-secondary: #050505;
    }
}

/* ===================================
   REDUCE MOTION (Accessibility)
   =================================== */

@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;
    }

    .blob {
        animation: none !important;
    }

    .hero-title,
    .section-title,
    .colored-subtitle {
        animation: none !important;
    }
}

/* ===================================
   SAFE AREA INSETS (iPhone X+ notch)
   =================================== */

@supports (padding: max(0px)) {
    .nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    .scroll-to-top {
        bottom: max(1rem, env(safe-area-inset-bottom));
        right: max(1rem, env(safe-area-inset-right));
    }
}

/* ===================================
   FOLDABLE DEVICES (Samsung Galaxy Z Fold)
   =================================== */

/* Galaxy Z Fold - Folded (outer screen ~375px) */
@media (min-width: 340px) and (max-width: 380px) and (min-height: 700px) {
    .nav-menu {
        font-size: 11px;
        gap: 0.4rem;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .profile-photo {
        width: 140px;
        height: 140px;
    }

    .blob-container {
        width: 160px;
        height: 160px;
    }
}

/* Galaxy Z Fold - Unfolded (inner screen ~673px x 841px) */
@media (min-width: 650px) and (max-width: 700px) and (min-height: 800px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image-wrapper {
        order: -1;
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: row;
    }

    .btn {
        width: auto;
    }

    .social-links {
        justify-content: center;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid,
    .n8n-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .blob-container {
        width: 280px;
        height: 280px;
    }

    .profile-photo {
        width: 260px;
        height: 260px;
    }
}

/* ===================================
   DYNAMIC ISLAND / NOTCH SUPPORT
   iPhone 14 Pro, 15 Pro, 15 Pro Max
   =================================== */

@supports (padding-top: env(safe-area-inset-top)) {

    /* Extra padding for Dynamic Island */
    .nav {
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    }

    .hero {
        padding-top: calc(100px + env(safe-area-inset-top, 0px));
    }

    /* Preloader adjustment for Dynamic Island */
    #preloader {
        padding-top: env(safe-area-inset-top, 0px);
    }
}

/* ===================================
   ULTRA-WIDE PHONES (21:9 aspect ratio)
   Sony Xperia, some Samsung models
   =================================== */

@media (min-aspect-ratio: 20/9) and (max-width: 480px) {
    .hero {
        min-height: auto;
        padding-bottom: 2rem;
    }

    .hero-grid {
        gap: 1rem;
    }

    .blob-container {
        width: 150px;
        height: 150px;
    }

    .profile-photo {
        width: 130px;
        height: 130px;
    }
}

/* ===================================
   PRINT STYLES (for PDF export)
   =================================== */

@media print {

    .nav,
    .cursor-glow,
    .cursor-halo,
    .scroll-to-top,
    #particle-canvas,
    #shooting-stars-canvas {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .hero-title,
    .section-title {
        -webkit-text-fill-color: black !important;
        color: black !important;
    }
}