/* Dynamic Duo page overrides */

/* 1) Reduce the gap between the 3 cobot images and the table by ~60% */
#dynamic-model-strip { margin-bottom: 6px !important; /* was ~14px */ }
@media (min-width: 768px) {
  #dynamic-model-strip { padding-bottom: 13px !important; /* was 32px */ }
}
#dynamic-model-strip .model img { display:block; margin:0 auto; }

/* 2) Ensure full-bleed backgrounds (no left/right gap) for key sections */
/* Use viewport-width bleed technique so background spans edge-to-edge regardless of outer wrappers. */
#specifications-table,
#built-in-battery,
#best-paired-with {
  position: relative;
  width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box;
}

/* Fix alignment: revert full-bleed offset for main sections and re-center content */
.page-dynamic-duo #specifications-table,
.page-dynamic-duo #built-in-battery,
.page-dynamic-duo #best-paired-with {
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep body from showing horizontal scrollbar due to full-bleed sections */
body.page-dynamic-duo { overflow-x: hidden; }

/* Built-in Battery section image - 30% smaller */
.page-dynamic-duo #built-in-battery img {
  max-width: 448px !important;
}

/* Hero header image glow (Dynamic Duo) */
.page-dynamic-duo .slide-image-content { overflow: visible !important; }
.page-dynamic-duo .slide-robot-image-mar { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.page-dynamic-duo .slide-robot-image-mar::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: clamp(340px, 46vw, 960px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0,255,153,0.30) 0%,
    rgba(0,255,153,0.18) 42%,
    rgba(0,255,153,0.08) 70%,
    rgba(0,255,153,0.00) 82%);
  filter: blur(50px);
  opacity: .64;
  pointer-events: none;
  z-index: 0;
  animation: dynamicHeroGlowPulse 7s ease-in-out infinite;
}
.page-dynamic-duo .slide-robot-image-mar img { position: relative; z-index: 1; }
@keyframes dynamicHeroGlowPulse {
  0% { transform: translate(-50%, -50%) scale(.86); opacity:.60; }
  50%{ transform: translate(-50%, -50%) scale(1.03); opacity:.70; }
  100%{ transform: translate(-50%, -50%) scale(.86); opacity:.60; }
}
@media (max-width:1100px){
  .page-dynamic-duo .slide-robot-image-mar::before { width: clamp(280px, 70vw, 780px); filter: blur(42px); }
}
@media (max-width:640px){
  .page-dynamic-duo .slide-robot-image-mar::before { width: clamp(240px, 84vw, 560px); filter: blur(34px); opacity:.58; }
}
@media (min-width:1600px){
  .page-dynamic-duo .slide-robot-image-mar::before { transform: translate(-50%, -50%) scale(1.18); }
}

/* Secondary section image glow: Autonomous Cobot Redeployment */
.page-dynamic-duo #product-section .img-area { position: relative; overflow: visible !important; }
.page-dynamic-duo #product-section .img-area::before {
  content: "";
  position: absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) scale(.9);
  width: clamp(300px, 42vw, 820px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(0,255,153,0.28) 0%,
    rgba(0,255,153,0.16) 45%,
    rgba(0,255,153,0.07) 70%,
    rgba(0,255,153,0.00) 82%);
  filter: blur(46px);
  opacity: .60;
  pointer-events: none;
  z-index: 0;
  animation: dynamicSecondaryGlow 8s ease-in-out infinite;
}
.page-dynamic-duo #product-section .img-area img { position: relative; z-index: 1; }
@keyframes dynamicSecondaryGlow {
  0%   { transform: translate(-50%, -50%) scale(.84); opacity:.56; }
  50%  { transform: translate(-50%, -50%) scale(1.02); opacity:.66; }
  100% { transform: translate(-50%, -50%) scale(.84); opacity:.56; }
}
@media (max-width: 900px){
  .page-dynamic-duo #product-section .img-area::before { width: clamp(260px, 70vw, 640px); filter: blur(38px); }
}
@media (max-width: 640px){
  .page-dynamic-duo #product-section .img-area::before { width: clamp(240px, 86vw, 520px); filter: blur(30px); opacity:.54; }
}
@media (min-width:1600px){
  .page-dynamic-duo #product-section .img-area::before { transform: translate(-50%, -50%) scale(1.16); }
}

.applications .content .item-6 {

    width: 100%!important;
}
.page-dynamic-duo #application-section .content .item-6 p:first-of-type {
    max-width: fit-content !important;

}
/* Applications icons section — match reference image */
.page-dynamic-duo .applications {
  background: #031a40 !important;
  padding: clamp(70px, 9vw, 150px) 0 !important;
  width: 100vw !important;
  position: relative !important;

  margin-left: -50vw !important;
  margin-right: -50vw !important;
}
.page-dynamic-duo .applications .container-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: clamp(18px, 3vw, 36px) !important;
  padding-right: clamp(18px, 3vw, 36px) !important;
}
/* Keep icons positioned as before by constraining the grid itself */
.page-dynamic-duo #application-section .content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(40px, 8vw, 120px) !important;
  row-gap: clamp(34px, 6vw, 90px) !important;
  justify-items: center !important;
  align-items: start !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
@media (max-width: 1024px) {
  .page-dynamic-duo #application-section .content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .page-dynamic-duo #application-section .content {
    grid-template-columns: 1fr !important;
  }
}

/* 15% smaller icons */
.page-dynamic-duo #application-section .content .item-6 img {
  width: clamp(128px, 11vw, 162px) !important;
  max-width: 162px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Typography hierarchy with proper spacing */
.page-dynamic-duo #application-section .content .item-6 {
  gap: 18px !important;
  text-align: center !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.page-dynamic-duo #application-section .content .item-6 p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
/* Primary label - single line, no wrapping */
.page-dynamic-duo #application-section .content .item-6 p:first-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.page-dynamic-duo #application-section .content .item-6 p:first-of-type span {
  font-weight: 800 !important;
  font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.8rem) !important;
  letter-spacing: 0.01em !important;
  display: inline !important;
  white-space: nowrap !important;
}
/* Descriptor line - single line, no wrapping */
.page-dynamic-duo #application-section .content .item-6 p:last-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.page-dynamic-duo #application-section .content .item-6 p:last-of-type span {
  font-weight: 500 !important;
  font-size: clamp(0.95rem, 0.85rem + 0.45vw, 1.25rem) !important;
  opacity: .95 !important;
  white-space: nowrap !important;
}

/* Ensure consistent white text */
.page-dynamic-duo #application-section .content .item-6 p,
.page-dynamic-duo #application-section .content .item-6 p span {
  color: #fff !important;
}

/* Icon hover animation: scale up and change to green color */
.page-dynamic-duo #application-section .content .item-6 img {
  transition: transform .35s ease, filter .35s ease !important;
  filter: brightness(1) !important;
}
.page-dynamic-duo #application-section .content .item-6:hover img {
  transform: scale(1.06) !important;
  filter: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(482%) hue-rotate(76deg) brightness(101%) contrast(89%) !important;
}
