/*
  Ekran „Roadmapa” (makieta: Prototyp Desktop, handoff 26).
  Granatowa karta, pastylki obszarow, trzy kolumny i dwie karty na dole.
*/

.rmap {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  padding: var(--v-s-6) 0 var(--v-s-16);
}

.rmap__wroc {
  font: 600 13px/1.4 var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: none;
  width: fit-content;
}

.rmap__wroc:hover { color: var(--v-primary); }

.rmap__hero {
  background: var(--v-primary);
  color: var(--v-n-100);
  border-radius: 20px; /* makieta */
  padding: var(--v-s-8); /* makieta */
  display: flex;
  gap: var(--v-s-8);
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.rmap__hero-tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  flex: 1 1 420px; /* makieta */
  min-width: 0;
}

.rmap__nadtytul {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-400);
}

.rmap__tytul {
  margin: 0;
  font: 600 38px/1.1 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-display);
  color: var(--v-n-0);
}

.rmap__lead {
  margin: 0;
  max-width: 52ch; /* makieta */
  font: 400 15px/1.6 var(--v-font-body);
  color: var(--v-n-300);
}

.rmap__liczby { display: flex; gap: 14px; flex-wrap: wrap; }

.rmap__liczba {
  background: #2A3A58; /* makieta */
  border-radius: 14px; /* makieta */
  padding: var(--v-s-4) 18px; /* makieta */
  min-width: 132px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
}

.rmap__liczba-v { font: 600 26px/1.1 var(--v-font-display); color: var(--v-n-0); }
.rmap__liczba-k { font: 400 12px/1.35 var(--v-font-body); color: var(--v-n-400); }

.rmap__bezliczb {
  margin: 0;
  max-width: 40ch;
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-300);
}

.rmap__obszary { display: flex; gap: var(--v-s-2); flex-wrap: wrap; align-items: center; }

.rmap__etykieta {
  font: 700 12px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
  margin-right: var(--v-s-1);
}

.rmap__obszar {
  display: inline-flex;
  align-items: center;
  height: 34px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: 999px;
  border: 1.5px solid var(--v-n-200);
  background: var(--v-n-0);
  font: 600 13px/1 var(--v-font-body);
  color: var(--v-primary);
  text-decoration: none;
}

.rmap__obszar:hover { border-color: var(--v-primary); }

.rmap__obszar--wybrany { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-n-0); }

.rmap__kolumny {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); /* makieta */
  gap: 18px; /* makieta */
  align-items: start;
}

.rmap__kolumna { display: flex; flex-direction: column; gap: var(--v-s-3); min-width: 0; }

.rmap__naglowek { display: flex; align-items: center; gap: var(--v-s-2); padding: 0 var(--v-s-1); }

.rmap__kropka { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rmap__kropka--plan { background: var(--v-secondary); }
.rmap__kropka--teraz { background: var(--v-success); }
.rmap__kropka--gotowe { background: var(--v-primary); }

.rmap__kolumna-tytul {
  margin: 0;
  font: 600 17px/1.3 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h3);
  color: var(--v-primary);
}

.rmap__ile {
  font: 700 12px/1.4 var(--v-font-body);
  color: var(--v-n-500);
  background: var(--v-n-50);
  border-radius: 7px; /* makieta */
  padding: 2px 8px;
}

.rmap__podpis { font: 400 12.5px/1.45 var(--v-font-body); color: var(--v-n-600); padding: 0 var(--v-s-1); }

.rmap__karta {
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: 16px; /* makieta */
  padding: 18px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.rmap__karta-glowa { display: flex; gap: var(--v-s-3); align-items: baseline; justify-content: space-between; }

.rmap__karta-tytul { margin: 0; font: 700 15px/1.35 var(--v-font-body); color: var(--v-primary); }

.rmap__obszar-tag {
  flex: none;
  font: 700 11px/1.4 var(--v-font-body);
  color: var(--v-n-600);
  background: var(--v-n-50);
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
}

.rmap__dlaczego {
  margin: 0;
  border-left: 2px solid var(--v-n-200); /* makieta */
  padding-left: 10px;
  font: 400 13px/1.55 var(--v-font-body);
  color: var(--v-n-700);
}

.rmap__stopka { display: flex; align-items: center; justify-content: space-between; gap: var(--v-s-3); flex-wrap: wrap; }

.rmap__meta { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-500); }

.rmap__glos { height: 34px; } /* makieta */

.rmap__glos--oddany { background: var(--v-n-50); border-color: var(--v-primary); }

.rmap__stempel {
  font: 700 12px/1.4 var(--v-font-body);
  color: var(--v-primary);
  border-radius: 8px;
  padding: 5px 10px; /* makieta */
  background: var(--v-secondary-soft);
}

.rmap__stempel--gotowe { background: var(--v-success-soft); }

.rmap__pusto {
  font: 400 13px/1.5 var(--v-font-body);
  color: var(--v-n-500);
  background: var(--v-n-50);
  border-radius: 12px;
  padding: var(--v-s-4);
}

.rmap__dol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); /* makieta */
  gap: 18px;
  align-items: start;
}

.rmap__zmiany {
  background: var(--v-n-50);
  border-radius: 18px; /* makieta */
  padding: 22px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.rmap__pomysl {
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: 18px;
  padding: 22px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
}

.rmap__dol-tytul {
  margin: 0;
  font: 600 20px/1.25 var(--v-font-display); /* makieta */
  letter-spacing: var(--v-ls-h2);
  color: var(--v-primary);
}

.rmap__dol-nota { font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-600); }

.rmap__zmiana {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr); /* makieta */
  gap: var(--v-s-3);
  padding: var(--v-s-3) 0;
  border-bottom: 1px solid var(--v-n-100);
  align-items: baseline;
}

.rmap__zmiana-data { font: 700 12px/1.4 var(--v-font-body); color: var(--v-n-500); }
.rmap__zmiana-tresc { display: flex; flex-direction: column; gap: 3px; }
.rmap__zmiana-tytul { font: 600 14px/1.4 var(--v-font-body); color: var(--v-primary); }
.rmap__zmiana-skad { font: 400 12px/1.45 var(--v-font-body); color: var(--v-n-600); }

.rmap__form { display: flex; flex-direction: column; gap: var(--v-s-3); align-self: stretch; }

@media (max-width: 760px) {
  .rmap { gap: var(--v-s-5); padding: var(--v-s-4) 0 var(--v-s-12); }
  .rmap__hero { padding: var(--v-s-5); gap: var(--v-s-5); }
  .rmap__tytul { font-size: 26px; }
  .rmap__zmiana { grid-template-columns: 1fr; gap: var(--v-s-1); }
}