/**
 * Responsive Styles
 * Media queries for all breakpoints
 */

/* =========================================================================
   LARGE SCREENS (max-width: 1400px)
   ========================================================================= */

@media (max-width: 1400px) {
    :root {
        --sidebar-width: 260px;
    }
}

/* =========================================================================
   DESKTOP (max-width: 1200px)
   ========================================================================= */

@media (max-width: 1200px) {
    :root {
        --sidebar-width: 240px;
    }

    .section-title .title-bg {
        font-size: 4rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   TABLET (max-width: 991px)
   ========================================================================= */

@media (max-width: 991px) {



    /* Layout Changes */
    .sidebar {
        transform: translateX(-100%) !important;
        width: 280px;
        z-index: 1000;
        overflow: hidden;
    }

    html[dir="rtl"] .sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }

    html[dir="rtl"] .sidebar.active {
        transform: translateX(0) !important;
    }

    .sidebar.active {
        transform: translateX(0) !important;
    }

    .mobile-header {
        display: flex;
    }

    .main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: var(--header-height);
        width: 100% !important;
        max-width: 100vw !important;
    }

    html[dir="rtl"] .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .content-wrapper {
        padding: var(--spacing-6);
    }

    /* Section Adjustments */
    .section {
        min-height: auto;
        padding: var(--spacing-10) 0;
    }

    .section-home {
        min-height: 80vh;
        min-height: calc(100svh - var(--header-height));
    }

    .section-content {
        padding: var(--spacing-8);
    }

    .section-title .title-bg {
        font-size: 3rem;
    }

    /* Portfolio Grid */
    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .portfolio-grid-inner {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    /* Blog Grid */
    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    /* Long text overflow */
    .info-value,
    .contact-value,
    .info-value a,
    .contact-value a {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Skills Grid */
    .skills-grid {
        grid-template-columns: 1fr;
    }

    /* Info Grid */
    .info-grid {
        grid-template-columns: 1fr;
    }

    /* Resume */
    .certifications-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    /* Theme Switcher */
    .theme-switcher {
        right: var(--spacing-4);
        bottom: var(--spacing-4);
        width: 45px;
        height: 45px;
    }

    .theme-panel {
        right: var(--spacing-4);
        bottom: calc(var(--spacing-4) + 55px);
    }

    /* Mobile Menu Overlay */
    .sidebar::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
        z-index: -1;
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open .sidebar::before {
        opacity: 1;
        visibility: visible;
    }
}

/* =========================================================================
   MOBILE (max-width: 768px)
   ========================================================================= */

@media (max-width: 768px) {

    /* Typography */
    .hero-name {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

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

    /* Hero Stats */
    .hero-stats {
        gap: var(--spacing-6);
    }

    .stat-number {
        font-size: var(--font-size-3xl);
    }

    /* Section Content */
    .section-content {
        padding: var(--spacing-4);
        border-radius: var(--radius-xl);
    }

    /* NUCLEAR VIEWPORT LOCKDOWN */
    html, body {
        overflow-x: hidden !important;
        position: relative;
        max-width: 100% !important;
        width: 100% !important;
    }

    .wrapper, 
    .main-content, 
    .content-wrapper,
    .sections-container,
    .section {
        max-width: 100vw !important;
        width: 100vw !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Hide background decorative text that causes zoom-out */
    .section-title .title-bg,
    .creative-big-text,
    .modern-background-text,
    .home-bg-animation {
        display: none !important;
    }

    .section-header {
        padding: 0 var(--spacing-4) !important;
        margin-bottom: var(--spacing-8) !important;
    }

    .section-title {
        font-size: var(--font-size-2xl) !important;
    }

    /* =====================================================
       THEME-SPECIFIC FULL-WIDTH OVERRIDES
       Force all section containers to fill mobile screen
       ===================================================== */

    /* --- Section Content & Wrappers --- */
    .section {
        padding: var(--spacing-6) 0 !important;
    }

    .section-home {
        padding: 0 !important;
    }

    .section-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--spacing-3) !important;
        box-sizing: border-box !important;
    }

    .section-home .section-content {
        padding: var(--spacing-4) var(--spacing-2) !important;
    }

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

    /* Default Home theme max-width cap */
    .home-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 var(--spacing-3) !important;
        box-sizing: border-box !important;
    }

    /* --- HOME: Creative Theme --- */
    .home-content-creative {
        padding: var(--spacing-6) var(--spacing-2) !important;
        min-height: auto !important;
    }

    .home-content-creative .creative-card {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: var(--spacing-6) var(--spacing-4) !important;
        border-radius: var(--radius-xl) !important;
        box-sizing: border-box !important;
    }

    .creative-name {
        font-size: clamp(1.8rem, 8vw, 3rem) !important;
    }

    .creative-stats {
        gap: 1rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* --- HOME: Modern Theme --- */
    .home-content-modern {
        padding: var(--spacing-6) var(--spacing-4) !important;
        min-height: auto !important;
    }

    .modern-container {
        max-width: 100% !important;
        width: 100% !important;
    }

    .modern-name {
        font-size: clamp(2rem, 9vw, 3.5rem) !important;
    }

    .modern-bio {
        max-width: 100% !important;
        width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
    }

    [dir="rtl"] .modern-bio {
        border-right: none !important;
        padding-right: 0 !important;
    }

    .modern-actions {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .btn-modern {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }

    /* --- HOME: Split Theme --- */
    .home-split-container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .split-name {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }

    .split-role {
        font-size: 1.2rem !important;
    }

    .split-bio {
        max-width: 100% !important;
        width: 100% !important;
        font-size: 1rem !important;
    }

    .split-image img {
        width: 200px !important;
        height: 200px !important;
    }

    .split-image::before {
        display: none !important;
    }

    /* --- ABOUT: Creative Theme --- */
    .creative-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        gap: var(--spacing-6) !important;
    }

    .creative-wrapper .creative-card {
        padding: var(--spacing-6) var(--spacing-4) !important;
        box-shadow: none !important;
        border-left: 3px solid var(--color-primary) !important;
        box-sizing: border-box !important;
    }

    [dir="rtl"] .creative-wrapper .creative-card {
        border-left: none !important;
        border-right: 3px solid var(--color-primary) !important;
    }

    .creative-visual-box {
        transform: none !important;
        padding: var(--spacing-6) var(--spacing-4) !important;
    }

    /* --- ABOUT: Modern Theme --- */
    .modern-grid {
        max-width: 100% !important;
        width: 100% !important;
        gap: var(--spacing-4) !important;
    }

    .modern-card {
        padding: var(--spacing-6) var(--spacing-4) !important;
        box-sizing: border-box !important;
    }

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

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

    .service-mini-card {
        padding: var(--spacing-6) var(--spacing-4) !important;
    }

    /* --- RTL: Universal shadow corrections --- */
    [dir="rtl"] .creative-card {
        box-shadow: none !important;
    }

    /* Form */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-filters {
        gap: var(--spacing-2);
    }

    .filter-btn {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }

    /* Blog */
    .blog-grid,
    .portfolio-grid-inner {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-6);
    }

    /* Timeline */
    .timeline {
        padding-left: var(--spacing-6);
    }

    .timeline-marker {
        left: calc(-1 * var(--spacing-6) + 2px);
        width: 12px;
        height: 12px;
    }

    .timeline-content {
        padding: var(--spacing-4);
    }

    .timeline-header {
        flex-direction: column;
        gap: var(--spacing-2);
    }

    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Testimonials */
    .testimonial-content {
        padding: var(--spacing-6);
    }

    .testimonial-text {
        font-size: var(--font-size-base);
    }

    /* About */
    .about-heading {
        font-size: var(--font-size-xl);
    }

    /* Contact */
    .contact-heading {
        font-size: var(--font-size-xl);
    }

    .contact-form-wrapper {
        padding: var(--spacing-6);
    }

    /* Scroll Indicator */
    .scroll-indicator {
        display: none;
    }
}

/* =========================================================================
   SMALL MOBILE (max-width: 480px)
   ========================================================================= */

@media (max-width: 480px) {
    .content-wrapper {
        padding: var(--spacing-3);
    }

    .section-content {
        padding: var(--spacing-4);
        border-radius: var(--radius-lg);
    }

    /* Force single column for all grids */
    .portfolio-grid,
    .portfolio-grid-inner,
    .blog-grid,
    .services-grid,
    .certifications-grid {
        grid-template-columns: 1fr;
    }

    /* Portfolio list items stack vertically */
    .portfolio-list-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .list-image {
        width: 100%;
        height: 160px;
    }

    .section-header {
        margin-bottom: var(--spacing-8);
    }

    .section-title {
        font-size: var(--font-size-2xl);
    }

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

    /* Hero */
    .hero-bio {
        font-size: var(--font-size-base);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        justify-content: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    /* Cards */
    .info-item,
    .contact-item {
        flex-direction: column;
        text-align: center;
    }

    .info-content,
    .contact-item-content {
        align-items: center;
    }

    /* Portfolio */
    .portfolio-overlay {
        opacity: 1;
    }

    .overlay-content {
        transform: translateY(0);
    }

    /* Certifications */
    .certifications-grid {
        grid-template-columns: 1fr;
    }

    .certification-card {
        flex-direction: column;
        text-align: center;
    }

    /* Social Links */
    .social-links-large {
        justify-content: center;
    }

    /* Theme Panel */
    .theme-panel {
        width: calc(100vw - var(--spacing-8));
        right: var(--spacing-4);
    }
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */

@media print {

    .sidebar,
    .mobile-header,
    .theme-switcher,
    .theme-panel,
    .scroll-indicator {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .section {
        display: block !important;
        opacity: 1 !important;
        page-break-inside: avoid;
    }

    .section-content {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: white;
        color: #333;
    }
}

/* =========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .preloader {
        display: none;
    }
}

/* =========================================================================
   HIGH CONTRAST MODE
   ========================================================================= */

@media (prefers-contrast: high) {
    :root {
        --color-primary: #4f46e5;
        --color-secondary: #7c3aed;
    }

    .section-content {
        border: 2px solid var(--color-gray-700);
    }

    .form-control {
        border-width: 2px;
    }
}