/* Shared frontend and editor-canvas contract for document content widths. */
:root {
  --mapcad-content-width-editorial: 850px;
  --mapcad-content-width-full: 1320px;
  --mapcad-content-width-sidebar-main: 1136px;
}

.mapcad-content-width {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/* Every mode is one coherent container. Child content fills that container. */
.blog-single__inner.mapcad-content-width,
.mapcad-page-content.mapcad-content-width {
  width: 100%;
  min-width: 0;
}

.blog-single__inner.mapcad-content-width--editorial,
.mapcad-page-content.mapcad-content-width--editorial {
  max-width: var(--mapcad-content-width-editorial);
  margin-inline: auto;
}

.blog-single__inner.mapcad-content-width--sidebar,
.mapcad-page-content.mapcad-content-width--sidebar {
  max-width: 100%;
  margin-inline: 0;
}

.blog-single__inner.mapcad-content-width--full,
.mapcad-page-content.mapcad-content-width--full {
  max-width: var(--mapcad-content-width-full);
  margin-inline: auto;
}

.blog-single__inner.mapcad-content-width :where(.blog-breadcrumbs, .blog-single__header, .blog-single__media, .blog-single__content, .blog-single__tags, .blog-authorbox),
.blog-single__inner.mapcad-content-width .blog-single__content > *,
.mapcad-page-content.mapcad-content-width > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.blog-single__inner.mapcad-content-width .blog-single__content > :not(.alignleft, .aligncenter, .alignright, .has-mapcad-width-override),
.mapcad-page-content.mapcad-content-width > :not(.alignleft, .aligncenter, .alignright, .has-mapcad-width-override),
.blog-single__inner.mapcad-content-width :where(.blog-breadcrumbs, .blog-single__header, .blog-single__media, .blog-single__tags, .blog-authorbox) {
  margin-inline: 0;
}

.blog-single__inner.mapcad-content-width .blog-single__content :where(p, ul, ol, blockquote) {
  max-width: 100%;
}

/*
 * A desktop Hero may deliberately bleed its right-hand image beyond the
 * document container. Keep the text/content geometry container-bound, but
 * reveal the image progressively towards the viewport edge. At wide desktop
 * sizes the visible left edge remains on the existing 1480px layout anchor
 * until the complete, height-scaled image is visible. Only then may the full
 * image move right with the viewport. A renderable Sidebar opts out via the
 * body class.
 */
@media (min-width: 992px) {
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image) {
    --mapcad-hero-viewport-bleed: max(0px, calc((100vw - 100%) / 2));
    --mapcad-hero-image-base-width: calc(100% - 600px - 80px - 24px);
    --mapcad-hero-image-natural-render-width: 100vw;
    --mapcad-hero-image-available-width: calc(
    	var(--mapcad-hero-image-base-width) + var(--mapcad-hero-viewport-bleed)
    );
    --mapcad-hero-image-visible-width: min(
    	var(--mapcad-hero-image-available-width),
    	var(--mapcad-hero-image-natural-render-width)
    );
    --mc3d-hero-bleed: var(--mapcad-hero-viewport-bleed);
    overflow: visible;
  }
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image) .is-hero-image {
    right: calc(-1 * var(--mapcad-hero-viewport-bleed)) !important;
    width: var(--mapcad-hero-image-visible-width) !important;
    max-width: none !important;
    object-position: left center !important;
  }
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image)::before {
    right: calc(-1 * var(--mapcad-hero-viewport-bleed)) !important;
    width: var(--mapcad-hero-image-visible-width) !important;
  }
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image)::after {
    right: calc(-1 * var(--mapcad-hero-viewport-bleed)) !important;
  }
}
@media (min-width: 1280px) {
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image) {
    --mapcad-hero-image-base-width: calc(100% - 600px - 80px - 64px);
  }
}
@media (min-width: 1480px) {
  body:not(.has-mapcad-sidebar) .mapcad-page-content.mapcad-content-width > .section-block.is-hero:has(.is-hero-image) {
    --mapcad-hero-image-available-width: calc(
    	100% + var(--mapcad-hero-viewport-bleed) +
    		var(--mapcad-hero-viewport-bleed) - 744px
    );
  }
}
.mapcad-content-width :where(figure, table, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-cover, .wp-block-media-text) {
  box-sizing: border-box;
  max-width: 100%;
}

.mapcad-content-width :where(img, video, iframe, canvas, svg) {
  max-width: 100%;
}

.mapcad-content-width :where(.wp-block-image, .wp-block-gallery, .wp-block-cover):not(.has-mapcad-width-override) {
  width: 100%;
}

.mapcad-content-width .wp-block-image:not(.has-mapcad-width-override) img {
  display: block;
  width: 100%;
  height: auto;
}

.mapcad-content-width .wp-block-table:not(.has-mapcad-width-override) {
  width: 100%;
}

/* Gutenberg per-block overrides: always relative to, and bounded by, the document container. */
.mapcad-content-width .has-mapcad-width-override,
.mapcad-content-width-editor-canvas .has-mapcad-width-override {
  box-sizing: border-box;
  width: var(--mapcad-block-width, 100%) !important;
  max-width: 100% !important;
}

.mapcad-content-width .mapcad-block-align-left,
.mapcad-content-width-editor-canvas .mapcad-block-align-left {
  margin-right: auto !important;
  margin-left: 0 !important;
}

.mapcad-content-width .mapcad-block-align-center,
.mapcad-content-width-editor-canvas .mapcad-block-align-center {
  margin-right: auto !important;
  margin-left: auto !important;
}

