/**
 * Hybrid ERP Responsive Viewport
 * Purpose: widen responsive shells and media sections without editing the theme.
 * Scope: front-end only, via body.hybrid-responsive-viewport-active.
 */

body.hybrid-responsive-viewport-active {
  overflow-x: clip !important;
}

body.hybrid-responsive-viewport-active *,
body.hybrid-responsive-viewport-active *::before,
body.hybrid-responsive-viewport-active *::after {
  box-sizing: border-box;
}

body.hybrid-responsive-viewport-active .wp-site-blocks,
body.hybrid-responsive-viewport-active .wp-site-blocks > main {
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
}

body.hybrid-responsive-viewport-active img,
body.hybrid-responsive-viewport-active iframe,
body.hybrid-responsive-viewport-active embed,
body.hybrid-responsive-viewport-active object {
  max-width: 100% !important;
}

body.hybrid-responsive-viewport-active img {
  height: auto;
}

body.hybrid-responsive-viewport-active video:not(.hybrid-home-video-hero__video) {
  max-width: 100% !important;
  height: auto;
}

body.hybrid-responsive-viewport-active .wp-block-embed,
body.hybrid-responsive-viewport-active .wp-block-video,
body.hybrid-responsive-viewport-active .wp-block-image {
  max-width: 100% !important;
}

body.hybrid-responsive-viewport-active .wp-block-embed__wrapper iframe,
body.hybrid-responsive-viewport-active .wp-block-video video {
  display: block;
  width: 100% !important;
}

body.hybrid-responsive-viewport-active .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.hybrid-responsive-viewport-active .alignwide {
  width: min(100%, var(--hybrid-responsive-wide-max, 1320px)) !important;
  max-width: var(--hybrid-responsive-wide-max, 1320px) !important;
}

