/* App shell + layout. Multi-page: pages compose from shared partials (sidebar,
   footer) and pick a layout. Visuals inherit the DS base from .liga-root. */

body {

}

* {
  box-sizing: border-box;
}

/* Висота шапки сайту (.site-header, position: fixed). Береться з core.css:
   79px, а при низькому вікні (max-height: 860px) шапка стискається до 56px —
   від неї відштовхуються відступ сторінки, верх сайдбару і scroll-margin.
   Те саме значення, що й у блогу (blog-base.css, .blog-scope). */
:root {
  --site-header-h: 79px;
}

@media (max-height: 860px) {
  :root {
    --site-header-h: 56px;
  }
}

/* Base page layout — full width. */
.layout {
  display: block;
  min-height: 100dvh;
}

/* Dossier-style layout: 246px sidebar + fluid main (Figma 3675:324637). */
.layout--with-sidebar {
  display: grid;
  grid-template-columns: 246px 1fr;
  padding-top: var(--site-header-h);
}

/* .sidebar is position:fixed (below), which takes it out of grid flow entirely —
   pin .main to the second track explicitly so it doesn't collapse into the
   246px column that the (now out-of-flow) sidebar used to occupy. */
.layout--with-sidebar .main {
  grid-column: 2;
}

.sidebar {
  position: fixed;
  top: var(--site-header-h);
  left: 0;
  width: 246px;
  /* Мінус шапка сайту: з 100dvh низ сайдбару виходив за екран,
     і останні пункти (Імпорт-експорт, Історія) було не догорнути. */
  height: calc(100dvh - var(--site-header-h));
  overflow-y: auto;
  background: var(--color-neutral-solid-100);
  border-right: 1px solid var(--color-primary-200);
}

/* Main column (Figma 3811:185690): top chrome bands are full-bleed, widgets
   get 40px side padding inside .page-content. */
.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 40px 40px;
  background: var(--color-primary-100);
}

/* 2-column block (Figma "2 column"): main content left + 500px rail right. */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  gap: 20px;
  align-items: start;
}

.two-equals-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.two-col > .rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Ліворуч під профілем — медіа, праворуч стовпець (рейка компанії / індикатори
   ФОП) на обидва рядки. Другий рядок 1fr: надлишок висоти правого стовпця
   забирає він, а не рядок профілю, тож медіа стоїть упритул під профілем. */
.two-col {
  grid-template-rows: auto 1fr;
}

.two-col > .media {
  grid-column: 1;
  grid-row: 2;
}

