/* Picorae v18.125 — founder's REAL Samsung 44583.mp4.
 * Unify actual Guest Page (#guestEvent), real organiser Event Home
 * (#hostEventHero), and paid organiser overlay (v18.124).
 * The cover itself fades into the ivory PAGE, instead of a separate
 * tan/white rectangular photo tile. Reuse existing privacy-gated <img>
 * and original URLs; no DOM clones, no media permissions or event writes. */

/* Guest QR page + authenticated Guest View: original cover is FIRST,
 * and the event title bridges into its soft lower edge. */
#eventView #guestEvent > .event-hero{
 display:flex!important;
 flex-direction:column!important;
 align-items:stretch!important;
 justify-content:flex-start!important;
 padding:0 0 12px!important;
 gap:0!important;
 overflow:hidden!important;
 isolation:isolate!important;
 background:#fffdf8!important;
 border:1px solid #e7d8c0!important;
 border-radius:20px!important;
 box-shadow:0 8px 21px rgba(51,35,17,.055)!important;
}
#eventView #guestEvent > .event-hero > #guestCoverWrap:not(.hidden):not(.cover-loading){
 order:-3!important;
 flex:0 0 auto!important;
 position:relative!important;
 z-index:0!important;
 width:100%!important;
 height:clamp(210px,48vw,315px)!important;
 min-height:0!important;
 max-height:none!important;
 margin:0 0 -40px!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 overflow:hidden!important;
 background:linear-gradient(180deg,#efe4d4 0%,#f5eee2 58%,#fffdf8 100%)!important;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.78) 67%,rgba(0,0,0,.2) 83%,transparent 99%)!important;
 mask-image:linear-gradient(to bottom,#000 0%,#000 48%,rgba(0,0,0,.78) 67%,rgba(0,0,0,.2) 83%,transparent 99%)!important;
}
#eventView #guestEvent > .event-hero > #guestCoverWrap:not(.hidden):not(.cover-loading) > #guestCover{
 display:block!important;
 position:relative!important;
 inset:auto!important;
 width:100%!important;
 height:100%!important;
 max-width:100%!important;
 max-height:none!important;
 object-fit:contain!important;
 object-position:center center!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 box-shadow:none!important;
 transform:none!important;
 filter:none!important;
}
#eventView #guestEvent > .event-hero > .guest-event-intro{
 order:-2!important;
 position:relative!important;
 z-index:1!important;
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
 box-sizing:border-box!important;
 margin:0 0 10px!important;
 padding:18px 17px 15px!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 background:#fffdf8!important;
 color:#34281e!important;
}
#eventView #guestEvent > .event-hero:has(> #guestCoverWrap:not(.hidden):not(.cover-loading))
 > .guest-event-intro{
 background:linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.91) 26%,#fffdf8 62%)!important;
 padding-top:25px!important;
}
#eventView #guestEvent > .event-hero > .guest-event-intro #guestName{
 color:#34281e!important;
 text-shadow:none!important;
 margin-top:5px!important;
}
#eventView #guestEvent > .event-hero > .guest-event-intro #guestWelcome{
 line-height:1.46!important;
}
#eventView #guestEvent > .event-hero > #guestCoverWrap.cover-loading:not(.hidden){
 order:-3!important;
 margin:0 0 0!important;
 border-radius:0!important;
 border:0!important;
 box-shadow:none!important;
}
#eventView #guestEvent > .event-hero > #guestCoverWrap.hidden{
 display:none!important;
}

/* Real organiser Event Home: remove the tan picture strip and the
 * separate hard seam between cover and details. The original host cover
 * (already decoded/authorised) and existing p111 wash remain intact. */
