/* Dual-orientation Gerbang Rumah Pergerakan v7 — 2026-10-09
   Per permintaan pengguna: foto horizontal untuk layar potret, foto vertikal untuk layar landscape.
   The RPIA logo and headings are independent, accessible HTML.
   Images retain their aspect ratios; cover fills the available visual panel without sidebars. */
.raGatewayPicture{display:contents!important}
.raAuthScreen .raAuthVisual,
.raInviteStandalone .raInviteVisual{
  background:#0757a6!important;
  overflow:hidden!important;
}
.raAuthScreen .raAuthVisual .raGatewayPicture>.raMobileHeroArt,
.raInviteStandalone .raGatewayPicture>.raMobileHeroArt{
  display:block!important;
  position:absolute!important;
  top:0!important;left:0!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;
  min-width:0!important;min-height:0!important;
  margin:0!important;padding:0!important;
  object-fit:cover!important;
  object-position:50% 53%!important;
  transform:none!important;
  filter:none!important;
  border:0!important;border-radius:0!important;
  image-rendering:auto!important;
}
.raAuthScreen .raAuthVisual .raMobileHeroContent,
.raInviteStandalone .raInviteVisual .raMobileHeroContent{
  isolation:isolate!important;
  background-color:#0757a6!important;
}
.raAuthScreen .raMobileHeroBrand,
.raInviteStandalone .raMobileHeroBrand{
  z-index:5!important;
  text-shadow:0 2px 9px rgba(0,29,64,.36)!important;
}
.raMobileHeroBrand img{image-rendering:auto!important}

/* Landscape wide: full-bleed, no blue letterboxing on either side.
   object-fit:cover preserves proportions while cropping excess if necessary. */
@media (min-width:1025px) and (orientation:landscape){
  .raAuthScreen .raAuthVisual .raMobileHeroContent:before,
  .raInviteStandalone .raInviteVisual .raMobileHeroContent:before{
    content:none!important;display:none!important;
  }
  .raAuthScreen .raAuthVisual .raGatewayPicture>.raMobileHeroArt,
  .raInviteStandalone .raGatewayPicture>.raMobileHeroArt{
    z-index:1!important;
    object-fit:cover!important;
    object-position:center 53%!important;
  }
  .raAuthScreen .raMobileHeroContent:after,
  .raInviteStandalone .raMobileHeroContent:after{
    background:linear-gradient(180deg,rgba(2,29,67,.48),rgba(2,29,67,.07) 34%,transparent 62%)!important;
  }
}
/* Portrait phone and tablet: a compact top hero connected to the sheet.
   'cover' keeps original ratio, with a carefully chosen focal point. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raAuthVisual .raGatewayPicture>.raMobileHeroArt,
  body.raInviteStandalone .raGatewayPicture>.raMobileHeroArt{
    object-fit:cover!important;object-position:center 57%!important;
  }
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{
    height:clamp(230px,34dvh,390px)!important;
    min-height:230px!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane{
    min-height:calc(66dvh + 26px)!important;
    margin-top:-26px!important;
  }
  body.raInviteStandalone .raInvitePane{
    margin-top:-26px!important;
    min-height:calc(66dvh + 26px)!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroBrand,
  body.raInviteStandalone .raMobileHeroBrand{
    max-width:calc(100% - 32px)!important;
  }
  body.raAuthMode .raAuthScreen .raMobileHeroContent:after,
  body.raInviteStandalone .raMobileHeroContent:after{
    background:linear-gradient(180deg,rgba(0,31,70,.54) 0%,rgba(0,38,77,.16) 35%,transparent 62%)!important;
  }
}
@media (max-width:390px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{
    min-height:225px!important;height:clamp(225px,32dvh,305px)!important;
  }
}
/* Handset landscape: short hero with the portrait-oriented source as requested. */
@media (max-width:950px) and (orientation:landscape) and (max-height:580px){
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raInviteStandalone .raInviteVisual{
    height:clamp(130px,30dvh,180px)!important;
    min-height:130px!important;
    display:block!important;
  }
  body.raAuthMode .raAuthScreen .raAuthVisual .raGatewayPicture>.raMobileHeroArt,
  body.raInviteStandalone .raGatewayPicture>.raMobileHeroArt{
    object-fit:cover!important;object-position:center 42%!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane{
    min-height:0!important;height:auto!important;overflow:visible!important;
  }
}
/* Portrait large desktop windows: still avoid stretching and visually align. */
@media (min-width:1025px) and (orientation:portrait){
  .raAuthScreen .raAuthVisual .raGatewayPicture>.raMobileHeroArt,
  .raInviteStandalone .raGatewayPicture>.raMobileHeroArt{
    object-fit:cover!important;object-position:50% 53%!important;
  }
}
/* Keep long-form details consistent with orientation, while placing real text above image. */
@media (orientation:landscape){
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead{
    background-image:linear-gradient(180deg,rgba(2,44,94,.56),rgba(7,82,160,.5)),
      url('/assets/img/radar-auth/gerbang-rumah-pergerakan-portrait-v2.webp')!important;
    background-size:cover!important;background-position:center 41%!important;
  }
}
@media (orientation:portrait){
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead{
    background-image:linear-gradient(180deg,rgba(2,44,94,.56),rgba(7,82,160,.5)),
      url('/assets/img/radar-auth/gerbang-rumah-pergerakan-landscape-v2.webp')!important;
    background-size:cover!important;background-position:center 44%!important;
  }
}

/* One organizational identity inside the visual — never duplicate the logo in the form pane. */
body.raAuthMode .raAuthScreen .raAuthPane>.raPmiiBrand{display:none!important}
/* Graceful blue backdrop if the image is delayed; image retains native aspect ratio. */
.raAuthScreen .raAuthVisual .raMobileHeroContent,.raInviteStandalone .raInviteVisual .raMobileHeroContent{background:#0757a6!important}