/* Cobots page specific overrides */
/* Added brand color variable and unified spec icon styling (dc06 baseline applied to all cobot pages) */
:root { --cobot-green: #c9f742; }

/* === Six spec icons (applications section) unified layout === */
.applications .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 42px);
  margin: 0 auto;
  max-width: 1400px;
}
.applications .content .item-6 {
  flex: 0 1 clamp(140px, 15.5%, 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(10px, 1vw, 16px) clamp(8px, .9vw, 14px);
  min-height: clamp(150px, 18vh, 210px);
  box-sizing: border-box;
  position: relative;
  transition: background .25s ease, transform .25s ease;
}
/* Icon images 20% smaller normalization + smooth scaling */
.applications .content .item-6 img {
  width: clamp(56px, 48%, 92px); /* responsive; ~20% reduction vs previous larger sizes */
  max-width: 100px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  display: block;
  margin: 0 0 6px;
  transition: transform .35s ease, filter .35s ease; /* enable hover animation */
  filter: saturate(0) brightness(0.9) contrast(1.05); /* neutral base to allow colorize */
}
/* Text lines: keep each on a single line (no accidental wrapping) but allow controlled wrap for long phrases */
.applications .content .item-6 p {
  margin: 0;
  line-height: 1.15;
  font-size: clamp(.78rem, .72rem + .25vw, .95rem);
  font-weight: 500;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap; /* force one line */
}
/* Second line (value) can wrap if needed but prefer centered */
.applications .content .item-6 p + p span { white-space: nowrap; font-weight: 600; }
/* Bold label styling alignment */
.applications .content .item-6 p span[style*="bold"] { font-weight: 700 !important; letter-spacing: .01em; }

/* Hover interactions: icon turns brand green (colorization via filter approximation), subtle lift */
.applications .content .item-6:hover { transform: translateY(-6px); }
.applications .content .item-6:hover img {
  transform: scale(1.06);
  /* Filter tuned to approximate #c9f742 on grayscale source icons */
  filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(1081%) hue-rotate(34deg) brightness(103%) contrast(97%);
}
/* Optional: highlight text on hover */
.applications .content .item-6:hover p span[style*="bold"],
.applications .content .item-6:hover p + p span { color: var(--cobot-green); }

/* Accessibility: focus-visible same as hover */
.applications .content .item-6:focus-visible img { transform: scale(1.06); filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(1081%) hue-rotate(34deg) brightness(103%) contrast(97%); }
.applications .content .item-6:focus-visible { outline: 2px solid var(--cobot-green); outline-offset: 4px; }

/* Compact stacking on narrow screens */
@media (max-width: 640px) {
  .applications .content { gap: clamp(12px, 3.5vw, 24px); }
  .applications .content .item-6 { flex: 0 1 calc(50% - 14px); min-height: clamp(140px, 22vh, 190px); }
  .applications .content .item-6 img { width: clamp(54px, 42%, 86px); }
  .applications .content .item-6 p { font-size: clamp(.75rem, .7rem + .4vw, .9rem); }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .applications .content .item-6, .applications .content .item-6 img { transition: none !important; }
}

/* Full-width hero slider adjustments */
.slider-hero {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
}

.slider-hero .wrapper.slider-container {
    width: 100%;
    height: 100vh !important;
    min-height: 640px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.slider-hero .slides {
    width: 100%;
    height: 100%;
}

.slider-hero .slide-content {
    display: grid !important;
    grid-template-columns: 40% 60%;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 100vh;
    padding: calc(var(--nav-height-desktop) + 1rem) clamp(1rem, 5vw, 6rem) 2rem;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .slider-hero .slide-content {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: calc(var(--nav-height-mobile) + 1rem) 1.5rem 2rem;
        text-align: center;
    }

    .slider-hero .slide-text-content, .slider-hero .slide-image-content {
        max-width: 100% !important;
    }

    .slider-hero .slide-text-content {
        align-items: center !important;
    }
}

.slider-hero .slide-text-content {
    max-width: 100% !important;
    padding: 0 1rem !important;
}

.slider-hero .slide-image-content {
    height: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.slider-hero .slide-robot-image {
    max-width: 75% !important;
    max-height: 75vh !important;
    transform: none !important;
    object-fit: contain !important;
}

/* Reduce carousel product images by 10% to avoid cropping */
.carousel .deconstructed-card .card-layer.card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(0.9);
    transition: transform .4s ease;
}

.carousel .deconstructed-card:hover .card-layer.card-image img {
    transform: scale(0.95);
}

/* Ensure card size can accommodate scaled image without cropping */
:root {
    --card-width: 270px; /* slightly reduce base width to harmonize with scale */
    --card-height: 360px;
}

@media (min-width: 1441px) {
    :root {
        --card-width: 290px;
        --card-height: 380px;
    }
}

/* Cobots carousel: keep product images fully visible (no cropping) */
.carousel .deconstructed-card .card-layer.card-image {
    height: 130% !important; /* override 110% from global */
    overflow: hidden !important; /* keep rounded corners without spill */
    padding-bottom: 2rem;
}

.carousel .deconstructed-card .card-layer.card-image img,
.carousel .deconstructed-card .wave-svg {
    width: 100% !important; /* override 70%/100% globals */
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important; /* ensure full image is visible */
    object-position: center center !important;
    display: block !important;
    transform: none !important; /* prevent scaling that causes crop */
}

/* Disable hover zoom to avoid any clipping */
.carousel .deconstructed-card:hover .card-layer.card-image img,
.carousel .deconstructed-card:hover .wave-svg {
    transform: none !important;
}

/* Ensure all carousel product images share the same vertical baseline */
.carousel .deconstructed-card .card-layer.card-image {
    /* Anchor the image layer to the bottom of the card and normalize its height */
    top: auto !important;
    bottom: 0 !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}

.carousel .deconstructed-card .card-layer.card-image img,
.carousel .deconstructed-card .wave-svg {
    object-position: center bottom !important;
}

/* Strict bottom-baseline alignment for carousel images */
.carousel .deconstructed-card .card-layer.card-image {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    padding-bottom: 0 !important;
}

.carousel .deconstructed-card .card-layer.card-image img,
.carousel .deconstructed-card .wave-svg {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
}

/* Responsive Design for Info Boxes - Tablet and Mobile */

/* Tablet Layout (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .introducing-block-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 3rem 2rem !important;
        margin: 2.5rem 0 !important;
        min-height: auto !important;
    }

    .introducing-block-info .img-area {
        order: 1 !important;
        width: 70% !important;
        max-width: 500px !important;
        margin-bottom: 2rem !important;
    }

    .introducing-block-info .text-area,
    .introducing-block-info .text-area-2 {
        order: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .introducing-block-info .img-area img {
        width: 100% !important;
        height: auto !important;
        max-height: 350px !important;
        object-fit: contain !important;
    }

    /* Ensure consistent spacing for all 3 info boxes */
    #product-section,
    #water-resistance-section,
    #safety-section {
        padding: 3rem 2rem !important;
        margin: 2.5rem 0 !important;
    }
}