.two-col > .rail,
.two-col > .rail-ind {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 1100px) {
  .two-col {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .two-col > .media,
  .two-col > .rail,
  .two-col > .rail-ind {
    grid-column: auto;
    grid-row: auto;
  }
}

.site-footer {
  border-top: 1px solid var(--color-primary-200);
}

/* .sidebar is position:fixed and sits outside normal flow, so it would
   otherwise float on top of the footer too (footer is a sibling of
   .layout--with-sidebar, rendered after it in _Layout.cshtml). Shrink the
   footer to start after the sidebar's width on pages that have one. */
.layout--with-sidebar ~ .site-footer {
  margin-left: 246px;
}

/* Same for the two blocks _Layout renders between the layout and the footer:
   the SEO text from the registry (.sxt) and the FAQ. Both are siblings of
   .layout--with-sidebar too, so without an offset they run the full width of
   the body and slide under the sidebar. .faq keeps its own gutter
   (faq.css: margin), so here the sidebar width is added on top of it — and
   because that gutter shrinks at 1024, the sum has to follow. */
.layout--with-sidebar ~ .sxt {
  margin-left: 246px;
}

.layout--with-sidebar ~ .faq {
  margin-left: calc(246px + var(--container-pad));
}

@media (max-width: 1024px) {
  .layout--with-sidebar ~ .faq {
    margin-left: calc(246px + var(--container-pad-1024));
  }

  .page-content {
    padding: 24px 20px 20px;
  }
}

/* Кнопка «Розгорнути / згорнути меню» (Figma 3474:112032 / 3474:113026).
   До 1024 не потрібна — сайдбар стоїть завжди. */
.sidebar-toggle {
  display: none;
}

/* ≤1024 (і до найвужчих екранів): сайдбар ховається за лівий край, контент
   займає всю ширину. Кругла кнопка внизу ліворуч висуває меню (Figma
   3519:222089) поверх контенту і сама їде праворуч від нього. Стан тримає
   .is-open на .sidebar і aria-expanded на кнопці (company-detail.js). */
@media (max-width: 1024px) {
  .layout--with-sidebar {
    grid-template-columns: 1fr;
  }

  .layout--with-sidebar .main {
    grid-column: 1;
  }

  /* visibility з затримкою — щоб закрите меню не ловило Tab, але виїзд
     встигав догратися. */
  .sidebar {
    z-index: 40;
    background: var(--cntnr-bg-primary-default);
    scrollbar-width: thin;
    scrollbar-color: var(--cntnr-border-default) transparent;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, visibility 0s linear 220ms;
  }

  .sidebar.is-open {
    transform: none;
    visibility: visible;
    box-shadow: 8px 0 24px rgba(37, 37, 42, 0.12);
    transition: transform 220ms ease, box-shadow 220ms ease, visibility 0s;
  }

  /* Пункти меню — як у макеті висувного сайдбару: пігулки 40px. */
  .sidebar .toc {
    padding: 16px 8px 16px 4px;
  }

  .sidebar .toc__list {
    gap: 4px;
    padding: 12px 0;
  }

  .sidebar .toc__row {
    height: 40px;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10000px;
  }

  .sidebar .toc__row.is-active {
    background: var(--cntnr-bg-primary-active);
  }

  .sidebar-toggle {
    position: fixed;
    left: 16px;
    bottom: 20px;
    z-index: 41;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--btn-border-secondary);
    border-radius: 10000px;
    background: var(--cntnr-bg-primary-default);
    color: var(--text-default);
    cursor: pointer;
    transition: left 220ms ease, background-color 120ms ease, border-color 120ms ease;
  }

  .sidebar-toggle:hover {
    border-color: var(--cntnr-border-selected);
  }

  .sidebar-toggle:focus-visible {
    outline: 2px solid var(--cntnr-border-selected);
    outline-offset: 2px;
  }

  /* Відкрито: праворуч від меню, лавандовий фон, фіолетова іконка. */
  .sidebar-toggle[aria-expanded="true"] {
    left: calc(246px + 16px);
    background: var(--cntnr-bg-primary-active);
    border-color: var(--cntnr-border-selected);
    color: var(--icon-active);
  }

  /* Через .sidebar-toggle — інакше .ic (нижче у файлі) повертає inline-block. */
  .sidebar-toggle .sidebar-toggle__icon--close,
  .sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--open {
    display: none;
  }

  .sidebar-toggle[aria-expanded="true"] .sidebar-toggle__icon--close {
    display: inline-block;
  }

  .layout--with-sidebar ~ .site-footer,
  .layout--with-sidebar ~ .sxt {
    margin-left: 0;
  }

  .layout--with-sidebar ~ .faq {
    margin-left: var(--container-pad-1024);
  }
}

/* З 768 faq.css перемикає власний відступ на --container-pad-768. */
@media (max-width: 768px) {
  .layout--with-sidebar ~ .faq {
    margin-left: var(--container-pad-768);
  }
}

/* TOC anchor navigation: smooth scroll + offset so widgets clear the top edge.
   Шапка сайту (.site-header) — position: fixed, --site-header-h, тож відступ має
   включати її висоту: з самими 20px шапка віджета ховалась під нею і
   здавалось, що прокрутило «до контенту». */
html {
  scroll-behavior: smooth;
}

.page-content [id],
.two-col [id],
.profile__sec[id] {
  scroll-margin-top: calc(var(--site-header-h) + 20px);
}

.breadcrumb-wrapper {
    padding: 0 32px;
    background: var(--color-primary-100);
}

.widget {
    background: var(--color-neutral-solid-100);
    border: 1px solid var(--color-primary-200);
    border-radius: 16px;
    /*  overflow: hidden;*/
}

.widget__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--color-neutral-solid-200) 50%, transparent);
  border-bottom: 1px solid var(--color-primary-200);
}

