/* ============================================================
   ZAMIESZKAJ – Design System
   Zero build-step. Wszystko przez CSS custom properties.
   ============================================================ */

/* ---- Google Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

/* ============================================================
   TOKENS – zmień tutaj, zmieni się wszędzie
   ============================================================ */
:root {
    /* Kolory */
    --color-bg:           #FAFAF8;
    --color-surface:      #FFFFFF;
    --color-surface-2:    #F4F3EF;
    --color-border:       #E8E6E0;
    --color-border-hover: #C8C5BC;

    --color-text:         #1A1916;
    --color-text-2:       #5C5A55;
    --color-text-3:       #9B9890;
    --color-text-inv:     #FFFFFF;

    --color-primary:      #D4541A;   /* ceglasty – Kraków */
    --color-primary-dark: #B34415;
    --color-primary-soft: #FAF0EB;

    --color-accent:       #2563EB;   /* niebieski – CTA/mapa */
    --color-accent-dark:  #1D4ED8;
    --color-accent-soft:  #EFF6FF;

    --color-success:      #16A34A;
    --color-warning:      #D97706;
    --color-error:        #DC2626;

    /* Etapy inwestycji */
    --color-stage-planning: #6366F1;
    --color-stage-building: #F59E0B;
    --color-stage-ready:    #10B981;
    --color-stage-sold:     #94A3B8;

    /* Typografia */
    --font-sans:    'DM Sans',    -apple-system, sans-serif;
    --font-serif:   'DM Serif Display', Georgia, serif;

    --text-xs:    0.6875rem;   /* 11px */
    --text-sm:    0.8125rem;   /* 13px */
    --text-base:  1rem;        /* 16px */
    --text-md:    1.125rem;    /* 18px */
    --text-lg:    1.25rem;     /* 20px */
    --text-xl:    1.5rem;      /* 24px */
    --text-2xl:   2rem;        /* 32px */
    --text-3xl:   2.5rem;      /* 40px */
    --text-4xl:   3.25rem;     /* 52px */
    --text-5xl:   4.5rem;      /* 72px */

    --leading-tight:  1.15;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --weight-light:   300;
    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;

    /* Przestrzeń */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* Layout */
    --container:       1280px;
    --container-sm:    960px;
    --container-xs:    720px;
    --gutter:          var(--space-6);

    /* Kształty */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Cienie */
    --shadow-xs:  0 1px 2px rgba(0,0,0,.06);
    --shadow-sm:  0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow:     0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-md:  0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
    --shadow-lg:  0 16px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.04);

    /* Przejścia */
    --transition-fast:   150ms cubic-bezier(.4,0,.2,1);
    --transition:        250ms cubic-bezier(.4,0,.2,1);
    --transition-slow:   400ms cubic-bezier(.4,0,.2,1);

    /* Nagłówek */
    --header-h: 80px;
    --header-bg: rgba(250,250,248,.92);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip; /* clip zamiast hidden - nie tworzy scroll context, blokuje poziomy scroll strony */
}

