/* My Party Box — shared builder shell */

.hero-builder { width: 90%; max-width: 1600px; margin: 40px auto; background: white; padding: 40px; border-radius: 40px; border: 8px solid var(--brand); box-shadow: 0 20px 50px rgba(0,0,0,0.08); min-height: 80vh; }


/* =========================================================
   PHOTO HEADER FRAME FIX
   The orange border belongs to .hero-builder only.
   Photo/header content is clipped by that outer frame.
   ========================================================= */
.hero-builder{
  overflow:hidden;
}

/* Garland previously explicitly allowed overflow, which let the
   photo header cover the top orange border on mobile. */
.hero-builder.garland-builder{
  overflow:hidden !important;
}

/* Never draw a second orange frame around the photographic intro. */
.hero-builder .builder-photo-header{
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Let the header reach the INSIDE edge of the existing outer frame. */
@media (min-width:1025px){
  .hero-builder > .builder-photo-header{
    margin:-40px -40px 30px -40px !important;
    border-radius:30px 30px 0 0 !important;
  }
}

@media (max-width:1024px){
  .hero-builder > .builder-photo-header{
    margin:-20px -20px 24px -20px !important;
    border-radius:24px 24px 0 0 !important;
  }
}

/* The Garland page uses .garland-builder and later reduces padding
   further on very small screens, so match that inset as well. */
@media (max-width:600px){
  .hero-builder.garland-builder > .builder-photo-header{
    margin:-12px -12px 22px -12px !important;
  }
}


/* =========================================================
   OUTER SHELL — MATCH ABOUT US
   Same width, top spacing, border weight, radius and shadow.
   Internal builder layout/padding remains unchanged.
   ========================================================= */
.hero-builder{
  width:94% !important;
  max-width:1220px !important;
  margin:18px auto 30px !important;
  border:6px solid var(--brand) !important;
  border-radius:36px !important;
  box-shadow:0 8px 26px rgba(40,48,58,.05) !important;
  box-sizing:border-box;
}

@media(max-width:1024px){
  .hero-builder{
    width:94% !important;
    margin:18px auto 30px !important;
    border-width:4px !important;
    border-radius:26px !important;
  }
}


/* =========================================================
   PHOTO HEADERS — MOBILE PORTRAIT
   Desktop and landscape stay unchanged.
   On narrow portrait screens: give copy more room, reduce the
   image footprint and strengthen the fade so body copy stays legible.
   ========================================================= */
@media (max-width:600px) and (orientation:portrait){

  .hero-builder > .builder-photo-header{
    min-height:245px !important;
    position:relative !important;
  }

  .hero-builder .builder-photo-copy{
    position:relative !important;
    z-index:3 !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:34px 18px 28px 18px !important;
  }

  .hero-builder .builder-photo-header h1{
    max-width:72% !important;
    margin:0 0 12px 0 !important;
    font-size:2.05rem !important;
    line-height:1.08 !important;
    text-align:left !important;
  }

  .hero-builder .builder-photo-subtitle,
  .hero-builder .builder-photo-copy p{
    max-width:64% !important;
    margin:0 !important;
    font-size:.92rem !important;
    line-height:1.48 !important;
    text-align:left !important;
  }

  .hero-builder .builder-photo{
    width:54% !important;
    height:100% !important;
    top:0 !important;
    right:0 !important;
    object-fit:cover !important;
    object-position:right top !important;

    /* Keep more of the left half of the photo transparent. */
    -webkit-mask-image:
      linear-gradient(to right,
        transparent 0%,
        transparent 18%,
        rgba(0,0,0,.20) 36%,
        rgba(0,0,0,.62) 56%,
        #000 74%),
      linear-gradient(to bottom,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.55) 82%,
        transparent 100%) !important;
    -webkit-mask-composite:source-in !important;

    mask-image:
      linear-gradient(to right,
        transparent 0%,
        transparent 18%,
        rgba(0,0,0,.20) 36%,
        rgba(0,0,0,.62) 56%,
        #000 74%),
      linear-gradient(to bottom,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.55) 82%,
        transparent 100%) !important;
    mask-composite:intersect !important;
  }

  .hero-builder .builder-photo-header::after{
    background:
      linear-gradient(to right,
        #fff 0%,
        #fff 45%,
        rgba(255,255,255,.97) 53%,
        rgba(255,255,255,.82) 62%,
        rgba(255,255,255,.34) 74%,
        rgba(255,255,255,0) 88%),
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0) 58%,
        rgba(255,255,255,.58) 80%,
        #fff 100%) !important;
  }
}

/* Very narrow phones need one final step down, but keep the same composition. */
@media (max-width:390px) and (orientation:portrait){

  .hero-builder .builder-photo-header h1{
    max-width:74% !important;
    font-size:1.82rem !important;
  }

  .hero-builder .builder-photo-subtitle,
  .hero-builder .builder-photo-copy p{
    max-width:66% !important;
    font-size:.86rem !important;
    line-height:1.42 !important;
  }

  .hero-builder .builder-photo{
    width:50% !important;
  }
}

/* ==========================================================================
   CANONICAL MPB PHOTO HEADER
   Typography is standardised site-wide.
   Desktop geometry/crop remains page-original.
   ========================================================================== */
.hero-builder .builder-photo-header h1{
  font-family:"Pacifico",cursive !important;
  color:var(--mpb-header-pink,#ff4f86) !important;
  font-weight:400 !important;
  line-height:1.08 !important;
  text-shadow:var(--mpb-header-shadow,
    3px 3px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,7px 7px 0 rgba(0,0,0,.065)) !important;
  margin-bottom:24px !important;
}

.hero-builder .builder-photo-subtitle,
.hero-builder .builder-photo-header .subtitle,
.hero-builder .builder-photo-copy .subtitle,
.hero-builder .builder-photo-copy p{
  font-family:"Quicksand",sans-serif !important;
  color:var(--mpb-header-copy,#56667b) !important;
  font-weight:500 !important;
}

/* Mobile portrait uses one consistent How/About-style balance. */
@media(max-width:600px) and (orientation:portrait){
  .hero-builder > .builder-photo-header{
    min-height:285px !important;
  }

  .hero-builder .builder-photo-copy{
    position:relative !important;
    z-index:3 !important;
    width:76% !important;
    padding:24px 18px !important;
    box-sizing:border-box !important;
  }

  .hero-builder .builder-photo-header h1{
    font-size:2.05rem !important;
    max-width:80% !important;
    margin:0 0 18px !important;
    text-align:left !important;
  }

  .hero-builder .builder-photo-subtitle,
  .hero-builder .builder-photo-header .subtitle,
  .hero-builder .builder-photo-copy .subtitle,
  .hero-builder .builder-photo-copy p{
    font-size:.86rem !important;
    line-height:1.45 !important;
    max-width:68% !important;
    margin:0 !important;
    text-align:left !important;
  }

  .hero-builder .builder-photo{
    width:62% !important;
    height:100% !important;
    top:0 !important;
    right:0 !important;
    object-fit:cover !important;
    object-position:right top !important;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
      linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:
      linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 18%,#000 42%),
      linear-gradient(to bottom,#000 0%,#000 68%,rgba(0,0,0,.55) 86%,transparent 100%) !important;
    mask-composite:intersect !important;
  }

  .hero-builder .builder-photo-header::after{
    background:
      linear-gradient(to right,#fff 0%,rgba(255,255,255,.98) 38%,rgba(255,255,255,.68) 52%,rgba(255,255,255,0) 70%),
      linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,.55) 88%,#fff 100%) !important;
  }
}