/* ── Global page layout ───────────────────────────────────────────────────── */

/*
  --panel-w    — ширина панелі пріоритетів
  --panel-side — відступ панелі від правого краю
*/
:root {
  --panel-w:    260px;
  --panel-side: var(--sp-16);
}

/*
  .site-layout — основна зона контенту.
  Правий відступ резервує місце для фіксованої панелі.
*/
.site-layout {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--sp-32) var(--sp-24) var(--sp-64);
  padding-right: calc(var(--panel-w) + var(--panel-side) * 2 + var(--sp-24));
}

/*
  Фіксована панель — завжди видима при скролі.
  top + bottom замість height, щоб JS міг скорегувати нижній край над
  футером. Сам перехід — CSS transition, JS лише пише одне значення.
*/
.priorities-panel {
  position: fixed;
  top: calc(var(--header-h) + var(--sp-32));
  bottom: var(--sp-12);
  right: max(
    var(--panel-side),
    calc((100vw - var(--container-max)) / 2 + var(--panel-side))
  );
  width: var(--panel-w);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-priorities);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;

  /* CSS-анімація підйому над футером: JS змінює bottom, CSS плавно анімує */
  transition: bottom 120ms ease-out;
  will-change: bottom;
}

/* ── 1180px ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root {
    --panel-w:    240px;
    --panel-side: var(--sp-12);
  }
}

/* ── 1023px (tablet/mobile) — панель прихована ──────────────────────────────── */
@media (max-width: 1023px) {
  .site-layout {
    padding: var(--sp-16) var(--sp-16) var(--sp-48);
    padding-right: var(--sp-16);
  }

  .priorities-panel {
    display: none;
  }
}

/* ── Home page inner grid: hero + news + team ─────────────────────────────── */

.home-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
}

.hero-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  min-width: 0;
  min-height: calc(100dvh - var(--header-h) - var(--sp-32) - var(--sp-64));
}

.hero-stack > .hero {
  flex: 1 1 auto;
}

/* ── Адаптив home-grid ─────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .home-grid { gap: var(--sp-32); }
  .hero-stack {
    min-height: 0;
    gap: var(--sp-16);
  }
}

@media (max-width: 480px) {
  .home-grid { gap: var(--sp-24); }
}