/* Mobile Layout (768px and below) */
@media (max-width: 768px) {
    .introducing-block-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2.5rem 1.5rem !important;
        margin: 2rem 0 !important;
        min-height: auto !important;
    }

    .introducing-block-info .img-area {
        order: 1 !important;
        width: 85% !important;
        max-width: 400px !important;
        margin-bottom: 1.5rem !important;
    }

    .introducing-block-info .text-area,
    .introducing-block-info .text-area-2 {
        order: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .introducing-block-info .img-area img {
        width: 100% !important;
        height: auto !important;
        max-height: 280px !important;
        object-fit: contain !important;
    }

    /* Typography adjustments for mobile */
    .introducing-block-info h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .introducing-block-info .description {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* Ensure consistent spacing for all 3 info boxes */
    #product-section,
    #water-resistance-section,
    #safety-section {
        padding: 2.5rem 1.5rem !important;
        margin: 2rem 0 !important;
    }
}

/* Small Mobile Layout (480px and below) */
@media (max-width: 480px) {
    .introducing-block-info {
        padding: 2rem 1rem !important;
        margin: 1.5rem 0 !important;
    }

    .introducing-block-info .img-area {
        width: 95% !important;
        margin-bottom: 1.25rem !important;
    }

    .introducing-block-info .img-area img {
        max-height: 220px !important;
    }

    .introducing-block-info h1 {
        font-size: 1.6rem !important;
        margin-bottom: 0.75rem !important;
    }

    .introducing-block-info .description {
        font-size: 0.9rem !important;
    }

    /* Ensure consistent spacing for all 3 info boxes */
    #product-section,
    #water-resistance-section,
    #safety-section {
        padding: 2rem 1rem !important;
        margin: 1.5rem 0 !important;
    }
}

