/* ============================================
   MOBILE OPTIMIZATIONS - Cyber Theme
   Enhanced responsive design for mobile devices
   ============================================ */

/* ============================================
   SMALL MOBILE (320px - 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Typography Adjustments */
    .home-banner h1 {
        font-size: 32px !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .home-banner h6 {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .home-banner p {
        font-size: 16px;
    }

    .st-title h2 {
        font-size: 28px !important;
    }

    .page-title h2 {
        font-size: 30px !important;
        padding: 20px 15px;
    }

    .section-titel h6 {
        font-size: 11px;
        letter-spacing: 2px;
    }

    /* Buttons */
    .btn-theme {
        padding: 12px 28px !important;
        font-size: 13px !important;
        width: 100%;
        display: block;
        margin: 10px 0;
    }

    /* Header */
    .header .logo {
        font-size: 20px;
    }

    /* Feature Boxes */
    .feature-box {
        padding: 20px !important;
        margin-bottom: 15px;
    }

    .feature-box .icon {
        font-size: 32px;
    }

    .feature-box h5 {
        font-size: 18px;
    }

    .feature-box p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* About Section */
    .about-text h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .about-text p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Skills */
    .progress-lt h6 {
        font-size: 12px;
    }

    .progress-lt span.theme-bg {
        padding: 3px 10px;
        font-size: 11px;
    }

    .progress {
        height: 6px;
    }

    /* Resume Cards */
    .resume-row ul li {
        padding: 20px !important;
        margin-bottom: 15px;
    }

    .r-name {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .r-name .theme-bg {
        margin-bottom: 10px;
        margin-right: 0 !important;
    }

    .r-name span {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .r-name label {
        font-size: 11px;
        padding: 4px 12px;
        align-self: flex-start;
    }

    .r-info p {
        font-size: 13px;
        line-height: 1.6;
    }

    .resume-row h2 {
        font-size: 26px !important;
    }

    /* Portfolio */
    .portfolio-info h5 {
        font-size: 16px;
    }

    .portfolio-info span {
        font-size: 13px;
    }

    .filter li {
        padding: 10px 18px;
        font-size: 13px;
        margin: 3px;
    }

    /* Contact Form */
    .contact-form {
        padding: 25px !important;
    }

    .contact-form h4 {
        font-size: 22px;
    }

    .form-control {
        padding: 12px 15px;
        font-size: 14px;
    }

    .contact-info {
        padding: 20px;
        margin-bottom: 15px;
    }

    .contact-info i {
        font-size: 28px;
    }

    /* Social Icons */
    .home-banner .social-icons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .home-banner .social-icons li {
        margin: 5px !important;
    }

    .home-banner .social-icons li a {
        width: 45px;
        height: 45px;
        line-height: 45px;
    }

    /* Person Information */
    .person_information {
        padding: 15px;
    }

    .person_information ul {
        display: block !important;
        width: 100%;
    }

    .person_information .personal_value {
        padding-left: 0;
        margin-top: 10px;
    }

    /* Navigation */
    .pages-nav__item {
        font-size: 14px;
    }

    .pages-nav__item a {
        padding: 8px 5px;
    }

    /* Reduce Shadows and Glows on Mobile */
    .btn-theme,
    .feature-box,
    .portfolio-col,
    .resume-row ul li,
    .contact-info {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .btn-theme:hover,
    .feature-box:hover,
    .portfolio-col:hover,
    .resume-row ul li:hover,
    .contact-info:hover {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* Reduce Transforms on Mobile */
    .feature-box:hover,
    .portfolio-col:hover,
    .resume-row ul li:hover {
        transform: translateY(-3px) !important;
    }

    /* Image Sizing */
    .about-section img {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .profile-img {
        max-width: 80%;
        margin: 0 auto;
    }
}

/* ============================================
   MEDIUM MOBILE/TABLET (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    /* Typography */
    .home-banner h1 {
        font-size: 42px !important;
    }

    .st-title h2 {
        font-size: 34px !important;
    }

    .page-title h2 {
        font-size: 38px !important;
    }

    /* Buttons */
    .btn-theme {
        padding: 13px 32px !important;
        font-size: 14px !important;
    }

    /* Feature Boxes */
    .feature-box {
        padding: 25px !important;
    }

    .feature-box .icon {
        font-size: 36px;
    }

    /* Resume */
    .resume-row ul li {
        padding: 25px !important;
    }

    .r-name span {
        font-size: 17px;
    }

    .r-name label {
        font-size: 12px;
    }

    /* Contact */
    .contact-form {
        padding: 30px !important;
    }
}

/* ============================================
   TABLET LANDSCAPE (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .home-banner h1 {
        font-size: 50px;
    }

    .st-title h2 {
        font-size: 38px;
    }

    .page-title h2 {
        font-size: 42px;
    }

    .feature-box {
        padding: 28px;
    }

    .resume-row ul li {
        padding: 28px;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .feature-box:hover,
    .portfolio-col:hover,
    .resume-row ul li:hover {
        transform: none !important;
    }

    /* Increase tap target sizes */
    .btn-theme,
    .social-icons li a,
    .filter li,
    .action-btn a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Disable complex animations on touch */
    .feature-box:hover {
        animation: none !important;
    }

    /* Make links easier to tap */
    .pages-nav__item a {
        padding: 12px 10px;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS FOR MOBILE
   ============================================ */
@media (max-width: 768px) {
    /* Reduce particle count */
    #cyber-particles .cyber-particle:nth-child(n+16) {
        display: none !important;
    }

    /* Disable cursor glow on mobile */
    #cursor-glow {
        display: none !important;
    }

    /* Simplify gradients */
    body.dark-body {
        background-image:
            radial-gradient(circle at 20% 50%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.03) 0%, transparent 50%);
    }

    /* Reduce animation duration for better performance */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.3s !important;
    }

    /* Disable parallax on mobile */
    .page-title {
        background-attachment: scroll !important;
    }

    /* Simplify scan lines effect */
    #home-photo-color:before {
        display: none;
    }

    /* Optimize scroll progress bar */
    #scroll-progress {
        height: 2px;
    }
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .home-banner .home-text {
        padding: 20px 0;
    }

    .page-scroll {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .v-center-box {
        min-height: auto !important;
        padding: 30px 0;
    }
}

/* ============================================
   DARK MODE AWARE (if user has dark mode pref)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Already dark, but ensure consistency */
    :root {
        --text-primary: #f8fafc;
        --bg-dark: #0a0e27;
    }
}