.widget__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
  color: var(--color-primary-600);
}

.widget__title {
  margin: 0;
  overflow: hidden;
color: var(--text-default);
text-overflow: ellipsis;
}

.widget__header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ── Шапка віджета: перенос через flex-wrap ─────────────────────────────────
   Рядок 1: ліворуч .widget__header-main («іконка, назва, Info» одним блоком),
   праворуч стрілка. Що не влазить (дата, таби, кнопки —
   .widget__header-actions, мета профілю) — переноситься на наступний рядок
   звичайним flex-wrap. Сам .widget__header-main не розпадається: довга назва
   переноситься всередині нього, іконка й Info лишаються поруч.
   Якщо поруч зі стрілкою (остання .btn--icon у .widget__header-actions) є
   інші дії, виносимо її з потоку в правий верхній кут і резервуємо під неї
   padding-right: вона в розмітці остання, тож інакше flex-wrap переносив би
   її разом з рештою дій. Коли стрілка в діях одна — переносити нічого, вона
   лишається в потоці (і по центру шапки, як у дизайні).
   !important на wrap — бо per-widget правила (.licenses .widget__header,
   .pep .pep__actions …) мають ту саму специфічність і вантажаться пізніше. */
.widget__header {
  position: relative;
  flex-wrap: wrap !important;
  row-gap: 8px;
}

.widget__header:has(> .widget__header-actions > .btn--icon:last-child:not(:only-child)) {
  padding-right: calc(16px + 40px + 8px); /* відступ + стрілка + gap */
}

.widget__header > .widget__header-actions > .btn--icon:last-child:not(:only-child) {
  position: absolute;
  top: 28px; /* padding-top 8px + половина рядка 40px */
  right: 16px;
  transform: translateY(-50%);
}

/* «Іконка, назва, Info» — одне ціле. margin-right: auto тримає решту (дії,
   мету) праворуч, поки вона влазить в один рядок, а коли решта перенеслась —
   відступ лишається в першому рядку, і вона починається з лівого краю
   (margin-left: auto на самій решті тримав би її праворуч і на другому). */
.widget__header-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}

/* Стрілка в діях одна — переносити нічого, тож блок забирає весь рядок:
   інакше довга назва зносила б стрілку на другий рядок. */
.widget__header:has(> .widget__header-actions > .btn--icon:only-child) > .widget__header-main {
  flex: 1 1 0;
}

.widget__header-main > * {
  flex: none;
}

/* Назва (чи блок «назва + підзаголовок» у rail-віджетах) стискається й
   переноситься всередині блока, решта — фіксованої ширини. */
.widget__header-main > [class*="__titles"] {
  flex: 0 1 auto;
  min-width: 0;
}

/* Назва переноситься по словах; слово, що саме не влазить (на телефоні,
   напр. «декларування»), ділиться по складах з дефісом (hyphens: auto,
   <html lang="uk">), а якщо словника переносів нема — будь-де. */
.widget__header-main > .widget__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Вирівнювання — по першому рядку висотою 40px (як стрілка): коли назва
   переноситься на 2–3 рядки, іконка, Info і стрілка лишаються на рівні
   першого рядка назви, а не з'їжджають у центр блока. Відступи —
   (40px − висота елемента) / 2. */
.widget__header-main {
  align-items: flex-start;
}

.widget__header-main > .widget__header-icon {
  margin-block: 4px; /* 32px */
}

.widget__header-main > .widget__title {
  margin-block: 9px; /* line-height 22px */
}

/* ≤768 назви віджетів переносяться в кілька рядків — кегль трохи менший. */
@media (max-width: 768px) {
  .widget__title {
    font-size: 16px;
    line-height: 20px;
  }

  .widget__header-main > .widget__title {
    margin-block: 10px; /* line-height 20px */
  }
}

.widget__header-main > button {
  margin-top: 8px; /* Info 24px */
}

.widget__header-main > .btn--sm {
  margin-top: 4px; /* Info 32px */
}

.widget__header-main > .badge {
  margin-top: 5px; /* 30px */
}

/* rail-віджети й засновані компанії: блок «назва + підзаголовок» і одна
   стрілка в потоці — тут усе центрується по висоті шапки, як у дизайні. */
