/* Shared Guidance / Newsroom pagination — Figma Page component 1461:22176. */
.guidance-page .tutorials .page,
.newsroom-page .page {
  display: flex !important;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 0;
  align-items: center;
  justify-content: center !important;
}

.guidance-page .tutorials .page {
  grid-area: pagination;
  margin: 0;
}

.newsroom-page .page {
  margin: 40px auto 0;
}

.guidance-page .tutorials .container > .row {
  grid-template-areas:
    "articles topics"
    "pagination pagination";
  height: auto;
  row-gap: 40px;
}

/* Keep the Figma minimum section heights, but let an async topic/page update
   grow the document naturally. This is also what lets the footer-aware fixed
   download bar recalculate immediately after the article list changes. */
.guidance-page .tutorials,
.guidance-page .tutorials .context,
.guidance-page .tutorials .context-container {
  height: auto;
}

/* Topic AJAX replaces content above the footer. Disable root scroll anchoring
   on this page so the browser does not silently move the viewport to keep the
   old footer position, which would leave the docked download bar in place. */
html:has(.guidance-page),
body:has(.guidance-page) {
  overflow-anchor: none;
}

.myPagination {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.article-pagination {
  position: static;
  display: flex;
  width: max-content;
  height: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 26px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: "Segoe UI", Arial, sans-serif;
}

.article-pagination button {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.article-pagination__pages {
  display: flex;
  height: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.article-pagination__pages--next {
  animation: pagination-pages-enter-next 180ms ease-out both;
}

.article-pagination__pages--prev {
  animation: pagination-pages-enter-prev 180ms ease-out both;
}

.article-pagination__pages > li {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  list-style: none;
}

.article-pagination__number {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #666;
  background: transparent;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
}

.article-pagination__number:focus-visible {
  color: #7a62f0;
  background: #f8f7fe;
  outline: none;
}

.article-pagination__number.is-active {
  color: #fff;
  background: #9581f3;
}

.article-pagination__arrow {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: #7a62f0;
  background: transparent;
}

.article-pagination__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
}

.article-pagination__arrow:disabled {
  color: #999;
  cursor: default;
  opacity: 1;
}

.article-pagination__arrow:not(:disabled):focus-visible {
  color: #a22bf6;
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .article-pagination__number:hover {
    color: #7a62f0;
    background: #f8f7fe;
  }

  .article-pagination__number.is-active:hover {
    color: #fff;
    background: #9581f3;
  }

  .article-pagination__arrow:not(:disabled):hover {
    color: #a22bf6;
  }
}

.guidance-page .tutorials .context-container,
.newsroom-page .articles {
  transform-origin: center center;
}

.is-page-leaving-next {
  animation: paginated-content-leave-next 140ms ease-in both;
  pointer-events: none;
}

.is-page-leaving-prev {
  animation: paginated-content-leave-prev 140ms ease-in both;
  pointer-events: none;
}

.is-page-entering-next {
  animation: paginated-content-enter-next 220ms ease-out both;
}

.is-page-entering-prev {
  animation: paginated-content-enter-prev 220ms ease-out both;
}

@keyframes pagination-pages-enter-next {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pagination-pages-enter-prev {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes paginated-content-leave-next {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-16px); }
}

@keyframes paginated-content-leave-prev {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(16px); }
}

@keyframes paginated-content-enter-next {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes paginated-content-enter-prev {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .article-pagination__pages--next,
  .article-pagination__pages--prev,
  .is-page-leaving-next,
  .is-page-leaving-prev,
  .is-page-entering-next,
  .is-page-entering-prev {
    animation: none;
  }
}

@media (max-width: 768px) {
  .guidance-page .tutorials .page {
    margin-top: 40px;
  }
}