/* ═══════════════════════════════════════════════════════════
   Layout: header, header search, language switcher, footer
   ═══════════════════════════════════════════════════════════ */

/* ── Header: the Team portal's glass (64px, rgba(15,16,17,.64) + the design system's thick
   blur, 32 — its scale is 8/16/24/32/48/64) with rounded
   bottom corners — a panel laid over the page, not a strip across it; the content scrolls
   by under the corners. The outline follows the curve. ── */
.site-header {
  /* Every control in the header is this tall: search, language, Platform. */
  --control-h: 40px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 990;
  height: var(--header-height);
  background: rgba(15, 16, 17, 0.64);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--header-radius) var(--header-radius);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 20px;
}

/* AMCH × Blog — as AMCH × Team. On a phone too narrow for the whole lockup (it depends
   on the language: "プラットフォーム" is twice "Platform"), "× Blog" wraps onto a second
   line that the fixed height clips, so only the AMCH mark is left. */
.logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 40px var(--sp-2); /* the row gap pushes a wrapped "× Blog" past the clip */
  flex: 0 1 auto;
  min-width: 0;
  /* One 20px line plus room for the descender of "g". */
  height: 28px;
  padding-block: 4px;
  overflow: hidden;
}
.logo-svg { flex-shrink: 0; width: auto; height: 20px; color: var(--text); }
.logo-suffix { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.logo-times { margin: 0 var(--sp-1); font-size: 20px; line-height: var(--lh-20); color: var(--border-strong); }
.logo-product {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh-20);
  letter-spacing: -0.025em;
  color: var(--text);
}

/* No menu: home is the logo, categories are the chips on the page. */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
/* The toggle only: the close button inside the field is an .icon-btn too, sized by itself. */
.header-search__toggle { width: var(--control-h); height: var(--control-h); }
.header-platform { height: var(--control-h); }
.header-platform .icon { width: 16px; height: 16px; }

/* ── Header search: the button itself stretches into the field ──
   The field is positioned on .header-inner from the end side, and the controller
   animates two numbers: --hs-end (gap to the row's end) and --hs-width. Closed, they
   are the button's own box, so the field covers it pixel for pixel; open, the end
   stays and the start edge travels toward the logo, carrying the magnifier with it.
   Closing is a fade (.is-closing): the field, still looking open, dissolves where it
   stands while the button fades in under it. It used to shrink back into the button,
   and however its last frame was dressed, the hand-over to the button showed — a dark
   box turning grey under the pointer's hover, one magnifier laid over another. */
.header-search { position: static; }
/* No button while the field is open (visibility: hidden — out of the tab order too).
   While it fades out the button only fades in: it must take focus, as Esc moves it
   there. The field's cross stands where the button's magnifier does, so the two take
   turns instead of crossing: the cross leaves in the first 100ms (easing in, as an exit),
   the button comes in over the other 100 and ends with the field, at 200. The transition
   lists .icon-btn's own as well, or this one would drop them. */
.header-search.is-open:not(.is-closing) .header-search__toggle { visibility: hidden; }
.header-search.is-visible .header-search__toggle { opacity: 0; }
.header-search.is-closing .header-search__toggle {
  opacity: 1;
  transition: opacity var(--dur-1) var(--ease) var(--dur-1), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.header-search.is-closing .header-search__close {
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-exit), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.header-search__field {
  position: absolute;
  z-index: 2;
  top: calc(50% - var(--control-h) / 2);
  inset-inline-end: var(--hs-end, 0px);
  width: var(--hs-width, var(--control-h));
  visibility: hidden;
  transition: width var(--dur-3) var(--ease-morph), inset-inline-end var(--dur-3) var(--ease-morph),
              opacity var(--dur-2) var(--ease-morph);
}
.header-search.is-visible .header-search__field { visibility: visible; }
/* The pointer goes through the fading field: the button under it is hovered from the
   start, so its hover fill comes in with it instead of popping up once the field is gone
   (a click there reopens the field — the button's own action). */
.header-search.is-closing .header-search__field {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-exit);
}
.header-search.is-instant .header-search__field { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .header-search__field { transition: none; }
}
.header-search__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--control-h);
  overflow: hidden;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  transition: background var(--dur-3) var(--ease-morph), border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.header-search.is-open .header-search__bar { background: var(--surface-sunken); }
.header-search__bar:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

