/* AIForSRE colorful visual explainers */
.aiforsre-featured-visual {
  width: 100%;
  max-width: 1320px;
  margin: 28px auto 8px;
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
}
.aiforsre-featured-visual__head {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin:0 2px 12px; flex-wrap:wrap;
}
.aiforsre-featured-visual__label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted,#8f9bad);
}
.aiforsre-featured-visual__label::before {
  content:""; width:8px; height:8px; border-radius:999px;
  background:#5fffd3; box-shadow:0 0 18px rgba(95,255,211,.55);
}
.aiforsre-featured-visual__open {
  color:#9adfff; text-decoration:none; font-size:12px; font-weight:700;
  border:1px solid rgba(154,223,255,.24); border-radius:999px;
  padding:7px 11px; background:rgba(11,18,30,.66);
}
.aiforsre-featured-visual__open:hover,
.aiforsre-featured-visual__open:focus-visible { border-color:rgba(95,255,211,.65); color:#c9fff1; }
.aiforsre-featured-visual__frame {
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid rgba(103,167,255,.22); background:#07101d;
  box-shadow:0 20px 70px rgba(0,0,0,.25);
}
.aiforsre-featured-visual img {
  display:block; width:100%; height:auto; max-height:900px;
  object-fit:contain; background:#06101b;
}
.lesson-shell > .lesson-pager.aiforsre-pager-at-end {
  width:100%; max-width:1320px; margin:30px auto 8px !important;
  box-sizing:border-box;
}
.enterprise-course > .aiforsre-featured-visual { padding-left:18px; padding-right:18px; }

/* Balanced desktop lesson composition ------------------------------------
   v5 fixes the v4 regression visible on Narrow AI / Generative AI.
   Remember + optional Detail remain in the left content column immediately
   after SRE Lens. Related + Share/Guides form a compact full-width strip
   below the main two-column lesson. This keeps both sides visually dense
   without forcing a left-side card to wait for a taller right-side diagram. */
@media (min-width: 901px) {
  .lesson-shell > .lesson-grid {
    grid-template-columns:minmax(0,1.03fr) minmax(390px,.97fr) !important;
    gap:30px !important;
    align-items:start !important;
  }

  .lesson-grid > .copy,
  .lesson-grid > .visual {
    min-width:0;
    align-self:start;
  }

  /* Prevent old v4 row/stretch rules from creating artificial heights. */
  .lesson-grid .remember,
  .lesson-grid .detail {
    height:auto !important;
    min-height:0 !important;
  }

  .aiforsre-lesson-lower {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px 16px;
    align-items:center;
    width:100%;
    margin:16px 0 0;
  }

  .aiforsre-lesson-lower > .related,
  .aiforsre-lesson-lower > .lesson-tools {
    margin:0 !important;
    min-width:0;
  }

  .aiforsre-lesson-lower > .lesson-tools {
    min-height:46px;
  }

  .lesson-shell > .aiforsre-featured-visual {
    margin-top:24px;
  }
}

@media (max-width: 900px) {
  .aiforsre-lesson-lower {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:16px;
  }
  .aiforsre-lesson-lower > .related,
  .aiforsre-lesson-lower > .lesson-tools {
    margin:0 !important;
  }
}

@media(max-width:760px){
  .aiforsre-featured-visual{margin-top:24px}
  .aiforsre-featured-visual__head{margin-bottom:9px}
  .aiforsre-featured-visual__frame{border-radius:15px}
  .lesson-shell > .lesson-pager.aiforsre-pager-at-end{margin-top:24px!important}
}


/* v9 performance: reserve visual space, defer paint/decode, avoid layout churn. */
.aiforsre-featured-visual {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}
.aiforsre-featured-visual__frame {
  contain: layout paint;
  min-height: 260px;
  background:
    linear-gradient(110deg, rgba(255,255,255,.025) 8%, rgba(95,255,211,.06) 18%, rgba(255,255,255,.025) 33%),
    #07101d;
  background-size: 220% 100%;
}
.aiforsre-featured-visual img {
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .16s ease;
}
.aiforsre-featured-visual img.is-loaded { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .aiforsre-featured-visual img { transition:none; }
}

/* v11.3 — intrinsic image sizing / no crop -------------------------------
   Some visual assets are 4:3 while others are 3:2 or 8:5. Older CSS forced
   the image to height:100% inside a reserved 3:2 frame, which could visually
   crop the bottom of 4:3 explainers. The frame now uses aspect-ratio only as
   a pre-load placeholder; after load, the image's intrinsic ratio controls
   the section height. */
.aiforsre-featured-visual,
.aiforsre-featured-visual__frame {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.aiforsre-featured-visual__frame {
  overflow: hidden;
  height: auto !important;
  max-height: none !important;
  min-height: 220px;
}

.aiforsre-featured-visual__frame.is-loaded {
  min-height: 0;
  aspect-ratio: auto !important;
}

.aiforsre-featured-visual__frame > img,
.aiforsre-featured-visual img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  box-sizing: border-box !important;
}

.lesson-shell,
.lesson-shell > *,
.aiforsre-featured-visual,
.aiforsre-featured-visual__frame {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .aiforsre-featured-visual__frame { min-height: 160px; }
  .aiforsre-featured-visual__frame.is-loaded { min-height: 0; }
}