/* ============================================================
   ZAMIESZKAJ – Strony & Komponenty specyficzne
   Mapa · Filtry · Lista inwestycji · Strona inwestycji · Formularze
   ============================================================ */

/* ============================================================
   SEKCJA MAPY (strona główna + podstrona)
   ============================================================ */
.map-section {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - var(--header-h));
    min-height: 560px;
    max-height: 800px;
}

.map-sidebar {
    display:        flex;
    flex-direction: column;
    background:     var(--color-surface);
    border-right:   1px solid var(--color-border);
    overflow:       hidden;
}
.map-sidebar__head {
    padding:      var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    flex-shrink:  0;
}
.map-sidebar__head-title {
    font-size:   var(--text-lg);
    font-weight: var(--weight-semi);
}
.map-sidebar__head-sub {
    font-size:  var(--text-xs);
    color:      var(--color-text-3);
    margin-top: var(--space-1);
}

/* Filtry w sidebarze */
.map-filters { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.filter-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filter-chip {
    padding:       var(--space-2) var(--space-3);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size:     var(--text-xs);
    font-weight:   var(--weight-medium);
    cursor:        pointer;
    background:    var(--color-surface);
    color:         var(--color-text-2);
    transition:    all var(--transition-fast);
    white-space:   nowrap;
    user-select:   none;
}
.filter-chip:hover, .filter-chip.active {
    background:    var(--color-primary);
    color:         #fff;
    border-color:  var(--color-primary);
}
.filter-chip--accent.active {
    background:   var(--color-accent);
    border-color: var(--color-accent);
}

.filter-range { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.filter-range__label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-3); }
.range-input {
    -webkit-appearance: none;
    width: 100%; height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    outline: none;
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}
.range-input::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* Lista wyników w sidebarze */
.map-results {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.map-results::-webkit-scrollbar { width: 4px; }
.map-results::-webkit-scrollbar-track { background: transparent; }
.map-results::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

.map-result-item {
    display:     flex;
    gap:         var(--space-3);
    padding:     var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    cursor:      pointer;
    transition:  background var(--transition-fast);
    position:    relative;
}
.map-result-item:hover { background: var(--color-surface-2); }
.map-result-item.active { background: var(--color-primary-soft); }
.map-result-item.active::before {
    content:  '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 2px 2px 0;
}
.map-result-item__img {
    width: 72px; height: 56px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-2);
}
.map-result-item__body { flex: 1; min-width: 0; }
.map-result-item__name {
    font-size:   var(--text-sm);
    font-weight: var(--weight-semi);
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--space-1);
}
.map-result-item__dev { font-size: var(--text-xs); color: var(--color-text-3); }
.map-result-item__price { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-primary); margin-top: var(--space-2); }

/* Mapa */
.map-canvas { position: relative; }
#map-main { width: 100%; height: 100%; }

/* Togglery warstw na mapie */
.map-layer-controls {
    position:      absolute;
    top:           var(--space-4);
    right:         var(--space-4);
    z-index:       500;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    box-shadow:    var(--shadow);
}
.map-layer-btn {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    width:       100%;
    padding:     var(--space-3) var(--space-4);
    background:  transparent;
    border:      none;
    border-bottom: 1px solid var(--color-border);
    font-size:   var(--text-xs);
    font-weight: var(--weight-medium);
    cursor:      pointer;
    color:       var(--color-text-2);
    transition:  background var(--transition-fast), color var(--transition-fast);
    text-align:  left;
    white-space: nowrap;
}
.map-layer-btn:last-child { border-bottom: none; }
.map-layer-btn:hover { background: var(--color-surface-2); }
.map-layer-btn.active { color: var(--color-text); }
.map-layer-btn__dot {
    width: 10px; height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.map-layer-btn__dot--investments { background: var(--color-primary); }
.map-layer-btn__dot--rcn         { background: var(--color-accent); opacity: .7; }
.map-layer-btn input[type=checkbox] { margin-left: auto; cursor: pointer; }

/* Legenda RCN */
.map-legend {
    position:      absolute;
    bottom:        var(--space-8);
    right:         var(--space-4);
    z-index:       500;
    background:    rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--text-xs);
    box-shadow:    var(--shadow);
}
.map-legend__title { font-weight: var(--weight-semi); margin-bottom: var(--space-2); }
.map-legend__scale {
    width:  160px; height: 8px;
    border-radius: var(--radius-full);
    background: linear-gradient(to right, #2ecc71, #f39c12, #e74c3c, #8e44ad);
    margin-bottom: var(--space-1);
}
.map-legend__labels {
    display: flex; justify-content: space-between;
    color: var(--color-text-3);
}

/* ============================================================
   LISTA INWESTYCJI (archiwum)
   ============================================================ */
.investments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.investments-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-block:   var(--space-5);
    border-bottom:   1px solid var(--color-border);
    margin-bottom:   var(--space-8);
    flex-wrap:       wrap;
    gap:             var(--space-4);
}
.investments-count {
    font-size:  var(--text-sm);
    color:      var(--color-text-2);
}
.investments-count strong { color: var(--color-text); }

