/* Viewport-specific layout corrections for laptop and phone screens. */

@media (min-width:1201px) and (max-width:1599px) and (max-height:1000px){
  .siteHeader{
    height:148px;
  }
  .siteHeader>.brand{
    margin-top:12px;
  }
  .siteHeader>.topNav{
    margin-top:15px;
  }
  body .siteHeader .quickLinksSection{
    top:32px;
    width:360px;
  }
  .siteHeader .quickLinksGrid{
    grid-template-columns:repeat(6,60px);
  }
  .siteHeader .quickLinkCard{
    width:60px;
    height:68px;
  }
  .siteHeader .quickLinkLabel{
    font-size:13px;
  }
  .schedulePage,
  .songClipsPage{
    padding-top:164px;
  }
  body:not(.scheduleOpen):not(.clipsOpen) .weekScheduleGrid{
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
  }
  body:not(.scheduleOpen):not(.clipsOpen) .weekDayCard{
    min-height:188px;
  }
}

@media (max-width:560px){
  body.scheduleOpen .siteHeader,
  body.clipsOpen .siteHeader{
    height:196px;
    grid-template-rows:72px 124px;
  }
  body.scheduleOpen .siteHeader>.headerCenter,
  body.clipsOpen .siteHeader>.headerCenter{
    flex-direction:row;
    gap:0;
  }
  body.scheduleOpen .schedulePage,
  body.clipsOpen .songClipsPage{
    padding-top:212px;
  }

  body:not(.scheduleOpen):not(.clipsOpen) .hero{
    padding-bottom:140px;
  }
  body:not(.scheduleOpen):not(.clipsOpen) .heroMaGroup{
    right:0;
    top:auto;
    bottom:22px;
    width:100%;
  }
  body:not(.scheduleOpen):not(.clipsOpen) .heroMaGroup .heroMa{
    display:none;
  }
  body:not(.scheduleOpen):not(.clipsOpen) .heroMaGroup .heroMeta{
    margin:0;
  }

  .homeEditorialImage{
    inset:0;
    background-position:56% center;
    background-size:auto 92%;
    background-repeat:no-repeat;
  }
  .homeEditorialContent{
    width:calc(100% - 28px);
  }
  .homeEditorialCopy{
    width:min(188px,52vw);
    padding:16px 14px;
    border:1px solid rgba(217,173,223,.48);
    border-radius:18px;
    background:rgba(249,253,255,.78);
    box-shadow:0 14px 34px rgba(73,57,78,.10);
    backdrop-filter:blur(9px);
  }
  .homeEditorialEyebrow{
    margin-bottom:10px;
    font-size:9px;
  }
  .homeEditorialItem{
    grid-template-columns:24px minmax(0,1fr);
    gap:7px;
    padding:7px 0;
  }
  .homeEditorialIndex{
    font-size:10px;
  }
  .homeEditorialLabel{
    font-size:clamp(27px,8vw,32px);
    line-height:1.08;
  }
}