/* The leading magnifier only arrives once the field has opened, so it never slides
   over the one in the button; on closing it leaves first. */
.header-search__glyph {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: calc(var(--control-h) - 2px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-1) var(--ease-exit), transform var(--dur-1) var(--ease-exit);
}
.header-search__glyph .icon { width: 20px; height: 20px; }
.header-search.is-open .header-search__glyph {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-2) var(--ease) var(--dur-2), transform var(--dur-2) var(--ease) var(--dur-2);
}

.header-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  /* Room for the leading magnifier and the close button laid over the edges. A margin,
     not the bar's padding: at the closed 40px the bar would have to grow to fit padding,
     while an overflowing margin is simply clipped. */
  margin-inline: calc(var(--control-h) - 2px);
  /* 16px: anything smaller makes iOS zoom the page on focus. */
  font-size: var(--text-base);
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-exit);
}
.header-search.is-open .header-search__input { opacity: 1; transition: opacity var(--dur-2) var(--ease) var(--dur-1); }
.header-search__input::placeholder { color: var(--text-tertiary); }

/* The close button covers the toggle's magnifier exactly (same centre: 1px border + 3px
   inset + half of control-h − 8 = half of control-h). Its two glyphs morph: closed, it
   shows the magnifier, so the field takes over from the button seamlessly; open, the
   magnifier turns away and the cross turns in. */
.header-search__close {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: calc(var(--control-h) - 8px);
  height: calc(var(--control-h) - 8px);
  border-color: transparent;
}
.header-search__morph {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity var(--dur-2) var(--ease-morph), transform var(--dur-2) var(--ease-morph);
}
.icon-btn .header-search__morph { width: 20px; height: 20px; }
.header-search__morph--close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.header-search.is-open .header-search__morph--search { opacity: 0; transform: rotate(90deg) scale(0.5); }
.header-search.is-open .header-search__morph--close { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .header-search__morph { transition-duration: 1ms; }
}

.header-search__results {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  max-height: min(480px, calc(100vh - var(--header-height) - 24px));
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Only the list scrolls; the footer below it is always in view. */
.header-search__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
@starting-style {
  .header-search__results { opacity: 0; transform: translateY(-4px); }
}
/* Closing: the suggestions fade first, then the field shrinks back into the button. */
.header-search:not(.is-open) .header-search__results {
  opacity: 0;
  transform: translateY(-4px);
  transition-duration: var(--dur-1);
  transition-timing-function: var(--ease-exit);
}
.header-search__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  transition: background var(--dur-1) var(--ease);
}
.header-search__title {
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.header-search__title mark { color: var(--accent); background: none; }
.header-search__meta { font-size: var(--text-xs); line-height: var(--lh-16); color: var(--text-tertiary); }
.header-search__footer {
  flex: none;
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--border);
}
/* Nested corners: the panel's 12px less its 4px padding gives the 8px of --r-xs. */
.header-search__all {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-3);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text);
  border-radius: var(--r-xs);
  transition: background var(--dur-1) var(--ease);
}
.header-search__all-label { flex: 1; }
.header-search__count {
  padding: 2px var(--sp-2);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--tint);
  border: 1px solid rgba(29, 226, 39, 0.2);
  border-radius: var(--r-xs);
}
.header-search__all-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  transition: translate var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.header-search__item.is-active, .header-search__all.is-active { background: var(--accent-subtle); }
.header-search__all.is-active .header-search__all-arrow { color: var(--accent); translate: 2px 0; }
[dir="rtl"] .header-search__all.is-active .header-search__all-arrow { translate: -2px 0; }
@media (hover: hover) {
  .header-search__item:hover, .header-search__all:hover { background: var(--accent-subtle); }
  .header-search__all:hover .header-search__all-arrow { color: var(--accent); translate: 2px 0; }
  [dir="rtl"] .header-search__all:hover .header-search__all-arrow { translate: -2px 0; }
}
.header-search__empty { padding: var(--sp-3); font-size: var(--text-sm); line-height: var(--lh-20); color: var(--text-tertiary); }

