/* =========================================================
   IDEOGY — HOMEPAGE HERO
   Version: 2.6

   Direction:
   - desktop: split-screen DESIGN / ENGINEERING
   - mobile + reduced widths: text stays INSIDE image
   - mobile crop is panel-specific:
     DESIGN loads more from the RIGHT
     ENGINEERING loads more from the LEFT
   - stronger readability overlay
   - CTA must always remain visible
   ========================================================= */

:root{
  --ideogy-hero-pink:#FF66FF;
  --ideogy-hero-white:#FFFFFF;
  --ideogy-hero-black:#000000;
  --ideogy-hero-muted:#F0F0F0;
}

/* =========================================================
   1. HERO GRID
   ========================================================= */

body.in-index
.next-to-carousel-banners.ideogy-hero-grid{
  display:grid!important;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr)!important;
  gap:0!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}

body.in-index
.ideogy-hero-panel{
  position:relative!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#050505!important;
  isolation:isolate!important;
}

/* Native banner as image carrier */
body.in-index
.ideogy-hero-panel > a.extended-empty,
body.in-index
.ideogy-hero-panel > a[data-ec-promo-id],
body.in-index
.ideogy-hero-panel > a:first-child{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  cursor:default!important;
}

body.in-index
.ideogy-hero-panel > a > picture,
body.in-index
.ideogy-hero-panel > a > picture > img,
body.in-index
.ideogy-hero-panel > a > img,
body.in-index
.ideogy-hero-panel img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Hide native Shoptet texts */
body.in-index
.ideogy-hero-panel .extended-banner-texts,
body.in-index
.ideogy-hero-manifesto{
  display:none!important;
}

/* =========================================================
   2. DESKTOP READABILITY OVERLAYS
   ========================================================= */

/* DESIGN */
body.in-index
.ideogy-hero-panel--design::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.60) 25%,
      rgba(0,0,0,.31) 47%,
      rgba(0,0,0,.08) 68%,
      rgba(0,0,0,0) 84%
    );
}

/* ENGINEERING */
body.in-index
.ideogy-hero-panel--engineering::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      270deg,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.63) 27%,
      rgba(0,0,0,.34) 49%,
      rgba(0,0,0,.08) 70%,
      rgba(0,0,0,0) 86%
    );
}

/* Gentle bottom shade */
body.in-index
.ideogy-hero-panel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30%;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.31) 100%
    );
}

/* =========================================================
   3. OVERLAY
   ========================================================= */

body.in-index
.ideogy-hero-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  box-sizing:border-box;
  color:var(--ideogy-hero-white);
  pointer-events:none;
}

body.in-index
.ideogy-hero-copy{
  position:absolute;
  top:59%;
  display:flex;
  flex-direction:column;
  width:min(48%,430px);
  max-width:430px;
  min-width:0;
  transform:translateY(-50%);
}

/* DESIGN */
body.in-index
.ideogy-hero-panel--design
.ideogy-hero-copy{
  left:clamp(28px,3.4vw,72px);
  align-items:flex-start;
  text-align:left;
}

/* ENGINEERING */
body.in-index
.ideogy-hero-panel--engineering
.ideogy-hero-copy{
  right:clamp(28px,3.4vw,72px);
  align-items:flex-end;
  text-align:right;
}

body.in-index
.ideogy-hero-eyebrow{
  display:none!important;
}

/* =========================================================
   4. TITLE / DESCRIPTION
   ========================================================= */

body.in-index
.ideogy-hero-title{
  margin:0!important;
  padding:0!important;
  color:#FFF!important;
  font-size:clamp(42px,4.05vw,76px)!important;
  font-weight:700!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  text-shadow:0 2px 16px rgba(0,0,0,.30)!important;
}

body.in-index
.ideogy-hero-dot{
  display:none!important;
}

body.in-index
.ideogy-hero-description{
  width:100%;
  max-width:390px;
  margin:clamp(18px,1.7vw,28px) 0 0!important;
  color:var(--ideogy-hero-muted)!important;
  font-size:clamp(13px,1.02vw,17px)!important;
  font-weight:400!important;
  line-height:1.34!important;
  letter-spacing:-.005em!important;
  text-shadow:0 2px 12px rgba(0,0,0,.32)!important;
}

