/* Surveylet UI V16 — November 13 source-based refinements.
   1) No-image heroes use the full available width. Existing image/video
      headers retain their approved layouts and ambient network background.
   2) Blog article categories stay below the real site navigation while
      the article library is being browsed. */

/* Several article shells still reserve a fixed reading column around the
   header. Their non-hero sections are already limited independently by V10. */
body[data-kind="article"] main.site-main .cal-blog-article.fluent-unified > :is(
  .cal-wrap,.cal-guide-wrap,.cal-check-wrap,.cal-hybrid-wrap,.cal-lc-wrap,.cal-ram-wrap
) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: auto !important;
}

/* A hero with no actual picture or video should not keep an empty image column.
   :has() applies only to actual foreground media; background animation is kept. */
body[data-route] main.site-main .fluent-unified section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):not(:has(
  .site-hero-art img, .site-hero-video, video, iframe
)) :is(.site-hero-layout,.fluent-unified-hero-grid) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
body[data-route] main.site-main .fluent-unified section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):not(:has(
  .site-hero-art img, .site-hero-video, video, iframe
)) :is(.site-hero-copy,.fluent-unified-hero-copy) {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 !important;
}
body[data-route] main.site-main .fluent-unified section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):not(:has(
  .site-hero-art img, .site-hero-video, video, iframe
)) h1 {
  width: auto !important;
  max-width: min(100%, 1160px) !important;
  text-wrap: balance;
}
body[data-route] main.site-main .fluent-unified section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):not(:has(
  .site-hero-art img, .site-hero-video, video, iframe
)) p {
  max-width: min(100%, 1060px) !important;
}
/* The extra foreground motion stage was a placeholder for the lost image;
   it is not the original, subtle .ds-field animated background. */
body[data-route] main.site-main .fluent-unified section:is([data-layout="hero"], .cal-hero, [class$="-hero"]):not(:has(
  .site-hero-art img, .site-hero-video, video, iframe
)) .fluent-motion-stage {
  display: none !important;
}

/* Blog uses its own useful, light category buttons rather than dark topic tabs. */
body[data-route="/blog"] main.site-main,
body[data-route="/blog"] main.site-main #calibrum-blog,
body[data-route="/blog"] main.site-main #calibrum-blog > .cal-wrap,
body[data-route="/blog"] main.site-main #calibrum-blog .blog-hub-library {
  overflow: visible !important;
}
body[data-route="/blog"] main.site-main #calibrum-blog .blog-hub-filters {
  position: sticky !important;
  top: var(--cal-v16-navigation-bottom, var(--ds-nav-h, 68px)) !important;
  z-index: 72 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  padding: 12px 14px !important;
  margin: 0 -14px !important;
  background: rgba(249, 252, 255, .98) !important;
  border: 1px solid #dbe6ef !important;
  border-radius: 10px !important;
  box-shadow: 0 9px 20px rgba(14, 45, 72, .12) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body[data-route="/blog"] main.site-main #calibrum-blog .blog-hub-results-head {
  scroll-margin-top: calc(var(--cal-v16-navigation-bottom, 68px) + 110px);
}
@media (max-width: 700px) {
  /* A three-row sticky filter would cover too much of a small viewport. */
  body[data-route="/blog"] main.site-main #calibrum-blog .blog-hub-filters {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }
}