/* V243 — SAFE HERO REBUILD
   Starts from the stable V241 layout. Only the hero visual treatment is changed.
   Goal: desktop + mobile stay aligned, no stacked images, no black void, no harsh crop.
*/

body.v14-home .v188-hero-image.v241-stage-mode{
  position:relative;
  overflow:hidden!important;
  isolation:isolate;
  background:#090807!important;
}

/* Keep every slide absolutely layered — never allow images to stack vertically. */
body.v14-home .v241-hero-stage{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
}
body.v14-home .v241-hero-scene{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
}

/* Full-area blurred canvas fills every ratio mismatch, so there is no empty void. */
body.v14-home .v241-hero-bg{
  position:absolute!important;
  inset:-5%!important;
  width:110%!important;
  height:110%!important;
  object-fit:cover!important;
  object-position:center center!important;
  filter:blur(24px) brightness(.48) saturate(1.13)!important;
  transform:scale(1.10)!important;
  opacity:.96!important;
}

/* Remove the “picture inside a box” feeling. The full photo floats over the blurred canvas. */
body.v14-home .v241-hero-frame{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.v14-home .v241-hero-frame::before,
body.v14-home .v241-hero-frame-glow{display:none!important}

/* Full image is always visible. The blurred layer behind it handles leftover space. */
body.v14-home .v241-hero-fit{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:0!important;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.22))!important;
  transform:scale(1)!important;
  transition:opacity .7s ease,transform 5.6s ease!important;
}
body.v14-home .v241-hero-scene.is-active .v241-hero-fit{
  transform:scale(1.025)!important;
}

/* Cinematic masking blends the contained image with its canvas. */
body.v14-home .v241-hero-scene::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(5,5,6,.36) 0%,rgba(5,5,6,.04) 20%,rgba(5,5,6,.04) 80%,rgba(5,5,6,.34) 100%),
    linear-gradient(0deg,rgba(0,0,0,.44) 0%,rgba(0,0,0,.02) 36%,rgba(0,0,0,.23) 100%)!important;
}
body.v14-home .v241-hero-scene::before{
  z-index:1!important;
  opacity:.08!important;
}

/* The large doorway was visually distracting; keep only a faint architectural trace. */
body.v14-home .v241-hero-arch{
  width:min(210px,24vw)!important;
  right:5%!important;
  top:7%!important;
  opacity:.22!important;
  border-color:rgba(255,188,88,.20)!important;
  box-shadow:none!important;
}
body.v14-home .v241-hero-arch::before,
body.v14-home .v241-hero-arch::after{opacity:.55!important}