/* ── Language switcher ── */
.lang-dropdown { position: relative; }
/* A neutral control, like .icon-btn: same height, outline, corners and hover. */
.lang-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: var(--control-h, 40px);
  height: var(--control-h, 40px);
  padding: 0 12px;
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .lang-dropdown-btn:hover { color: var(--text); background: var(--surface); }
}
.lang-dropdown-btn svg { opacity: 0.5; }
.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 999;
  min-width: 180px;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  scrollbar-width: thin;
}
.lang-dropdown-menu.open { display: block; }
.lang-dropdown-item {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-size: 13px;
  line-height: var(--lh-20);
  color: var(--text-secondary);
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
@media (hover: hover) {
  .lang-dropdown-item:hover { color: var(--text); background: var(--accent-subtle); }
}
.lang-dropdown-item.active { color: var(--accent); font-weight: 700; pointer-events: none; }

/* ── Phones: everything stays in one row, every control 36px. The language button
   drops the flag and arrow; the open search field covers the whole row. ── */
@media (max-width: 900px) {
  .site-header { --control-h: 36px; }
  .header-inner { gap: 8px; }
  .logo, .logo-suffix { column-gap: var(--sp-1); }
  .logo-times { margin: 0; }
  /* One text size for both text controls, small enough to keep "× Blog" on a 390px phone. */
  .lang-dropdown-btn, .header-platform { font-size: 13px; }
  .lang-dropdown-btn { padding: 0 var(--sp-2); }
  .lang-dropdown-flag, .lang-dropdown-chevron { display: none; }
  .header-platform { padding: 0 var(--sp-3); }
  .header-platform .icon { display: none; }
}
@media (max-width: 400px) {
  .logo { height: 24px; }
  .logo-svg { height: 16px; }
  .logo-times, .logo-product { font-size: 16px; line-height: var(--lh-16); }
}

/* ── Footer, by folder: the brand and its channels, the categories, «Company» and «App»
   (Admin → Footer Links), the legal documents; then the risk disclosure as small print and
   the copyright. Sections part by space, not lines. ── */
.site-footer {
  --footer-gap: var(--sp-8); /* between the columns */
  margin-top: var(--sp-20);
  padding: var(--sp-16) 0 var(--sp-8);
  background: linear-gradient(180deg, rgba(20, 22, 24, 0) 0%, rgba(20, 22, 24, 0.85) 100%);
  border-top: 1px solid var(--border);
}
/* The columns are as wide as their content and the space between them is shared out
   evenly, the last one on the container's end (space-between). Equal tracks left uneven
   gaps: a full «Правовая информация» ran into «Приложение», whose two buttons left the
   end of their track empty. Every column fits on one line (the widest, «Политика
   конфиденциальности», is 208px); the gap is at least --footer-gap. Narrower than 1280
   the brand takes a row of its own above the four; from 1024 they go two by two. */
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-10) var(--footer-gap);
}
.footer-grid > * { flex: none; }
.footer-brand .logo-svg { height: 20px; }
.footer-desc {
  max-width: 320px;
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
}
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer-col-title {
  margin-bottom: var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a {
  font-size: var(--text-sm);
  line-height: var(--lh-20);
  color: var(--text-secondary);
  transition: color var(--dur-1) var(--ease);
}
/* The app's buttons — stores and the web version — share the widest one's width, their
   marks on one vertical line. */
.footer-col ul:has(.store-btn) { width: fit-content; align-items: stretch; }
.footer-col .store-btn { justify-content: flex-start; width: 100%; color: var(--text); }
@media (hover: hover) {
  .footer-col a:hover { color: var(--accent); }
  .footer-col .store-btn:hover { color: var(--text); }
}

/* The risk disclosure: small print, always open — a legal text behind a toggle reads as
   something to hide — and one paragraph across the whole width, as on the platform's
   site (in two columns it read as two texts). */
.footer-disclaimer {
  margin-top: var(--sp-12);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  color: var(--text-tertiary);
}
.footer-disclaimer p + p { margin-top: var(--sp-2); }
.footer-disclaimer strong { color: var(--text-secondary); font-weight: 700; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-8);
  font-size: var(--text-xs);
  line-height: var(--lh-16);
  color: var(--text-tertiary);
}

@media (max-width: 1279px) {
  .footer-brand { flex-basis: 100%; }
}
@media (max-width: 1024px) {
  .site-footer { --footer-gap: var(--sp-6); }
  .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-8); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { margin-top: var(--sp-16); padding-top: var(--sp-12); }
  /* Its long names would wrap in half a phone's width, its title out of line with the
     neighbour's: the legal column takes the whole row. */
  .footer-col--legal { grid-column: 1 / -1; }
}