/* Главная: полезные сервисы наверху, рабочие сущности — у родственных разделов. */
@media (min-width: 601px) {
  .metrics-panel .metric-card--service {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    gap: .16em;
    /* На оригинальном фоне значок занимает левую часть каждой карточки.
       Текстовая группа всегда начинается правее значка, поэтому строки
       не пересекают ни иконку, ни рамку. */
    padding: .26em .48em .24em 43%;
    border-radius: 8px;
    text-shadow: none;
    /* Все четыре ячейки остаются частью единой иллюстрации Главной:
       ни отдельной подложки, ни рамки, ни матового стекла. */
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .metrics-panel .metric-card--service:hover,
  .metrics-panel .metric-card--service:focus-visible {
    transform: none !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
  }

  .metrics-panel .metric-card--service .metric-value {
    color: #f0d07a;
    font-size: clamp(.76rem, 1.34vw, 1.28rem);
    letter-spacing: .045em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .62);
  }

  .metrics-panel .metric-card--service .metric-label,
  .metrics-panel .metric-card--service .metric-status {
    display: block;
    min-width: 0;
    margin: 0;
    white-space: normal;
    text-align: left;
  }

  .metrics-panel .metric-card--service .metric-label {
    max-width: 100%;
    color: #f4e2a9;
    font-size: clamp(.40rem, .62vw, .65rem);
    line-height: 1.05;
  }

  .metrics-panel .metric-card--service .metric-status {
    color: rgba(228, 215, 181, .88);
    font-size: clamp(.33rem, .49vw, .52rem);
    line-height: 1.08;
  }

  .metrics-panel .metric-card--service .metric-value {
    min-height: 0;
    margin: 0;
    line-height: 1;
    text-align: left;
  }

  /* Точная корректировка по замечанию: сохраняем горизонтальную привязку
     справа от значка и опускаем всю текстовую группу на 0,5 см. */
  .metrics-panel .metric-card--service > .metric-value,
  .metrics-panel .metric-card--service > .metric-label,
  .metrics-panel .metric-card--service > .metric-status {
    transform: translateY(.5cm);
  }

  /* Только четвёртая карточка: выравниваем её текст относительно значка. */
  .metrics-panel .metric-card--service.metric-card--guide > .metric-value,
  .metrics-panel .metric-card--service.metric-card--guide > .metric-label,
  .metrics-panel .metric-card--service.metric-card--guide > .metric-status {
    transform: translate(-.4cm, .5cm);
  }

  .metrics-panel .metric-card--service.metric-card--guide .metric-value {
    font-size: clamp(.78rem, 1.38vw, 1.32rem);
  }

  /* Нижний ряд уже полностью нарисован в утверждённом фоне.
     Дополнительные служебные подписи здесь не нужны: они дублировали
     исходную композицию и создавали ощущение наложения. */
  .hotspot.quick::after {
    content: none !important;
  }

  .hotspot.quick:hover,
  .hotspot.quick:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
  }
}