/* Keep overlays compact and pinned to edges, not over the focal face. */
body.v14-home .v241-hero-meta{
  z-index:8!important;
  left:16px!important;
  top:16px!important;
  max-width:min(42%,260px)!important;
  background:rgba(8,8,9,.56)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.v14-home .v241-hero-dots{
  z-index:11!important;
  left:16px!important;
  bottom:16px!important;
}
body.v14-home .v188-hero-image.v241-stage-mode .v191-latest-news{
  z-index:10!important;
  left:16px!important;
  bottom:62px!important;
}
body.v14-home .v188-hero-image.v241-stage-mode .v235-live-dock{
  z-index:10!important;
  right:16px!important;
  bottom:16px!important;
  width:min(330px,48%)!important;
}

/* Desktop: stable two-column hero, equal visual height, no oversized media column. */
@media (min-width:961px){
  body.v14-home .v188-hero-image.v241-stage-mode{
    min-height:660px!important;
    height:660px!important;
  }
  body.v14-home .v241-hero-fit{
    max-width:100%!important;
    max-height:100%!important;
  }
}

/* Tablet/mobile: same layered technique, shorter height, no stacking. */
@media (max-width:960px){
  body.v14-home .v188-hero-image.v241-stage-mode{
    min-height:520px!important;
    height:520px!important;
  }
  body.v14-home .v241-hero-meta{max-width:58%!important}
  body.v14-home .v188-hero-image.v241-stage-mode .v235-live-dock{width:min(285px,56%)!important}
}
@media (max-width:760px){
  body.v14-home .v188-hero-image.v241-stage-mode{
    min-height:480px!important;
    height:480px!important;
  }
  body.v14-home .v241-hero-meta{display:none!important}
  body.v14-home .v241-hero-arch{width:108px!important;right:10px!important;top:10px!important;opacity:.18!important}
  body.v14-home .v188-hero-image.v241-stage-mode .v191-latest-news{
    left:10px!important;
    bottom:58px!important;
    max-width:40%!important;
  }
  body.v14-home .v188-hero-image.v241-stage-mode .v235-live-dock{
    right:10px!important;
    bottom:10px!important;
    width:min(235px,58%)!important;
  }
  body.v14-home .v241-hero-dots{left:10px!important;bottom:10px!important}
}
@media (max-width:480px){
  body.v14-home .v188-hero-image.v241-stage-mode{
    min-height:440px!important;
    height:440px!important;
  }
  body.v14-home .v188-hero-image.v241-stage-mode .v191-latest-news{max-width:41%!important}
  body.v14-home .v188-hero-image.v241-stage-mode .v235-live-dock{width:min(215px,58%)!important}
}

/* Light mode: the hero stays intentionally cinematic so it does not become visually fragmented. */
html[data-theme="light"] body.v14-home .v188-hero-image.v241-stage-mode{
  background:#120d09!important;
}
html[data-theme="light"] body.v14-home .v241-hero-bg{
  filter:blur(24px) brightness(.52) saturate(1.10)!important;
}
html[data-theme="light"] body.v14-home .v241-hero-meta,
html[data-theme="light"] body.v14-home .v241-hero-dots{
  background:rgba(16,11,8,.50)!important;
}

@media(prefers-reduced-motion:reduce){
  body.v14-home .v241-hero-fit{transform:none!important;transition:none!important}
}

/* V244: supplied photographs fill the media area without an empty canvas. */
body.v14-home .v241-hero-scene:not(.is-portrait) .v241-hero-fit{
  object-fit:cover!important;
  object-position:center 42%!important;
}
body.v14-home .v241-hero-scene.is-portrait .v241-hero-bg{
  filter:blur(22px) brightness(.52) saturate(1.03)!important;
}
body.v14-home .v241-hero-scene.is-portrait .v241-hero-fit{
  object-fit:contain!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
}
body.v14-home .v241-hero-scene{transition:opacity 1.05s ease,visibility 1.05s ease!important}
body.v14-home .v241-hero-scene.is-active .v241-hero-fit{transform:scale(1.015)!important}
@media(max-width:760px){
  body.v14-home .v241-hero-scene:not(.is-portrait) .v241-hero-fit{object-position:center center!important}
}

/* Bab el-Mrissa belongs to the introductory copy panel shown in the screenshot. */
body.v14-home #home .v188-hero-copy{
  position:relative;
  isolation:isolate;
  background:#0d0c0b!important;
}
body.v14-home #home .v188-hero-copy::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:url('assets/bab-el-mrissa-v244.png') 58% center/cover no-repeat!important;
  opacity:.62!important;
  animation:none!important;
  pointer-events:none!important;
}
body.v14-home #home .v188-hero-copy::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  width:auto!important;
  height:auto!important;
  background:linear-gradient(90deg,rgba(5,5,6,.82),rgba(5,5,6,.74) 48%,rgba(5,5,6,.48)),linear-gradient(0deg,rgba(4,4,5,.68),transparent 70%)!important;
  pointer-events:none!important;
}
html[data-theme="light"] body.v14-home #home .v188-hero-copy{background:#18120d!important;color:#fff!important}
html[data-theme="light"] body.v14-home #home .v188-hero-copy::before{opacity:.62!important}
html[data-theme="light"] body.v14-home #home .v188-hero-copy::after{background:linear-gradient(90deg,rgba(5,5,6,.82),rgba(5,5,6,.72) 48%,rgba(5,5,6,.48)),linear-gradient(0deg,rgba(4,4,5,.68),transparent 70%)!important}
@media(max-width:760px){
  body.v14-home #home .v188-hero-copy::before{background-position:63% center!important}
  body.v14-home #home .v188-hero-copy::after{background:linear-gradient(180deg,rgba(4,4,5,.68),rgba(4,4,5,.84) 55%,rgba(4,4,5,.92))!important}
}

/* V245: keep the desktop media column as tall as the copy column. */
@media(min-width:961px){
  body.v14-home #home.v188-hero{align-items:stretch!important}
  body.v14-home #home .v188-hero-image.v241-stage-mode{
    height:auto!important;
    min-height:660px!important;
    align-self:stretch!important;
  }
}

/* The Bab el-Mrissa panel remains dark and readable in daylight mode. */
html[data-theme="light"] body.v14-home #home .v188-hero-copy :is(.v14-kicker,.v167-hero-prestige,.v14-motto){color:#f2dcb5!important}
html[data-theme="light"] body.v14-home #home .v188-hero-copy h1,
html[data-theme="light"] body.v14-home #home .v188-hero-copy h1 span{color:#fff9ee!important;text-shadow:0 2px 13px rgba(0,0,0,.65)!important}
html[data-theme="light"] body.v14-home #home .v188-hero-copy h1 em{color:#ffc768!important}
html[data-theme="light"] body.v14-home #home .v188-hero-copy>p{color:#f5ecde!important;text-shadow:0 2px 9px rgba(0,0,0,.62)!important}
html[data-theme="light"] body.v14-home #home .v188-hero-note{background:rgba(11,9,8,.69)!important;border-color:rgba(238,192,113,.42)!important;color:#f8e7cb!important}
html[data-theme="light"] body.v14-home #home .v188-hero-note p{color:#f5ead7!important}
html[data-theme="light"] body.v14-home #home .v188-hero-socials{background:rgba(12,10,9,.80)!important;border-color:rgba(238,192,113,.42)!important}
html[data-theme="light"] body.v14-home #home .v188-hero-socials>span,
html[data-theme="light"] body.v14-home #home .v188-hero-socials a{background:rgba(37,28,18,.92)!important;color:#fff0d3!important;border-color:rgba(238,192,113,.42)!important}
html[data-theme="light"] body.v14-home #home .v14-btn.outline{background:rgba(17,13,10,.84)!important;color:#fff5e4!important;border-color:#e5b361!important}