/* ==========================================================================
   ABTB 2026 — the standing pages: content pages, Контакты, site search,
   404 and the site map.

   Hand-written, like the gallery and news stylesheets. Loaded together with
   abtb-2026-news.css, which is where the prose reset for a wysiwyg body lives
   (.news-article-body, shared here through .page-body) and where the
   .article-head / .article-layout / .article-rail shell comes from. This file
   only adds what those pages need on top.
   ========================================================================== */

/* The content pages reuse the article shell, so they inherit its measure and
   its rail. All that differs is what goes in the rail. */
.page-body > *:first-child { margin-top: 0; }
.page-empty { color: var(--ink-faint); font-style: italic; }

.rail-nav { display: flex; flex-direction: column; width: 100%; }
.rail-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  transition: color .18s ease;
}
.rail-nav a:first-child { padding-top: 4px; }
.rail-nav a:last-child { border-bottom: 0; }
.rail-nav a svg { width: 14px; height: 14px; opacity: .4; flex-shrink: 0; transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .18s ease; }
.rail-nav a:hover { color: var(--accent); }
.rail-nav a:hover svg { opacity: 1; transform: translateX(3px); }


/* ==========================================================================
   КОНТАКТЫ
   ========================================================================== */

.contacts-layout { max-width: 1120px; display: grid; gap: clamp(28px, 4vw, 56px); }
/* the card leads on desktop: a visitor on this page came for the phone number,
   not for the paragraph explaining which address to use */
@media (min-width: 900px) {
  .contacts-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
}

.contacts-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
@media (min-width: 900px) { .contacts-card { position: sticky; top: 104px; } }

.contact-block { display: flex; flex-direction: column; gap: 5px; }
.contact-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-value { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; }
a.contact-value { transition: color .18s ease; }
a.contact-value:hover { color: var(--accent); }
.contact-value.big {
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.contact-social { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-social a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  transition: color .18s ease, border-color .18s ease;
}
.contact-social a:hover { color: var(--accent); border-color: var(--accent); }

/* the prose column on this page is not an article: it may be nothing but a
   list of addresses, so it does not need an article's measure */
.contacts-body { max-width: 62ch; }
/* With the map lifted out, a body holding nothing else must not leave a column
   of empty space beside the card. :empty alone does not catch it (whitespace
   counts as content), so the script also sets [hidden] and flags the layout. */
.contacts-body:empty { display: none; }
.contacts-layout.is-card-only { grid-template-columns: minmax(0, 460px); }

/* Full-width home for the map the script lifts out of the prose. Collapses to
   nothing on a page that has no map, so the empty slot costs no space. */
.contacts-map { max-width: 1120px; margin-top: clamp(28px, 4vw, 48px); }
.contacts-map:empty { display: none; }
.contacts-map .map-embed { margin: 0; aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .contacts-map .map-embed { aspect-ratio: 4 / 3; } }

/* Click-to-load map. The Yandex widget in the page body is several hundred
   kilobytes and sets its own cookies; the facade defers both until someone
   actually wants the map. Built by abtb-2026-pages.js from the iframe that is
   already in the CMS content, so nothing has to change in the CMS. */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 28px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--line) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, var(--line) 27px 28px),
    var(--paper);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed-open {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.map-embed-open svg { width: 30px; height: 30px; color: var(--accent); }
.map-embed-open span {
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .18s ease, color .18s ease;
}
.map-embed-open:hover span { border-color: var(--accent); color: var(--accent); }
.map-embed-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }


/* ==========================================================================
   ПОИСК
   ========================================================================== */

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 0 8px 0 18px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-form svg { width: 20px; height: 20px; color: var(--ink-faint); flex-shrink: 0; }
.search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16.5px;
  color: var(--ink);
  outline: none;
}
.search-form button {
  flex-shrink: 0;
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 100px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s ease;
}
.search-form button:hover { filter: brightness(1.12); }
.search-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.search-results { max-width: 1120px; padding-bottom: clamp(48px, 8vw, 90px); }
.search-count { font-size: 13.5px; color: var(--ink-soft); margin: clamp(24px, 3vw, 34px) 0 20px; }
.search-count strong { color: var(--accent); font-weight: 700; }

.search-list { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }

