/* SERPIFAI Article Visual System Batch 01 v1.0.8 */
:root {
  --serpifai-visual-radius: clamp(18px, 2vw, 30px);
  --serpifai-visual-border: color-mix(in srgb, #7dd3fc 24%, transparent);
  --serpifai-visual-shadow: 0 24px 70px rgba(0, 10, 24, .28);
}

.serpifai-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The article hero has one decorative background layer and no visible inline hero image. */
[data-serpifai-hero-background] {
  position: relative !important;
  isolation: isolate;
  overflow: clip;
  background-image: none !important;
  background-color: #061626;
}

[data-serpifai-hero-background] > .serpifai-hero-background-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--serpifai-hero-bg-1280);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .42;
  filter: saturate(.92) contrast(1.04);
  transform: scale(1.015);
}

[data-serpifai-hero-background] > .serpifai-hero-background-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 12, 24, .94) 0%, rgba(2, 12, 24, .82) 38%, rgba(2, 12, 24, .48) 68%, rgba(2, 12, 24, .70) 100%),
    linear-gradient(180deg, rgba(2, 12, 24, .30) 0%, rgba(2, 12, 24, .54) 100%);
}

[data-serpifai-hero-background] > :not(.serpifai-hero-background-layer):not(.serpifai-visually-hidden) {
  position: relative;
  z-index: 1;
}

@media (max-width: 699px) {
  [data-serpifai-hero-background] > .serpifai-hero-background-layer { background-image: var(--serpifai-hero-bg-640); }
}
@media (min-width: 700px) and (max-width: 999px) {
  [data-serpifai-hero-background] > .serpifai-hero-background-layer { background-image: var(--serpifai-hero-bg-960); }
}
@media (min-width: 1000px) and (max-width: 1399px) {
  [data-serpifai-hero-background] > .serpifai-hero-background-layer { background-image: var(--serpifai-hero-bg-1280); }
}
@media (min-width: 1400px) {
  [data-serpifai-hero-background] > .serpifai-hero-background-layer { background-image: var(--serpifai-hero-bg-1440); }
}

/* Managed cards are allowed one image only. Old media-like backgrounds and pseudo-art are suppressed. */
[data-serpifai-media-replaced="card"] {
  background-image: none !important;
}
[data-serpifai-media-replaced="card"]::before,
[data-serpifai-media-replaced="card"]::after,
[data-serpifai-media-replaced="card"] :is([class*="image"],[class*="media"],[class*="visual"],[class*="thumb"],[class*="art"],[class*="photo"]):not([data-serpifai-card-visual])::before,
[data-serpifai-media-replaced="card"] :is([class*="image"],[class*="media"],[class*="visual"],[class*="thumb"],[class*="art"],[class*="photo"]):not([data-serpifai-card-visual])::after,
[data-serpifai-legacy-media-cleared="true"],
[data-serpifai-legacy-media-cleared="true"]::before,
[data-serpifai-legacy-media-cleared="true"]::after {
  background-image: none !important;
}

.serpifai-visual-figure {
  position: relative;
  z-index: 30;
  width: min(100%, 1040px);
  margin: clamp(28px, 5vw, 64px) auto;
  border-radius: var(--serpifai-visual-radius);
  overflow: clip;
  background: #071625;
  border: 1px solid var(--serpifai-visual-border);
  box-shadow: var(--serpifai-visual-shadow);
  isolation: isolate;
}
.serpifai-visual-figure picture,
.serpifai-visual-figure img { display: block; width: 100%; }
.serpifai-visual-figure img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #071625;
}
.serpifai-visual-diagram { background: #f7f9fc; }
.serpifai-visual-diagram img { object-fit: contain; background: #f7f9fc; }
.serpifai-visual-caption {
  margin: 0;
  padding: 14px 18px 16px;
  color: rgba(230, 242, 255, .88);
  background: linear-gradient(180deg, rgba(7, 22, 37, .96), rgba(4, 15, 28, .99));
  border-top: 1px solid rgba(125, 211, 252, .16);
  font-size: clamp(.84rem, .8rem + .15vw, .96rem);
  line-height: 1.55;
  letter-spacing: .005em;
}
.serpifai-visual-diagram .serpifai-visual-caption { color: #cfe7ff; }

.serpifai-library-card-visual {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #071625;
}
.serpifai-library-card-visual picture,
.serpifai-library-card-visual img { display: block; width: 100%; height: 100%; }
.serpifai-library-card-visual img {
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
:is(article, li, a, div):hover > .serpifai-library-card-visual img,
.serpifai-library-card-visual:hover img {
  transform: scale(1.025);
  filter: saturate(1.04) contrast(1.02);
}

/* Geometry-aware media focus: rails disappear without moving article content. */
[data-serpifai-focus-sidebar="true"] {
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
  will-change: opacity, transform;
}
body.serpifai-media-focus-active [data-serpifai-focus-sidebar="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) scale(.985) !important;
  z-index: -1 !important;
}
body.serpifai-media-focus-active .serpifai-visual-diagram {
  z-index: 300 !important;
}

@media (max-width: 760px) {
  .serpifai-visual-figure {
    width: calc(100% + 12px);
    margin-left: -6px;
    margin-right: -6px;
    border-radius: 18px;
  }
  .serpifai-visual-caption { padding: 12px 14px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .serpifai-library-card-visual img,
  [data-serpifai-focus-sidebar="true"] { transition: none !important; }
}