/* Stellr Capability Grid — scoped front-end styles */
.scg-grid,
.scg-grid * { box-sizing: border-box; }

.scg-grid {
  --scg-gap: var(--scg-gap-d, 16px);
  --scg-card-height: var(--scg-card-height-d, 180px);
  --scg-card-padding: var(--scg-card-padding-d, 20px);
  --scg-image-height: var(--scg-image-h-d, 520px);
  --scg-image-width: var(--scg-image-w-d, 100%);
  --scg-image-zoom: var(--scg-image-zoom-d, 1);
  --scg-image-x: var(--scg-image-x-d, 50%);
  --scg-image-y: var(--scg-image-y-d, 50%);
  --scg-badge-x: var(--scg-badge-x-d, 30px);
  --scg-badge-y: var(--scg-badge-y-d, 30px);
  --scg-under-cols: var(--scg-under-cols-d, 2);

  width: 100%;
  padding: var(--scg-shell-padding, 18px);
  background: var(--scg-shell-bg, #fff);
  border-radius: var(--scg-shell-radius, 30px);
  box-shadow: 0 20px 60px var(--scg-shell-shadow-color, rgba(20,26,70,.10));
  overflow: visible;
}

.scg-main {
  display: block;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--scg-gap);
  align-items: start;
}

.scg-left { grid-column: 1 / span 2; min-width: 0; }
.scg-right { grid-column: 3; min-width: 0; display: grid; gap: var(--scg-gap); align-content: start; }
.scg-under-image { display: grid; grid-template-columns: repeat(var(--scg-under-cols), minmax(0,1fr)); gap: var(--scg-gap); margin-top: var(--scg-gap); }
.scg-full { display: grid; grid-template-columns: repeat(var(--scg-full-cols-d,3), minmax(0,1fr)); gap: var(--scg-gap); margin-top: var(--scg-gap); }

.scg-staging {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--scg-gap);
  margin-top: var(--scg-gap);
}
.scg-grid.scg-enhanced > .scg-staging { display: none !important; }

.scg-right > .et_pb_module,
.scg-under-image > .et_pb_module,
.scg-full > .et_pb_module {
  width: 100% !important;
  margin: 0 !important;
}

.scg-hide-image-desktop .scg-under-image { margin-top: 0; }

.scg-image-panel {
  position: relative;
  width: var(--scg-image-width);
  height: var(--scg-image-height);
  margin-left: auto;
  margin-right: auto;
  background: var(--scg-image-bg, transparent);
  border: 1px solid var(--scg-card-border, rgba(20,26,70,.09));
  border-radius: var(--scg-image-radius, 24px);
  box-shadow: 0 8px 25px var(--scg-card-shadow-color,rgba(20,26,70,.08));
  overflow: hidden;
  transition: transform var(--scg-hover-speed,280ms) ease, border-color var(--scg-hover-speed,280ms) ease, box-shadow var(--scg-hover-speed,280ms) ease, background var(--scg-hover-speed,280ms) ease;
}

/* Keep the image panel border visible above layered images across browsers. */
.scg-image-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  border: 1px solid var(--scg-image-border-color, var(--scg-card-border, rgba(20,26,70,.09)));
  border-radius: inherit;
}

.scg-grid.scg-image-match-card-border .scg-image-panel {
  border-color: var(--scg-card-border, rgba(20,26,70,.09));
  border-radius: var(--scg-card-radius,20px);
}

.scg-grid.scg-image-match-card-shadow .scg-image-panel {
  box-shadow: 0 8px 25px var(--scg-card-shadow-color,rgba(20,26,70,.08));
}

.scg-image-panel__image {
  position: absolute;
  left: var(--scg-image-x);
  top: var(--scg-image-y);
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(var(--scg-image-zoom));
  transform-origin: center;
  object-position: center;
  display: block;
  max-width: none !important;
}
.scg-fit-contain .scg-image-panel__image { object-fit: contain; }
.scg-fit-cover .scg-image-panel__image { object-fit: cover; }

.scg-image-panel__image--base {
  z-index: 1;
}

.scg-image-panel__image--rotor {
  z-index: 2;
  pointer-events: none;
  animation: scg-logo-spin var(--scg-rotation-speed, 10s) linear infinite;
}

