/* static/styles.css  (FULL UPDATED)
   Цель: убрать “рамки-рамки-рамки”, убрать сильные округления, сделать компактнее,
   оставить только мягкие тени и понятную иерархию.
*/

/* =========================================================
   0) TOKENS
   ========================================================= */
:root{
  --bg: #eef3f8;
  --surface: #ffffff;
  --surface2: #f7fbff;

  --text: #0b1b2b;
  --muted: rgba(11,27,43,.62);

  --accent: #0b5bd3;
  --accent2:#0a4fb9;
  --accentSoft: rgba(11,91,211,.10);

  --shadow1: 0 10px 30px rgba(2,20,60,.10);
  --shadow2: 0 6px 18px rgba(2,20,60,.08);

  --lineSoft: rgba(2,20,60,.08);

  /* ВАЖНО: “убрать округления” */
  --radius: 0px;

  /* ВАЖНО: “убрать лишние отступы” */
  --padCard: 14px;
  --padHead: 12px;
  --gap: 14px;
}


.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: #005199;
}


/* =========================================================
   1) BASE
   ========================================================= */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(11,91,211,.09) 0, transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(11,91,211,.07) 0, transparent 55%),
    var(--bg);
  color: var(--text);
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent2); }

.container{ max-width: 1180px; }

/* маленькая утилита: единый “блок с тенью”, без рамок и без округлений */
.ui-shadow-block{
  background: var(--surface);
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow1);
}

/* ссылки в шапках карточек */
.links-light{
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.links-light:hover{ color: var(--accent2); }

/* =========================================================
   2) MEGA MENU (категории на всю ширину, без лишних рамок)
   ========================================================= */
.mega-wrap{ padding-top: 10px !important; padding-bottom: 10px !important; }

.mega-top{
  padding: 10px;
}

/* ВАЖНО: растянуть кнопки равномерно на всю ширину */
.mega-top-row{
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: space-between;
}

/* каждый пункт занимает равную долю */
.mega-item{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* кнопка: без рамок, без сильной “капсулы”, компактнее */
.mega-btn{
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  padding: 0 12px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface2), var(--surface));

  cursor: pointer;

  color: var(--text);
  font-weight: 700;
  letter-spacing: .2px;
}

.mega-btn:hover{
  background: linear-gradient(180deg, #ffffff, #f4f9ff);
}

/* подсветка выбранной/открытой */
.mega-btn.is-active,
.mega-item.open .mega-btn{
  background: linear-gradient(180deg, rgba(11,91,211,.14), rgba(11,91,211,.06));
  box-shadow: 0 0 0 2px rgba(11,91,211,.22), var(--shadow2);
}

.mega-ico{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border-radius: var(--radius);
  flex: 0 0 auto;
}

.mega-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.mega-chev{
  color: rgba(11,27,43,.55);
  flex: 0 0 auto;
}

/* DROPDOWN: без рамки, только тень, и чтобы реально было видно */
.mega-drop{
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 2000;

  width: 520px;              /* базовая ширина */
  max-width: 92vw;           /* на маленьких экранах */
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow1);

  display: none;
  padding: 12px;
}

/* открытие */
.mega-item.open .mega-drop{ display: block; }

/* шапка дропа */
.mega-drop-head{
  padding: 0 0 10px 0;
  margin: 0 0 10px 0;
  border-bottom: 1px solid var(--lineSoft);
}
.mega-drop-title{
  font-weight: 800;
  font-size: 15px;
}
.mega-drop-desc{
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* грид карточек материалов */
.mega-drop-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.mega-card{
  display: block;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 14px rgba(2,20,60,.07);
  color: var(--text);
}

.mega-card:hover{
  box-shadow: 0 10px 22px rgba(2,20,60,.10);
  transform: translateY(-1px);
}

.mega-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mega-card-badge{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--accent);
  background: rgba(11,91,211,.10);
  padding: 4px 8px;
  border-radius: var(--radius);
}

.mega-card-ico{
  color: rgba(11,27,43,.55);
}

