/* assets/css/site.css */
:root{
  --app-bg: #f6f7fb;
  --app-border: rgba(0,0,0,.12);
}

body { background: var(--app-bg); }

.app-topbar { background: #fff; position: sticky; top: 0; z-index: 1000; }
.app-topbar-divider { border-bottom: 1px solid var(--app-border); }

.app-footer { background: #fff; border-top: 1px solid var(--app-border); }

.page-shell{
  background:#fff;
  border:1px solid var(--app-border);
  border-radius:16px;
  overflow:hidden;
}

.tools-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.tools-badges .badge{
  white-space:normal;
  text-align:left;
}

/* Типографика для rich text блоков на главной */
.home-rich, .case-rich { color: #2b2f36; }
.home-rich p, .case-rich p { margin: 0 0 .5rem 0; }
.home-rich ul, .case-rich ul { margin: 0 0 .5rem 0; padding-left: 1.25rem; }
.home-rich li, .case-rich li { margin: 0 0 .25rem 0; }

/* Если Directus вдруг отдаст заголовки — делаем их "нормального" размера в карточках */
.home-rich h1,.home-rich h2,.home-rich h3,.home-rich h4,.home-rich h5,.home-rich h6{
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}

/* На всякий случай — чтобы в "Сильных сторонах" не было гигантского текста */
#home_strengths_content, #home_stakeholders_content, #home_product_content, #home_process_content{
  font-size: .98rem;
  line-height: 1.45;
}
/* === FIX: шире контент + комфортные боковые отступы === */

/* 1) Увеличиваем рабочую ширину контейнера */
.container-portfolio{
  max-width: 1560px;      /* было 1440px */
  padding-left: 24px;     /* чтобы текст/блоки не липли к краям */
  padding-right: 24px;
}

/* 2) Расширяем сам белый блок с контентом */
.page-shell{
  max-width: 1560px;      /* было 1240px */
  padding: 40px;          /* было 32px */
}

/* 3) На телефонах — чуть меньше отступы */
@media (max-width: 576px){
  .container-portfolio{
    padding-left: 16px;
    padding-right: 16px;
  }
  .page-shell{
    padding: 20px;
  }
}
/* ===== FIX: закрепить header/footer и не прятать контент под ними ===== */

body.has-chrome{
  padding-top: var(--chrome-header-h, 72px);
  padding-bottom: var(--chrome-footer-h, 72px);
}

/* закрепляем шапку сверху */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;

  background: rgba(248,249,250,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

/* закрепляем футер снизу */
.site-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;

  background: rgba(248,249,250,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 18px rgba(16,24,40,.06);
}

.site-footer a{
  text-decoration: none;
}
.site-footer a:hover{
  text-decoration: underline;
}
/* footer как на скрине: одна строка, спокойный фон, точечные разделители */
.site-footer{
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

.site-footer .footer-line{
  font-size: 14px;
  color: #6b7280;              /* серый как в примере */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer .footer-line a{
  color: #0d6efd;
  text-decoration: none;
}

.site-footer .footer-line a:hover{
  text-decoration: underline;
}

/* на узких экранах разрешаем перенос */
@media (max-width: 576px){
  .site-footer .footer-line{
    white-space: normal;
  }
}
/* ===== Rich content (артефакты/кейсы): картинки, видео, iframe ===== */
.prose img,
.case-rich img,
.artifact-rich img{
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin: .75rem 0;
}

.prose video,
.case-rich video,
.artifact-rich video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
  margin: .75rem 0;
}

.prose iframe,
.case-rich iframe,
.artifact-rich iframe{
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.site-footer{
  background:#fff;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

.site-footer .footer-line{
  font-size: 14px;
  color:#6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer .footer-line a{
  color:#0d6efd;
  text-decoration:none;
}
.site-footer .footer-line a:hover{ text-decoration: underline; }

@media (max-width: 576px){
  .site-footer .footer-line{ white-space: normal; }
}
/* Footer line like: © Name · email · @tg · HH · phone */
.footer{
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background: rgba(248,249,250,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 0;
}
.footer a{
  text-decoration: none;
}
.footer a:hover{
  text-decoration: underline;
}
.footer-sep{
  color:#9aa0ab;
  margin: 0 .25rem;
}