/* ---------- Strona marki (/marka/{marka}) ---------- */
/* Zrodlo: makieta v73 „Vistitio Strona marki.dc.html" (handoff 2026-10-10). Uklad plynny,
   ten sam na komputerze i telefonie — rzedy zawijaja sie same. */

.marka {
  --marka-zielen: #2E7D4F; /* makieta, TODO token */
  --marka-zielen-tekst: #1F5E3A; /* makieta, TODO token */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-6);
  /* Makieta: <main> 20 px od gory i 72 od dolu; powloka daje 24 i 64. */
  margin-top: calc(var(--v-s-1) * -1);
  padding-bottom: var(--v-s-2);
}

.marka__sciezka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v-s-2);
  font: 400 13.5px/1.4 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.marka__sciezka a { color: var(--v-n-700); }
.marka__sciezka-teraz { font-weight: 700; color: var(--v-primary); }

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

/* Kafel inicjalow: 72 px na miekkiej ochrze, Outfit 26. */
.marka__znak {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 20px; /* makieta */
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
  display: grid;
  place-items: center;
  font: 600 26px/1 var(--v-font-display); /* makieta */
  letter-spacing: -.02em;
}

.marka__tresc {
  flex: 1;
  min-width: 240px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
}

.marka__nazwa {
  margin: 0;
  font: 600 40px/1.05 var(--v-font-display); /* makieta */
  letter-spacing: -.03em;
  color: var(--v-primary);
  overflow-wrap: anywhere;
}

.marka__fakty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v-s-1) var(--v-s-4);
  font: 500 14.5px/1.4 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
}

.marka__fakt { display: flex; align-items: center; gap: 6px; }
.marka__fakt--glowny { font-weight: 700; color: var(--v-primary); }

/* „N nowych dzis" na zielono, z kropka — jedyny fakt o ruchu, nie o stanie. */
.marka__fakt--dzis { font-weight: 700; color: var(--marka-zielen-tekst); }

.marka__fakt--dzis::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marka-zielen);
}

/* Zastrzezenie: szara notka z „i" w kolku. */
.marka__nota {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* makieta */
  max-width: 820px;
  margin: 0;
  padding: var(--v-s-3) var(--v-s-4);
  border-radius: 14px; /* makieta */
  background: var(--v-n-50);
  font: 400 13.5px/1.55 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
  text-wrap: pretty;
}

.marka__nota-znak {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--v-n-600);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 11px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.marka__oferty {
  display: flex;
  flex-direction: column;
  gap: 18px; /* makieta */
}

/* Pasek nad siatka: naglowek z chipami po lewej, sortowanie po prawej, kreska pod spodem. */
.marka__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--v-s-3);
  padding-bottom: 14px; /* makieta */
  border-bottom: 1px solid var(--v-n-100);
}

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

.marka__naglowek {
  margin: 0 6px 0 0; /* makieta */
  font: 600 20px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.015em;
  color: var(--v-primary);
}

.marka__wyczysc {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--v-s-2);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
}

/* Makieta: auto-fill od 220 px, co przy jej kontenerze 1152 daje cztery w rzędzie. Nasz
   kontener ma 1192 i zmieściłby piąty, więc kolumna nie jest węższa niż ćwiartka rzędu. */
.marka__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 60px) / 4)), 1fr)); /* makieta */
  gap: var(--v-s-5);
}

.marka__stopka { display: flex; justify-content: center; margin-top: var(--v-s-4); }

/* Nic nie pasuje do wybranego chipa. */
.marka__pusto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* makieta */
  padding: var(--v-s-8);
  border-radius: 20px; /* makieta */
  background: var(--v-n-50);
}

.marka__pusto-tytul { margin: 0; font: 800 15.5px/1.3 var(--v-font-body); /* makieta */ color: var(--v-primary); }

.v-btn.marka__pusto-guzik {
  height: 44px;
  padding: 0 18px; /* makieta */
  border-radius: var(--v-s-3);
  border-color: var(--v-primary);
  font-size: 14px;
  font-weight: 800;
}

:root.jak-aplikacja[data-motyw="ciemny"] .marka { --marka-zielen-tekst: var(--v-success-text); }

@media (max-width: 760px) {
  /* Telefon: powloka daje 16 px od gory (makieta 20) i szare tlo strony, wiec notka
     i pusty stan dostaja biale tlo, zeby nie zlaly sie z tlem. */
  .marka { margin-top: var(--v-s-1); }
  .marka__nota,
  .marka__pusto { background: var(--v-n-0); }

  /* Kafelek 3a: dwa w rzędzie, jak profil i bloki pod ofertą (plansza nie ma wersji 390). */
  .marka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-s-3); }
}