body {
    font-family:      var(--font-sans);
    font-size:        var(--text-base);
    line-height:      var(--leading-normal);
    color:            var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* nie tworzy nowego scroll context dla dzieci */
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { line-height: var(--leading-snug); font-weight: var(--weight-semi); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--sm { max-width: var(--container-sm); }
.container--xs { max-width: var(--container-xs); }

.grid        { display: grid; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2  { gap: var(--space-2); }
.flex-gap-3  { gap: var(--space-3); }
.flex-gap-4  { gap: var(--space-4); }
.flex-gap-6  { gap: var(--space-6); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   TYPOGRAFIA
   ============================================================ */
.text-display {
    font-family: var(--font-serif);
    font-size:   var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: -.02em;
}
.text-headline {
    font-family: var(--font-serif);
    font-size:   var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: -.015em;
}
.text-title {
    font-size:   var(--text-2xl);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
}
.text-subtitle {
    font-size:   var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}
.text-lead {
    font-size:   var(--text-md);
    line-height: var(--leading-loose);
    color:       var(--color-text-2);
}
.text-body { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--leading-normal); }
.text-xs   { font-size: var(--text-xs);   line-height: var(--leading-normal); }

.text-muted   { color: var(--color-text-2); }
.text-subtle  { color: var(--color-text-3); }
.text-primary { color: var(--color-primary); }
.text-accent  { color: var(--color-accent); }
.text-inv     { color: var(--color-text-inv); }

.font-light  { font-weight: var(--weight-light); }
.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semi   { font-weight: var(--weight-semi); }
.font-bold   { font-weight: var(--weight-bold); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ============================================================
   PRZYCISKI
   ============================================================ */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         0.6875rem var(--space-6);
    border-radius:   var(--radius);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-semi);
    letter-spacing:  .01em;
    cursor:          pointer;
    border:          1px solid transparent;
    white-space:     nowrap;
    transition:      background var(--transition-fast), color var(--transition-fast),
                     border-color var(--transition-fast), box-shadow var(--transition-fast),
                     transform var(--transition-fast);
    text-decoration: none;
    line-height:     1;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--color-primary);
    color:      var(--color-text-inv);
    box-shadow: 0 1px 2px rgba(212,84,26,.3);
}
.btn--primary:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(212,84,26,.35);
}

.btn--accent {
    background: var(--color-accent);
    color:      var(--color-text-inv);
    box-shadow: 0 1px 2px rgba(37,99,235,.3);
}
.btn--accent:hover {
    background: var(--color-accent-dark);
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
}

.btn--outline {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-border);
}
.btn--outline:hover {
    border-color: var(--color-border-hover);
    background:   var(--color-surface-2);
}

.btn--ghost {
    background: transparent;
    color:      var(--color-text-2);
}
.btn--ghost:hover {
    background: var(--color-surface-2);
    color:      var(--color-text);
}

.btn--sm  { padding: 0.4375rem var(--space-4); font-size: var(--text-xs); }
.btn--lg  { padding: 0.875rem var(--space-8);  font-size: var(--text-base); }
.btn--xl  { padding: 1.0625rem var(--space-10); font-size: var(--text-md); border-radius: var(--radius-md); }
.btn--full{ width: 100%; }

/* ============================================================
   ODZNAKI (BADGES)
   ============================================================ */
.badge {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-1);
    padding:         0.1875rem var(--space-2);
    border-radius:   var(--radius-sm);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-semi);
    letter-spacing:  .03em;
    text-transform:  uppercase;
    white-space:     nowrap;
}
.badge--planning { background: #EEF2FF; color: var(--color-stage-planning); }
.badge--building { background: #FFFBEB; color: var(--color-stage-building); }
.badge--ready    { background: #ECFDF5; color: var(--color-stage-ready); }
.badge--sold     { background: #F1F5F9; color: var(--color-stage-sold); }
.badge--featured { background: #FEF9C3; color: #854D0E; }
.badge--primary  { background: var(--color-primary-soft); color: var(--color-primary); }
.badge--accent   { background: var(--color-accent-soft);  color: var(--color-accent); }

/* ============================================================
   KARTY
   ============================================================ */
.card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow:      hidden;
    transition:    box-shadow var(--transition), transform var(--transition);
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform:  translateY(-2px);
}
.card__image {
    width:       100%;
    aspect-ratio: 16/9;
    object-fit:  cover;
}
.card__image--sq { aspect-ratio: 4/3; }
.card__body { padding: var(--space-5) var(--space-6); }
.card__footer {
    padding:     var(--space-4) var(--space-6);
    border-top:  1px solid var(--color-border);
    background:  var(--color-surface-2);
}
.card__title {
    font-size:   var(--text-lg);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-2);
}
.card__meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-3);
    color:      var(--color-text-2);
    font-size:  var(--text-sm);
    margin-top: var(--space-3);
}

/* Karta inwestycji */
.inv-card { display: flex; flex-direction: column; }
.inv-card__image-wrap {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.inv-card__image-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition-slow);
}
.inv-card:hover .inv-card__image-wrap img { transform: scale(1.04); }