.widget__header-main:has(> [class*="__titles"]) {
  align-items: center;
}

.widget__header-main:has(> [class*="__titles"]) > .widget__header-icon {
  margin-block: 0;
}

/* Дії переносяться й самі, якщо не влазять навіть окремим рядком. */
.widget__header > .widget__header-actions {
  flex-wrap: wrap !important;
  flex-shrink: 1; /* .ownership__header-actions ставить 0 — на телефоні вилазило */
  min-width: 0;
  max-width: 100%;
}

.widget__header .tabs {
  flex-wrap: wrap;
}

/* Дата в діях («Актуально на дату…») на вузькій шапці переноситься, а не
   вилазить за край (.pep__date, .procurement__date … мають nowrap). */
.widget__header > .widget__header-actions > [class*="__date"] {
  white-space: normal;
  min-width: 0;
}

.widget__body {
  padding: 16px;
}

/* Закриті (заблюрені) віджети, вузько: кнопка «Замовити тестовий доступ»
   у nowrap ширша за віджет і розпирала весь оверлей — заголовок і текст
   вилазили за край разом з нею. Менший кегль і відступи кнопки, а якщо й так
   не влазить — текст кнопки переноситься. Оверлеї: .teaser-lock (спільний),
   .xxx__locked (per-widget), .profile__lock-overlay. */
@media (max-width: 600px) {
  .widget :is([class*="__locked"], .teaser-lock, .profile__lock-overlay) .uiKit--button {
    --uiKit-btn-font: 12px;
    --uiKit-btn-pad: 12px;
    max-width: 100%;
    height: auto;
    min-height: var(--uiKit-btn-h);
    white-space: normal;
    text-align: center;
  }
}

/* Diagonal-hatch "закрашування" mask — masks a single gated value inline
   (Figma "Опрацьовано індикатори…" rows etc.): lavender diagonal stripes on a pill. */
.mask-hatch {
  position: relative;
  display: inline-block;
  border-radius: 8px;
  background-image: repeating-linear-gradient(-60deg,
      var(--color-primary-300) 0 9px,
      var(--color-primary-200) 9px 18px);
}

/* Gated hover (every masked value): lock reveals + "Доступно в комерційній версії LIGA360®" tooltip. */
.mask-hatch::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  background: var(--icon-accent);
  -webkit-mask: url('/assets/icons/Lock.svg') center / contain no-repeat;
  mask: url('/assets/icons/Lock.svg') center / contain no-repeat;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
}

.mask-hatch::before {
  content: "Доступно в комерційній версії LIGA360®";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-neutral-solid-100);
  border: 1px solid var(--color-primary-200);
  box-shadow: 0 6px 20px rgba(15, 0, 166, 0.10);
  color: var(--text-default);
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 20;
}

.mask-hatch:hover::after,
.mask-hatch:hover::before {
  opacity: 1;
}

/* Підказка кнопки «і» в шапці віджета: текст — з data-info-tip, вигляд — як у
   підказки закритого значення (.mask-hatch::before), але з переносом рядків. */
[data-info-tip] {
  position: relative;
}

[data-info-tip]::after {
  content: attr(data-info-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-neutral-solid-100);
  border: 1px solid var(--color-primary-200);
  box-shadow: 0 6px 20px rgba(15, 0, 166, 0.10);
  color: var(--text-default);
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 20;
}

[data-info-tip]:hover::after,
[data-info-tip]:focus-visible::after {
  opacity: 1;
}

/* Вузько: «і» стоїть праворуч від назви, і плашка по центру кнопки вилазила за
   край екрана. Прив'язуємо її до віджета — над ним, на всю його ширину з
   відступами. */
@media (max-width: 600px) {
  .widget:has([data-info-tip]) {
    position: relative;
  }

  .widget [data-info-tip] {
    position: static;
  }

  .widget [data-info-tip]::after {
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
  }
}

