/* HostingsRating — main CSS (clean & optimized)
   Темы, шапка, карточки, список сервисов, сайдбар, SEO-блок
*/

/* ---------- База ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* ---------- Темы (разводим фон страницы и карточек) + проброс в Bootstrap ---------- */
body[data-theme="dark"]{
  /* страница */
  --page-bg: #030e2d;
  --text: #e9efff;
  --muted: #aab3c2;

  /* карточки/строки */
  --card-bg: #0f1a3a;        /* светлее задника, заметный отлип */
  --card-border: #1e2a52;

  /* заголовки/ссылки */
  --heading: #ffffff;
  --link: #60a5fa;
  --link-hover: #8ac0ff;

  /* Bootstrap vars */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--card-border);
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--card-border);
  --bs-heading-color: var(--heading);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-offcanvas-bg: var(--card-bg);
  --bs-offcanvas-color: var(--text);
}

body[data-theme="light"]{
  /* страница */
  --page-bg: #dfdfdf;        /* задний фон всей страницы (по просьбе) */
  --text: #0b1230;
  --muted: #4f5d7a;

  /* карточки/строки */
  --card-bg: #ffffff;        /* БЕЛЫЕ карточки/строки */
  --card-border: #dfe5f1;

  /* заголовки/ссылки */
  --heading: #0b1230;
  --link: #0b5ed7;
  --link-hover: #0a58ca;

  /* Bootstrap vars */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--card-border);
  --bs-card-bg: var(--card-bg);
  --bs-card-color: var(--text);
  --bs-card-border-color: var(--card-border);
  --bs-heading-color: var(--heading);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-offcanvas-bg: var(--card-bg);
  --bs-offcanvas-color: var(--text);
}

/* ---------- Ссылки ---------- */
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* ---------- Шапка ---------- */
.hr-header {
  background: url('/storage/tools/header_line.jpg') center/cover no-repeat;
  height: 130px;
}
.hr-logo { height: 60px; }
@media (max-width: 767.98px){ .hr-header { display: none; } }

