/*
 * Champions Training – Radreisen Hero
 * Version 0.6.3
 *
 * Deliberately mirrors the established travel-page hero structure:
 * black copy column on the left, image column on the right, both at
 * identical full hero height. No overlay/background experiment.
 */

body.ctwd-radreisen .cttr-hero{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-height:0 !important;
    background:#090a0b !important;
    color:#fff !important;
    overflow:hidden !important;
}

body.ctwd-radreisen .cttr-hero > .ctwd-container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;

    display:grid !important;
    grid-template-columns:44% 56% !important;
    align-items:stretch !important;

    /* 56% of a landscape viewport is close to 16:9 at this hero height. */
    height:clamp(430px,31.5vw,560px) !important;
    min-height:430px !important;
}

body.ctwd-radreisen .cttr-hero-copy{
    position:relative !important;
    z-index:2 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:clamp(42px,4.7vw,76px) clamp(36px,4.8vw,82px) !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    background:#090a0b !important;
    box-sizing:border-box !important;
}

body.ctwd-radreisen .cttr-hero-visual{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;

    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
    background:#090a0b !important;
}

/* Remove every former pseudo/blur/fade experiment. */
body.ctwd-radreisen .cttr-hero-visual::before,
body.ctwd-radreisen .cttr-hero-visual::after{
    content:none !important;
    display:none !important;
    background:none !important;
    opacity:0 !important;
    filter:none !important;
}

body.ctwd-radreisen .cttr-hero-visual > img{
    position:absolute !important;
    inset:0 !important;

    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;

    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
}

/* Keep the existing overview typography, only size it safely for the split hero. */
body.ctwd-radreisen .cttr-hero h1{
    margin:0 !important;
}
body.ctwd-radreisen .cttr-hero h1 span{
    font-size:clamp(35px,3.75vw,61px) !important;
}
body.ctwd-radreisen .cttr-hero h1 strong{
    font-size:clamp(54px,5.9vw,96px) !important;
}
body.ctwd-radreisen .cttr-hero h1 em{
    font-size:clamp(50px,5.65vw,91px) !important;
}
body.ctwd-radreisen .cttr-lead{
    max-width:650px !important;
    margin-top:24px !important;
}

/* Landscape tablet / laptop: same proven 44/56 travel-page split. */
@media (min-width:901px) and (max-width:1280px){
    body.ctwd-radreisen .cttr-hero > .ctwd-container{
        grid-template-columns:44% 56% !important;
        height:clamp(410px,31.5vw,460px) !important;
        min-height:410px !important;
    }
    body.ctwd-radreisen .cttr-hero-copy{
        padding:36px 38px 36px max(48px,7vw) !important;
    }
    body.ctwd-radreisen .cttr-hero-visual > img{
        object-position:center center !important;
    }
}

/*
 * Exactly as on the travel pages: below the desktop breakpoint,
 * copy and image stack instead of forcing a narrow side-by-side crop.
 */
@media (max-width:900px){
    body.ctwd-radreisen .cttr-hero > .ctwd-container{
        display:grid !important;
        grid-template-columns:1fr !important;
        height:auto !important;
        min-height:0 !important;
    }

    body.ctwd-radreisen .cttr-hero-copy{
        height:auto !important;
        min-height:0 !important;
        padding:48px clamp(24px,6vw,52px) 44px !important;
    }

    body.ctwd-radreisen .cttr-hero-visual{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:16 / 9 !important;
    }

    body.ctwd-radreisen .cttr-hero-visual > img{
        object-fit:cover !important;
        object-position:center center !important;
    }
}

@media (max-width:600px){
    body.ctwd-radreisen .cttr-hero-copy{
        padding:40px 22px 38px !important;
    }

    body.ctwd-radreisen .cttr-hero-visual{
        aspect-ratio:16 / 9 !important;
    }
}


/* =========================================================
   Radreisen Hero 0.8.6
   Verlauf analog zur Erlebnis-Seite: weicher + weiter links.
   Layout, Bild, Text und Hero-Höhe bleiben unverändert.
   ========================================================= */