.scg-image-panel--default-art .scg-image-panel__image--base,
.scg-image-panel--default-art .scg-image-panel__image--rotor {
  object-fit: contain;
}

@keyframes scg-logo-spin {
  from {
    transform: translate(-50%, -50%) scale(var(--scg-image-zoom)) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) scale(var(--scg-image-zoom)) rotate(360deg);
  }
}

.scg-badge {
  position: absolute;
  left: var(--scg-badge-x);
  top: var(--scg-badge-y);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--scg-badge-py,10px) var(--scg-badge-px,21px);
  color: var(--scg-badge-color,#fff) !important;
  background: var(--scg-badge-background);
  border-radius: var(--scg-badge-radius,30px);
  font-size: var(--scg-badge-size,14px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: calc(100% - (var(--scg-badge-x) * 2));
  overflow: hidden;
  text-overflow: ellipsis;
}

.scg-card {
  position: relative;
  min-width: 0;
  width: 100%;
  background: var(--scg-card-background, #faf9f7);
  border: 1px solid var(--scg-card-border, rgba(20,26,70,.09));
  border-radius: var(--scg-card-radius,20px);
  box-shadow: 0 8px 25px var(--scg-card-shadow-color,rgba(20,26,70,.08));
  overflow: hidden;
  transition: transform var(--scg-hover-speed,280ms) ease, border-color var(--scg-hover-speed,280ms) ease, box-shadow var(--scg-hover-speed,280ms) ease, background var(--scg-hover-speed,280ms) ease;
}

.scg-height-fixed .scg-card { height: var(--scg-card-height); }
.scg-height-fixed .scg-card.scg-card-style-override { height: var(--scg-card-height-override,var(--scg-card-height)); }
.scg-height-auto .scg-card { height: auto; }
.scg-height-match .scg-card { height: auto; }

.scg-card-style-override {
  --scg-card-padding-override: var(--scg-card-padding-override-d, var(--scg-card-padding));
}

.scg-card__inner {
  display: grid;
  grid-template-columns: var(--scg-icon-tile-size,92px) minmax(0,1fr);
  gap: var(--scg-icon-gap,18px);
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--scg-card-padding-override, var(--scg-card-padding,20px));
  color: inherit;
  text-decoration: none !important;
}
.scg-card__inner:focus-visible { outline: 3px solid var(--scg-hover-border,#ff671d); outline-offset: -4px; }

.scg-global-icon-above .scg-card.scg-icon-layout-global .scg-card__inner,
.scg-card.scg-icon-layout-above .scg-card__inner {
  grid-template-columns: 1fr;
  align-content: start;
}

.scg-card.scg-icon-source-none .scg-card__inner {
  grid-template-columns: 1fr;
}

.scg-card__icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--scg-icon-tile-size,92px);
  height: var(--scg-icon-tile-size,92px);
  background: var(--scg-icon-tile-background);
  border-radius: var(--scg-icon-tile-radius,18px);
  box-shadow: 0 12px 28px rgba(255,90,18,.18);
  flex: 0 0 auto;
}
.scg-card__icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--scg-icon-circle-size,60px);
  height: var(--scg-icon-circle-size,60px);
  background: var(--scg-icon-circle-bg,#fff);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(20,26,70,.10);
  overflow: hidden;
}
.scg-card__divi-icon {
  color: var(--scg-icon-color,#ff5a12) !important;
  font-size: var(--scg-icon-size,30px) !important;
  line-height: 1 !important;
}
.scg-card__uploaded-icon {
  display: block;
  width: var(--scg-icon-size,30px);
  height: var(--scg-icon-size,30px);
  max-width: 90%;
  max-height: 90%;
}
.scg-card__uploaded-icon.scg-fit-contain { object-fit: contain; }
.scg-card__uploaded-icon.scg-fit-cover { object-fit: cover; }

.scg-card__copy { min-width: 0; }
.scg-card__title {
  margin: 0 0 9px !important;
  color: var(--scg-title-color,#141a46) !important;
  font-family: inherit !important;
  font-size: var(--scg-title-size,21px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.scg-card__body,
.scg-card__body p {
  margin: 0 !important;
  color: var(--scg-body-color,rgba(20,26,70,.76)) !important;
  font-family: inherit !important;
  font-size: var(--scg-body-size,14px) !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (hover:hover) and (pointer:fine) {
  .scg-hover-neutral .scg-image-panel:hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15));
  }
  .scg-hover-orange .scg-image-panel:hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    border-color: var(--scg-hover-border,#ff671d);
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15)), 0 0 20px rgba(255,103,29,.12);
  }
  .scg-hover-custom .scg-image-panel:hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    border-color: var(--scg-hover-border,#ff671d);
    background: var(--scg-hover-background,var(--scg-image-bg, transparent));
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15));
  }
  .scg-hover-none .scg-image-panel:hover { transform:none; }
  .scg-hover-neutral .scg-card:not(.scg-hover-override-none):hover,
  .scg-card.scg-hover-override-neutral:hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15));
  }
  .scg-hover-orange .scg-card:not(.scg-hover-override-none):hover,
  .scg-card.scg-hover-override-orange:hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    border-color: var(--scg-hover-border,#ff671d);
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15)), 0 0 20px rgba(255,103,29,.12);
  }
  .scg-hover-custom .scg-card:not(.scg-hover-override-none):hover {
    transform: translateY(calc(-1 * var(--scg-hover-lift,6px)));
    border-color: var(--scg-hover-border,#ff671d);
    background: var(--scg-hover-background,var(--scg-card-background));
    box-shadow: 0 20px 42px var(--scg-hover-shadow-color,rgba(20,26,70,.15));
  }
  .scg-hover-none .scg-card:hover,
  .scg-card.scg-hover-override-none:hover { transform:none; }
}

