/* `/_assets/style/responsive.css` */

@media (max-width: 1556px){
  .hero-content{
    margin-left: clamp(8rem, 16vw, 24rem);
  }
}

@media (min-width: 1200px) and (max-width: 1512px){
  .hero-content{
    margin-left: clamp(14rem, 24vw, 24rem);
  }
}

@media (min-width: 1200px) and (max-width: 1512px) and (max-height: 1000px){
  .hero-content{
    margin-left: clamp(16rem, 26vw, 26rem);
  }
}

@media (max-width: 1400px){
  .hero-content{
    width: min(1100px, calc(100% - 4rem));
    margin-left: clamp(4rem, 10vw, 14rem);
  }
}

@media (max-width: 1280px){
  .hero-content{
    width: min(1040px, calc(100% - 3rem));
    margin-left: clamp(2rem, 6vw, 8rem);
    padding-top: 9.5rem;
    transform: none;
  }

  .hero-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-title{
    white-space: normal;
    text-wrap: balance;
    max-width: 12ch;
  }

  .hero-lede{
    text-align: center;
    max-width: min(40rem, 100%);
    margin: .75rem auto 0;
  }

  .hero-info{
    margin: 2rem 0 0;
  }
}

@media (max-width: 1100px){
  .menu-layout{
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.25rem;
  }

  .hero-content{
    width: min(980px, calc(100% - 2.5rem));
    margin-left: clamp(1rem, 4vw, 3rem);
  }
}

@media (min-width: 980px){
  .section-about .wrap{
    width: min(1200px, calc(100% - 3rem));
  }

  .about-grid{
    gap: 2rem;
  }

  .about-media{
    margin-top: -90px;
    margin-left: 22px;
  }
}

@media (max-width: 1024px){
  .hero-content{
    width: min(920px, calc(100% - 2rem));
    margin-left: 0;
    margin-right: auto;
    padding-top: 8.75rem;
  }

  .hero-title{
    max-width: 11ch;
  }

  .hero-lede{
    max-width: 34rem;
  }
}

@media (max-width: 979px){
  .about-media{
    margin-top: 0;
    margin-left: 0;
  }
}