/* === Cobots hero header layout fixes (desktop/laptop) === */
@media (min-width: 1100px) {
    /* Ensure the slide takes the viewport height for proper vertical centering */
    .slider-container .slide-content {
        min-height: 90vh !important;
        display: flex !important;
        align-items: center !important;
        gap: clamp(24px, 4vw, 72px) !important;
    }

    /* Expand text area width and add generous left spacing */
    .slider-container .slide-text-content {
        flex: 0 1 54% !important; /* give text more room */
        padding-left: clamp(4rem, 6vw, 8rem) !important; /* comfortable left distance */
    }

    /* Remove the 100vw stretch and constrain text block to a readable width */
    .slider-container .slide-text-content .container-inner {
        width: 100% !important;
        max-width: clamp(720px, 48vw, 980px) !important; /* more width so lines are not cramped */
        padding: 0 !important; /* keep padding on the parent only */
        margin: 0 !important;
    }

    /* Balance the image column width with the expanded text */
    .slider-container .slide-image-content {
        flex: 0 1 46% !important;
    }

    body > .container {
        height: 90vh !important;
    }
}

/* Tablet: keep good spacing but a bit tighter */
@media (min-width: 768px) and (max-width: 1099.98px) {
    .slider-container .slide-content {
        align-items: center !important;
    }

    .slider-container .slide-text-content {
        padding-left: clamp(2rem, 4vw, 3rem) !important;
    }

    .slider-container .slide-text-content .container-inner {
        max-width: min(90vw, 820px) !important;
    }
}

/* Full-width video section aligned to navbar container */
.fullwidth-video-bleed {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
  background: transparent !important; /* no black before play */
  padding-top: 5% !important; /* +10% top padding */
  padding-bottom: 5% !important; /* +10% bottom padding */
}

/* Keep container-inner paddings (matches navbar). Nest a centered 80% player. */
.fullwidth-video-bleed .video-container { padding-left: inherit; padding-right: inherit; }

.fullwidth-video-bleed .video-embed {
  position: relative;
  width: 90%; /* increased from 80% per request */
  max-width: 100%;
  margin: 0 auto; /* center horizontally */
  aspect-ratio: 16 / 9; /* keep 16:9 */
  overflow: hidden;
}

