/* CRO V6.63 — centered half-screen desktop layout + step gallery */

/* The common Mac split-window size is narrower than 720px. Start the desktop
   centering rules sooner while preserving the true phone layout. */
@media (min-width:560px){
  html{scroll-padding-top:82px}
  body{overflow-x:hidden!important;background:#f4f8f9!important}
  main{width:100%!important;max-width:none!important;margin:0 auto!important}

  main>section:not(.cro-hero-v5){
    box-sizing:border-box!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #event-type-section,#guest-tier-section,#booking-details-section{
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-left:clamp(22px,4vw,56px)!important;
    padding-right:clamp(22px,4vw,56px)!important;
    box-sizing:border-box!important;
  }

  #event-type-section>.center,#guest-tier-section>.center,
  #booking-details-section>.builder-heading{
    width:min(100%,980px)!important;
    max-width:980px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }

  .occasion-grid,.price-tier-grid{
    width:min(100%,1040px)!important;
    max-width:1040px!important;
    margin-inline:auto!important;
    justify-content:center!important;
  }

  /* Center the Step 3 calendar/form even in a 600–700px split browser window. */
  .builder{width:100%!important;max-width:none!important;padding:52px clamp(18px,4vw,54px) 72px!important;box-sizing:border-box!important}
  .builder-layout{
    width:min(100%,1120px)!important;
    max-width:1120px!important;
    margin-inline:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,760px) minmax(260px,320px)!important;
    justify-content:center!important;
    align-items:start!important;
    gap:26px!important;
  }
  #booking-details-section #partyForm{
    width:100%!important;
    max-width:760px!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
  #customerCalendarMount,.calendar-experience-v2,#customerAvailabilityCalendar{
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
  }
  .summary{width:100%!important;max-width:320px!important;margin:0!important;box-sizing:border-box!important}

  /* Fill the empty Step 1 space with a sales-focused real-photo gallery. */
  .cro-step-gallery{
    width:min(100%,1080px);
    margin:48px auto 0;
    padding:clamp(22px,3vw,38px);
    border-radius:30px;
    background:linear-gradient(145deg,#073f4a,#0b5963);
    color:#fff;
    box-sizing:border-box;
    box-shadow:0 22px 55px rgba(6,48,58,.18);
  }
  .cro-step-gallery-copy{text-align:center;max-width:720px;margin:0 auto 24px}
  .cro-step-gallery-copy .eyebrow{color:#64e0e5!important}
  .cro-step-gallery-copy h3{margin:4px 0 10px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.8rem,3.2vw,3rem);line-height:1}
  .cro-step-gallery-copy p:last-child{margin:0;color:rgba(255,255,255,.84);font-size:1rem;line-height:1.55}
  .cro-step-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .cro-step-gallery-item{position:relative;display:block;min-height:210px;padding:0;border:0;border-radius:20px;overflow:hidden;cursor:pointer;background:#dcecee;box-shadow:0 10px 24px rgba(0,0,0,.18)}
  .cro-step-gallery-item img{display:block;width:100%;height:100%;min-height:210px;object-fit:cover;transition:transform .25s ease}
  .cro-step-gallery-item:hover img{transform:scale(1.035)}
  .cro-step-gallery-item span{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 12px;border-radius:14px;background:rgba(3,39,48,.82);color:#fff;font-weight:850;text-align:center;backdrop-filter:blur(6px)}

  /* Fill the lower desktop page rather than leaving a thin FAQ column. */
  .faq{width:min(94vw,1120px)!important;max-width:1120px!important;margin:0 auto!important;padding:68px clamp(24px,4vw,54px)!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 20px!important;box-sizing:border-box!important}
  .faq>.center{grid-column:1/-1;margin-bottom:16px!important}
  .faq details{margin:0!important;align-self:start!important}
  footer{width:100%!important;box-sizing:border-box!important;padding-left:clamp(26px,5vw,80px)!important;padding-right:clamp(26px,5vw,80px)!important}
}

/* Split-window and tablet view: a single truly centered column. */
@media (min-width:560px) and (max-width:1099px){
  .builder-layout{width:min(100%,780px)!important;grid-template-columns:minmax(0,1fr)!important}
  #booking-details-section #partyForm{max-width:780px!important}
  .summary{width:100%!important;max-width:780px!important;margin-inline:auto!important;position:relative!important;top:auto!important}
  .summary>img{height:230px!important;object-fit:cover!important}
  .cro-step-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cro-step-gallery-item{min-height:180px}
  .cro-step-gallery-item img{min-height:180px}
  .faq{grid-template-columns:1fr!important}
}

@media (min-width:1100px){
  .summary{position:sticky!important;top:92px!important}
}

/* True phones keep a compact gallery without changing the existing booking flow. */
@media (max-width:559px){
  .cro-step-gallery{margin:32px 14px 0;padding:20px 14px;border-radius:24px;background:#073f4a;color:#fff}
  .cro-step-gallery-copy{text-align:center;margin-bottom:16px}
  .cro-step-gallery-copy .eyebrow{color:#64e0e5!important}
  .cro-step-gallery-copy h3{margin:4px 0 8px;color:#fff;font-family:Georgia,"Times New Roman",serif;font-size:1.75rem;line-height:1.05}
  .cro-step-gallery-copy p:last-child{color:rgba(255,255,255,.82);font-size:.92rem}
  .cro-step-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cro-step-gallery-item{position:relative;display:block;height:145px;padding:0;border:0;border-radius:16px;overflow:hidden;background:#dcecee}
  .cro-step-gallery-item img{width:100%;height:100%;object-fit:cover}
  .cro-step-gallery-item span{position:absolute;left:7px;right:7px;bottom:7px;padding:7px;border-radius:10px;background:rgba(3,39,48,.8);color:#fff;font-size:.75rem;font-weight:800}
}