@media (max-width: 900px){
  .about-grid{
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .menu-layout{
    grid-template-columns: 1fr;
  }

  .contact-top{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-media{
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-media-left{
    grid-template-rows: auto auto;
  }

  .about-main{
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .about-bottom{
    height: auto;
  }

  .about-media-right{
    height: auto;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1rem;
  }

  .about-thumb{
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .menu-preview-frame{
    height: 380px;
  }
}

@media (max-width: 820px){
  .hero{
    min-height: 100svh;
    min-height: 100dvh;
  }

  .hero-content{
    width: min(100%, calc(100% - 2rem));
    padding-top: 8.25rem;
  }

  .hero-title{
    max-width: 10ch;
  }

  .hero-info{
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}

@media (max-width: 768px){
  .visit-maps{
    flex-direction: row;
    gap: .55rem;
    flex-wrap: wrap;
  }

  .map-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(0,0,0,.12);
  }

  .map-link img{
    width: 36px;
    height: 36px;
    display: block;
  }

  .contact-stack{
    grid-template-rows: auto;
  }

  .hours-row{
    align-items: flex-start;
  }

  .menu-bg-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 740px){
  .nav{
    padding-top: 1rem;
    max-height: 5rem;
  }

  .nav-links{
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + .75rem);
    width: min(360px, calc(100% - 2rem));
    padding: .8rem;
    border-radius: 22px;
    background: rgba(10,8,7,.92);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    z-index: 1000;
  }

  body.menu-open .nav-links{
    display: grid;
    gap: .25rem;
  }

  .nav-links a{
    padding: .85rem .9rem;
    border-radius: 16px;
  }

  .nav > .nav-toggle{
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .nav-toggle{
    display: block;
  }

  .nav-right .nav-social,
  .nav-right .icon-btn{
    display: none;
  }

  .nav-right .nav-toggle{
    display: block;
  }

  .brand{
    min-width: auto;
  }

  .nav-links-social{
    display: block;
    margin-top: .65rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .nav-links-social .nav-social{
    display: flex;
    justify-content: center;
    gap: .55rem;
    flex-wrap: nowrap;
  }

  .nav-links-social .icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero{
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    place-items: start start;
  }

  .hero-content{
    width: min(100%, calc(100% - 1.5rem));
    min-height: 100svh;
    min-height: 100dvh;
    margin-left: 0;
    margin-right: auto;
    transform: none;
    padding-top: 6.9rem;
    padding-bottom: 2rem;
    display: grid;
    align-content: start;
    justify-items: center;
  }

  .hero-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-lede{
    order: -1;
    margin: 0 0 .8rem 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: min(30rem, 100%);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
    text-wrap: balance;
  }

  .hero-title{
    margin: 0 0 1rem 0;
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-info{
    margin: 0;
    font-size: 12px;
    gap: .65rem;
    letter-spacing: .08em;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }

  .hero-info .dot{
    display: none;
  }
}

/* Tablet hero + tablet nav tightening + tablet events calendar */
@media (min-width: 741px) and (max-width: 1024px){
  .hero{
    min-height: 100svh;
    min-height: 100dvh;
    place-items: center start;
  }

  .hero-content{
    width: min(100%, calc(100% - 2rem));
    min-height: 100svh;
    min-height: 100dvh;
    margin-left: 0;
    margin-right: auto;
    padding-top: 6.75rem;
    padding-bottom: 2.5rem;
    display: grid;
    align-content: center;
    justify-items: center;
    transform: none;
  }

  .hero-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .hero-title{
    max-width: 11ch;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-lede{
    max-width: min(34rem, 100%);
    margin: 0 0 .9rem 0;
    text-align: center;
  }

  .hero-info{
    margin: 1.5rem 0 0;
    justify-content: center;
    text-align: center;
  }

  .nav{
    width: min(1480px, calc(100% - 1rem));
    padding: .62rem .8rem;
    gap: .55rem;
    grid-template-columns: auto 1fr auto;
  }

  .brand{
    min-width: 0;
    gap: .55rem;
  }

  .brand-logo{
    width: 40px;
    height: 40px;
  }

  .brand-name{
    font-size: .84rem;
    letter-spacing: .10em;
  }

  .brand-sub{
    font-size: .64rem;
    letter-spacing: .14em;
  }

  .nav-links{
    gap: .28rem;
  }

  .nav-links a{
    font-size: .72rem;
    padding: .4rem .46rem;
  }

  .nav-social{
    gap: .25rem;
  }

  .icon-btn{
    width: 34px;
    height: 34px;
  }

  .icon-btn img{
    width: 16px;
    height: 16px;
  }

  .events-calendar-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;    
    gap: .5rem;
  }

  .calendar-day,
  .calendar-day.is-empty{
    min-height: 175px;
    max-height: 175px;
    aspect-ratio: 1 / 1;
  }

  .calendar-day{
    padding: .48rem;
  }

  .calendar-day-number{
    min-width: 30px;
    height: 30px;
    padding: 0 .42rem;
    font-size: .84rem;
  }

  #eventInfoModal .manager-modal-dialog{
    margin: 5.75rem auto 1rem;
    max-height: calc(100dvh - 6.75rem);
  }

  #eventInfoModal .manager-modal-body{
    max-height: calc(100dvh - 13rem);
  }
}

@media (max-width: 640px){
  .specials-card,
  .menu-main,
  .info-block{
    padding: 1rem;
  }

  .specials-table th,
  .specials-table td{
    padding: .62rem .25rem;
    font-size: .84rem;
  }

  .hours-row{
    flex-direction: column;
    gap: .2rem;
  }

  .map-embed{
    height: 260px;
  }

  .menu-preview-frame{
    height: 320px;
  }

  .menu-preview-overlay{
    padding: .75rem;
  }

  .menu-preview-badge{
    font-size: .72rem;
    padding: .5rem .72rem;
  }

  .btn-menu-pdf{
    width: auto;
    max-width: 100%;
  }

  .menu-modal-dialog{
    padding: .7rem;
  }

  .menu-modal-content{
    height: min(88vh, 1000px);
    border-radius: 18px;
  }
}

@media (max-width: 560px){
  .hero-content{
    width: calc(100% - 1.25rem);
    padding-top: 7.5rem;
  }

  .hero-title{
    max-width: 9ch;
  }

  .hero-lede{
    font-size: 10px;
    max-width: 100%;
  }

  .hero-info{
    font-size: 11px;
    gap: .5rem;
  }

  .about-media-right{
    grid-template-columns: 1fr 1fr;
  }

  .menu-preview-frame{
    height: 280px;
  }
}

@media (max-width: 420px){
  .nav-links{
    width: calc(100% - 1rem);
    top: calc(100% + .5rem);
    padding: .7rem;
    border-radius: 18px;
  }

  .hero-content{
    width: calc(100% - 1rem);
    padding-top: 7.15rem;
  }

  .hero-title{
    max-width: 8.5ch;
  }

  .hero-lede{
    font-size: 9.5px;
    letter-spacing: .06em;
  }

  .map-embed{
    height: 220px;
  }

  .menu-preview-frame{
    height: 240px;
  }

  .menu-modal-dialog{
    padding: .45rem;
  }

  .menu-modal-content{
    height: 90vh;
    border-radius: 16px;
  }
}