/* D-ContentGrid / mobile D1 above booking JS fix
   Web layout is unchanged.
   Mobile order is enforced by D-ContentGrid.php JS because D1 is nested inside D1-MainColumn.
*/

.hk-studio-main-wrap{
  padding:0 24px 80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:56px;
  align-items:start;
  background:var(--hk-surface);
}

.hk-studio-side-col{
  position:sticky;
  top:86px;
  align-self:start;
}

@media(max-width:980px){
  #hk-studio-content-grid.hk-studio-main-wrap{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  #hk-studio-content-grid > [data-hk-section="D1-Intro"]{
    order:1 !important;
    width:100% !important;
  }

  #hk-studio-content-grid > .hk-studio-side-col,
  #hk-studio-content-grid > [data-hk-section="D2-BookingSticky"]{
    position:static !important;
    top:auto !important;
    align-self:stretch !important;
    width:100% !important;
    order:2 !important;
  }

  #hk-studio-content-grid > .hk-studio-main-col,
  #hk-studio-content-grid > [data-hk-section="D1-MainColumn"]{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    order:3 !important;
  }
}

@media(max-width:640px){
  #hk-studio-content-grid.hk-studio-main-wrap{
    padding-left:16px;
    padding-right:16px;
  }
}