/* ENDLICH DU V24 — Banner, mobile headline label, card width, natural film aspect ratio.
   Base: full V23. Desktop changes only the ribbon color. */

/* Shared: same almost-black as the sticky navigation, not the CTA gradient. */
#hero .v19-premiere-ribbon.hero-dateline.premiere-banner {
  background: rgba(21,19,28,.96) !important;
  border-bottom: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 10px 28px rgba(20,14,23,.18) !important;
}
#hero .v19-premiere-ribbon::before { display:none !important; }
#hero .v19-premiere-ribbon .hero-free {
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.25) !important;
}
/* The new label is only part of the MOBILE hero hierarchy. */
#hero .mobile-premiere-eyebrow {display:none;}

@media(max-width:767px){
  /* Slim ribbon: free status + date, film premiere becomes the eyebrow. */
  #hero .v19-premiere-ribbon.hero-dateline.premiere-banner {
    min-height:0 !important;
    padding:9px 12px !important;
    gap:7px 13px !important;
    flex-wrap:nowrap !important;
  }
  #hero .v19-premiere-ribbon .hero-where {display:none !important;}
  #hero .v19-premiere-ribbon strong {
    font-size:clamp(.8rem,3.35vw,.96rem) !important;
    line-height:1.16 !important;
    white-space:nowrap !important;
  }
  #hero .v19-premiere-ribbon .hero-free {
    font-size:.65rem !important;
    padding:5px 9px !important;
    white-space:nowrap !important;
  }
  #hero .mobile-premiere-eyebrow {
    display:block !important;
    width:100%;
    margin:0 auto 11px !important;
    text-align:center;
    font-family:var(--font-body,'Montserrat',Arial,sans-serif) !important;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.17em;
    line-height:1.3;
    color:#fff8f2;
    text-shadow:0 1px 9px rgba(50,16,38,.5);
  }
  #hero .hero-head {padding-top:clamp(19px,5vw,29px) !important;}
  #hero .hero-story {margin-top:0 !important;}

  /* Card matches the width and left/right edges of the trailer precisely. */
  #hero .visual-column .mobile-benefits {
    width:100% !important;
    max-width:none !important;
    margin:18px 0 0 !important;
    box-sizing:border-box !important;
  }

  /* Preserve the aspect ratio of all authentic film photographs.
     Top = inward-leaning V19 reference; below = V12 filmstrip photo sequence.
     Both are rendered at native ratio (width:auto height), NOT forced 100% x 100%.
     The two layers blend behind the trailer without repeating / stretching people. */
  #hero.hero {background:linear-gradient(180deg,#da90ab 0%,#ca829c 28%,#935775 56%,#36253a 100%) !important;}
  #hero .hero-mobile-bg {
    background-image:url('../../neu/assets/film/hero-mobile-v12-filmstreifen.webp') !important;
    background-size:100% auto !important;
    background-position:center 173vw !important;
    background-repeat:no-repeat !important;
    background-color:transparent !important;
    height:100% !important;
    filter:none !important;
  }
  #hero .hero-mobile-bg::before {
    content:'';
    position:absolute;
    inset:0 0 auto 0;
    height:180vw;
    background-image:url('../../neu/assets/film/hero-mobile-v19-reference.webp');
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);
    pointer-events:none;
  }
}