/* ---- Button (matches ld-button: pill radius via --btn-corner-corner) ---- */
/*.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  height: 40px;*/
  /* lg */
  /*padding: var(--space-100) var(--space-300);
  border: 1px solid transparent;
  border-radius: var(--btn-corner-corner);
  font: inherit;
  font-weight: 700;*/
  /* ld-button: 700 all sizes */
  /*cursor: pointer;
  white-space: nowrap;
  transition: background-color 300ms var(--liga-ease-out, ease-out), color 200ms ease, border-color 200ms ease;
}*/

/* primary (ld-button--primary): black default → purple on hover, white text */
/*.btn--primary,*/
/*.btn--dark {
  background: var(--btn-bg-primary-default);
  color: var(--text-alternative);
}*/

.btn--primary:hover,
.btn--dark:hover {
  background: var(--btn-bg-primary-hover);
}

.btn--primary:active,
.btn--dark:active {
  background: var(--btn-bg-primary-click-pressed);
}

/* secondary (ld-button--secondary): white + primary border → purple fill on hover */
.btn--secondary {
  background: var(--btn-bg-secondary-default);
  border-color: var(--btn-bg-secondary-border-default);
  /* DS: secondary label + icon are dark by default (#25252a), not purple */
  color: var(--text-default);
}

.btn--secondary:hover {
  background: var(--btn-bg-secondary-hover);
  border-color: var(--btn-bg-secondary-hover);
  color: var(--text-alternative);
}

.btn--secondary:active {
  background: var(--btn-bg-secondary-click-pressed);
  border-color: var(--btn-bg-secondary-click-pressed);
  color: var(--text-alternative);
}

/* transparent (ld-button--transparent): text button, subtle hover fill */
.btn--transparent {
  background: transparent;
  color: var(--text-default);
}

.btn--transparent:hover {
  background: var(--cntnr-bg-third-hover);
  color: var(--text-hover);
}

.btn--sm {
  height: 32px;
  gap: var(--space-050);
  padding: var(--space-050) var(--space-200);
}

/* Icon-only button — square box + pill radius = circle (matches ld-icon-button) */
.btn--icon {
  width: 40px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 32px;
}

/* ---- Tabs (matches ld-tabs, pill variant) ---- */
.tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
}

.tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-075);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.15px;
  color: var(--text-subtle);
  white-space: nowrap;
  border-radius: var(--tabs-corner-tabs-corner);
  padding: var(--space-100) var(--space-200);
  transition: background-color 160ms ease, color 160ms ease;
}

.tab--sm {
  font-size: 13px;
  padding: var(--space-075) var(--space-150);
}

.tab:hover:not(.is-active) {
  background: var(--color-primary-100);
  color: var(--text-default);
}

.tab.is-active {
  background: var(--btn-bg-primary-active);
  color: var(--text-alternative);
}

.tab:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Закрита вкладка (із замком) — у Судах, ПЕП, Закупівлях, Медіа та інших
   віджетах. Раніше правило було скопійоване в pep.css і procurement.css. */
.tab--locked {
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Закрита вкладка, що відкриває попап LIGA360, — клікабельна, не «заборонена». */
.tab--locked[data-popup-target] {
  cursor: pointer;
}

.tab--locked:hover {
  background: transparent;
  color: var(--text-disabled);
}

.tab--locked .ic {
  color: var(--text-disabled);
}

/* ---- Badge / tag (matches ld-badge / ld-tag) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 500;
}

.badge--primary {
  background: var(--color-primary-100);
  color: var(--color-primary-600);
}

/* ---- Avatar (initials circle — matches ld-avatar size=sm) ---- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-500);
  color: var(--color-neutral-solid-100);
  font-size: 11px;
  font-weight: 700;
  flex: none;
  text-transform: uppercase;
}

/* ── Locked-teaser (reusable, DS-exact 2026-07-06): real filter:blur gate + exported
   flowers + 56px lavender lock + dark uppercase CTA. Used by gated main-column widgets.
   Put `widget--teaser` on the section; wrap gated content in `.teaser-gate`; drop in
   the `.teaser-lock` overlay. Widget-specific copy/icon/gate-region stay in the partial. */
.widget--teaser>.widget__header .widget__header-icon {
  background: none;
  border: 0;
  color: var(--text-default);
}

.widget__date {
  color: var(--color-neutral-solid-600);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .widget__date {
    display: none;
  }
}

.teaser-body {
  position: relative;
  overflow: hidden;
}

/* Закриті блоки віджетів: під оверлеєм із замком — картинка з макета
   (.locked-shot, assets/img/locked), а не розмітка з демо-даними — текст під
   блюром лишався в HTML і міг потрапити в індекс.
   Картинка й оверлей лежать в одній клітинці гріда (.locked-stack), тому висоту
   блока задає більший із них: на десктопі — картинка, на телефоні — оверлей із
   текстом і кнопкою, який раніше абсолютним позиціюванням вилазив би за блок і
   обрізався overflow. container-type — щоб висоту картинки рахувати від ширини
   самого блока (cqw). */
.locked-stack.locked-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  container-type: inline-size;
  min-height: 0;
}