.scg-hide-image-desktop .scg-image-panel { display:none; }

@media (max-width:980px) {
  .scg-grid {
    --scg-gap: var(--scg-gap-t,16px);
    --scg-card-height: var(--scg-card-height-t,170px);
    --scg-card-padding: var(--scg-card-padding-t,18px);
    --scg-image-height: var(--scg-image-h-t,500px);
    --scg-image-width: var(--scg-image-w-t,100%);
    --scg-image-zoom: var(--scg-image-zoom-t,1);
    --scg-image-x: var(--scg-image-x-t,50%);
    --scg-image-y: var(--scg-image-y-t,50%);
    --scg-badge-x: var(--scg-badge-x-t,24px);
    --scg-badge-y: var(--scg-badge-y-t,24px);
    --scg-under-cols: var(--scg-under-cols-t,2);
  }
  .scg-card-style-override { --scg-card-padding-override: var(--scg-card-padding-override-t, var(--scg-card-padding)); }
  .scg-main { grid-template-columns: 1fr; }
  .scg-left, .scg-right { grid-column:auto; }
  .scg-right { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top:0; }
  .scg-full { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scg-hide-image-desktop .scg-image-panel { display:block; }
  .scg-hide-image-tablet .scg-image-panel { display:none; }
  .scg-hide-image-tablet .scg-under-image { margin-top:0; }
  .scg-card-hide-tablet { display:none !important; }
}

@media (max-width:767px) {
  .scg-grid {
    --scg-gap: var(--scg-gap-p,13px);
    --scg-card-height: var(--scg-card-height-p,auto);
    --scg-card-padding: var(--scg-card-padding-p,16px);
    --scg-image-height: var(--scg-image-h-p,420px);
    --scg-image-width: var(--scg-image-w-p,100%);
    --scg-image-zoom: var(--scg-image-zoom-p,1);
    --scg-image-x: var(--scg-image-x-p,50%);
    --scg-image-y: var(--scg-image-y-p,50%);
    --scg-badge-x: var(--scg-badge-x-p,20px);
    --scg-badge-y: var(--scg-badge-y-p,20px);
    --scg-under-cols: 1;
  }
  .scg-card-style-override { --scg-card-padding-override: var(--scg-card-padding-override-p, var(--scg-card-padding)); }
  .scg-main > .scg-right { margin-top: 0 !important; }
  .scg-under-image, .scg-right, .scg-full, .scg-staging { grid-template-columns:1fr; }
  .scg-card__inner { min-width: 0; }
  .scg-hide-image-tablet .scg-image-panel { display:block; }
  .scg-hide-image-phone .scg-image-panel { display:none; }
  .scg-hide-image-phone .scg-under-image { margin-top:0; }
  .scg-card-hide-phone { display:none !important; }
  .scg-height-fixed .scg-card { height:auto; min-height:var(--scg-card-height); }
  .scg-global-icon-phone-above .scg-card.scg-icon-layout-global .scg-card__inner { grid-template-columns:1fr; align-content:start; }
  .scg-global-icon-phone-beside .scg-card.scg-icon-layout-global .scg-card__inner { grid-template-columns:var(--scg-icon-tile-size,92px) minmax(0,1fr); }
}

@media (max-width:420px) {
  .scg-card__inner,
  .scg-global-icon-phone-beside .scg-card.scg-icon-layout-global .scg-card__inner {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .scg-badge {
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* Targeted fallback for Opera on mobile where layered image composition can
   leak artifacts between cards on some devices/browser builds. */
@media (max-width:980px) {
  .scg-grid.scg-opera-mobile .scg-image-panel {
    display: none !important;
  }

  .scg-grid.scg-opera-mobile .scg-under-image {
    margin-top: 0;
  }

  .scg-grid.scg-opera-mobile .scg-right,
  .scg-grid.scg-opera-mobile .scg-under-image,
  .scg-grid.scg-opera-mobile .scg-full {
    display: block;
  }

  .scg-grid.scg-opera-mobile .scg-right > .et_pb_module,
  .scg-grid.scg-opera-mobile .scg-under-image > .et_pb_module,
  .scg-grid.scg-opera-mobile .scg-full > .et_pb_module,
  .scg-grid.scg-opera-mobile .scg-right > .scg-card,
  .scg-grid.scg-opera-mobile .scg-under-image > .scg-card,
  .scg-grid.scg-opera-mobile .scg-full > .scg-card {
    margin-bottom: var(--scg-gap, 16px) !important;
  }

  .scg-grid.scg-opera-mobile .scg-right > .et_pb_module:last-child,
  .scg-grid.scg-opera-mobile .scg-under-image > .et_pb_module:last-child,
  .scg-grid.scg-opera-mobile .scg-full > .et_pb_module:last-child,
  .scg-grid.scg-opera-mobile .scg-right > .scg-card:last-child,
  .scg-grid.scg-opera-mobile .scg-under-image > .scg-card:last-child,
  .scg-grid.scg-opera-mobile .scg-full > .scg-card:last-child {
    margin-bottom: 0 !important;
  }
}

@supports not (display:grid) {
  .scg-main,
  .scg-right,
  .scg-under-image,
  .scg-full,
  .scg-staging {
    display: block;
  }

  .scg-right > .et_pb_module,
  .scg-under-image > .et_pb_module,
  .scg-full > .et_pb_module,
  .scg-staging > .et_pb_module,
  .scg-right > .scg-card,
  .scg-under-image > .scg-card,
  .scg-full > .scg-card,
  .scg-staging > .scg-card {
    margin-bottom: var(--scg-gap, 16px) !important;
  }

  .scg-right > .et_pb_module:last-child,
  .scg-under-image > .et_pb_module:last-child,
  .scg-full > .et_pb_module:last-child,
  .scg-staging > .et_pb_module:last-child,
  .scg-right > .scg-card:last-child,
  .scg-under-image > .scg-card:last-child,
  .scg-full > .scg-card:last-child,
  .scg-staging > .scg-card:last-child {
    margin-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .scg-card { transition:none !important; }
  .scg-card:hover { transform:none !important; }
  .scg-image-panel__image--rotor { animation:none !important; }
}


/* Visual Builder helpers — the parent React component places child modules
   directly into these zones, so no AJAX or DOM-wide mutation observer is used. */
.scg-grid.scg-vb-native .scg-staging { display:none !important; }
.scg-grid.scg-vb-native .scg-vb-empty {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  padding:20px;
  border:1px dashed rgba(20,26,70,.22);
  border-radius:16px;
  color:rgba(20,26,70,.62);
  background:rgba(255,255,255,.55);
  font-size:14px;
  text-align:center;
}
.scg-grid.scg-vb-native .scg-right:empty,
.scg-grid.scg-vb-native .scg-under-image:empty,
.scg-grid.scg-vb-native .scg-full:empty { display:none; }