/* ==========================================================================
   Сертификаты мастеров
   --------------------------------------------------------------------------
   Витрина документов: превью в рамке «свежей ленты» + подпись, что именно
   документ разрешает. Базовые правила описаны для светлой секции, тёмная
   переопределяет цвета — как у .step и .card в остальных секциях.

   Два режима:
     .certs             — карточки в ряд (полоса доверия на главной, о компании);
     .certs--detailed   — по одному в строку, документ целиком (страница
                          /sertifikaty/, где сертификат и есть содержание).
   ========================================================================== */

.certs { display: grid; gap: var(--sp-5); }

@media (min-width: 760px) {
  .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cert {
  display: grid;
  grid-template-rows: auto 1fr;   /* подпись тянется на всю высоту карточки: */
  gap: var(--sp-4);               /* строки с номером выравниваются по низу ряда */
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* --- Превью документа ------------------------------------------------
   Сертификаты приходят и «альбомом», и «портретом», поэтому превью режется
   в общую рамку от верхнего края: шапка, имя и название курса — то, ради
   чего на превью вообще смотрят. Полностью документ открывается по клику. */

.cert__frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.cert__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur) var(--ease);
}
.cert__frame:hover img,
.cert__frame:focus-visible img { transform: scale(1.03); }

.cert__zoom {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.3125rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* --- Подпись ---------------------------------------------------------- */

.cert__body { display: flex; flex-direction: column; gap: var(--sp-2); }

.cert__issuer {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.cert__name { font-size: var(--fs-h4); font-weight: 700; color: var(--c-text); }
.cert__text { font-size: var(--fs-sm); color: var(--c-muted); }
.cert__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- Развёрнутый режим: документ целиком ------------------------------ */

/* На узком экране скан идёт во всю ширину и своей высотой — резать нечего.
   На широком документ ложится в общий квадрат: «альбом» и «портрет» получают
   одинаковую по высоте рамку, и ряд карточек не скачет. */

.certs--detailed .cert__frame { aspect-ratio: auto; }
.certs--detailed .cert__frame img { height: auto; object-fit: contain; }
.certs--detailed .cert__body { gap: var(--sp-3); }

@media (min-width: 860px) {
  .certs--detailed { grid-template-columns: 1fr; gap: var(--sp-6); }
  .certs--detailed .cert {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: start;   /* иначе рамка тянется под высоту текста и под сканом остаётся поле */
    gap: var(--sp-6);
    padding: var(--sp-5);
  }
  .certs--detailed .cert__frame { aspect-ratio: 1 / 1; }
  .certs--detailed .cert__frame img { height: 100%; object-position: center; }
}

/* --- Тёмная секция ----------------------------------------------------- */

.section--dark .cert {
  background: var(--c-ink-2);
  border-color: var(--c-ink-3);
  box-shadow: none;
}
.section--dark .cert__issuer { color: var(--c-accent-bright); }
.section--dark .cert__name { color: var(--c-on-ink); }
.section--dark .cert__text { color: var(--c-muted-ink); }
.section--dark .cert__meta { color: var(--c-muted-ink); border-top-color: var(--c-ink-3); }
.section--dark .cert__frame { border-color: var(--c-ink-3); }

/* --- Строка под витриной ---------------------------------------------- */

.certs__note {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.section--dark .certs__note { color: var(--c-muted-ink); }

/* --- Компактная врезка на странице услуги ------------------------------ */

.cert-note {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
@media (min-width: 640px) {
  .cert-note { grid-template-columns: 160px minmax(0, 1fr); }
}
.cert-note .cert__frame { aspect-ratio: 4 / 3; }
.cert-note__body { display: grid; gap: var(--sp-2); }
.cert-note__title { font-weight: 700; }
.cert-note p { font-size: var(--fs-sm); color: var(--c-muted); }