/* ===== 17-final-image-clarity.css ===== */
/* =========================================================
   17 — FINAL IMAGE CLARITY / FRAMING
   Targeted override: preserve complete 4K diagrams, remove
   artificial outer borders/backgrounds, and keep professional
   side-by-side alignment on capability pages.
   ========================================================= */

/* All supplied 4K diagrams are complete assets. Never crop them. */
.detailed-capability-page .detailed-domain img,
.formal-reference-page .formal-visuals img{
  object-fit:contain !important;
  object-position:center !important;
  height:auto !important;
  image-rendering:auto !important;
}

/* Non-formal capability pages: use the diagram's own navy artwork
   without adding a second dark card/border around it. */
.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual:not(.subpage-visual-stack) > img,
.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack > img{
  background:transparent !important;
  border:0 !important;
  box-shadow:0 16px 34px rgba(16,22,56,.10) !important;
  border-radius:18px !important;
}

/* Give the technical visual column enough room while keeping the
   copy readable. Two-image domains remain side-by-side. */
.detailed-capability-page:not(.formal-reference-page) .detailed-domain .domain-top{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr) !important;
  gap:42px !important;
}

.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual:not(.subpage-visual-stack){
  max-width:860px !important;
}

.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual:not(.subpage-visual-stack) > img{
  max-width:860px !important;
  width:100% !important;
}

.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack{
  max-width:1080px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}

.detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack > img{
  width:100% !important;
  max-width:none !important;
}

/* Formal diagrams are cream-backed 4K assets designed to sit directly
   on the site's paper background. The previous dark CSS frame caused
   the visible extra border seen around the formal images. */
.formal-reference-page .formal-visuals{
  max-width:760px !important;
  gap:22px !important;
}

.formal-reference-page .formal-visuals figure{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}

.formal-reference-page .formal-visuals img{
  width:100% !important;
  max-width:760px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.formal-reference-page .formal-visuals figcaption{
  margin:7px 2px 0 !important;
}

@media (max-width:1200px){
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .domain-top{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
    gap:32px !important;
  }
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack{
    max-width:900px !important;
  }
  .formal-reference-page .formal-visuals{max-width:700px !important;}
}

@media (max-width:900px){
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .domain-top,
  .formal-reference-page .formal-hero-grid{
    grid-template-columns:1fr !important;
  }
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual,
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack,
  .formal-reference-page .formal-visuals{
    max-width:100% !important;
    margin-left:0 !important;
  }
}

@media (max-width:620px){
  .detailed-capability-page:not(.formal-reference-page) .detailed-domain .visual.subpage-visual-stack{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
}

/* =========================================================
   USER REQUEST — MOVE LARGE DIAGRAMS BELOW THE TOPIC
   Applies only to the Physical Design & Signoff and Physical
   Verification pages shown in the latest reference screenshots.
   The topic/copy stays first; the technical diagrams then use
   the full content width so each image can be displayed much larger.
   ========================================================= */
body[data-capability-page="physical-design-signoff.html"] .detailed-domain .domain-top,
body[data-capability-page="physical-verification.html"] .detailed-domain .domain-top{
  grid-template-columns:1fr !important;
  gap:30px !important;
  align-items:start !important;
}

body[data-capability-page="physical-design-signoff.html"] .detailed-domain .domain-info,
body[data-capability-page="physical-verification.html"] .detailed-domain .domain-info{
  max-width:100% !important;
}

body[data-capability-page="physical-design-signoff.html"] .detailed-domain .domain-info > p,
body[data-capability-page="physical-verification.html"] .detailed-domain .domain-info > p{
  max-width:920px !important;
}

body[data-capability-page="physical-design-signoff.html"] .detailed-domain .visual.subpage-visual-stack,
body[data-capability-page="physical-verification.html"] .detailed-domain .visual.subpage-visual-stack{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:30px !important;
  align-items:start !important;
  justify-content:stretch !important;
}

body[data-capability-page="physical-design-signoff.html"] .detailed-domain .visual.subpage-visual-stack > img,
body[data-capability-page="physical-verification.html"] .detailed-domain .visual.subpage-visual-stack > img{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  display:block !important;
  object-fit:contain !important;
}

@media(max-width:900px){
  body[data-capability-page="physical-design-signoff.html"] .detailed-domain .visual.subpage-visual-stack,
  body[data-capability-page="physical-verification.html"] .detailed-domain .visual.subpage-visual-stack{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}