/* ============================================
   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;
    }

    #cyber-particles {
        display: none !important;
    }

    .cyber-particle {
        animation: none !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================ */
@media (prefers-contrast: high) {
    .btn-theme,
    .feature-box,
    .portfolio-col,
    .resume-row ul li {
        border: 2px solid var(--cyber-blue) !important;
    }

    .theme-color {
        font-weight: 700;
    }
}

/* ============================================
   SMALL SCREENS - CONTENT SPACING
   ============================================ */
@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-content {
        padding: 30px 15px !important;
    }

    .section-titel {
        margin-bottom: 30px;
    }

    .resume-row {
        margin-bottom: 30px;
    }

    .skill-row {
        margin-top: 20px !important;
    }

    /* Stack columns on mobile */
    .row > [class*='col-'] {
        margin-bottom: 20px;
    }

    /* Portfolio grid */
    .portfolio-cols {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Better spacing for lists */
    .resume-row ul li {
        margin-bottom: 20px !important;
    }

    .resume-row ul li:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================================
   VERY SMALL SCREENS (< 360px)
   ============================================ */
@media (max-width: 360px) {
    .home-banner h1 {
        font-size: 28px !important;
    }

    .st-title h2 {
        font-size: 24px !important;
    }

    .page-title h2 {
        font-size: 26px !important;
    }

    .btn-theme {
        padding: 10px 20px !important;
        font-size: 12px !important;
    }

    .feature-box {
        padding: 15px !important;
    }

    .resume-row ul li {
        padding: 15px !important;
    }

    .contact-form {
        padding: 20px !important;
    }

    .header .logo {
        font-size: 18px;
    }
}

/* ============================================
   LOADING PERFORMANCE
   ============================================ */
@media (max-width: 768px) {
    /* Lazy load heavy effects */
    .page {
        will-change: auto;
    }

    /* Optimize repaints */
    .portfolio-col,
    .feature-box,
    .resume-row ul li {
        will-change: transform;
    }

    /* Reduce reflows */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   PRINT STYLES (Bonus)
   ============================================ */
@media print {
    #cyber-particles,
    #cursor-glow,
    #scroll-progress,
    .social-icons,
    .btn-theme,
    .pages-nav,
    .header,
    .language-button {
        display: none !important;
    }

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

    .page {
        page-break-inside: avoid;
    }

    .resume-row ul li {
        page-break-inside: avoid;
    }
}