/* VGD — внутренняя страница сайта: зелёная подшапка и белая карточка
   на сером фоне (образец — /tree/privacyfilter.php).

   Вынесено из site.css отдельным файлом, чтобы этот же вид можно было
   подключить там, где общие стили страниц сайта не нужны — в разделе /docs/
   с чужой вёрсткой. Правится здесь — меняется везде. */


/* ---------- Subheader banner (optional, under .vgd-header) ----------
   Old-device safe: plain block layout (no flex / grid), system
   fonts, no transitions. Renders on iOS 9 / Android 5 era browsers
   the same as on current desktops.  */
.vgd-subheader {
  background: #2d584a;
  color: #fff;
  padding: 16px 18px 28px;
  text-align: center;
}

.vgd-subheader-inner {
  max-width: 980px; /* как у модификаторов gedcom/tables/match — единая ширина */
  margin: 0 auto;
}

.vgd-subheader-title {
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
}

.vgd-subheader-title a {
  color: #fff;
  text-decoration: none;
}

.vgd-subheader-title a:hover { text-decoration: underline; }

.vgd-subheader-sub {
  /* Значения = модификаторам тройки (.vgd-subheader-gedcom/-tables/-match):
     иначе древа/поиск, живущие на общем классе, были на 2px ниже и жирнее —
     шапка «прыгала» между сервисами. 10.09.2026. */
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

.vgd-subheader-meta,
.vgd-subheader-descr {
  margin: 8px auto 0;
  max-width: 900px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.vgd-subheader-meta a,
.vgd-subheader-descr a {
  color: #d6fff2;
  text-decoration: underline;
}

.vgd-subheader-meta a:hover,
.vgd-subheader-descr a:hover { color: #fff; }

@media (max-width: 640px) {

.vgd-subheader { padding: 14px 14px 22px; }

.vgd-subheader-title { font-size: 22px; }

.vgd-subheader-sub { font-size: 15px; }
}

/* ---------- Internal document-style pages (gedcom.vgd.ru-style central card)
   Reusable layout for narrow text/document pages: light-gray page background
   with a centered white card. Apply .vgd-internal-page to <body> and
   .vgd-internal-card to the page's main container.

   Sizing model mirrors gedcom.vgd.ru .maindiv:
     Desktop: content max-width 780px + padding 60px + 1px border on each side
              => visual outer width 902px. With the global box-sizing: border-box,
              we set max-width to 902px so the *outer* box is 902px while the
              content area resolves to 902 - 120 - 2 = 780px (matches reference).
     Mobile (<940px): max-width 700px, padding 40px 20px, top/bottom margin 0.

   Page-specific typography/list styles (e.g. body.stones-history-page) layer
   on top without redefining the card shell. */
body.vgd-internal-page { background: #ededed; }

.vgd-internal-card {
  /* Ширину считаем вместе с полями и рамкой: на страницах сайта так делает
     общий сброс, а в разделе /docs/ его нет — без этой строки карточка
     выходила 1024px вместо 902px. */
  box-sizing: border-box;
  max-width: 902px;
  margin: 40px auto;
  padding: 60px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  box-shadow: none;
  color: #454545;
  font-family: Arial, Helvetica, sans-serif;
  word-break: break-word;
}

@media (max-width: 939px) {

.vgd-internal-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 40px 20px;
  }
}


/* На телефоне карточка занимает весь экран: серой полосы вокруг нет,
   рамка не нужна — фон страницы становится белым. */
@media (max-width: 939px) {
  body.vgd-internal-page { background: #ffffff; }
  .vgd-internal-card { border: 0; }
}