.mapcad-content-width .mapcad-block-align-right,
.mapcad-content-width-editor-canvas .mapcad-block-align-right {
  margin-right: 0 !important;
  margin-left: auto !important;
}

.mapcad-content-width .has-mapcad-width-override :where(img, video, iframe, canvas, svg),
.mapcad-content-width-editor-canvas .has-mapcad-width-override :where(img, video, iframe, canvas, svg) {
  max-width: 100%;
}

.mapcad-content-width .wp-block-image.has-mapcad-width-override img,
.mapcad-content-width-editor-canvas .wp-block-image.has-mapcad-width-override img {
  display: block;
  width: 100%;
  height: auto;
}

/* Classic Editor images keep their native size/alignment but never overflow. */
.mapcad-content-width img.alignleft,
.mapcad-content-width img.aligncenter,
.mapcad-content-width img.alignright,
.mapcad-content-width figure.alignleft,
.mapcad-content-width figure.aligncenter,
.mapcad-content-width figure.alignright,
.mapcad-content-width .wp-caption.alignleft,
.mapcad-content-width .wp-caption.aligncenter,
.mapcad-content-width .wp-caption.alignright {
  width: auto;
  max-width: 100%;
  height: auto;
}

.mapcad-content-width :where(.alignwide, .alignfull):not(.has-mapcad-width-override) {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* Exact active-Sidebar grid with a deliberately empty second column. */
.mapcad-content-width-sidebar-shell-container {
  container: mapcad-content-width-sidebar/inline-size;
}

.mapcad-content-width-sidebar-shell {
  grid-template-columns: minmax(0, 1fr) minmax(288px, var(--mapcad-sidebar-width, 320px));
  gap: var(--mapcad-sidebar-gap, 48px);
}

.mapcad-content-width-sidebar-shell > .mapcad-sidebar-main {
  width: 100%;
  max-width: var(--mapcad-content-width-sidebar-main);
}

.mapcad-content-width-sidebar-space {
  grid-column: 2;
  min-width: 0;
}

@container mapcad-content-width-sidebar (max-width: 1020px) {
  .mapcad-content-width-sidebar-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .mapcad-content-width-sidebar-space {
    display: none;
  }
}
@media (max-width: 1020px) {
  .mapcad-content-width-sidebar-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .mapcad-content-width-sidebar-space {
    display: none;
  }
}
/* Gutenberg iframe and Classic TinyMCE parity. */
.mapcad-content-width-editor-canvas,
.mapcad-content-width-editor-canvas .is-root-container {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

/*
 * Gutenberg renders the post title in a sibling wrapper above the block-list
 * root. Give it the same mode-dependent rail as the document canvas and keep
 * a deliberate, responsive separation from the first content block.
 */
.editor-styles-wrapper.mapcad-content-width-editor-canvas .wp-block-post-title {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.editor-styles-wrapper.mapcad-content-width-editor-canvas :is(.editor-visual-editor__post-title-wrapper, .edit-post-visual-editor__post-title-wrapper) {
  padding-bottom: clamp(24px, 2vw, 32px);
}

.editor-styles-wrapper.mapcad-content-width--editorial .is-root-container,
.editor-styles-wrapper.mapcad-content-width--editorial .wp-block-post-title,
.mapcad-content-width-editor-canvas.is-root-container.mapcad-content-width--editorial,
body.mapcad-content-width-editor-canvas.mapcad-content-width--editorial {
  max-width: var(--mapcad-content-width-editorial);
  margin-inline: auto;
}

.editor-styles-wrapper.mapcad-content-width--sidebar .is-root-container,
.editor-styles-wrapper.mapcad-content-width--sidebar .wp-block-post-title,
.mapcad-content-width-editor-canvas.is-root-container.mapcad-content-width--sidebar,
body.mapcad-content-width-editor-canvas.mapcad-content-width--sidebar {
  max-width: var(--mapcad-content-width-sidebar-main);
  margin-right: auto;
  margin-left: max(0px, (100% - var(--mapcad-sidebar-shell-max, 1504px)) / 2);
}

.editor-styles-wrapper.mapcad-content-width--full .is-root-container,
.editor-styles-wrapper.mapcad-content-width--full .wp-block-post-title,
.mapcad-content-width-editor-canvas.is-root-container.mapcad-content-width--full,
body.mapcad-content-width-editor-canvas.mapcad-content-width--full {
  max-width: var(--mapcad-content-width-full);
  margin-inline: auto;
}

.editor-styles-wrapper.mapcad-content-width-editor-canvas .is-root-container > *,
.mapcad-content-width-editor-canvas.is-root-container > *,
body.mapcad-content-width-editor-canvas > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 100% !important;
}

.editor-styles-wrapper.mapcad-content-width-editor-canvas .is-root-container > .has-mapcad-width-override,
.mapcad-content-width-editor-canvas.is-root-container > .has-mapcad-width-override,
body.mapcad-content-width-editor-canvas > .has-mapcad-width-override {
  width: var(--mapcad-block-width, 100%) !important;
}

@media (max-width: 600px) {
  .mapcad-content-width .has-mapcad-width-override,
  .mapcad-content-width-editor-canvas .has-mapcad-width-override {
    max-width: 100% !important;
  }
}
@media print {
  .mapcad-content-width-sidebar-shell {
    display: block;
  }
  .mapcad-content-width-sidebar-space {
    display: none;
  }
}