/* СТРОЙГОСТ — каталог «Модульные дома». Дополнение к main.css.
   Все классы с префиксом sg-cg- плюс два модификатора карточки
   (.sg-card--soon, .sg-card--empty) — коллизий с main.css нет. */

/* --- Хлебные крошки --------------------------------------- */
.sg-cg-crumbs{background:var(--sg-bg);font-size:13px;color:var(--sg-muted);padding:12px 0;}
.sg-cg-crumbs a{color:var(--sg-green);font-weight:600;text-decoration:none;}
.sg-cg-crumbs a:hover{color:var(--sg-green-dark);text-decoration:underline;}
.sg-cg-crumbs span[aria-hidden]{opacity:.45;padding:0 4px;}

/* --- Шапка раздела ---------------------------------------- */
.sg-cg-lead{max-width:680px;}
.sg-cg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;
  list-style:none;margin:clamp(22px,3vw,32px) 0 0;padding:0;}
.sg-cg-fact{background:var(--sg-tint);border-radius:var(--sg-r);padding:16px 18px;}
.sg-cg-fact b{display:block;font-size:15px;font-weight:800;line-height:1.3;color:var(--sg-green-dark);}
.sg-cg-fact span{display:block;font-size:13px;line-height:1.45;color:var(--sg-muted);margin-top:5px;}

/* --- Сетка проектов ---------------------------------------
   Шесть карточек ложатся в две ровные строки, поэтому три
   колонки на больших экранах, а не четыре, как на главной. */
@media (min-width:1024px){.sg-cards.sg-cg-grid{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1440px){.sg-cards.sg-cg-grid{grid-template-columns:repeat(3,1fr);}}

/* Карточка без готовой страницы: не всплывает под курсором и
   не притворяется ссылкой. Планировку по кнопке смотреть можно. */
.sg-card--soon{cursor:default;}
.sg-card--soon:hover{box-shadow:0 4px 16px rgba(20,30,22,.07);transform:none;}
/* Не кнопка, а пометка: убираем зелёную заливку, иначе выглядит
   кликабельной и текст тонет в зелёном. */
.sg-card__ctatext.sg-cg-soon,
.sg-card:hover .sg-card__ctatext.sg-cg-soon{background:transparent;border:1.5px dashed var(--sg-line);
  color:var(--sg-muted);font-size:13px;font-weight:700;padding:10px 14px;min-height:0;white-space:nowrap;}

/* Пустой слот под будущий проект */
.sg-card--empty{box-shadow:none;border:1px dashed var(--sg-line);background:transparent;}
.sg-card--empty:hover{box-shadow:none;}
.sg-card--empty .sg-card__media{background:transparent;}

/* --- Общая сноска ------------------------------------------ */
.sg-cg-note{max-width:820px;margin:clamp(20px,2.6vw,30px) 0 0;font-size:14.5px;line-height:1.6;color:var(--sg-muted);}
.sg-cg-note--dark{color:#bcd6ac;}
.sg-section--dark .sg-cg-note a{color:var(--sg-lime-head);}

/* --- Чекбокс «Сравнить» на карточке ----------------------
   Лежит поверх .sg-card__link, иначе ссылка карточки
   перехватывает клик и галка не ставится. */
.sg-cg-pick{position:relative;z-index:2;display:flex;align-items:center;gap:9px;
  padding:0 clamp(14px,1.6vw,18px) 14px;margin-top:-4px;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--sg-muted);user-select:none;}
.sg-cg-pick input{width:18px;height:18px;flex:none;accent-color:var(--sg-green);cursor:pointer;margin:0;}
.sg-cg-pick:hover span{color:var(--sg-green);}
.sg-card:has(.sg-cg-pick input:checked){box-shadow:0 0 0 2px var(--sg-green),0 14px 32px rgba(47,125,62,.18);}
.sg-cg-pick input:checked + span{color:var(--sg-green);}

/* --- Панель «в сравнении N из 6» -------------------------- */
.sg-cg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  background:var(--sg-green-dark);color:#fff;border-radius:var(--sg-r);
  padding:12px 18px;margin-bottom:14px;}
