/* Cognibot Kit page-specific overrides: shrink hero image and prevent global scaling */

/* Desktop image has a unique class; mobile image sits inside the same container */
.slide-robot-image-cognibotkit .slide-robot-image,
.slide-robot-image.slide-robot-image-cognibot-kit {
    height: 60vh !important;
    max-height: 60vh !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important; /* neutralize scale from global improvements */
}

/* Ensure mobile variant with w-100 also respects the 48vh cap */
.slide-robot-image-cognibotkit .slide-robot-image.w-100 {
    height: 48vh !important;
    max-height: 48vh !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
}

/* Apply a vertical fade mask to both desktop and mobile images */
.slide-robot-image-cognibotkit img {
    /* Soft fade at top/bottom with solid center */
    -webkit-mask-image: -webkit-linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 1) 14%,
    rgba(0, 0, 0, 1) 86%,
    rgba(0, 0, 0, 0.85) 94%,
    rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 6%,
    rgba(0, 0, 0, 1) 14%,
    rgba(0, 0, 0, 1) 86%,
    rgba(0, 0, 0, 0.85) 94%,
    rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Applications icons section — match MAR/Dynamic Duo style */
.page-cognibot-kit .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-cognibot-kit .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 by constraining the grid itself */
.page-cognibot-kit #application-section .content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: clamp(26px, 3.3vw, 44px) !important; /* 10% more than shared 24px/3vw/40px */
  row-gap: clamp(26px, 3.3vw, 44px) !important;    /* 10% more than shared 24px/3vw/40px */
  justify-items: center !important;
  align-items: start !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* Tablet: 2 per row */
@media (max-width: 1024px) {
  .page-cognibot-kit #application-section .content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 640px) {
  .page-cognibot-kit #application-section .content {
    grid-template-columns: 1fr !important;
  }
}

/* 10% smaller icons (down from previous values) */
.page-cognibot-kit #application-section .content .item-6 img {
  width: clamp(108px, 9.9vw, 144px) !important; /* exactly 10% smaller than 120px/11vw/160px */
  max-width: 144px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Typography hierarchy with proper spacing and vertical alignment */
.page-cognibot-kit #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-cognibot-kit #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-cognibot-kit #application-section .content .item-6 p:first-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.page-cognibot-kit #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-cognibot-kit #application-section .content .item-6 p:last-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.page-cognibot-kit #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-cognibot-kit #application-section .content .item-6 p,
.page-cognibot-kit #application-section .content .item-6 p span {
  color: #fff !important;
}

/* Keep the Specs header on a single line */
#specs-features h1 {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.05 !important;
}

/* Made in Germany flag positioning for Cognibot-Kit */
.page-cognibot-kit .slide-robot-image-cognibotkit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.page-cognibot-kit .de_flag_cognibot {
  position: absolute !important;
  bottom: 1rem !important;
  right: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 10 !important;
}

/* Responsive adjustments for flag */
@media (max-width: 768px) {
  .page-cognibot-kit .de_flag_cognibot {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
    transform: scale(0.85) !important;
  }
}

@media (max-width: 480px) {
  .page-cognibot-kit .de_flag_cognibot {
    bottom: 0.3rem !important;
    right: 0.3rem !important;
    transform: scale(0.7) !important;
  }
}

/* On very small screens, shrink slightly so it still fits in one line */
@media (max-width: 520px) {
    #specs-features h1 {
        font-size: clamp(1.2rem, 5.2vw, 2rem) !important;
    }
}


/* --- "Bring Precision..." section: keep 1 row on desktop, 40vw text, larger image --- */
@media (min-width: 992px) {
  .page-cognibot-kit .intro-section {
    display: flex !important;
    flex-wrap: nowrap !important;        /* force single row on normal (desktop) screens */
    align-items: center !important;
    gap: 3vw !important;
  }
  .page-cognibot-kit .intro-section .intro-image {
    width: 45vw !important;              /* a bit larger image block */
    flex: 0 0 45vw !important;
  }
  .page-cognibot-kit .intro-section .intro-image img {
    height: 70vh !important;             /* slightly taller than before */
    max-height: 780px !important;
  }
  .page-cognibot-kit .intro-section .intro-content {
    width: 40vw !important;              /* text box width target */
    min-width: 40vw !important;
    flex: 0 0 40vw !important;
    align-items: flex-start !important;
  }
  .page-cognibot-kit .intro-section .intro-box {
    width: 40vw !important;              /* ensure the box itself is 40vw */
    min-width: 40vw !important;
    margin-left: 0 !important;           /* cancel the negative overlap on desktop */
  }
}

/* Icon hover animation: scale up and change to green color */
.page-cognibot-kit #application-section .content .item-6 img {
  transition: transform .35s ease, filter .35s ease !important;
  filter: brightness(1) !important;
}
.page-cognibot-kit #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;
}
/* Optional subtle lift for the tile */
.page-cognibot-kit #application-section .content .item-6 {
  transition: transform .35s ease !important;
}
.page-cognibot-kit #application-section .content .item-6:hover {
  transform: translateY(-3px) !important;
}