.locked-stack.locked-stack > * {
  grid-area: 1 / 1;
}

.locked-stack.locked-stack > :not(.locked-shot) {
  position: relative;
  inset: auto;
  height: auto;
}

/* Розміри картинки — у розмітці, без одиниць: --shot-w і --shot-h (натуральні
   пікселі експорту з макета).
   Висота — за пропорціями картинки на ширину блока, але не більша за її
   натуральну висоту. Картинка вписується за шириною й притиснута догори:
   якщо оверлей вищий за неї (короткі таблиці — Банкрутство, Виконавчі), під
   даними лишається порожньо, як і в макеті, а не роздутий у півтора раза блюр.
   Картинки з макета чіткі — блюр і прозорість, як у старого .teaser-gate. */
.locked-shot {
  align-self: stretch;
  min-height: min(calc(var(--shot-h) * 1px), calc(100cqw * var(--shot-h) / var(--shot-w)));
  background: left top / 100% auto no-repeat;
  filter: blur(3px);
  opacity: 0.55;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Саму картинку (--shot) вмикає company-detail.js, коли блок підходить до
   екрана (.is-near). Картинок під замками ~3 МБ, а CSS-фон браузер вантажить
   одразу для всієї сторінки, навіть для блоків у самому низу. */
.locked-shot.is-near {
  background-image: var(--shot);
}

@container (max-width: 420px) {
  .locked-shot {
    background-size: cover;
  }
}

.locked-shot--baked {
  filter: none;
  opacity: 1;
}

.teaser-gate {
  filter: blur(3px);
  opacity: 0.55;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Оверлей замка — один на всі закриті віджети досьє (Фінанси, Суди, ПЕП,
   Податки, Банкрутство, Виконавчі, Структура власності…). Віджет не копіює ці
   правила, а лише підлаштовує їх: ширину тексту — --teaser-lock-w, відступ між
   рядками — --teaser-lock-gap, решту — точковим правилом у своєму CSS. */
.teaser-lock {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 46%,
      color-mix(in srgb, var(--color-neutral-solid-100) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-neutral-solid-100) 76%, transparent) 62%,
      color-mix(in srgb, var(--color-neutral-solid-100) 50%, transparent) 100%);
}

/* Матове скло замість градієнта: рівна напівпрозора підкладка + блюр того, що
   під нею (у ПЕП, податкових блоках і структурі власності). Той самий вигляд —
   у рамки закритих «Контактів» і «Кількості працівників» у профілі. */
.teaser-lock--frosted,
.profile__locked {
  background: color-mix(in srgb, var(--color-neutral-solid-100) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.teaser-lock__flowers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.teaser-lock__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--teaser-lock-gap, 16px);
  max-width: var(--teaser-lock-w, 640px);
  text-align: center;
}

.teaser-lock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--color-primary-100);
  color: var(--color-primary-500);
}

.teaser-lock__icon .ic {
  width: 28px;
  height: 28px;
}

.teaser-lock__title {
  margin: 0;
  color: var(--text-default);
}

.teaser-lock__text {
  margin: 0;
  max-width: var(--teaser-lock-w, 640px);
  color: var(--color-neutral-solid-800);
}

.ic {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.ic--sm {
  width: 16px;
  height: 16px;
}

.ic--md {
  width: 20px;
  height: 20px;
}

.ic--lg {
  width: 24px;
  height: 24px;
}

.ic--xl {
  width: 32px;
  height: 32px;
}