/* ITSELECT blog article stabilizer
   Goal: restore readability and preserve premium editorial UX on article pages
   without changing content or functionality.
*/

/* Shared article behaviour */
main,
.article-layout {
  overflow: visible !important;
}

.sidebar,
.article-panel {
  align-self: start;
}

@media (min-width: 981px) {
  .sidebar,
  .article-panel {
    position: sticky !important;
    top: 108px !important;
  }
}

/* TOC / right rail visual polish */
.toc,
.side-cta,
.sources,
.article-box {
  backdrop-filter: blur(10px);
}

.toc a,
.sidebar .toc a {
  transition: background-color .2s ease, color .2s ease, padding .2s ease, border-color .2s ease;
}

.toc a:hover,
.sidebar .toc a:hover {
  text-decoration: none;
}

.toc a.is-active,
.sidebar .toc a.is-active {
  border-radius: 12px;
  padding-left: .7rem;
  padding-right: .7rem;
  border-bottom-color: transparent !important;
}

/* Premium article pages built with blog-premium.css */
body.blog-premium-page .article-hero {
  position: relative;
  overflow: hidden;
}

body.blog-premium-page .article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(88, 199, 255, .16), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(242, 200, 121, .14), transparent 24%);
  pointer-events: none;
}

body.blog-premium-page .article-hero .blog-wrap {
  position: relative;
  z-index: 1;
}

body.blog-premium-page .article-meta,
body.blog-premium-page .article-intro {
  color: rgba(255,255,255,.84);
}

body.blog-premium-page .article-tag {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #f7ce84;
}

body.blog-premium-page .article-shell {
  background:
    linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

body.blog-premium-page .article-layout {
  gap: 42px;
}

body.blog-premium-page .article-body {
  font-size: 1.05rem;
  line-height: 1.82;
  color: #2b3a4f;
}

body.blog-premium-page .article-body > h1:first-of-type {
  margin-top: 0;
  margin-bottom: 18px;
  color: #071427;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

body.blog-premium-page .article-body h2 {
  margin-top: 40px;
  margin-bottom: 14px;
  color: #071427;
  font-size: clamp(1.42rem, 2vw, 1.9rem);
  line-height: 1.18;
}

body.blog-premium-page .article-body p,
body.blog-premium-page .article-body li,
body.blog-premium-page .article-body em {
  color: #334155;
}

body.blog-premium-page .article-body strong {
  color: #101b2d;
}

body.blog-premium-page .article-body ul,
body.blog-premium-page .article-body ol {
  padding-left: 1.25rem;
}

body.blog-premium-page .article-body li {
  margin: 10px 0;
}

body.blog-premium-page .article-cta {
  margin-top: 42px;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(7, 27, 58, .12);
}

body.blog-premium-page .article-box {
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.09);
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8fd 100%);
  box-shadow: 0 18px 48px rgba(7,27,58,.08);
}

body.blog-premium-page .article-box h3 {
  color: #071427;
  font-size: 1.02rem;
}

body.blog-premium-page .article-box p,
body.blog-premium-page .article-box li,
body.blog-premium-page .article-box ul {
  color: #526174;
}

body.blog-premium-page .article-box ul {
  margin: 0 0 14px;
  padding-left: 1.1rem;
}

body.blog-premium-page .article-box .blog-btn {
  min-height: 44px;
  border-radius: 999px;
}

/* Custom standalone article pages with inline CSS */
body:not(.blog-premium-page) .sidebar {
  align-self: start;
}

body:not(.blog-premium-page) .toc a.is-active {
  background: rgba(255,255,255,.08);
  color: #fff;
}

body:not(.blog-premium-page) .hero-card {
  align-items: stretch;
}

/* Fix readability issue observed on light editorial article cards (AI Act pages) */
body.ai-act-readable .callout,
body.ai-act-readable .mini-card {
  color: #1d2b3f !important;
}

body.ai-act-readable .callout strong,
body.ai-act-readable .mini-card h2 {
  color: #123b7a !important;
}

body.ai-act-readable .mini-card ul,
body.ai-act-readable .mini-card li,
body.ai-act-readable .mini-card p,
body.ai-act-readable .callout,
body.ai-act-readable .callout p {
  color: #334155 !important;
}

body.ai-act-readable .hero-card .callout,
body.ai-act-readable .hero-card .mini-card {
  background: rgba(255,255,255,.96) !important;
}

@media (max-width: 980px) {
  .sidebar,
  .article-panel {
    position: static !important;
  }
}

@media (max-width: 720px) {
  body.blog-premium-page .article-layout {
    gap: 28px;
  }

  body.blog-premium-page .article-box {
    border-radius: 18px;
    padding: 18px;
  }

  body.blog-premium-page .article-cta {
    border-radius: 20px;
    padding: 24px;
  }
}