.investments-sort {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-size:   var(--text-sm);
    color:       var(--color-text-2);
}

/* Paginacja */
.pagination {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         var(--space-2);
    margin-top:  var(--space-12);
}
.pagination__btn {
    display:     flex;
    align-items: center;
    justify-content: center;
    width:       40px; height: 40px;
    border-radius: var(--radius);
    border:      1px solid var(--color-border);
    background:  var(--color-surface);
    font-size:   var(--text-sm);
    font-weight: var(--weight-medium);
    color:       var(--color-text-2);
    cursor:      pointer;
    transition:  all var(--transition-fast);
    text-decoration: none;
}
.pagination__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__btn.active {
    background:   var(--color-primary);
    border-color: var(--color-primary);
    color:        #fff;
}
.pagination__btn--arrow { font-size: var(--text-lg); }

/* ============================================================
   STRONA POJEDYNCZEJ INWESTYCJI
   ============================================================ */
.inv-hero {
    position:    relative;
    height:      480px;
    overflow:    hidden;
    margin-top:  var(--header-h);
}
.inv-hero__img { width: 100%; height: 100%; object-fit: cover; }
.inv-hero__overlay {
    position:   absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,25,22,.7) 0%, rgba(26,25,22,.1) 60%, transparent 100%);
}
.inv-hero__info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding:  var(--space-8) var(--space-6);
    color: #fff;
}
.inv-hero__badges { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.inv-hero__title {
    font-family: var(--font-serif);
    font-size:   var(--text-3xl);
    color:       #fff;
    line-height: var(--leading-snug);
    margin-bottom: var(--space-2);
}
.inv-hero__dev { font-size: var(--text-md); opacity: .75; }

/* Tabs na stronie inwestycji */
.inv-tabs {
    display:       flex;
    gap:           0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-8);
    overflow-x:    auto;
}
.inv-tab {
    padding:       var(--space-3) var(--space-5);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-medium);
    color:         var(--color-text-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor:        pointer;
    white-space:   nowrap;
    background:    transparent;
    border-top:    none;
    border-left:   none;
    border-right:  none;
    transition:    color var(--transition-fast), border-color var(--transition-fast);
}
.inv-tab:hover { color: var(--color-text); }
.inv-tab.active {
    color:        var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight:  var(--weight-semi);
}

/* Grid szczegółów */
.inv-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-10);
    align-items: start;
}
.inv-sticky-panel {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
}

/* Tabela parametrów */
.inv-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-8);
}
.inv-param {
    background: var(--color-surface);
    padding: var(--space-4) var(--space-5);
}
.inv-param__label { font-size: var(--text-xs); color: var(--color-text-3); text-transform: uppercase; letter-spacing: .04em; }
.inv-param__value { font-size: var(--text-base); font-weight: var(--weight-semi); margin-top: var(--space-1); }