/* Click-to-play poster overlay (hide iframe before play) */
.fullwidth-video-bleed .video-embed .video-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 0; /* follow wrapper */
  z-index: 2;
}
.fullwidth-video-bleed .video-embed .video-poster::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,0) 65%);
  pointer-events: none;
}
.fullwidth-video-bleed .video-embed .play-button{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(54px, 6.5vw, 92px); height: clamp(54px, 6.5vw, 92px);
  border-radius: 50%; border: none;
  background: linear-gradient(90deg,#0090ff,#53d3ff,#c9f742);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  display: grid; place-items: center; color: #021436;
  z-index: 3;
}

/* Hide iframe until play; then fade in */
.fullwidth-video-bleed .video-embed iframe { opacity: 0; transition: opacity .25s ease; }
.fullwidth-video-bleed .video-embed.is-loaded iframe { opacity: 1; pointer-events: auto; }
/* Adjusted: smooth fade out for poster and play button */
.fullwidth-video-bleed .video-embed.is-loaded .video-poster,
.fullwidth-video-bleed .video-embed.is-loaded .play-button { display:block !important; }
/* Video poster & play button smooth fade handling */
.fullwidth-video-bleed .video-embed .video-poster,
.fullwidth-video-bleed .video-embed .play-button { opacity:1; transition: opacity .35s ease, transform .35s ease; }
.fullwidth-video-bleed .video-embed.is-loaded .video-poster,
.fullwidth-video-bleed .video-embed.is-loaded .play-button { opacity:0 !important; pointer-events:none !important; transform:scale(.85); }
/* Ensure they remain in flow for fade */
.fullwidth-video-bleed .video-embed.is-loaded .video-poster,
.fullwidth-video-bleed .video-embed.is-loaded .play-button { display:block !important; }
/* Iframe fills exact poster bounds */
.fullwidth-video-bleed .video-embed iframe { position: absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; opacity:0; transition: opacity .35s ease; }
.fullwidth-video-bleed .video-embed.is-loaded iframe { opacity:1; }
/* Legacy fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .fullwidth-video-bleed .video-embed { height:0; padding-top:56.25%; }
  .fullwidth-video-bleed .video-embed .video-poster, .fullwidth-video-bleed .video-embed iframe, .fullwidth-video-bleed .video-embed .play-button { position:absolute; inset:0; }
}

/* ========================================
   COBOT PAGES: Top 6 Icons Section
   Match D-Bot MAR styling
   ======================================== */

/* Applications icons section — unified styling for all cobot pages */
.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;
}

.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;
}

/* Grid layout for icons */
#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;
}

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

/* Mobile: 1 per row */
@media (max-width: 640px) {
  #application-section .content {
    grid-template-columns: 1fr !important;
  }
}
.applications .content .item-6 {
  width: 100% !important;
}
/* Icon sizing - 20% smaller (match dc06) */
#application-section .content .item-6 img {
  width: clamp(9rem, 9vw, 9rem) !important;
  max-width: 14rem !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}
/* Typography hierarchy with proper spacing and centering */
#application-section .content .item-6 {
  gap: 8px !important;
  text-align: center !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
#application-section .content .item-6 p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  text-align: center !important;
}
/* Primary label - single line, centered */
#application-section .content .item-6 p:first-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
}
#application-section .content .item-6 p:first-of-type span {
  font-weight: 800 !important;
  font-size: clamp(1.05rem, 0.75rem + 1.1vw, 1.7rem) !important;
  letter-spacing: 0.01em !important;
  display: inline-block !important;
  white-space: nowrap !important;
}
/* Descriptor line - single line, centered */
#application-section .content .item-6 p:last-of-type {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
}
#application-section .content .item-6 p:last-of-type span {
  font-weight: 500 !important;
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.2rem) !important;
  opacity: .95 !important;
  white-space: nowrap !important;
}
/* Ensure consistent white text */
#application-section .content .item-6 p,
#application-section .content .item-6 p span {
  color: #fff !important;
}
/* Icon hover animation: scale up and change to green color */
#application-section .content .item-6 img {
  transition: transform .35s ease, filter .35s ease !important;
  filter: brightness(1) !important;
}
#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;
}
/* Ensure no clipping when icons scale on hover */
#application-section,
#application-section .container-inner,
#application-section .content,
#application-section .content .item-6 {
  overflow: visible !important;
}
#application-section .content .item-6 img { transform-origin: center center !important; }
#application-section .content .item-6:hover { position: relative !important; z-index: 2 !important; }