@media (min-width: 1440px) {
  body.hybrid-responsive-viewport-active {
    --hybrid-responsive-edge-pad: clamp(32px, 3.2vw, 96px);
    --hybrid-responsive-content-max: min(1680px, calc(100vw - var(--hybrid-responsive-edge-pad) - var(--hybrid-responsive-edge-pad)));
    --hybrid-responsive-wide-max: min(1960px, calc(100vw - var(--hybrid-responsive-edge-pad) - var(--hybrid-responsive-edge-pad)));
    --hybrid-responsive-text-max: min(980px, calc(100vw - 32px));
    --hybrid-home-uniform-pad: var(--hybrid-responsive-edge-pad);
    --hybrid-home-uniform-max: var(--hybrid-responsive-wide-max);
    --hybrid-home-support-max: var(--hybrid-responsive-wide-max);
    --wp--style--global--content-size: var(--hybrid-responsive-content-max);
    --wp--style--global--wide-size: var(--hybrid-responsive-wide-max);
  }

  body.hybrid-responsive-viewport-active .wp-site-blocks > main,
  body.hybrid-responsive-viewport-active main.wp-block-group,
  body.hybrid-responsive-viewport-active main.is-layout-constrained {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.hybrid-responsive-viewport-active main.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  body.hybrid-responsive-viewport-active main > :where(.wp-block-group:not(.alignfull), .wp-block-columns:not(.alignfull), .wp-block-query:not(.alignfull)) {
    width: min(100%, var(--hybrid-responsive-content-max)) !important;
    max-width: var(--hybrid-responsive-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.hybrid-responsive-viewport-active main :where(.alignwide, .wp-block-group.alignwide, .wp-block-columns.alignwide) {
    width: min(100%, var(--hybrid-responsive-wide-max)) !important;
    max-width: var(--hybrid-responsive-wide-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.hybrid-responsive-viewport-active main :where(.alignfull, .wp-block-group.alignfull, .wp-block-cover.alignfull) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.hybrid-responsive-viewport-active main > .wp-block-group.alignfull:not(.hybrid-erp-header),
  body.hybrid-responsive-viewport-active main > section.alignfull {
    padding-left: var(--hybrid-responsive-edge-pad) !important;
    padding-right: var(--hybrid-responsive-edge-pad) !important;
  }

  body.hybrid-responsive-viewport-active :where(
    .hybrid-home-video-support,
    .hybrid-home-operating-layer,
    .hybrid-home-market-proof,
    .hybrid-home-growth-intro,
    .hybrid-modules-band,
    .hybrid-home-featured-wrap,
    .hybrid-home-blog-wrap,
    .hybrid-home-reviews-wrap
  ) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  body.hybrid-responsive-viewport-active :where(
    .hybrid-home-video-support,
    .hybrid-home-operating-layer,
    .hybrid-home-market-proof,
    .hybrid-home-growth-intro,
    .hybrid-modules-band,
    .hybrid-home-featured-wrap,
    .hybrid-home-blog-wrap,
    .hybrid-home-reviews-wrap
  ):not(.hybrid-home-video-hero) {
    padding-left: var(--hybrid-responsive-edge-pad) !important;
    padding-right: var(--hybrid-responsive-edge-pad) !important;
  }

  body.hybrid-responsive-viewport-active :where(
    .hybrid-home-video-support__shell,
    .hybrid-home-operating-layer__shell,
    .hybrid-home-market-proof__shell,
    .hybrid-home-growth-intro__shell,
    .hybrid-feature-panel,
    .hybrid-feature-layout,
    .hybrid-modules-band > .wp-block-group,
    .hybrid-home-featured-wrap > .wp-block-group,
    .hybrid-home-blog-wrap > .wp-block-group,
    .hybrid-home-reviews-wrap > .wp-block-group,
    .hybrid-news-events-split,
    .hybrid-review-section
  ) {
    width: min(100%, var(--hybrid-responsive-wide-max)) !important;
    max-width: var(--hybrid-responsive-wide-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.hybrid-responsive-viewport-active :where(
    .hybrid-home-operating-layer__copy,
    .hybrid-home-market-proof__intro,
    .hybrid-feature-layout__content,
    .hybrid-home-growth-intro__shell > p,
    .hybrid-home-growth-intro__shell > h1,
    .hybrid-home-growth-intro__shell > h2,
    .hybrid-home-growth-intro__shell > h3
  ) {
    max-width: var(--hybrid-responsive-text-max) !important;
  }

  body.hybrid-responsive-viewport-active :where(
    .hybrid-home-video-support__legacy-frame,
    .hybrid-home-video-support__figure,
    .hybrid-home-video-support__legacy-figure,
    .hybrid-home-video-support__image,
    .hybrid-home-video-support video,
    .hybrid-home-video-support iframe
  ) {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.hybrid-responsive-viewport-active .hybrid-home-video-support__image,
  body.hybrid-responsive-viewport-active .hybrid-home-video-support video {
    display: block !important;
    object-fit: cover !important;
  }

  body.hybrid-responsive-viewport-active :where(.hybrid-review-grid, .hybrid-post-grid, .hybrid-feature-card-row, .hybrid-home-operating-layer__media) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1920px) {
  body.hybrid-responsive-viewport-active {
    --hybrid-responsive-edge-pad: clamp(72px, 4vw, 128px);
    --hybrid-responsive-content-max: min(1880px, calc(100vw - var(--hybrid-responsive-edge-pad) - var(--hybrid-responsive-edge-pad)));
    --hybrid-responsive-wide-max: min(2240px, calc(100vw - var(--hybrid-responsive-edge-pad) - var(--hybrid-responsive-edge-pad)));
  }
}

@media (max-width: 781px) {
  body.hybrid-responsive-viewport-active {
    --hybrid-responsive-edge-pad: clamp(14px, 4.5vw, 22px);
  }

  body.hybrid-responsive-viewport-active .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }

  body.hybrid-responsive-viewport-active .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  body.hybrid-responsive-viewport-active main > .wp-block-group.alignfull:not(.hybrid-erp-header),
  body.hybrid-responsive-viewport-active main > section.alignfull {
    padding-left: var(--hybrid-responsive-edge-pad) !important;
    padding-right: var(--hybrid-responsive-edge-pad) !important;
  }

  body.hybrid-responsive-viewport-active :where(.wp-block-button__link, .hybrid-submit) {
    min-height: 44px;
  }
}