.sg-cg-bar[hidden]{display:none;}
.sg-cg-bar__t{font-size:14.5px;font-weight:700;}
.sg-cg-bar__t b{color:var(--sg-lime-head);}
.sg-cg-bar__btn{margin-left:auto;background:transparent;border:1.5px solid rgba(255,255,255,.5);
  color:#fff;border-radius:var(--sg-r-pill);padding:8px 18px;font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;}
.sg-cg-bar__btn:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.sg-cg-hint{font-size:13.5px;line-height:1.5;color:var(--sg-muted);margin:0 0 14px;}
.sg-cg-hint[hidden]{display:none;}
.sg-cg-empty{margin:14px 0 0;font-size:14.5px;color:var(--sg-muted);}
.sg-cg-empty[hidden]{display:none;}

/* --- Таблица сравнения -------------------------------------
   Проекты идут строками: таблица растёт вниз, а не вбок,
   поэтому переживёт и пятнадцать домов. На узком экране едет
   вбок, столбец с названием проекта липкий. */
.sg-cg-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--sg-card);border-radius:var(--sg-r-lg);box-shadow:0 4px 16px rgba(20,30,22,.07);}
.sg-cg-tbl{width:100%;min-width:900px;border-collapse:collapse;font-size:14.5px;}
.sg-cg-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sg-cg-tbl th,.sg-cg-tbl td{padding:14px 16px;text-align:left;vertical-align:top;line-height:1.4;
  border-bottom:1px solid var(--sg-line);}
.sg-cg-tbl thead th{background:var(--sg-green-dark);color:#fff;font-size:13.5px;font-weight:800;
  letter-spacing:-.1px;border-bottom:0;white-space:nowrap;}
.sg-cg-tbl thead th:first-child{position:sticky;left:0;z-index:3;background:var(--sg-green-dark);}
.sg-cg-tbl tbody th{background:var(--sg-card);position:sticky;left:0;z-index:1;
  min-width:190px;box-shadow:1px 0 0 var(--sg-line);}
.sg-cg-tbl tbody th b{display:block;font-size:16px;font-weight:800;color:var(--sg-green-dark);letter-spacing:-.2px;}
.sg-cg-tbl tbody th span{display:block;font-size:12.5px;font-weight:600;color:var(--sg-muted);margin-top:3px;}
.sg-cg-tbl tbody tr:nth-child(even) th,
.sg-cg-tbl tbody tr:nth-child(even) td{background:#fafaf8;}
.sg-cg-tbl tbody tr:last-child th,.sg-cg-tbl tbody tr:last-child td{border-bottom:0;}
.sg-cg-tbl tbody tr[hidden]{display:none;}
.sg-cg-tbl__price{font-size:16px;font-weight:900;color:var(--sg-ink);white-space:nowrap;}

/* --- Базовая комплектация ---------------------------------- */
.sg-cg-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:2px 32px;
  list-style:none;margin:0;padding:0;}
.sg-cg-kit__i{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:14px;row-gap:2px;
  align-items:start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.sg-cg-kit__i::before{content:"";grid-column:1;grid-row:1 / span 2;width:20px;height:20px;margin-top:1px;
  border-radius:50%;background:var(--sg-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.6' fill='none' stroke='%2311340f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;}
.sg-cg-kit__i b{grid-column:2;font-size:15px;font-weight:800;line-height:1.3;}
.sg-cg-kit__i span{grid-column:2;font-size:13.5px;line-height:1.45;color:#bcd6ac;}

@media (max-width:768px){
  /* На узком экране появляется кнопка планировки в правом верхнем
     углу и наезжает на метку. Отодвигаем метки от неё. */
  .sg-cg-grid .sg-card__flags{right:62px;}
}
@media (max-width:560px){
  .sg-cg-fact{padding:14px 16px;}
  .sg-cg-tbl th,.sg-cg-tbl td{padding:12px 14px;}
  .sg-cg-tbl tbody th{min-width:150px;}
  .sg-cg-bar__btn{margin-left:0;}
}

/* Шаблон Aspro вешает на любой <li> свою чёрточку-маркер
   (::before 11×1px). Нашим плашкам она не нужна. */
.sg-cg-facts li::before,
.sg-cg-fact::before{content:none !important;display:none !important;}

/* --- Блок «нужен свой размер» -------------------------------
   Была серая сноска под таблицей — стала заметная плашка
   с кнопкой: это отдельное предложение, а не примечание. */
.sg-cg-custom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 24px;margin:clamp(22px,3vw,32px) 0 0;padding:20px 24px;
  background:var(--sg-tint);border:1px solid var(--sg-line);border-radius:var(--sg-r);}
.sg-cg-custom__text{flex:1 1 320px;min-width:0;}
.sg-cg-custom__t{margin:0;font-size:17px;font-weight:800;line-height:1.3;color:var(--sg-green-dark);}
.sg-cg-custom__d{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--sg-muted);}
.sg-cg-custom__btn{flex:0 0 auto;white-space:nowrap;}
@media (max-width:640px){
  .sg-cg-custom{padding:18px;}
  .sg-cg-custom__btn{width:100%;justify-content:center;}
}