#manageView #hostEventTab #hostEventHero.p109-cover-ready{
 isolation:isolate!important;
 background:#fffdf8!important;
 border:1px solid #e7d8c0!important;
 border-radius:20px!important;
 box-shadow:0 9px 24px rgba(53,36,16,.055)!important;
 gap:0!important;
}
#manageView #hostEventTab #hostEventHero.p109-cover-ready > #hostHeroCover:not(.hidden){
 position:relative!important;
 z-index:0!important;
 flex:0 0 auto!important;
 display:block!important;
 width:100%!important;
 height:clamp(210px,46vw,305px)!important;
 max-height:none!important;
 min-height:0!important;
 margin:0 0 -45px!important;
 padding:0!important;
 border:0!important;
 border-radius:0!important;
 box-shadow:none!important;
 object-fit:contain!important;
 object-position:center center!important;
 transform:none!important;
 background:linear-gradient(180deg,#e9dece 0%,#f4ecdf 60%,#fffdf8 100%)!important;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.8) 64%,rgba(0,0,0,.27) 81%,transparent 99%)!important;
 mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.8) 64%,rgba(0,0,0,.27) 81%,transparent 99%)!important;
}
#manageView #hostEventTab #hostEventHero.p109-cover-ready .host-hero-content{
 position:relative!important;
 z-index:1!important;
 box-sizing:border-box!important;
 width:100%!important;
 min-height:104px!important;
 flex:1 0 auto!important;
 gap:9px!important;
 padding:24px 17px 17px!important;
 border:0!important;
 border-radius:0!important;
 background:linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.92) 31%,#fffdf8 68%)!important;
 box-shadow:none!important;
 color:#392b1c!important;
}
#manageView #hostEventTab #hostEventHero.p109-cover-ready .host-hero-content::after{
 background:linear-gradient(180deg,rgba(255,253,248,.03) 0%,rgba(255,253,248,.38) 36%,rgba(255,253,248,.82) 100%)!important;
}
#manageView #hostEventTab #hostEventHero.p109-cover-ready .host-hero-content .p111-cover-wash{
 opacity:.07!important;
}
#manageView #hostEventTab #hostEventHero.p109-cover-ready .host-hero-content #adminName{
 color:#30251b!important;
 text-shadow:none!important;
}

/* Paid Event home: v18.124 was fading the PHOTO alone, while the
 * opaque outer frame still looked like a tan card. Fade the entire
 * original COVER FRAME and let the same ivory hero show through. */
#p2HostDashboardPreview.p98-live-overview.p116-mock-overview
 .p2hd-hero > .p98-event-cover-frame.has-cover:not(.p116-cover-unavailable){
 height:clamp(210px,43vw,310px)!important;
 margin-bottom:-47px!important;
 background:linear-gradient(180deg,#eee4d6 0%,#f6efe3 62%,#fffdf8 100%)!important;
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 47%,rgba(0,0,0,.75) 64%,rgba(0,0,0,.17) 82%,transparent 99%)!important;
 mask-image:linear-gradient(to bottom,#000 0%,#000 47%,rgba(0,0,0,.75) 64%,rgba(0,0,0,.17) 82%,transparent 99%)!important;
}
#p2HostDashboardPreview.p98-live-overview.p116-mock-overview
 .p2hd-hero > .p98-event-cover-frame.has-cover:not(.p116-cover-unavailable)
 .p98-event-cover-image:not([hidden]){
 -webkit-mask-image:none!important;
 mask-image:none!important;
 object-fit:contain!important;
 object-position:center center!important;
 background:transparent!important;
}
#p2HostDashboardPreview.p98-live-overview.p116-mock-overview
 .p2hd-hero:has(> .p98-event-cover-frame.has-cover:not(.p116-cover-unavailable))
 > div:not(.p98-event-cover-frame):not(.p2hd-hero-actions){
 padding-top:24px!important;
 background:linear-gradient(180deg,rgba(255,253,248,0) 0%,rgba(255,253,248,.93) 29%,#fffdf8 66%)!important;
}

/* Small Samsung screens: photos keep enough height for the subject while
 * titles remain below the clear top portion; no horizontal cropping. */
@media(max-width:700px){
 #eventView #guestEvent > .event-hero > #guestCoverWrap:not(.hidden):not(.cover-loading){
  height:clamp(215px,62vw,280px)!important;
  margin-bottom:-38px!important;
 }
 #manageView #hostEventTab #hostEventHero.p109-cover-ready > #hostHeroCover:not(.hidden){
  height:clamp(205px,59vw,280px)!important;
  margin-bottom:-41px!important;
 }
 #p2HostDashboardPreview.p98-live-overview.p116-mock-overview
  .p2hd-hero > .p98-event-cover-frame.has-cover:not(.p116-cover-unavailable){
  height:clamp(215px,62vw,280px)!important;
  margin-bottom:-43px!important;
 }
}
@media(max-width:350px){
 #eventView #guestEvent > .event-hero > .guest-event-intro{
  padding-inline:13px!important;
 }
 #manageView #hostEventTab #hostEventHero.p109-cover-ready .host-hero-content{
  padding-inline:13px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #eventView #guestEvent > .event-hero > #guestCoverWrap #guestCover{
  transition:none!important;
 }
}