/*
 * Przetargi — sekcja na ciemnym tle, pozycja listy i plakietka statusu.
 *
 * Wyłącznie wartości przez var(--token) z tokens.css.
 */

/* ——— Sekcja na stronie głównej ——— */

/*
 * Tło idzie od krawędzi do krawędzi okna, bo sekcja jest dzieckiem .site-main--sections,
 * które nie ogranicza szerokości. Treść trzyma w kolumnie .container w środku.
 */
.section-tenders {
  margin-top: var(--space-lg);
  padding: var(--space-lg) 0;
  border-top: 4px solid var(--color-border);
  background-color: var(--color-surface-dark);
  color: var(--color-text-on-dark);
}

.section-tenders .section-heading__title,
.section-tenders .button {
  color: var(--color-text-on-dark);
}

/* ——— Pozycja ——— */

.tender {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

/* W sekcji ostatnia pozycja jest bez kreski — pod nią jest już tylko przycisk. */
.section-tenders .tender:last-child {
  border-bottom: 0;
}

.tender__date {
  color: var(--color-text-muted);
}

.tender__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-xs);
}

.tender__category {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Status dosunięty do prawej krawędzi, jak w projekcie. */
.tender__status {
  margin-left: auto;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius);
  background-color: var(--color-accent-strong);
  color: var(--color-text-on-accent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tender__title {
  margin: 0;
  font-weight: 400;
  font-size: var(--font-size-lg);
}

.tender__title a {
  color: inherit;
  text-decoration: none;
}

.tender__title a:hover {
  text-decoration: underline;
}

/* ——— Wariant wygaszony ——— */

/*
 * Nieaktualny przetarg schodzi na kolor pomocniczy, ale zostaje czytelny — to wciąż
 * treść do przeczytania, a nie dekoracja.
 */
.tender--expired {
  color: var(--color-text-muted);
}

.tender--expired .tender__status {
  background-color: var(--color-text-muted);
}

/* ——— Przygaszenie na ciemnym tle ——— */

/*
 * Data i rodzaj są w projekcie słabiej widoczne od tytułu. Przezroczystość 0,75
 * zamiast 0,5 z makiety: przy 0,5 kontrast spada do 3,95:1, poniżej progu AA.
 */
.section-tenders .tender__date,
.section-tenders .tender__category {
  opacity: 0.75;
  color: inherit;
}

/* Kreska między pozycjami jest na ciemnym tle stonowana, jak w projekcie. */
.section-tenders .tender {
  border-bottom-color: color-mix(in srgb, var(--color-text-on-dark) 30%, transparent);
}

/*
 * W trybie wysokiego kontrastu przygaszanie znika — żółć na czerni jest jedynym
 * czytelnym zestawieniem i nie ma z czego ujmować.
 */
[data-contrast="high"] .section-tenders .tender__date,
[data-contrast="high"] .section-tenders .tender__category {
  opacity: 1;
}

[data-contrast="high"] .section-tenders .tender {
  border-bottom-color: var(--color-border);
}

/* ——— Telefon ——— */

/*
 * Breakpoint wpisany wprost — warunek @media nie przyjmuje var(). 40rem ≈ 640 px.
 * Status wraca do zwykłego przepływu, bo dosunięty do prawej zostawiałby dziurę
 * w zawiniętym wierszu.
 */
@media (max-width: 40rem) {
  .tender__status {
    margin-left: 0;
  }
}