.inv-card__badges {
    position: absolute; top: var(--space-3); left: var(--space-3);
    display: flex; gap: var(--space-2); flex-wrap: wrap;
}
.inv-card__price-tag {
    position: absolute; bottom: var(--space-3); right: var(--space-3);
    background: rgba(26,25,22,.75);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
}
.inv-card__body { flex: 1; padding: var(--space-5) var(--space-5) var(--space-4); }
.inv-card__name {
    font-size:   var(--text-md);
    font-weight: var(--weight-semi);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
    transition: color var(--transition-fast);
}
.inv-card:hover .inv-card__name { color: var(--color-primary); }
.inv-card__developer { font-size: var(--text-sm); color: var(--color-text-3); }
.inv-card__stats {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3); margin-top: var(--space-4);
    padding-top: var(--space-4); border-top: 1px solid var(--color-border);
}
.inv-card__stat-label { font-size: var(--text-xs); color: var(--color-text-3); text-transform: uppercase; letter-spacing: .04em; }
.inv-card__stat-value { font-size: var(--text-sm); font-weight: var(--weight-semi); margin-top: 2px; }

/* ============================================================
   FORMULARZ
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
    font-size:   var(--text-sm);
    font-weight: var(--weight-medium);
    color:       var(--color-text-2);
}
.field__label--req::after { content: ' *'; color: var(--color-error); }

.input, .select, .textarea {
    width:         100%;
    padding:       0.6875rem var(--space-4);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     var(--text-base);
    color:         var(--color-text);
    transition:    border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance:    none;
}
.input:focus, .select:focus, .textarea:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 3px rgba(37,99,235,.12);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-3); }
.textarea { resize: vertical; min-height: 100px; line-height: var(--leading-normal); }
.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C5A55' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

.form-grid { display: grid; gap: var(--space-4); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }

/* ============================================================
   SEPARATOR / DIVIDER
   ============================================================ */
.divider {
    height: 1px;
    background: var(--color-border);
    margin-block: var(--space-8);
}
.divider--dashed { background: none; border-top: 1px dashed var(--color-border); }

/* ============================================================
   SEKCJA
   ============================================================ */
.section { padding-block: var(--space-20); }
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-32); }
.section--bg { background: var(--color-surface-2); }

.section__header {
    max-width: 600px;
    margin-bottom: var(--space-12);
}
.section__header--center {
    margin-inline: auto;
    text-align: center;
}
.section__eyebrow {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    font-size:       var(--text-xs);
    font-weight:     var(--weight-semi);
    text-transform:  uppercase;
    letter-spacing:  .08em;
    color:           var(--color-primary);
    margin-bottom:   var(--space-4);
}
.section__eyebrow::before {
    content: '';
    display: block;
    width: 20px; height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}
.section__title { font-family: var(--font-serif); }
.section__lead { margin-top: var(--space-4); color: var(--color-text-2); font-size: var(--text-md); line-height: var(--leading-loose); }

/* ============================================================
   STATYSTYKI
   ============================================================ */
.stat-block { }
.stat-block__value {
    font-family: var(--font-serif);
    font-size:   var(--text-3xl);
    color:       var(--color-primary);
    line-height: 1;
}
.stat-block__label {
    font-size:  var(--text-sm);
    color:      var(--color-text-2);
    margin-top: var(--space-2);
}

/* ============================================================
   STAN ŁADOWANIA
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 50%, var(--color-surface-2) 75%);
    background-size: 1200px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: var(--radius);
}

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */
@media (max-width: 1024px) {
    :root { --gutter: var(--space-5); }
    .text-display  { font-size: var(--text-3xl); }
    .text-headline { font-size: var(--text-2xl); }
}
@media (max-width: 768px) {
    :root { --gutter: var(--space-4); --header-h: 68px; }
    .text-display  { font-size: var(--text-2xl); }
    .text-headline { font-size: var(--text-xl); }
    .form-grid--2  { grid-template-columns: 1fr; }
    .section       { padding-block: var(--space-12); }
    .section--lg   { padding-block: var(--space-20); }
    .hide-mobile   { display: none !important; }
}
@media (max-width: 480px) {
    .hide-xs { display: none !important; }
}