.search-hit {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
.search-hit:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 34px -22px var(--glow, rgba(10,17,40,.22));
  transform: translateY(-1px);
}
.search-hit:focus-within { border-color: var(--accent); }
.search-hit-type {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 9px;
  border-radius: 100px;
}
.search-hit-title { font-size: 18.5px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
/* The whole card is clickable, but the snippet stays outside the anchor: it is
   CMS HTML, and markup inside a link is what shattered the news cards. */
.search-hit-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.search-hit-title a { transition: color .18s ease; }
.search-hit:hover .search-hit-title a { color: var(--accent); }
.search-hit-title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.search-hit-snippet {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-hit-snippet p { margin: 0; }
.search-hit-snippet b { color: var(--ink); font-weight: 700; }

.search-empty { padding: clamp(24px, 4vw, 40px) 0; max-width: 720px; }
.search-empty p { margin: 0 0 12px; color: var(--ink); font-size: 17px; }
.search-hint { color: var(--ink-soft) !important; font-size: 15px !important; }

/* What an empty search shows instead of four nav links: example queries that
   really return hits, the real project sections, and the way to the full map. */
.search-suggest { display: flex; flex-direction: column; gap: 8px; margin-top: clamp(18px, 3vw, 26px); }
.search-suggest .rail-label { margin-top: 14px; }
.search-suggest .rail-label:first-child { margin-top: 0; }

.search-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.search-examples a {
  padding: 8px 15px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}
.search-examples a::before { content: '«'; opacity: .5; }
.search-examples a::after { content: '»'; opacity: .5; }
.search-examples a:hover { background: var(--accent); color: var(--on-accent); }
.search-examples a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.search-sitemap-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color .18s ease;
}
.search-sitemap-link svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.search-sitemap-link:hover { color: var(--accent); }
.search-sitemap-link:hover svg { transform: translateX(4px); }

.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
.search-empty > .quick-links { margin-top: 18px; }
.quick-links a {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.quick-links a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }


/* ==========================================================================
   404 / КАРТА САЙТА
   ========================================================================== */

.status-head { padding-top: clamp(40px, 8vw, 90px); }
.status-code {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(72px, 16vw, 168px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
  opacity: .16;
  margin-bottom: -.12em;
}

.sitemap-section { max-width: 1120px; padding: clamp(32px, 5vw, 56px) 0 clamp(48px, 8vw, 90px); }
.sitemap-heading {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0 0 20px;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

/* Three levels, three treatments. 109 links in one nested list is technically a
   site map and practically a wall; see the note in the XSLT. */
.sitemap-groups { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }

.sitemap-group-title {
  margin: 0 0 clamp(14px, 2vw, 20px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: -.01em;
}
.sitemap-group-title a { color: var(--ink); transition: color .18s ease; }
.sitemap-group-title a:hover { color: var(--accent); }

/* a top-level page with nothing under it (Главная) is a line, not a block */
.sitemap-group.is-single .sitemap-group-title {
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 0;
}

.sitemap-branches {
  display: grid;
  gap: clamp(12px, 1.8vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
}

.sitemap-branch {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sitemap-branch:hover { border-color: var(--accent); box-shadow: 0 14px 30px -22px var(--glow, rgba(10,17,40,.22)); }

.sitemap-branch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  color: var(--ink);
  transition: color .18s ease;
}
.sitemap-branch-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.sitemap-branch-head:hover { color: var(--accent); }
.sitemap-branch-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.sitemap-n {
  flex-shrink: 0;
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* <details>, so the whole map stays on one page without being a wall, and the
   copy at the foot of the 404 does not bury the error message */
.sitemap-leaves { border-top: 1px solid var(--line); }
.sitemap-leaves > summary {
  padding: 10px 17px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .18s ease, background .18s ease;
}
.sitemap-leaves > summary::-webkit-details-marker { display: none; }
.sitemap-leaves > summary::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s ease;
}
.sitemap-leaves[open] > summary::before { transform: rotate(-135deg) translateY(-1px); }
.sitemap-leaves > summary:hover { color: var(--accent); background: var(--accent-soft); }
.sitemap-leaves > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.sitemap-leaves ul { list-style: none; margin: 0; padding: 2px 17px 14px; }
.sitemap-leaves ul ul { padding: 0 0 0 14px; border-left: 1px solid var(--line); margin-top: 4px; }
.sitemap-leaves li { margin: 0; }
.sitemap-leaves a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color .18s ease;
}
.sitemap-leaves a:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .sitemap-branch, .sitemap-leaves > summary::before { transition: none; }
}


/* ==========================================================================
   ГЛАВНАЯ

   Typographic hero on purpose: page 1 carries no header_pic in the CMS, and a
   home page whose largest paint is a line of text rather than a 2MB photograph
   is the faster page anyway. The photography starts one screen down, where it
   lazy-loads.
   ========================================================================== */

.home { padding-bottom: clamp(56px, 9vw, 110px); }

/* Same width as the card grids below it, so the headline starts on the same
   vertical line as the first card. The measure is held by the text elements
   themselves (18ch on the title, 58ch on the lead), not by narrowing the
   container — narrowing it indented the whole hero 73px against the grid. */
.home-hero {
  padding-top: clamp(44px, 8vw, 104px);
  padding-bottom: clamp(32px, 5vw, 56px);
}
.home-eyebrow {
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-title {
  margin: 0;
  max-width: 18ch;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(38px, 6.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.home-lead {
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  max-width: 58ch;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vw, 36px); }
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: filter .15s ease, transform .15s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding: clamp(24px, 3vw, 32px) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.home-stats li { display: flex; flex-direction: column; gap: 4px; }
.stat-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--ink-soft); max-width: 18ch; }

.home-figure { max-width: 1360px; margin-bottom: clamp(30px, 5vw, 60px); }
.home-figure img {
  width: 100%;
  height: auto;
  max-height: min(66vh, 620px);
  object-fit: cover;
  border-radius: 18px;
  background: var(--paper);
}

.home-block { max-width: 1360px; padding-top: clamp(34px, 5vw, 64px); }
.home-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.home-block-head h2 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.home-block-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.home-block-more svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.home-block-more:hover svg { transform: translateX(4px); }

.home-contact { max-width: 1360px; padding-top: clamp(44px, 7vw, 88px); }
/* --surface, not --paper: measured in both themes, --paper resolves to the same
   colour as the page background, which left this band separated by a hairline
   border and nothing else. --surface is the card colour used everywhere else. */
.home-contact-inner {
  padding: clamp(32px, 5vw, 64px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.home-contact-inner h2 {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.home-contact-inner p { margin: 12px 0 0; color: var(--ink-soft); font-size: 16.5px; }
.home-contact-inner .home-actions { justify-content: center; }