.mega-card-title{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.mega-card-lead{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
  margin-bottom: 8px;
}

.mega-card-more{
  font-size: 12.5px;
  font-weight: 800;
  color: var(--accent);
}

/* пусто */
.mega-empty{
  padding: 10px;
  background: rgba(2,20,60,.03);
  color: var(--muted);
}

/* адаптив дропа */
@media (max-width: 900px){
  .mega-top-row{ flex-wrap: wrap; }
  .mega-item{ flex: 1 1 220px; }
  .mega-drop{
    width: 100%;
    left: 0;
  }
  .mega-drop-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   3) HOME GRID (как на твоём скелете)
   ========================================================= */
.home-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gap);
  align-items: start;
}

.home-left{
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--gap);
}

/* карточка секции: без рамок, компактные отступы, ровные углы */
.home-card{
  background: var(--surface);
  border: none !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow1);
  overflow: hidden;
}

/* шапка карточки */
.home-card-head{
  padding: var(--padHead) var(--padCard);
  background: linear-gradient(180deg, rgba(11,91,211,.08), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  border-bottom: 1px solid var(--lineSoft);
}

.home-card-title{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-card-title i{ color: var(--accent); }

.home-card-body{
  padding: var(--padCard);
}

/* =========================================================
   4) FEEDS (НОВОСТИ/ОБЪЯВЛЕНИЯ) — убрать лишние рамки/пустоты
   ========================================================= */
.feed-list{
  display: grid;
  gap: 10px;
}

/* элемент ленты: без рамки, только мягкая тень */
.feed-item{
  display: block;
  padding: 10px 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 14px rgba(2,20,60,.07);
  color: var(--text);
}

.feed-item:hover{
  box-shadow: 0 10px 22px rgba(2,20,60,.10);
  transform: translateY(-1px);
}

.feed-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.feed-badge{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .35px;
  color: var(--accent);
  background: rgba(11,91,211,.10);
  padding: 4px 8px;
  border-radius: var(--radius);
}

.feed-date{
  font-size: 12px;
  color: rgba(11,27,43,.60);
  white-space: nowrap;
}

.feed-title{
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 4px;
}

.feed-lead{
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.35;
}

.feed-empty{
  padding: 12px;
  background: rgba(2,20,60,.03);
  color: var(--muted);
}

/* =========================================================
   5) ROTATOR (справа) — без “обводок”, крупнее текст, компактнее
   ========================================================= */
.rotator-wrap .home-card-body{ padding: 0; }

.rotator-stage{
  position: relative;
  min-height: 260px;
  padding: var(--padCard);
}

/* item */
.rot-item{
  display: none;
}
.rot-item.active{
  display: block;
}

/* заголовок и текст внутри ротатора */
.rot-title{
  font-size: 22px;
  font-weight: 950;
  line-height: 1.12;
  margin: 10px 0 10px 0;
}

.rot-text{
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0 0 14px 0;
}

/* кнопка */
.rot-actions{ margin-top: 6px; }

.rot-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  background: rgba(11,91,211,.10);
  color: var(--accent);
  font-weight: 900;

  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 14px rgba(2,20,60,.07);
}

.rot-btn:hover{
  background: rgba(11,91,211,.14);
}

/* dots */
.rot-dots{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.rot-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px; /* точки можно оставить круглыми — это не “карточки” */
  border: none;
  background: rgba(11,27,43,.18);
  cursor: pointer;
  padding: 0;
}
.rot-dot.active{
  background: var(--accent);
}

/* =========================================================
   6) ADAPTIVE
   ========================================================= */
@media (max-width: 980px){
  .home-grid{ grid-template-columns: 1fr; }
  .rot-title{ font-size: 18px; }
  .rotator-stage{ min-height: 220px; }
}

@media (max-width: 520px){
  :root{
    --padCard: 12px;
    --padHead: 10px;
    --gap: 12px;
  }
  .mega-btn{ height: 50px; }
}

/* =========================================================
   7) “убрать лишние bootstrap-рамки”, если где-то остались
   (безопасные overrides)
   ========================================================= */
.card, .border, .border-start, .border-end, .border-top, .border-bottom{
  border: none !important;
}
.rounded, .rounded-2, .rounded-3, .rounded-4, .rounded-5{
  border-radius: var(--radius) !important;
}