/* SERPIFAI Insights Editorial True Center V1.6.4
   CSS-first centering: wide figures are centered on the article-column center,
   which is the center line of the three-column editorial grid.
   No scroll-time measurements or horizontal JS transforms are used. */

.ri2-article-layout {
  position: relative;
}

.ri2-article {
  min-width: 0;
  overflow: visible;
}

.ri2-toc,
.ri2-side-note {
  z-index: 2;
  transition:
    opacity .24s ease,
    transform .32s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear 0s;
}

.ri2-side-note {
  max-height: calc(100vh - 124px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* One shared selector list for every current and legacy in-article visual. */
.ri2-article > .ri3-article-visual,
.ri2-article > .ri4-article-visual,
.ri2-article > .ri-article-showcase,
.ri2-article > .ri-article-visual,
.ri2-article > figure[class*="article-visual"],
.ri2-article > figure[class*="article-showcase"] {
  position: relative !important;
  z-index: 4;
  max-width: none !important;
  overflow: hidden;
  isolation: isolate;
}

.ri2-article > .ri3-article-visual img,
.ri2-article > .ri4-article-visual img,
.ri2-article > .ri-article-showcase img,
.ri2-article > .ri-article-visual img,
.ri2-article > figure[class*="article-visual"] img,
.ri2-article > figure[class*="article-showcase"] img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (min-width: 1181px) {
  .ri2-shell.ri2-article-layout {
    width: min(calc(100% - 56px), 1500px);
    grid-template-columns:
      minmax(200px, 240px)
      minmax(0, 780px)
      minmax(200px, 240px);
    column-gap: clamp(32px, 3vw, 50px);
    justify-content: center;
    align-items: start;
  }

  /* True centering rule.
     The article column is the center track of the page grid. Moving the figure
     to 50% of that track and translating by half its own width centers it
     precisely without viewport arithmetic or layout-shifting JavaScript. */
  .ri2-article > .ri3-article-visual,
  .ri2-article > .ri4-article-visual,
  .ri2-article > .ri-article-showcase,
  .ri2-article > .ri-article-visual,
  .ri2-article > figure[class*="article-visual"],
  .ri2-article > figure[class*="article-showcase"] {
    width: min(1120px, calc(100vw - 96px)) !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  .ri2-article-layout.ri8-visual-focus .ri2-toc {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-18px) scale(.985);
    transition-delay: 0s, 0s, .22s;
  }

  .ri2-article-layout.ri8-visual-focus .ri2-side-note {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(18px) scale(.985);
    transition-delay: 0s, 0s, .22s;
  }

  .ri2-article-layout:not(.ri8-visual-focus) .ri2-toc,
  .ri2-article-layout:not(.ri8-visual-focus) .ri2-side-note {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}

@media (max-width: 1180px) {
  .ri2-shell.ri2-article-layout {
    width: min(calc(100% - 40px), 920px);
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  .ri2-toc {
    display: none !important;
  }

  .ri2-side-note {
    position: static !important;
    top: auto !important;
    max-height: none;
    overflow: visible;
    margin-top: 6px;
  }

  .ri2-article > .ri3-article-visual,
  .ri2-article > .ri4-article-visual,
  .ri2-article > .ri-article-showcase,
  .ri2-article > .ri-article-visual,
  .ri2-article > figure[class*="article-visual"],
  .ri2-article > figure[class*="article-showcase"] {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .ri2-shell.ri2-article-layout {
    width: min(calc(100% - 28px), 920px);
    gap: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ri2-toc,
  .ri2-side-note {
    transition: none !important;
  }
}