/* ==========================================================================
   hero-mockups-details.css
   Детали карточек hero: вложенные панели, иконки, графики, чипы, разделители.
   Подключается после hero-mockups.css.
   ========================================================================== */

/* ---- текст ---- */

/* Персональный кегль.
   Пропорции у карточек разные, поэтому общий размер оставлял пустоту там,
   где места много, и обрезал содержимое там, где его мало.
   Значения подобраны под каждую карточку: текст максимально крупный,
   но содержимое укладывается в свою пропорцию. */

.mk--antiplag {
  font-size: 6.2cqw;
}

.mk--rating {
  font-size: 8cqw;
}

.mk--progress {
  font-size: 5cqw;
}

.mk--plan {
  font-size: 6.2cqw;
}

.mk--deadline {
  font-size: 4.6cqw;
}

.mk--estimate {
  font-size: 4.2cqw;
}

.mk__title {
  font-size: 1.15em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mk__panel-value {
  font-size: 0.95em;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- вложенные панели ---- */

.mk__panelrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}

.mk__panel {
  display: grid;
  gap: 0.4em;
  padding: 0.6em 0.7em;
  border-radius: 10px;
  background: var(--mk-panel);
}

.mk__panel-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72em;
  color: var(--mk-dim);
  white-space: nowrap;
  overflow: hidden;
}

/* ---- иконки в кружках ---- */

.mk__icon {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.mk__icon--green {
  background: #c6f56f;
  color: #14210a;
}

.mk__icon--peach {
  background: #ffb9a2;
  color: #4a1f14;
}

.mk__icon--violet {
  background: #a585ff;
  color: #ffffff;
}

/* ---- колонки ---- */

.mk__col {
  display: grid;
  gap: 0.45em;
}

/* ---- разделители ---- */

.mk__divider {
  height: 1px;
  background: var(--mk-divider);
}

/* ---- круг-стрелка в группе аватаров ---- */

.mk__avatar--arrow {
  background-color: #f9eb57;
  background-image: none;
  color: #1a1a1c;
  font-size: 0.55em;
}

/* аватар в блоке доверия под формой hero */
.hero-avatar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1c' fill-opacity='0.5'%3E%3Ccircle cx='12' cy='8.6' r='4.1'/%3E%3Cpath d='M12 14.2c-4.3 0-7.8 2.7-7.8 6.1V22h15.6v-1.7c0-3.4-3.5-6.1-7.8-6.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: 64%;
}

.hero-avatar--photo {
  background-image: var(--av, none);
  background-size: cover;
  background-position: center;
}

.mk__avatars--lg .mk__avatar {
  width: 2.6em;
  height: 2.6em;
}

.mk__avatars--lg .mk__avatar + .mk__avatar {
  margin-left: -0.75em;
}

/* ---- графики ---- */

.mk__chart {
  display: block;
  width: 100%;
  height: 2.1em;
  overflow: visible;
}

.mk__chart-area {
  fill: var(--mk-chart);
  opacity: 0.1;
}

.mk__chart-line {
  fill: none;
  stroke: var(--mk-chart);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* график справа от подписи */
.mk__split--chart {
  align-items: center;
  gap: 0.8em;
}

.mk__split--chart .mk__chart {
  flex: 1 1 auto;
  width: auto;
  height: 2.6em;
}

/* ---- плашки-кнопки ---- */

.mk__pills {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.mk__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1em;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  white-space: nowrap;
}

.mk__pill--violet {
  background: #a585ff;
  color: #ffffff;
}

.mk__pill--white {
  background: #ffffff;
  color: #1a1a1c;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 28, 0.14);
}

.mk__pill--green {
  background: #c6f56f;
  color: #14210a;
}

.mk__pill--block {
  align-self: stretch;
  width: 100%;
  padding: 0.85em 1em;
  font-size: 0.85em;
}

/* ---- чипы с активным состоянием ---- */

.mk__chips {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.mk__chips .mk__chip {
  flex: 1;
  padding: 0.55em 0.3em;
  font-size: 0.68em;
  text-align: center;
}

.mk__chip--active {
  background: #c6f56f;
  color: #14210a;
}

.mk__chip--dark {
  background: #17171b;
  color: #ffffff;
}

/* ---- полоса прогресса с процентом ---- */

.mk__barlabel {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.mk__barlabel .mk__bar {
  flex: 1;
  background: var(--mk-track-strong);
}

.mk__barlabel span {
  font-size: 0.68em;
  color: var(--mk-dim);
  white-space: nowrap;
}