/* static/HomePage_css/Sertificate_step.css
   Yangilangan: sertifikat bosqichlari uchun responsiv, accessibility, hover/focus effektlar
*/

/* --- Vars / umumiy sozlamalar --- */
:root{
  --step-bg: #e8f5e9;
  --step-border: #2e7d32;
  --step-accent: #2e7d32;
  --step-hover-bg: #d0efd4;
  --step-shadow: 0 8px 20px rgba(46,125,50,0.08);
  --step-shadow-small: 0 4px 12px rgba(46,125,50,0.06);
}

/* --- Card umumiy ko'rinishi --- */
.certification-step {
  background-color: var(--step-bg);
  border-left: 4px solid var(--step-border);
  border-radius: 12px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  min-height: 150px;            /* bir xil balandlik uchun */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change: transform;
  box-shadow: none;
}

/* hover / focus */
.certification-step:hover,
.certification-step:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--step-shadow);
  background-color: var(--step-hover-bg);
  outline: none;
}

/* fokus uchun accessibility */
.certification-step:focus {
  outline: 3px solid rgba(46,125,50,0.12);
  outline-offset: 4px;
}

/* Step raqami */
.step-number {
  font-weight: 700;
  color: var(--step-accent);
  margin-bottom: .4rem;
  font-size: 1.45rem;
  line-height: 1;
}

/* Step sarlavhasi */
.certification-step h6 {
  color: var(--step-accent);
  font-size: 0.95rem;
  margin-bottom: .45rem;
}

/* Tavsif matn */
.certification-step p {
  color: #4b4b4b;
  font-size: .86rem;
  margin: 0;
}

/* agar ichida link bo'lsa, to'g'ri ko'rinish uchun */
.certification-step a {
  color: inherit;
  text-decoration: none;
}

/* Pastki marjin / spacing */
.certification-step + .certification-step {
  margin-top: .5rem;
}

/* --- Responsive tweaks --- */

/* Kichik ekranlar (telefonlar) */
/* Templateda siz .col-6 ishlatayotganingiz sabab, bu CSS ularning vizual xususiyatlarini sozlaydi */
@media (max-width: 767.98px) {
  .certification-step {
    padding: .85rem;
    min-height: 140px;
    border-radius: 10px;
    box-shadow: var(--step-shadow-small);
  }
  .step-number {
    font-size: 1.25rem;
  }
  .certification-step h6 {
    font-size: .90rem;
  }
  .certification-step p {
    font-size: .82rem;
  }
}

/* Juda kichik ekranlar (ingichka telefonlar) */
@media (max-width: 420px) {
  .certification-step {
    padding: .7rem;
    min-height: 125px;
  }
  .step-number { font-size: 1.1rem; }
  .certification-step h6 { font-size: .86rem; }
  .certification-step p { font-size: .78rem; }
}

/* O'rta va desktop: minimal o'zgartirish (siz desktop tartibini saqlamoqchisiz) */
@media (min-width: 992px) {
  .certification-step {
    padding: 1.15rem;
    min-height: 155px;
  }
  .step-number { font-size: 1.6rem; }
}

/* --- Touch-friendly qayta tiklash --- */
/* Touch uchun hover effektlarini yumshatish */
@media (hover: none) {
  .certification-step:hover { transform: none; box-shadow: var(--step-shadow-small); }
}

/* --- Agar sizda mavjud eski / konflikt qoidalar bo'lsa,
   ularni shu fayl orqali minimal darajada override qilish mumkin.
   Ammo global grid sinflarini (col-*) o'zgartirishdan saqlaning. */

/* Maslahat: agar avvalgi fayl .col-lg-2 ni 100% qilgan bo'lsa va siz uni olib tashlay olmasangiz,
   quyidagi satrni qo'llab ko'ring — lekin EHTIYOT bo'ling: u faqat .certification-step ichida ishlaydi. */
.row .col-lg-2 > .certification-step,
.row .col-lg-2 .certification-step {
  /* Hech qanday global grid override emas, faqat .certification-step ni normal holatga qaytaradi */
  min-width: 0;
  box-sizing: border-box;
}

/* --- Kichik yordamchi sinflar --- */
.certification-step .small { font-size: .80rem; color: #5b5b5b; }

/* Oxirgi eslatma: agar siz .col-lg-2 uchun oldingi noto'g'ri qoida (100%) ni o'chirmagan bo'lsangiz,
   iltimos avval o'sha qatorni fayldan olib tashlang. Bu fayl esa boshqa har qanday qoida bilan yaxshi ishlaydi. */