/* Ensure no clipping when icons scale on hover */
.page-cognibot-kit #application-section,
.page-cognibot-kit #application-section .container-inner,
.page-cognibot-kit #application-section .content,
.page-cognibot-kit #application-section .content .item-6 {
  overflow: visible !important;      /* allow scaled image to extend */
}
.page-cognibot-kit #application-section .content .item-6 img {
  transform-origin: center center !important; /* scale from center */
}
.page-cognibot-kit #application-section .content .item-6:hover {
  position: relative !important;
  z-index: 2 !important;              /* elevate above neighbors when scaled */
}

/* Desktop: tuck the text box slightly under the image */
@media (min-width: 992px) {
  .page-cognibot-kit .intro-section .intro-box {
    margin-left: -6vw !important; /* slight overlap under the image */
  }
}

/* Mobile: make the intro image roughly twice as big */
@media (max-width: 640px) {
  .page-cognibot-kit .intro-section .intro-image {
    width: 90vw !important;
  }
  .page-cognibot-kit .intro-section .intro-image img {
    height: 100vh !important;      /* ~2x the previous 50vh */
    max-height: none !important;
    width: 100% !important;
    object-fit: contain !important; /* ensure no cropping */
  }
}

/* --- Explore D-Bot Robotics: responsive card widths --- */
#explore-dbot .bpw-card {
  /* Let each card flex fluidly across the row and rescale with viewport */
  flex: 1 1 clamp(280px, 30vw, 460px) !important;
  max-width: none !important;   /* ignore inline max-width:420px */
  width: auto !important;       /* let flex-basis drive the width */
  align-self: stretch !important; /* fill column height nicely */
}
/* Slightly larger basis on very wide screens */
@media (min-width: 1200px) {
  #explore-dbot .bpw-card {
    flex-basis: clamp(320px, 28vw, 520px) !important;
  }
}
/* Mobile: stack cards one under another, full width */
@media (max-width: 700px) {
  #explore-dbot .bpw-card {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Explore grid: 3 per row on normal screens, 1 per row below 1100px */
.explore-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px,1fr)); gap:60px; align-items:stretch; }
@media (max-width:1100px){ .explore-grid{ grid-template-columns: 1fr; gap:30px; } }

/* Cognibot-Kit specs table ~20% wider; caption ~30% smaller */
.page-cognibot-kit .cognibot-specs-table{ min-width:504px!important; max-width:576px!important; }
#specs-features h1{ font-size: clamp(1.61rem,1.19rem + 1.68vw,2.73rem)!important; }

/* Keep contact form compact and centered when present on this page */
.page-cognibot-kit #contact_div{ max-width:980px!important; margin-inline:auto!important; padding-inline:4vw!important; }
.page-cognibot-kit #contact_div h2{ text-align:center!important; }
/* Header hero image circular glow (Cognibot-Kit) */
.page-cognibot-kit .slide-image-content { overflow: visible !important; }
.page-cognibot-kit .slide-robot-image-cognibotkit { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.page-cognibot-kit .slide-robot-image-cognibotkit::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: clamp(368px, 50.6vw, 943px);
  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(48px);
  opacity: .612;
  pointer-events: none;
  z-index: 0;
  animation: kitGlowPulse 7s ease-in-out infinite;
}
.page-cognibot-kit .slide-robot-image-cognibotkit img { position: relative; z-index: 1; }
@keyframes kitGlowPulse {
  0% { transform: translate(-50%, -50%) scale(.86); opacity:.576; }
  50%{ transform: translate(-50%, -50%) scale(1.02); opacity:.666; }
  100%{ transform: translate(-50%, -50%) scale(.86); opacity:.576; }
}
@media (max-width:1100px){
  .page-cognibot-kit .slide-robot-image-cognibotkit::before {
    width: clamp(299px, 75.9vw, 805px);
  }
}
@media (max-width:640px){
  .page-cognibot-kit .slide-robot-image-cognibotkit::before {
    width: clamp(253px, 92vw, 621px);
    opacity:.558;
  }
}

/* Specs & Features right-side image: circular glow behind the product */
.page-cognibot-kit #specs-features > [data-aos="fade-left"] > div { position: relative !important; overflow: visible !important; }
.page-cognibot-kit #specs-features > [data-aos="fade-left"] > div::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.92);
  width: clamp(359px, 52.4vw, 718px);
  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(42px);
  opacity: .594;
  pointer-events: none;
  z-index: 0;
  animation: kitGlowPulse 7s ease-in-out infinite; /* reuse same pulse */
}
.page-cognibot-kit #specs-features > [data-aos="fade-left"] > div > img { position: relative; z-index: 1; }
@media (max-width:1100px){
  .page-cognibot-kit #specs-features > [data-aos="fade-left"] > div::before {
    width: clamp(331px, 82.8vw, 690px);
  }
}
@media (max-width:640px){
  .page-cognibot-kit #specs-features > [data-aos="fade-left"] > div::before {
    width: clamp(304px, 113vw, 580px);
    opacity: .540;
  }
}
@media (min-width:1600px){
  .page-cognibot-kit #specs-features > [data-aos="fade-left"] > div::before {
    transform: translate(-50%, -50%) scale(1.20);
  }
}