body.ctwd-radreisen .ctwd-radreisen-hero,
body.ctwd-radreisen .ctwd-radreisen-hero-inner{
  overflow:hidden!important;
}

/* Let the photo visually extend farther into the black copy side. */
body.ctwd-radreisen .ctwd-radreisen-hero-media,
body.ctwd-radreisen .ctwd-radreisen-hero-image{
  position:relative!important;
  margin-left:-90px!important;
  width:calc(100% + 90px)!important;
}

/* Softer black-to-photo transition. */
body.ctwd-radreisen .ctwd-radreisen-hero-media::after,
body.ctwd-radreisen .ctwd-radreisen-hero-image::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    #090909 0%,
    rgba(9,9,9,.92) 8%,
    rgba(9,9,9,.68) 20%,
    rgba(9,9,9,.36) 35%,
    rgba(9,9,9,.12) 50%,
    rgba(9,9,9,0) 66%)!important;
}

@media(max-width:1100px) and (min-width:901px){
  body.ctwd-radreisen .ctwd-radreisen-hero-media,
  body.ctwd-radreisen .ctwd-radreisen-hero-image{
    margin-left:-58px!important;
    width:calc(100% + 58px)!important;
  }
}

@media(max-width:900px){
  body.ctwd-radreisen .ctwd-radreisen-hero-media,
  body.ctwd-radreisen .ctwd-radreisen-hero-image{
    margin-left:0!important;
    width:100%!important;
  }
  body.ctwd-radreisen .ctwd-radreisen-hero-media::after,
  body.ctwd-radreisen .ctwd-radreisen-hero-image::after{
    background:linear-gradient(180deg,
      #090909 0%,
      rgba(9,9,9,.58) 8%,
      rgba(9,9,9,.22) 20%,
      rgba(9,9,9,0) 38%)!important;
  }
}


/* =========================================================
   Radreisen Hero 0.8.7 — corrected selectors
   The 0.8.6 rules targeted class names that do not exist in
   the Radreisen template. These rules use the actual markup:
   .cttr-hero-copy + .cttr-hero-visual
   ========================================================= */

@media (min-width:901px){
  /* Pull the image into the black copy column. */
  body.ctwd-radreisen .cttr-hero-visual{
    margin-left:-120px!important;
    width:calc(100% + 120px)!important;
    overflow:hidden!important;
  }

  /* Allow the image to become visible beneath the right edge of the copy area. */
  body.ctwd-radreisen .cttr-hero-copy{
    background:linear-gradient(
      90deg,
      #090a0b 0%,
      #090a0b 69%,
      rgba(9,10,11,.96) 76%,
      rgba(9,10,11,.78) 84%,
      rgba(9,10,11,.42) 92%,
      rgba(9,10,11,0) 100%
    )!important;
  }

  /* Soft black veil on the image itself, fading gradually to clear. */
  body.ctwd-radreisen .cttr-hero-visual::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    opacity:1!important;
    filter:none!important;
    background:linear-gradient(
      90deg,
      rgba(9,10,11,.90) 0%,
      rgba(9,10,11,.72) 10%,
      rgba(9,10,11,.48) 22%,
      rgba(9,10,11,.24) 36%,
      rgba(9,10,11,.08) 50%,
      rgba(9,10,11,0) 64%
    )!important;
  }

  body.ctwd-radreisen .cttr-hero-visual > img{
    z-index:1!important;
  }
}

@media (min-width:901px) and (max-width:1280px){
  body.ctwd-radreisen .cttr-hero-visual{
    margin-left:-84px!important;
    width:calc(100% + 84px)!important;
  }
}

@media (max-width:900px){
  body.ctwd-radreisen .cttr-hero-copy{
    background:#090a0b!important;
  }
  body.ctwd-radreisen .cttr-hero-visual{
    margin-left:0!important;
    width:100%!important;
  }
  body.ctwd-radreisen .cttr-hero-visual::after{
    content:none!important;
    display:none!important;
  }
}