/* ==========================================
   📱 OFFERS-RESPONSIVE.CSS - Media queries
   ========================================== */

/* ==========================================
   💻 DESKTOP (1024px - 1200px)
   ========================================== */
@media (max-width: 1200px) {
    .portal-offers-content {
        grid-template-columns: 280px 1fr;
        gap: 20px;
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   📱 TABLET (768px - 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* Nagłówek - usunięte duplikaty - zastąpione przez centralną regułę w style.css */
    
    /* Layout */
    .portal-offers-content {
        grid-template-columns: 260px 1fr;
    }
    
    /* Sidebar */
    .portal-filters-sidebar {
        position: static;
    }
    
    /* Oferty */
    .oferta-tytul {
        font-size: 20px;
    }
}

/* ==========================================
   📱 MOBILE LANDSCAPE (576px - 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Główny layout - jedna kolumna */
    .portal-offers-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0; /* Pełna szerokość - bez marginesów */
    }
    
    /* Nagłówek */
    .portal-offers-header {
        padding: 40px 20px;
    }
    /* .portal-offers-header h1 i p usunięte - zastąpione przez centralną regułę w style.css */
    
    /* Pasek akcji */
    .portal-action-bar {
        padding: 15px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .portal-breadcrumbs {
        font-size: 13px;
    }
    
    .portal-user-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Filtry - pełna szerokość (padding odziedziczony z .portal-offers-content) */
    .portal-filters-sidebar {
        margin-bottom: 20px;
        order: -1; /* Filtry na górze */
    }
    
    /* Dodaj przycisk toggle dla filtrów */
    .filters-header {
        cursor: pointer;
        user-select: none;
    }
    
    .filters-header::after {
        content: "▼";
        margin-left: auto;
        transition: transform 0.3s;
    }
    
    .filters-collapsed .filters-header::after {
        transform: rotate(-90deg);
    }
    
    .filters-collapsed .portal-filters-form,
    .filters-collapsed .active-filters-container {
        display: none;
    }
    
    /* Zmniejsz padding w formularzach */
    .portal-filters-form {
        padding: var(--input-padding-x); /* 15px - Shape & Sizing System v4.0 */
    }
    
    .filter-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    /* Przyciski filtrów w dwóch kolumnach */
    .quick-filters {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .quick-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Nagłówek wyników */
    .results-header {
        flex-direction: column;
        gap: 15px;
        padding: var(--input-padding-x); /* 15px - Shape & Sizing System v4.0 */
    }
    
    .view-controls {
        width: 100%;
        justify-content: center;
    }
    
    /* Karty ofert */
    .oferta-box {
        padding: var(--card-padding-md); /* 20px - Shape & Sizing System v4.0 */
    }
    
    .oferta-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .oferta-tytul {
        font-size: 18px;
    }
    
    .firma-info {
        flex-wrap: wrap;
    }
    
    .firma-logo {
        width: 50px;
        height: 50px;
    }
    
    /* Tagi w ofertach */
    .oferta-info {
        gap: 6px;
    }
    
    .info-tag {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: var(--radius-sm); /* 4px - Shape & Sizing System v4.0 (FIX: nieistniejąca zmienna) */
    }
    
    .salary-type-badge {
        font-size: 9px;
        padding: 1px 4px;
        border-radius: var(--radius-sm); /* 4px - Shape & Sizing System v4.0 (FIX: nieistniejąca zmienna) */
    }
    
    /* Footer oferty */
    .oferta-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .oferta-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-details,
    .btn-apply {
        width: 100%;
        text-align: center;
    }
    
    /* Paginacja */
    .pagination-container {
        padding: var(--input-padding-x); /* 15px - Shape & Sizing System v4.0 */
        gap: 4px;
    }
    
    .page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    /* Sekcja informacyjna */
    .portal-info-section {
        padding: 40px 20px;
    }
    
    .portal-info-section h2 {
        font-size: 26px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .info-card {
        padding: var(--card-padding-compact); /* 25px */
    }
    
    .info-icon {
        font-size: 40px;
    }
}

/* ==========================================
   📱 MOBILE PORTRAIT (max 576px)
   ========================================== */
@media (max-width: 576px) {
    /* ⭐ GŁÓWNY KONTENER - usuń padding na małych ekranach */
    .portal-offers-container {
        padding: 0;
    }
    
    /* Nagłówek */
    .portal-offers-header {
        padding: 30px 15px;
    }
    /* .portal-offers-header h1 i p usunięte - zastąpione przez centralną regułę w style.css */
    
    /* Breadcrumbs na mobile */
    .portal-breadcrumbs {
        flex-wrap: wrap;
        font-size: 12px;
    }
    
    /* Przyciski użytkownika */
    .btn-add-offer,
    .btn-panel,
    .btn-login,
    .btn-register {
        font-size: 13px;
        padding: var(--btn-padding-sm) /* 8px 16px - Shape & Sizing System v5.0 */;
    }
    
    /* Filtry */
    .filter-section h4 {
        font-size: 15px;
    }
    
    /* Panel boczny mapy - full screen na mobile */
    .offer-side-panel {
        top: 0;
        width: 100%;
        height: 100vh;
        right: -100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    
    .offer-side-panel.open {
        right: 0;
    }
    
    .panel-header h3::before {
        content: '📱';
    }
    
    /* Zakres wynagrodzeń - kolumna */
    .salary-range {
        flex-direction: column;
        align-items: stretch;
    }
    
    .salary-range span {
        display: none;
    }
    
    /* Checkboxy - większe dla łatwiejszego klikania */
    .checkbox-group label {
        padding: 5px 0;
        font-size: 15px;
    }
    
    /* Oferty */
    .oferta-box {
        padding: var(--input-padding-x); /* 15px - Shape & Sizing System v4.0 */
    }
    
    .oferta-tytul {
        font-size: 16px;
        line-height: 1.3;
    }
    
    .firma-nazwa {
        font-size: 14px;
    }
    
    .firma-lokalizacja {
        font-size: 13px;
    }
    
    /* Zmniejsz tagi */
    .info-tag {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: var(--radius-sm); /* 4px - Shape & Sizing System v4.0 (FIX: nieistniejąca zmienna) */
    }
    
    .salary-type-badge {
        font-size: 8px;
        padding: 1px 3px;
        border-radius: var(--radius-sm); /* 4px - Shape & Sizing System v4.0 (FIX: nieistniejąca zmienna) */
    }
    
    /* Poszerz tag wynagrodzenia na bardzo małych ekranach */
    .tag-wynagrodzenie {
        min-width: 180px;
        padding: 6px 10px;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }
    
    .tag-wynagrodzenie .salary-type-badge {
        font-size: 7px;
        padding: 1px 3px;
        margin-left: 4px;
    }
    
    /* Przyciski akcji */
    .btn-details,
    .btn-apply {
        padding: 12px;
        font-size: 14px;
    }
    
    /* Paginacja jeszcze mniejsza */
    .pagination-container {
        padding: 12px;
        gap: 2px;
    }
    
    .page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 8px;
    }
    
    /* Ukryj kropki w paginacji na bardzo małych ekranach */
    .page-dots {
        display: none;
    }
    
    /* Loading */
    .loading-spinner p {
        font-size: 14px;
    }
    
    /* Sekcja informacyjna */
    .portal-info-section h2 {
        font-size: 22px;
        margin-bottom: 30px;
    }
    
    .info-card {
        padding: var(--card-padding-md); /* 20px - Shape & Sizing System v4.0 */
    }
    
    .info-card h3 {
        font-size: 18px;
    }
    
    .info-card p {
        font-size: 14px;
    }
}

/* ==========================================
   📱 BARDZO MAŁE EKRANY (max 380px)
   ========================================== */
@media (max-width: 380px) {
    /* ⭐ GŁÓWNY KONTENER - usuń padding na bardzo małych ekranach */
    .portal-offers-container {
        padding: 0;
    }
    
    /* Nagłówek - usunięte duplikaty - zastąpione przez centralną regułę w style.css */
    
    /* Przyciski w jednej kolumnie */
    .quick-filters {
        grid-template-columns: 1fr;
    }
    
    /* Przyciski użytkownika - pełna szerokość */
    .portal-user-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-add-offer,
    .btn-panel,
    .btn-login,
    .btn-register {
        width: 100%;
        justify-content: center;
    }
    
    /* Bardzo kompaktowa paginacja */
    .pagination-container {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Pokaż tylko kluczowe przyciski paginacji */
    .page-btn:not(.active):not(:first-child):not(:last-child):nth-child(n+4) {
        display: none;
    }
}

/* ==========================================
   🖨️ PRINT STYLES
   ========================================== */
@media print {
    /* Ukryj niepotrzebne elementy */
    .portal-offers-header,
    .portal-action-bar,
    .portal-filters-sidebar,
    .results-header,
    .view-controls,
    .pagination-container,
    .btn-load-more,
    .loading-spinner,
    .infinite-end,
    .error-message,
    .portal-info-section {
        display: none;
    }
    
    /* Resetuj kolory i cienie */
    .portal-offers-content {
        display: block;
    }
    
    .oferta-box {
        box-shadow: none;
        border: 1px solid #000;
        page-break-inside: avoid;
        margin-bottom: 20px;
    }
    
    /* Uproszczone style */
    .oferta-tytul {
        color: #000;
    }
    
    .btn-details,
    .btn-apply {
        display: none;
    }
}

/* ==========================================
   🎯 SPECJALNE PRZYPADKI
   ========================================== */

/* Obsługa notcha na iPhone X+ */
@supports (padding-top: env(safe-area-inset-top)) {
    .portal-offers-header {
        padding-top: calc(60px + env(safe-area-inset-top));
    }
}

/* Hover tylko dla urządzeń z myszką */
@media (hover: hover) {
    .oferta-box:hover {
        transform: translateY(-5px);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
}

/* Wysokie ekrany (landscape na telefonach) */
@media (max-height: 600px) and (orientation: landscape) {
    .portal-offers-header {
        padding: 30px 20px;
    }
    
    /* .portal-offers-header h1 usunięte - zastąpione przez centralną regułę w style.css */
    
    .portal-filters-sidebar {
        max-height: 400px;
        overflow-y: auto;
    }
}