body.in-index
.ideogy-hero-panel--engineering
.ideogy-hero-description{
  max-width:370px;
}

/* =========================================================
   5. CTA
   ========================================================= */

body.in-index
.ideogy-hero-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:clamp(20px,1.8vw,30px) 0 0!important;
  padding:9px 13px!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:5px!important;
  background:var(--ideogy-hero-pink)!important;
  color:#080808!important;
  font-size:clamp(11px,.80vw,14px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  text-transform:none!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:
    transform .18s ease,
    background-color .18s ease!important;
}

body.in-index
.ideogy-hero-cta:hover,
body.in-index
.ideogy-hero-cta:focus-visible{
  background:#ff82ff!important;
  color:#000!important;
  transform:translateY(-1px)!important;
}

body.in-index
.ideogy-hero-cta:focus-visible{
  outline:2px solid #FFF!important;
  outline-offset:3px!important;
}

body.in-index
.ideogy-hero-cta-arrow{
  flex:0 0 auto!important;
  font-size:1.05em!important;
  font-weight:700!important;
  line-height:1!important;
}

/* =========================================================
   6. COMPACT DESKTOP / LAPTOP
   ========================================================= */

@media (min-width:900px) and (max-width:1350px){
  body.in-index
  .ideogy-hero-copy{
    top:60%;
    width:min(50%,360px);
  }

  body.in-index
  .ideogy-hero-panel--design
  .ideogy-hero-copy{
    left:clamp(24px,2.6vw,42px);
  }

  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-copy{
    right:clamp(24px,2.6vw,42px);
  }

  body.in-index
  .ideogy-hero-title{
    font-size:clamp(36px,4.3vw,55px)!important;
  }

  body.in-index
  .ideogy-hero-description{
    max-width:330px;
    margin-top:14px!important;
    font-size:clamp(11px,1.12vw,14px)!important;
    line-height:1.33!important;
  }

  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-description{
    max-width:320px;
  }

  body.in-index
  .ideogy-hero-cta{
    margin-top:17px!important;
    padding:8px 11px!important;
    font-size:clamp(10px,.88vw,12px)!important;
  }
}

/* =========================================================
   7. MOBILE + REDUCED WIDTHS
   TEXT STAYS INSIDE THE IMAGE
   Design crops from right / Engineering crops from left
   ========================================================= */

@media (max-width:899px),
       (min-width:900px) and (max-width:1199px) and (orientation:portrait){

  body.in-index
  .next-to-carousel-banners.ideogy-hero-grid{
    grid-template-columns:1fr!important;
  }

  body.in-index
  .ideogy-hero-panel{
    background:#090909!important;
  }

  body.in-index
  .ideogy-hero-panel > a.extended-empty,
  body.in-index
  .ideogy-hero-panel > a[data-ec-promo-id],
  body.in-index
  .ideogy-hero-panel > a:first-child{
    aspect-ratio:4 / 5!important;
    background:#090909!important;
  }

  body.in-index
  .ideogy-hero-panel > a > picture{
    width:100%!important;
    height:100%!important;
  }

  body.in-index
  .ideogy-hero-panel > a > picture > img,
  body.in-index
  .ideogy-hero-panel > a > img,
  body.in-index
  .ideogy-hero-panel img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  /* Panel-specific mobile crop */
  body.in-index
  .ideogy-hero-panel--design > a > picture > img,
  body.in-index
  .ideogy-hero-panel--design > a > img,
  body.in-index
  .ideogy-hero-panel--design img{
    object-position:78% center!important;
  }

  body.in-index
  .ideogy-hero-panel--engineering > a > picture > img,
  body.in-index
  .ideogy-hero-panel--engineering > a > img,
  body.in-index
  .ideogy-hero-panel--engineering img{
    object-position:22% center!important;
  }

  /* Stronger readability layer for mobile */
  body.in-index
  .ideogy-hero-panel--design::before,
  body.in-index
  .ideogy-hero-panel--engineering::before{
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.90) 0%,
        rgba(0,0,0,.76) 24%,
        rgba(0,0,0,.42) 48%,
        rgba(0,0,0,.14) 72%,
        rgba(0,0,0,0) 100%
      )!important;
  }

  body.in-index
  .ideogy-hero-panel::after{
    height:46%!important;
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.42) 100%
      )!important;
  }

  /* Text INSIDE image */
  body.in-index
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--design
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-copy{
    top:auto!important;
    right:auto!important;
    bottom:clamp(20px,5vw,34px)!important;
    left:clamp(18px,5vw,32px)!important;
    width:min(82%,420px)!important;
    max-width:420px!important;
    align-items:flex-start!important;
    text-align:left!important;
    transform:none!important;
  }

  body.in-index
  .ideogy-hero-title{
    font-size:clamp(38px,8.2vw,56px)!important;
    line-height:.96!important;
  }

  body.in-index
  .ideogy-hero-description,
  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-description{
    max-width:390px!important;
    margin-top:12px!important;
    font-size:clamp(13px,2.4vw,17px)!important;
    line-height:1.34!important;
  }

  body.in-index
  .ideogy-hero-cta{
    margin-top:16px!important;
    padding:9px 13px!important;
    font-size:clamp(11px,2vw,14px)!important;
  }
}

