/* ============================================================================
   ProFaber — «Yo'nalishlar» bo'limi

   site.css ning davomi: konteyner (.shell), tasma (.band) va kartochka
   (.card) o'sha yerdan olinadi, bu yerda faqat holat belgisi va shu
   bo'limning to'ri bor. Ranglar site.css o'zgaruvchilaridan — brend
   palitrasi bir joyda qolsin.
   ========================================================================== */

/* Yetti element: 1 → 2 → 3 → 4 ustun, site.css dagi grid bilan bir xil
   nuqtalarda sinadi. Oxirgi qator to'lmasa kartochkalar chapga tizilib
   qoladi — bu shu yerda ataylab, cho'zib tenglashtirilmaydi. */
.dir-grid {
  grid-template-columns: 1fr;
}

.dir-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
}
/* .card h3 tepasida 1.25rem bor — belgidan keyin bu ortiqcha. */
.dir-card h3 {
  margin-top: .875rem;
  font-size: 1.0625rem;
}
.dir-card p { margin-top: .5rem; }

/* ----------------------------------------------------------------------------
   Holat belgisi

   Uchta holat uchta og'irlikda: «hozir bor» — to'q sariq to'ldirilgan,
   «yaqinda» — kontur, «hali yo'q» — bosiq kulrang. Rangdan tashqari nuqta
   ham farq qiladi, shunda rang ko'rmaydigan foydalanuvchi ham ajratadi.
   -------------------------------------------------------------------------- */

.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .3125rem .625rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;
  /* Belgidagi 45° kesim — site.css dagi .tier-flag bilan bir o'lchamda. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.dir-dot {
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* hozir bor — urg'uli */
.dir-badge--ready {
  background: var(--accent);
  color: var(--white);
}

/* yaqinda — kontur, matn qora */
.dir-badge--soon {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* hali yo'q — bosiq */
.dir-badge--planned {
  background: var(--line);
  color: var(--steel);
}
.dir-badge--planned .dir-dot { opacity: .7; }

/* Rejadagi yo'nalish e'tiborni tortmasin. */
.dir-card:has(.dir-badge--planned) h3 { color: var(--steel); }

@media (min-width: 640px) {
  .dir-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dir-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .dir-grid { grid-template-columns: repeat(4, 1fr); }
}