/* Мобильная полоса с брендом */
.hr-mobilebar { background:#121d3c; }

/* Полупрозрачные («стеклянные») кнопки */
.btn-glass{
  background: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
  color: var(--bs-heading-color);
  border: 1px solid var(--bs-card-border-color);
  border-radius: .6rem;
  backdrop-filter: saturate(140%) blur(2px);
}
.btn-glass:hover{
  background: color-mix(in srgb, var(--bs-body-color) 18%, transparent);
  color: var(--bs-heading-color);
}

/* ВЕРХНЕЕ МЕНЮ: текст кнопок и днём, и ночью одинаковый (тёмный) */
.hr-header .btn-glass,
.hr-mobilebar .btn-glass { color: #ffffff !important; } /* ← как просил */

/* ---------- Карточки / строки рейтинга ---------- */
.hr-card{
  background: var(--card-bg);
  color: var(--bs-card-color);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.service-name{
  color: var(--bs-heading-color);
  text-decoration: none;
  font-weight: 700;
}
.service-name:hover{ text-decoration: underline; }
.service-meta{ color: var(--muted); }

/* Слот под логотип в рейтинге */
.hr-card .card-body .service-logo-slot{
  width:140px; flex:0 0 140px;
  display:flex; align-items:center;
}
.hr-card .card-body .service-logo-slot img.service-logo-img{
  height:64px; width:auto; max-width:140px;
  object-fit:contain; display:block;
  transition: transform .12s ease;
}
/* Лёгкий зум логотипа на десктопе */
@media (min-width:768px){
  .hr-card .card-body .service-logo-slot img.service-logo-img:hover{
    transform: scale(1.05);
    transform-origin:left center;
  }
}
/* Компактный слот на мобилке */
@media (max-width: 767.98px){
  .hr-card .card-body .service-logo-slot{ width:72px; flex-basis:72px; }
  .hr-card .card-body .service-logo-slot img.service-logo-img{ height:48px; max-width:72px; }
}

/* ---------- Сайдбар ---------- */
.hr-sidebar-img{
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:.6rem;
}
.link-inverse{ color: var(--bs-heading-color); text-decoration:none; }
.link-inverse:hover{ text-decoration: underline; }

/* ---------- SEO-блок ---------- */
.seo-card h2, .seo-card h3{ color: var(--bs-heading-color); }
body[data-theme="light"] .seo-card,
body[data-theme="light"] .seo-card .card-body,
body[data-theme="light"] .seo-card h2,
body[data-theme="light"] .seo-card h3,
body[data-theme="light"] .seo-card p{
  color:#000 !important;             /* в светлой теме текст — чёрный */
}
body[data-theme="light"] .seo-card a{ color: var(--bs-link-color); }

/* ---------- Совместимость со старой разметкой ---------- */
.service-card{ background: var(--card-bg); border:1px solid var(--card-border); border-radius:12px; }
.sidebar .sidebar-block{ background: var(--card-bg); border:1px solid var(--card-border); border-radius:10px; }

/* Компактные строки для /services */
.hr-row--compact .card-body{ padding:12px 16px; }
.hr-row--compact .service-logo-slot{ width:110px; flex-basis:110px; }
.hr-row--compact .service-logo-img{ height:48px; max-width:110px; }
.hr-row--compact .btn{ padding:4px 10px; font-size:.875rem; }

/* Баннер активности */
.activity-banner{
  background: #b3ffbe;
  color: #0b1230;
  padding: 10px 16px;
  border-radius: 10px;
}

/* Сетка свойств */
.props-grid .props-block + .props-block{ margin-top: 16px; }
.props-grid .badge.bg-secondary-subtle{
  background: color-mix(in srgb, var(--bs-body-color) 8%, white);
  border: 1px solid var(--card-border);
}

/* На мобилке показываем только первую акцию, остальное скрываем (в компактном режиме) */
@media (max-width: 767.98px){
  .card .promo-item { display: none; }
  .card .promo-item:nth-child(-n+1) { display: block; } /* первая */
}

/* ====== Шапка карточки (улучшения) ====== */

/* «Пилюли» для метрик */
.meta-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.meta-pill {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Ограничиваем «measure» текста и визуально разделяем комментарии */
.comments-stack { max-width: 68ch; }
.comments-stack .comment-item {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* максимум 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  color: var(--bs-body-color);
}
.comments-stack .comment-item + .comment-item {
  border-top: 1px solid var(--card-border);
  margin-top: .5rem;
  padding-top: .5rem;
}

/* На телефонах оставляем только первые два комментария */
@media (max-width: 767.98px){
  .comments-stack .comment-item:nth-child(n+3){ display:none; }
}

/* Небольшой зум логотипа */
.logo-zoom { transition: transform .12s ease; }
@media (hover:hover){
  .logo-zoom:hover { transform: scale(1.03); }
}

/* Делает правую колонку липкой на десктопе */
@media (min-width: 992px){
  .sticky-lg { position: sticky; top: 1rem; }
}

/* ===== Справочная секция: услуги/тарифы/свойства ===== */

/* Чипы-услуги */
.offerings-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.offerings-chips .chip{
  display:inline-flex; align-items:center;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-card-bg));
  font-size: .9rem;
}

/* Карточки тарифов */
.plan-card{ transition: border-color .15s ease, box-shadow .15s ease; }
.plan-card:hover{ border-color: var(--bs-border-color); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.plan-price{ font-size: 1.25rem; font-weight: 700; }

/* Короткие списки-фичей в тарифе */
.mini-list{ list-style: none; padding-left: 0; margin: 0; }
.mini-list li{ display:flex; gap:.4rem; align-items:baseline; }
.mini-list li + li{ margin-top: .25rem; }

/* Свойства: компактная табличка dt/dd */
.features-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.features-list dt{ margin:0; color: var(--muted); font-weight: 500; }
.features-list dd{ margin:0; }

/* Небольшие правки для карточек свойств */
.props-grid .props-block + .props-block{ margin-top: 0; }

/* Активность: светлый баннер всегда тёмным текстом */
.activity-banner{
  background: #b3ffbe !important;
  border: 0 !important;
  color: #0b1230 !important;
}
.activity-banner .text-muted{ color:#0b1230 !important; }

/* Ночная тема: делаем muted/малые тексты более контрастными */
body[data-theme="dark"] .text-muted,
body[data-theme="dark"] small,
body[data-theme="dark"] .small{
  color: #cbd7ff !important; /* светло-голубой на тёмной карточке */
  opacity: 1 !important;     /* не даём Bootstrap снижать непрозрачность */
}

/* Ссылки малого размера внутри карточек — обычный цвет ссылок, не muted */
.hr-card a.small{ color: var(--bs-link-color) !important; }

/* Комментарии: немного “воздуха” и контраста внутри */
.hr-card article.card .card-body { padding: 1rem 1rem; }

/* 10-звёздочная шкала */
.rating-stars{
  display:flex; flex-direction: row-reverse; gap:4px;
}
.rating-stars input{ display:none; }
.rating-stars label{
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
  color: #909dbb; /* серые звезды */
  user-select: none;
}
.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label{
  color: #ffcc3f; /* подсветка активных */  
}

.article-excerpt{ color: var(--bs-body-color); }
@supports (-webkit-line-clamp: 3){
  .article-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

@push('styles')
<style>
.article-body img{ max-width:100%; height:auto; border-radius:.4rem; }
.article-body figure{ margin:1rem 0; }
.article-body blockquote{ border-left:3px solid var(--bs-border-color); padding-left:.75rem; color:var(--muted); }
</style>
@endpush

/* === Медиа внутри статьи: не выходить за контейнер === */
.article-body img,
.article-body figure img,
.article-body video,
.article-body iframe,
.article-body embed {
  max-width: 100% !important;   /* не шире контейнера */
  height: auto !important;      /* сохраняем пропорции */
  display: block;               /* убираем «ступеньку» по базовой линии */
  margin: .5rem 0;              /* чуть воздуха вокруг */
  border-radius: .5rem;         /* опционально: скругления как у карточек */
}

/* Если редактор пихает широкие таблицы — не ломаем разметку */
.article-body table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}
.article-body .table-responsive,
.article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Долгие строки/URL в коде и параграфах */
.article-body,
.article-body pre,
.article-body code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Популярные классы выравнивания от редакторов */
.article-body img.alignleft  { float: left;  margin: .25rem 1rem .5rem 0; }
.article-body img.alignright { float: right; margin: .25rem 0 .5rem 1rem; }
.article-body img.aligncenter { display:block; margin-left:auto; margin-right:auto; float:none; }

.article-body img, .hr-card img {
  max-width: 100%;
  height: auto;
}