/* Responsive styles for Archibud */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-sm);
    }

    .nav-menu {
       display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--white);
        box-shadow: var(--shadow-lg);
        flex-direction: column;
        padding: 0;
        gap: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        border-top: 1px solid var(--light-gray);
    }

    .nav-menu li {
        width: 100%;
        display: block;
        border-bottom: 1px solid rgba(0,0,0,0.05); 
    }

    [data-theme="dark"] .nav-menu li {
        border-bottom-color: rgba(255,255,255,0.05);
    }


    .nav-menu li:last-child {
        border-bottom: none;
    }

   .nav-menu.active {
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
    }
    .nav-toggle {
        display: block;
    }
    
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .nav-link {
        display: block;
        padding: 16px 24px; 
        border-radius: 0;
        text-align: left; 
        font-size: 1.1rem; 
        width: 100%;
    }
    .nav-item-theme {
        display: flex;
        justify-content: center; /* Wyśrodkowanie przycisku motywu */
        padding: 16px;
        background: var(--light-gray); /* Wyróżnienie sekcji z przyciskiem */
    }


    .hero .container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        text-align: center;
    }

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

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

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

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

    .process-step {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    /* Gallery Page Responsive - 768px */
    .gallery-hero .hero-title {
        font-size: 2rem;
    }

    .gallery-hero .gallery-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .gallery-controls-section {
        top: 60px;
        padding: var(--space-md) 0;
    }

    .gallery-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .search-wrapper {
        max-width: 100%;
    }

    .sort-wrapper {
        min-width: 100%;
    }

    .view-toggle {
        width: 100%;
        justify-content: center;
    }

    .view-toggle-btn {
        flex: 1;
        justify-content: center;
    }

    .results-counter {
        margin-left: 0;
        text-align: center;
        order: -1;
    }

    .gallery-map {
        height: 500px;
    }

    .map-legend {
        bottom: var(--space-sm);
        right: var(--space-sm);
        padding: var(--space-sm);
    }

    .legend-title {
        font-size: 0.9rem;
    }

    .legend-item {
        font-size: 0.8rem;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .gallery-item-image {
        height: 200px;
    }

    /* Gallery Modal Responsive - 768px */
    .gallery-modal .modal-content {
        flex-direction: column;
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .modal-slider {
        flex: none;
        height: 50vh;
    }

    .slider-image {
        max-height: 50vh;
    }

    .slider-nav {
        width: 40px;
        height: 40px;
    }

    .slider-prev {
        left: var(--space-xs);
    }

    .slider-next {
        right: var(--space-xs);
    }

    .slider-counter {
        bottom: var(--space-xs);
        font-size: 0.8rem;
        padding: 4px var(--space-sm);
    }

    .modal-info {
        flex: none;
        max-height: none;
        padding: var(--space-md);
    }

    .modal-project-title {
        font-size: 1.5rem;
    }

    .modal-project-description {
        font-size: 1rem;
    }

    .modal-project-meta .meta-item {
        padding: var(--space-sm);
    }

    .modal-thumbnails {
        padding: var(--space-sm);
        gap: var(--space-xs);
    }

    .modal-thumbnail {
        width: 60px;
        height: 45px;
    }

    .gallery-modal .modal-close {
        top: var(--space-sm);
        right: var(--space-sm);
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

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

    .project-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-content {
        max-width: 95%;
        max-height: 95%;
    }

    .modal-body {
        padding: var(--space-lg);
    }

    /* Gallery Small Mobile - 480px */
    .gallery-hero .hero-title {
        font-size: 1.75rem;
    }

    .gallery-hero .hero-subtitle {
        font-size: 0.95rem;
    }

    .gallery-controls-section {
        padding: var(--space-sm) 0;
    }

    .search-input {
        font-size: 16px;
        padding: var(--space-xs) var(--space-xs) var(--space-xs) calc(var(--space-xs) * 4);
    }

    .sort-select {
        font-size: 16px;
        padding: var(--space-xs) var(--space-md) var(--space-xs) calc(var(--space-xs) * 4);
    }

    .view-toggle-btn span {
        display: none;
    }

    .view-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    .results-counter {
        font-size: 0.85rem;
    }

    .gallery-map {
        height: 400px;
    }

    .gallery-item-image {
        height: 180px;
    }

    .gallery-item-info {
        padding: var(--space-sm);
    }

    .gallery-item-title {
        font-size: 1.1rem;
    }

    .gallery-item-location {
        font-size: 0.85rem;
    }

    .gallery-meta-tag {
        font-size: 0.75rem;
        padding: 2px var(--space-xs);
    }

    .modal-slider {
        height: 40vh;
    }

    .slider-image {
        max-height: 40vh;
    }

    .modal-info {
        padding: var(--space-sm);
    }

    .modal-project-title {
        font-size: 1.25rem;
    }

    .modal-project-description {
        font-size: 0.95rem;
    }

    .modal-project-meta {
        gap: var(--space-sm);
    }

    .modal-project-meta .meta-item {
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-xs);
    }

    .modal-actions .btn {
        width: 100%;
        padding: var(--space-sm) var(--space-md);
        font-size: 0.95rem;
    }

    .modal-thumbnails {
        padding: var(--space-xs);
    }

    .modal-thumbnail {
        width: 50px;
        height: 38px;
    }

    .no-results svg {
        width: 48px;
        height: 48px;
    }

    .no-results h3 {
        font-size: 1.25rem;
    }

    .no-results p {
        font-size: 0.9rem;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .btn:hover,
    .service-card:hover,
    .project-card:hover {
        transform: none !important;
    }

    .gallery-item:hover,
    .faq-item:hover,
    .contact-card:hover {
        transform: none !important;
    }

    .modal-slider,
    .slider-image,
    .modal-overlay {
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}


/* ============================================
   CONTACT PAGE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
    /* Contact Hero */
    .contact-hero .hero-title {
        font-size: 2rem;
    }
    
    .contact-hero .hero-subtitle {
        font-size: 1rem;
    }
    
    /* Contact Wrapper */
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    /* Main Contact Card */
    .contact-card-main {
        padding: var(--space-lg);
    }
    
    .contact-card-header {
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
    }
    
    .contact-card-title {
        font-size: 1.5rem;
    }
    
    .contact-details {
        gap: var(--space-md);
    }
    
    /* Quick Contact */
    .quick-contact-info {
        padding: var(--space-lg);
    }
    
    .quick-contact-title {
        font-size: 1.25rem;
    }
    
    /* Contact Form */
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .contact-form {
        padding: var(--space-lg);
    }
    
    .form-group {
        margin-bottom: var(--space-md);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .form-actions .btn {
        width: 100%;
        min-width: auto;
    }
    
    /* Map */
    .map-container {
        height: 400px;
    }
    
    /* FAQ Grid */
    .faq-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

@media (max-width: 480px) {
    /* Contact Hero */
    .contact-hero {
        padding: var(--space-lg) 0;
    }
    
    .contact-hero .hero-title {
        font-size: 1.75rem;
    }
    
    .contact-hero .hero-subtitle {
        font-size: 0.95rem;
    }
    
    /* Contact Cards */
    .contact-card-main {
        padding: var(--space-md);
    }
    
    .contact-card-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .contact-detail-item {
        gap: var(--space-sm);
    }
    
    .contact-detail-item svg {
        width: 20px;
        height: 20px;
    }
    
    /* Quick Contact */
    .quick-contact-info {
        padding: var(--space-md);
    }
    
    .quick-contact-buttons {
        gap: var(--space-xs);
    }
    
    /* Contact Form */
    .contact-form {
        padding: var(--space-md);
    }
    
    .form-group {
        margin-bottom: var(--space-sm);
    }
    
    .form-checkbox {
        font-size: 0.85rem;
    }
    
    .checkbox-label {
        font-size: 0.85rem;
    }
    
    /* Map */
    .map-container {
        height: 300px;
    }
    
    /* FAQ */
    .faq-item {
        padding: var(--space-md);
    }
    
    .faq-question {
        font-size: 1rem;
    }
    
    .faq-question svg {
        width: 18px;
        height: 18px;
    }
    
    .faq-answer {
        font-size: 0.9rem;
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-link {
        padding: 6px 10px;
        font-size: 0.95rem;
    }
    .nav-menu {
        gap: 4px;
    }
    .contact-wrapper {
        grid-template-columns: 1fr;
        max-width: 700px;
    }
    
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gallery Tablet */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-map {
        height: 600px;
    }

    .gallery-modal .modal-content {
        padding: var(--space-lg);
    }

    .modal-info {
        padding: var(--space-lg);
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    .contact-form {
        max-width: 1000px;
        padding: calc(var(--space-xl) * 1.5);
    }
    
    .map-container {
        height: 600px;
    }
    
    .contact-wrapper {
        max-width: 1200px;
    }

    /* Gallery Large Desktop */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-map {
        height: 800px;
    }

    .modal-slider {
        flex: 2.5;
    }

    .modal-info {
        flex: 1;
    }

    .slider-image {
        max-height: 85vh;
    }
}

/* Print styles for contact page */
@media print {
    .contact-form-section,
    .map-section,
    .cta-section,
    .quick-contact-info {
        display: none;
    }
    
    .contact-card-main {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .contact-detail-item a {
        text-decoration: underline;
        color: #000;
    }

    /* Gallery Print */
    .gallery-controls-section,
    .gallery-modal,
    .view-toggle,
    .search-wrapper,
    .sort-wrapper {
        display: none !important;
    }

    .gallery-grid {
        display: block;
    }

    .gallery-item {
        page-break-inside: avoid;
        margin-bottom: var(--space-md);
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .gallery-item-image {
        height: auto;
    }

    .gallery-map {
        display: none;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION (Mobile)
   ============================================ */
@media (max-width: 896px) and (orientation: landscape) {
    .hero {
        padding: var(--space-lg) 0;
    }

    .gallery-hero {
        padding: var(--space-lg) 0;
    }

    .contact-hero {
        padding: var(--space-lg) 0;
    }

    .hero-stats,
    .gallery-stats {
        flex-direction: row;
        gap: var(--space-md);
    }

    .modal-slider {
        height: 70vh;
    }

    .slider-image {
        max-height: 70vh;
    }

    .gallery-map {
        height: 70vh;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .nav-link,
    .view-toggle-btn,
    .gallery-item,
    .modal-thumbnail {
        min-height: 44px;
        min-width: 44px;
    }

    .search-input,
    .sort-select,
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    /* Remove hover effects on touch devices */
    .gallery-item:hover .gallery-item-image img,
    .project-card:hover .project-image img {
        transform: none;
    }

    .project-overlay {
        display: none;
    }

    /* Better touch scrolling */
    .modal-info,
    .modal-thumbnails {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   WIDE SCREEN (Ultra-wide monitors)
   ============================================ */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery-map {
        height: 900px;
    }

    .hero-title,
    .gallery-hero .hero-title {
        font-size: 3.5rem;
    }
}

/* ==========================================================================
   MOBILE UX IMPROVEMENTS (Tabs, Navigation, Maps)
   ========================================================================== */

/* 1. Globalne Zmniejszenie Odstępów (Mobile) */
@media (max-width: 768px) {
    :root {
        /* Zmniejszamy definicje zmiennych przestrzeni, aby nie marnować miejsca na ekranie */
        --space-xl: 2.5rem; 
        --space-lg: 1.5rem;
    }
    
    section {
        padding: var(--space-lg) 0; /* Mniejsze paddingi sekcji */
    }
}

/* 2. Investment Service - Poziome Zakładki (Tabs) */
@media (max-width: 768px) {
    .process-tabs {
        flex-direction: row; /* Wymuś poziom, nie kolumnę */
        overflow-x: auto; /* Pozwól przewijać */
        white-space: nowrap; /* Zapobiegaj łamaniu linii */
        padding-bottom: 5px; /* Miejsce na pasek przewijania */
        scrollbar-width: none; /* Ukryj pasek (Firefox) */
        -webkit-overflow-scrolling: touch; /* Płynne przewijanie na iOS */
        gap: 10px;
    }
    
    .process-tabs::-webkit-scrollbar {
        display: none; /* Ukryj pasek (Chrome/Safari) */
    }

    .tab-btn {
        flex: 0 0 auto; /* Nie ściskaj przycisków */
        width: auto;
        padding: 12px 20px;
        border-bottom: 3px solid transparent; /* Styl "border" zamiast tła dla czytelności */
        background: rgba(255,255,255,0.1);
        border-radius: 4px;
        justify-content: flex-start;
    }

    .tab-btn.active {
        background: var(--white);
        color: var(--terracotta);
        border-bottom-color: var(--terracotta);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* Ukryj numerki, jeśli zajmują za dużo miejsca, lub zmniejsz je */
    .step-num {
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
        margin-right: 5px;
    }
}

/* 3. Privacy & Terms - Pozioma Nawigacja (Sticky Nav) */
@media (max-width: 900px) {
    .toc-nav ul,
    .terms-nav ul {
        display: flex;
        flex-direction: row; /* Zmiana z kolumny na rząd */
        flex-wrap: nowrap; /* Bez zawijania */
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid var(--light-gray);
        margin-bottom: var(--space-md);
    }

    /* Styl "pastylek" dla linków nawigacyjnych */
    .toc-link,
    .t-link {
        flex: 0 0 auto;
        padding: 8px 16px;
        background: #f4f6f8;
        border-radius: 20px;
        border: 1px solid transparent;
        font-size: 0.85rem;
        white-space: nowrap;
        border-left: 1px solid transparent; /* Reset stylu desktopowego */
    }

    /* Aktywny element */
    .toc-link.active,
    .t-link.active {
        background: var(--terracotta);
        color: var(--white);
        border-color: var(--terracotta);
        transform: none;
        box-shadow: 0 2px 6px rgba(229, 148, 98, 0.4);
    }
    
    /* Dark mode fix dla tych przycisków */
    [data-theme="dark"] .toc-link,
    [data-theme="dark"] .t-link {
        background: #2d2d2d;
        color: #e0e0e0;
    }
    
    [data-theme="dark"] .toc-link.active,
    [data-theme="dark"] .t-link.active {
        background: var(--terracotta);
        color: #fff;
    }
}

/* 4. Ready Projects - Filtry Katalogu */
@media (max-width: 768px) {
    .catalog-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-group {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: nowrap; /* Przewijanie zamiast zawijania */
        overflow-x: auto;
        padding-bottom: 10px;
        gap: 10px;
        /* Subtelny cień sugerujący, że jest więcej treści */
        background: linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), var(--white) 70%) 0 100%;
        background-repeat: no-repeat;
        background-size: 40px 100%;
        background-attachment: local, scroll, scroll, local;
    }

    .filter-btn {
        flex: 0 0 auto; /* Nie ściskaj */
        margin-bottom: 0;
    }
    
    /* W trybie ciemnym tło gradientu musi być ciemne */
    [data-theme="dark"] .filter-group {
        /* Uproszczenie dla dark mode - brak gradientu maskującego */
        background: none; 
    }
}

/* 5. Header & Theme Toggle (Mobile Layout Fixes) */
@media (max-width: 480px) {
    .header-inner {
        padding: 10px 0;
    }

    .logo img {
        width: 140px; /* Dostosowana szerokość na mobile dla zachowania estetyki i proporcji */
        height: auto;
    }

    /* Przesunięcie przycisku motywu, by nie wchodził na logo ani hamburgera */
    .theme-toggle-btn {
        right: 60px; /* Bliżej hamburgera */
        width: 32px;
        height: 32px;
        background: transparent; /* Przezroczyste tło na mobile */
        border: none;
        box-shadow: none;
    }
    
    .theme-toggle-btn:hover {
        background: transparent;
        color: var(--terracotta);
        transform: none; /* Wyłącz powiększanie na dotyk */
    }

    .theme-toggle-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* 6. Gallery Map & Modal Adjustments */
@media (max-width: 768px) {
    /* Mniejsza mapa, aby łatwiej przewijać stronę palcem */
    .gallery-map {
        height: 50vh; 
        min-height: 350px;
    }

    /* Modal - przyciski nawigacji */
    .slider-nav {
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.3); /* Półprzezroczyste tło */
        border-radius: 50%;
    }
    
    .slider-prev { left: 10px; }
    .slider-next { right: 10px; }
    
    /* Zabezpieczenie przed nachodzeniem tekstu na zdjęcie */
    .modal-info {
        padding: var(--space-md) var(--space-sm);
    }
}