/* =========================================================
   8. PHONES
   ========================================================= */

@media (max-width:479px){
  body.in-index
  .ideogy-hero-panel > a.extended-empty,
  body.in-index
  .ideogy-hero-panel > a[data-ec-promo-id],
  body.in-index
  .ideogy-hero-panel > a:first-child{
    aspect-ratio:1 / 1.24!important;
  }

  body.in-index
  .ideogy-hero-panel--design > a > picture > img,
  body.in-index
  .ideogy-hero-panel--design > a > img,
  body.in-index
  .ideogy-hero-panel--design img{
    object-position:82% center!important;
  }

  body.in-index
  .ideogy-hero-panel--engineering > a > picture > img,
  body.in-index
  .ideogy-hero-panel--engineering > a > img,
  body.in-index
  .ideogy-hero-panel--engineering img{
    object-position:18% center!important;
  }

  body.in-index
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--design
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-copy{
    bottom:18px!important;
    left:16px!important;
    width:84%!important;
  }

  body.in-index
  .ideogy-hero-title{
    font-size:clamp(34px,10vw,46px)!important;
  }

  body.in-index
  .ideogy-hero-description,
  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-description{
    margin-top:11px!important;
    font-size:clamp(11.5px,3.45vw,14.5px)!important;
    line-height:1.33!important;
  }

  body.in-index
  .ideogy-hero-cta{
    margin-top:14px!important;
    padding:8px 11px!important;
    font-size:clamp(10.5px,3vw,12.5px)!important;
  }
}

/* =========================================================
   9. VERY NARROW
   ========================================================= */

@media (max-width:359px){
  body.in-index
  .ideogy-hero-panel > a.extended-empty,
  body.in-index
  .ideogy-hero-panel > a[data-ec-promo-id],
  body.in-index
  .ideogy-hero-panel > a:first-child{
    aspect-ratio:1 / 1.30!important;
  }

  body.in-index
  .ideogy-hero-panel--design > a > picture > img,
  body.in-index
  .ideogy-hero-panel--design > a > img,
  body.in-index
  .ideogy-hero-panel--design img{
    object-position:84% center!important;
  }

  body.in-index
  .ideogy-hero-panel--engineering > a > picture > img,
  body.in-index
  .ideogy-hero-panel--engineering > a > img,
  body.in-index
  .ideogy-hero-panel--engineering img{
    object-position:16% center!important;
  }

  body.in-index
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--design
  .ideogy-hero-copy,
  body.in-index
  .ideogy-hero-panel--engineering
  .ideogy-hero-copy{
    left:14px!important;
    bottom:14px!important;
    width:86%!important;
  }

  body.in-index
  .ideogy-hero-title{
    font-size:32px!important;
  }

  body.in-index
  .ideogy-hero-description{
    font-size:11.5px!important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  body.in-index
  .ideogy-hero-cta{
    transition:none!important;
  }
}