/* Блок «Рекомендуем» (templates/hosting-catalog/recommend*). Цвета и радиусы — токены темы Quark 2 (--q2-*), с запасными значениями. */
.hc-rec {
  --hc-rec-accent: var(--q2-accent, #2563eb);
  --hc-rec-bg: var(--q2-bg-elev, #fff);
  --hc-rec-muted-bg: var(--q2-bg-muted, #f2f2f4);
  --hc-rec-text: var(--q2-text, #242424);
  --hc-rec-muted: var(--q2-text-muted, #6b7280);
  --hc-rec-line: var(--q2-divider, rgba(34, 42, 53, .1));
  --hc-rec-radius: var(--q2-radius-md, 12px);
  margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--hc-rec-line); color: var(--hc-rec-text);
}
.hc-rec__title { margin: 0 0 1rem; font-size: 1.35rem; }
.hc-rec__name { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.hc-rec__name a { color: inherit; text-decoration: none; }
.hc-rec__name a:hover { color: var(--hc-rec-accent); }
.hc-rec__text { margin: .35rem 0 0; color: var(--hc-rec-muted); font-size: .95rem; line-height: 1.45; }
.hc-rec__price { font-weight: 600; font-size: .95rem; }
.hc-rec__labels { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.hc-rec__labels li { margin: 0; padding: .15rem .55rem; border-radius: 999px; background: var(--hc-rec-muted-bg); font-size: .8rem; color: var(--hc-rec-muted); }
.hc-rec__cta {
  display: inline-block; padding: .5rem 1rem; border-radius: var(--q2-radius, 8px); background: var(--hc-rec-accent);
  color: #fff !important; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap;
}
.hc-rec__cta:hover { filter: brightness(1.08); }
.hc-rec__more { font-size: .95rem; }
.hc-rec__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: auto; padding-top: .9rem; }

/* cards */
.hc-rec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.hc-rec__card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hc-rec-radius); background: var(--hc-rec-bg);
  box-shadow: var(--q2-shadow-card, 0 1px 3px rgba(0, 0, 0, .1)); }
.hc-rec__media { display: block; aspect-ratio: 16 / 10; background: var(--hc-rec-muted-bg); }
.hc-rec__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hc-rec__media.is-logo { display: flex; align-items: center; justify-content: center; }
.hc-rec__media.is-logo img { width: auto; height: 50%; object-fit: contain; }
/* Картинки нет: плашка с названием акцентного цвета. */
.hc-rec__media.is-empty { display: flex; align-items: center; justify-content: center; padding: 1rem; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--hc-rec-accent) 22%, var(--hc-rec-bg)), color-mix(in srgb, var(--hc-rec-accent) 6%, var(--hc-rec-bg))); }
.hc-rec__media.is-empty span { font-size: 1.6rem; font-weight: 700; color: var(--hc-rec-accent); text-align: center; }
.hc-rec__card .hc-rec__body { display: flex; flex-direction: column; flex: 1; padding: 1rem; }

/* list */
.hc-rec__list { margin: 0; padding: 0; list-style: none; border-radius: var(--hc-rec-radius); background: var(--hc-rec-bg);
  box-shadow: var(--q2-shadow-card, 0 1px 3px rgba(0, 0, 0, .1)); }
.hc-rec__row { display: flex; align-items: center; gap: 1rem; margin: 0; padding: .9rem 1rem; }
.hc-rec__row + .hc-rec__row { border-top: 1px solid var(--hc-rec-line); }
.hc-rec__thumb { flex: none; width: 96px; height: 60px; border-radius: var(--q2-radius, 8px); object-fit: cover; background: var(--hc-rec-muted-bg); }
.hc-rec__thumb.is-logo { width: 60px; object-fit: contain; }
.hc-rec__row .hc-rec__body { flex: 1; min-width: 0; }
.hc-rec__row .hc-rec__text { display: block; margin: .15rem 0 0; }
.hc-rec__side { display: flex; align-items: center; gap: .9rem; flex: none; }
@media (max-width: 640px) {
  .hc-rec__row { flex-wrap: wrap; }
  .hc-rec__side { width: 100%; justify-content: space-between; }
}

/* banner */
.hc-rec__banner { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; border-radius: var(--hc-rec-radius);
  background: color-mix(in srgb, var(--hc-rec-accent) 9%, var(--hc-rec-bg)); border: 1px solid color-mix(in srgb, var(--hc-rec-accent) 25%, transparent); }
.hc-rec__banner + .hc-rec__banner { margin-top: 1rem; }
.hc-rec__banner-img { flex: none; width: 38%; max-width: 320px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--q2-radius, 8px); }
.hc-rec__banner-img.is-logo { width: 120px; aspect-ratio: 1; object-fit: contain; background: var(--hc-rec-bg); padding: .75rem; }
.hc-rec__banner .hc-rec__body { flex: 1; min-width: 0; }
.hc-rec__banner .hc-rec__name { font-size: 1.3rem; }
.hc-rec__banner .hc-rec__labels li { background: var(--hc-rec-bg); }
.hc-rec__banner .hc-rec__labels li.is-price { color: var(--hc-rec-text); font-weight: 600; }
.hc-rec__banner .hc-rec__foot { justify-content: flex-start; gap: 1.25rem; }
@media (max-width: 640px) {
  .hc-rec__banner { flex-direction: column; align-items: stretch; }
  .hc-rec__banner-img { width: 100%; max-width: none; }
}

/* compact */
.hc-rec--compact { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.hc-rec--compact .hc-rec__title { margin: 0; font-size: 1rem; }
.hc-rec__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hc-rec__chips li { margin: 0; }
.hc-rec__chips a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .9rem; border-radius: 999px;
  background: var(--hc-rec-bg); box-shadow: var(--q2-shadow-card, 0 1px 3px rgba(0, 0, 0, .1)); text-decoration: none; font-weight: 600; font-size: .95rem; }
.hc-rec__chips img { margin-left: -.55rem; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }