/* ===============================================================
   TRAFFORD — ЕДИНАЯ СИСТЕМА ВЁРСТКИ
   ---------------------------------------------------------------
   Один слой правил для всех страниц вместо разнобоя в 29 файлах.
   Задаёт: ширину контейнера, сетки карточек, защиту от переполнения
   и одинаковое поведение на всех разрешениях.

   Подключается ПОСЛЕ страничных стилей, но ДО mobile.css.
   =============================================================== */

/* ------------------------------------------------ ничего не вылезает */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ max-width:100%; overflow-x:hidden; }

img, video, svg, canvas, iframe, table, pre{ max-width:100%; }
img, video{ height:auto; }

/* длинные строки (email со скриптами, ключи API) не рвут вёрстку */
td, th, p, li, dd, .hf-body p, .seo-lead,
.crm-card p, .ip-card p, .agency-card p{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* --------------------------------------------------- контейнер страниц */
.layout,
.shell,
main.content,
.rules-page,
.support-page{
  width:100%;
  max-width:1360px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(16px,4vw,54px);
  padding-right:clamp(16px,4vw,54px);
}
.layout > .content{ padding-left:0; padding-right:0; max-width:100%; }

/* ===============================================================
   ЕДИНАЯ СЕТКА КАРТОЧЕК
   Все модульные сетки приводятся к одному поведению.
   =============================================================== */
.agency-grid,
.dev-grid,
.ip-benefits,
.crm-grid,
.orders-grid,
.cards-grid,
.pay-grid,
.products-grid,
.geo-grid,
.enterprise-columns,
.leads-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  align-items:stretch;
  width:100%;
}

/* карточка внутри сетки — одинаковая для всех модулей */
.agency-card,
.dev-card,
.ip-card,
.crm-card,
.order-card,
.product-card,
.pay-card,
.country-card,
.lead-card{
  display:flex;
  flex-direction:column;
  min-width:0;                 /* иначе содержимое растягивает колонку */
  width:auto;
  max-width:none;
  background:var(--t-card,#fff);
  border:1px solid var(--t-line,#E8EAEE);
  border-radius:18px;
  padding:20px;
  overflow:hidden;
}

/* кнопка карточки всегда внизу и не обрезается */
.agency-card > a[class*="btn"],
.agency-card > button,
.dev-card > a[class*="btn"],
.dev-card > button,
.crm-card > a[class*="btn"],
.crm-card > button,
.product-card > a[class*="btn"],
.product-card > button{
  margin-top:auto;
  width:100%;
  justify-content:center;
  flex-shrink:0;
}

/* ------------------------------------------------------ выпадающие списки */
select{
  max-width:100%;
  text-overflow:ellipsis;
}

/* ------------------------------------------------------------- таблицы */
.table-scroll,
.crm-main table,
.content table{
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===============================================================
   ПЛАНШЕТ
   =============================================================== */
@media(max-width:1100px){
  .agency-grid, .dev-grid, .ip-benefits, .crm-grid,
  .orders-grid, .cards-grid, .pay-grid, .products-grid,
  .geo-grid, .enterprise-columns, .leads-grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Мобильные правила вынесены в mobile.css — там единая система. */