/* Panel kontaktowy (sticky) */
.contact-panel {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow:      hidden;
    box-shadow:    var(--shadow-md);
}
.contact-panel__head {
    background:    var(--color-primary);
    color:         #fff;
    padding:       var(--space-6);
    text-align:    center;
}
.contact-panel__price-label { font-size: var(--text-xs); opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.contact-panel__price {
    font-family: var(--font-serif);
    font-size:   var(--text-3xl);
    line-height: 1.1;
    margin-block: var(--space-2);
}
.contact-panel__price-note { font-size: var(--text-xs); opacity: .75; }
.contact-panel__body { padding: var(--space-6); }
.contact-panel__dev-name { font-weight: var(--weight-semi); margin-bottom: var(--space-1); }
.contact-panel__dev-meta { font-size: var(--text-sm); color: var(--color-text-3); }
.contact-panel__divider { height: 1px; background: var(--color-border); margin-block: var(--space-5); }

/* Wykres cen */
.price-chart-wrap {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    margin-bottom: var(--space-8);
}
.price-chart-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: var(--space-5);
}
.price-chart-title { font-size: var(--text-base); font-weight: var(--weight-semi); }
.price-chart-delta {
    font-size: var(--text-sm); font-weight: var(--weight-semi);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}
.price-chart-delta--up   { background: #ECFDF5; color: var(--color-success); }
.price-chart-delta--down { background: #FEF2F2; color: var(--color-error); }

/* Galeria */
.inv-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 240px 240px;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-8);
}
.inv-gallery__item { overflow: hidden; cursor: pointer; }
.inv-gallery__item:first-child { grid-row: 1 / 3; }
.inv-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}
.inv-gallery__item:hover img { transform: scale(1.05); }

/* ============================================================
   SEKCJA CTA
   ============================================================ */
.cta-section {
    background: var(--color-text);
    color: #fff;
    padding-block: var(--space-20);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 60% 50%, rgba(212,84,26,.15) 0%, transparent 70%);
    pointer-events: none;
}
.cta-section .section__eyebrow { color: var(--color-primary); }
.cta-section .section__eyebrow::before { background: var(--color-primary); }
.cta-section__title {
    font-family: var(--font-serif);
    font-size:   var(--text-3xl);
    color:       #fff;
    margin-bottom: var(--space-4);
}
.cta-section__sub { color: rgba(255,255,255,.65); margin-bottom: var(--space-8); }

/* ============================================================
   TOAST / POWIADOMIENIA
   ============================================================ */
.toast-container {
    position: fixed; bottom: var(--space-6); right: var(--space-6);
    z-index: 9999;
    display: flex; flex-direction: column; gap: var(--space-3);
}
.toast {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    background:    var(--color-text);
    color:         #fff;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-lg);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-medium);
    min-width:     280px;
    max-width:     380px;
    animation:     toast-in var(--transition) forwards;
}
.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.toast.hiding { animation: toast-out var(--transition) forwards; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .investments-grid { grid-template-columns: repeat(2, 1fr); }
    .map-section { grid-template-columns: 300px 1fr; }
}
@media (max-width: 1024px) {
    .inv-layout { grid-template-columns: 1fr; }
    .inv-sticky-panel { position: static; }
    .inv-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .inv-gallery__item:first-child { grid-column: 1 / -1; grid-row: auto; height: 240px; }
}
@media (max-width: 768px) {
    .map-section { grid-template-columns: 1fr; grid-template-rows: 56px 400px; }
    .map-sidebar {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    .map-sidebar__head, .map-sidebar .map-results { display: none; }
    .map-filters { border-bottom: none; }
    .filter-row { flex-wrap: nowrap; padding-block: var(--space-2); }

    .investments-grid { grid-template-columns: 1fr; }
    .inv-hero { height: 320px; }
    .inv-hero__title { font-size: var(--text-2xl); }
    .inv-gallery { grid-template-columns: 1fr; }
    .inv-gallery__item:first-child { grid-column: auto; }
    .inv-params { grid-template-columns: 1fr; }
}