/* =========================================================
   Saraj v44 — Responsive UX stabilization
   Loaded last on purpose. This layer resolves mobile/tablet
   overflow, typography, alignment and fixed-action spacing
   without changing application logic.
   ========================================================= */

:root{
  --v44-mobile-dock-space:104px;
  --v44-mobile-gutter:14px;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

main,
.site-header,
.site-footer,
.shell,
.shell-wide,
.header-inner,
.home-hero,
.home-hero-copy,
.home-hero-media,
.page-intro,
.page-intro>*{
  min-width:0;
  max-width:100%;
}

img,svg,video,canvas{max-width:100%}

/* SVGs in social links must never inherit a large flexible size. */
.social-link>.instagram-icon,
.contact-instagram-link>.instagram-icon,
.footer-social-link>.instagram-icon{
  display:block!important;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  max-width:20px!important;
  max-height:20px!important;
  flex:0 0 20px!important;
  fill:none!important;
  stroke:currentColor!important;
  overflow:visible;
}
.social-link>.instagram-icon .instagram-icon-dot{fill:currentColor!important;stroke:none!important}

/* Long user-facing values may wrap, but labels stay intact. */
.contact-email-link,
.footer-contact>a,
.contact-card a,
.legal-text a{
  overflow-wrap:anywhere;
  word-break:normal;
}
.contact-intro-phone span,
.contact-phone-link span,
.footer-phone-link span{white-space:nowrap}

/* ===== Desktop (> 1100px) ===== */
@media (min-width:1101px){
  .home-hero-copy h1{font-size:clamp(2.05rem,2.85vw,3.2rem)}
  .hero-title-long{font-size:.82em}
  .page-intro h1{font-size:clamp(2.65rem,4.5vw,4.65rem)}
  .contact-intro-actions .contact-email-link{
    font-family:"Saraj Roboto",system-ui,sans-serif!important;
    font-size:clamp(1rem,1.25vw,1.18rem)!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }
}

/* ===== Tablet (761px–1100px) ===== */
@media (min-width:761px) and (max-width:1100px){
  :root{--shell:min(100% - 36px,1160px);--shell-wide:min(100% - 28px,1320px)}

  .header-inner{grid-template-columns:minmax(160px,1fr) auto auto}
  .brand-copy strong{font-size:1.3rem}

  .home-hero{
    min-height:620px;
  }
  .home-hero-copy{
    width:min(58%,560px);
    margin-left:1.25rem;
    padding:clamp(1.45rem,2.8vw,2.1rem);
  }
  .home-hero-copy h1{
    font-size:clamp(1.95rem,4vw,2.8rem);
    line-height:.98;
  }
  .home-hero-copy h1 .brand-display{font-size:clamp(2.7rem,5.8vw,3.9rem)}
  .hero-title-copy{max-width:100%}
  .hero-title-long{font-size:.8em;letter-spacing:-.035em}
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}

  .page-intro{grid-template-columns:minmax(0,1.05fr) minmax(280px,.72fr)}
  .page-intro h1{font-size:clamp(2.45rem,5.7vw,4rem)}
  .page-intro>div:first-child{padding:clamp(1.7rem,4vw,3rem)}
  .contact-intro-actions{padding:clamp(1.5rem,3.5vw,2.5rem)!important}
  .contact-intro-actions .contact-email-link{
    font-family:"Saraj Roboto",system-ui,sans-serif!important;
    font-size:clamp(.98rem,2vw,1.12rem)!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }
  .contact-intro-phone{grid-template-columns:78px minmax(0,1fr)!important}
  .contact-intro-phone span{font-size:.68rem}

  .reservation-flow-step strong{color:#fff!important}
  .reservation-flow-step small{color:#c9bbb0!important}

  .menu-board-title h2{font-size:clamp(2rem,4vw,2.9rem)}
  .footer-inner{grid-template-columns:1.15fr 1fr 1fr}
  .footer-column:last-child{grid-column:auto}
}

/* ===== Mobile (<= 760px) ===== */
@media (max-width:760px){
  :root{
    --shell:min(100% - 24px,1160px);
    --shell-wide:min(100% - 20px,1320px);
    --section-space:2.65rem;
    --header-h:72px;
    --v39-dock-h:72px;
  }

  html{scroll-padding-top:78px;scroll-padding-bottom:var(--v44-mobile-dock-space)}
  body.saraj-public{padding-bottom:calc(var(--v44-mobile-dock-space) + env(safe-area-inset-bottom))!important}
  main{overflow:clip}

  /* Header: compact but with reliable touch targets. */
  .site-header,
  .site-header.is-scrolled{height:72px}
  .header-inner{width:calc(100% - 20px);grid-template-columns:minmax(0,1fr) 46px 48px;gap:.45rem}
  .brand{gap:.5rem;max-width:100%}
  .brand-logo{width:48px;height:43px}
  .brand-copy strong{font-size:1.45rem;line-height:1.1;white-space:nowrap}
  .brand-copy small{display:none}
  .nav-toggle{width:46px;height:46px;padding:12px}
  .reserve-pill{width:48px;height:48px;min-width:48px;padding:0}
  .reserve-pill svg{width:22px;height:22px}
  .main-nav{inset:72px 10px auto;border-radius:18px;max-height:calc(100dvh - 90px);overflow:auto}

  /* Home hero becomes a deliberate two-part card on phones.
     This removes all text/image collision while retaining the premium image. */
  .home-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto clamp(250px,72vw,350px)!important;
    align-items:stretch!important;
    min-height:0!important;
    margin-top:10px;
    border-radius:24px;
    overflow:hidden;
    transform:none!important;
    background:var(--surface-dark)!important;
  }
  .home-hero-copy{
    position:relative!important;
    grid-row:1!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:1.35rem 1.2rem 1.25rem!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(145deg,#1a120e,#241710)!important;
    color:#fff!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    overflow:hidden!important;
    transform:none!important;
  }
  .home-hero-media{
    position:relative!important;
    inset:auto!important;
    grid-row:2!important;
    width:100%!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden;
  }
  .home-hero-media picture,
  .home-hero-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
  .home-hero-media img{object-fit:cover!important;object-position:52% center!important;transform:none!important}
  .home-hero-copy .eyebrow.light{margin-bottom:.48rem;color:#e3b76f!important;font-size:.67rem;line-height:1.35;letter-spacing:.18em}
  .home-hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 .78rem!important;
    color:#fff!important;
    font-size:clamp(1.72rem,7.2vw,2.22rem)!important;
    line-height:1.02!important;
    letter-spacing:-.022em!important;
    overflow:visible!important;
  }
  .home-hero-copy h1 .brand-display{
    width:max-content!important;
    max-width:100%!important;
    margin:-.04em 0 .04em -.03em!important;
    padding:.08em .08em .12em .03em!important;
    color:#e8bd77!important;
    font-size:clamp(2.65rem,12vw,3.45rem)!important;
    line-height:1.05!important;
  }
  .hero-title-copy{display:grid!important;gap:.08rem!important;width:100%!important;max-width:100%!important;color:#fff!important;background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
  .hero-title-line{display:block!important;width:100%!important;max-width:100%!important;white-space:normal!important}
  .hero-title-long{font-size:.88em!important;line-height:1.04!important;letter-spacing:-.03em!important}
  .hero-title-word{display:inline}
  .hero-text{display:block!important;margin:0 0 .85rem!important;color:#d8ccc4!important;font-size:.94rem!important;line-height:1.55!important;max-width:38ch}
  .opening-status{width:100%;margin:.15rem 0 0!important;padding:.7rem .78rem!important;border-radius:15px}
  .opening-status strong{font-size:.9rem}
  .opening-status small{font-size:.76rem}
  .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:.58rem!important;margin-top:.8rem!important}
  .hero-actions .btn{width:100%;min-height:46px;padding:.72rem .9rem;font-size:.88rem}
  .hero-facts{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem .7rem!important;
    width:100%!important;
    margin-top:.85rem!important;
    padding-top:.78rem!important;
  }
  .hero-facts div{min-width:0;text-align:left}
  .hero-facts dt{font-size:1.08rem!important;line-height:1.05;color:#fff!important;white-space:nowrap}
  .hero-facts dd{margin-top:.15rem;color:#bcaea5!important;font-size:.58rem!important;line-height:1.25;letter-spacing:.055em!important;white-space:normal;overflow-wrap:normal!important}

  /* Shared headings and section rhythm. */
  .content-section{padding-block:2.55rem!important}
  .content-section + .content-section{padding-top:.65rem!important}
  .section-heading{gap:.65rem;margin-bottom:1.2rem}
  .section-heading h2{font-size:clamp(2rem,9vw,2.75rem);line-height:1.02;overflow-wrap:anywhere}
  .section-heading>p{font-size:.94rem;line-height:1.55}
  .specialty-image{height:210px}
  .specialty-copy{min-height:0;padding:1rem 1.05rem 1.1rem;text-align:center}
  .specialty-copy h3{font-size:1.35rem!important;text-align:center}
  .specialty-copy p{font-size:.9rem;line-height:1.5;text-align:center}
  .specialty-copy a{margin-inline:auto}
  .story-copy h2,.opening-card h2,.reservation-cta h2{font-size:clamp(2rem,9vw,2.7rem)}

  /* Subpage heroes: no giant typography or clipped dark panels. */
  .page-intro{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
    margin-top:10px;
    border-radius:24px;
    overflow:hidden;
  }
  .page-intro>div:first-child{order:2;padding:1.45rem 1.2rem 1.55rem!important}
  .page-intro-image{order:1!important;min-height:220px!important;height:220px!important}
  .page-intro h1{
    max-width:100%;
    margin-bottom:.75rem;
    font-size:clamp(2.15rem,10.5vw,3rem)!important;
    line-height:1.02!important;
    letter-spacing:-.025em;
    overflow-wrap:anywhere;
    text-wrap:balance;
  }
  .page-intro>div:first-child>p:not(.eyebrow){font-size:.95rem!important;line-height:1.55!important}
  .menu-page-intro h1{font-size:clamp(2.1rem,10vw,2.8rem)!important}

  /* Reservation intro: readable contrast and compact sequence. */
  .reservation-intro-note{
    order:3!important;
    padding:1.15rem 1.1rem 1.25rem!important;
    background:linear-gradient(145deg,#2b1b13,#1b120e)!important;
  }
  .reservation-flow-step{grid-template-columns:38px minmax(0,1fr)!important;gap:.75rem!important;padding:.45rem 0!important}
  .reservation-flow-step>span{width:36px!important;height:36px!important;color:#efc982!important;border-color:rgba(239,201,130,.5)!important}
  .reservation-flow-step strong{display:block!important;color:#fff!important;font-size:.92rem!important;line-height:1.25!important}
  .reservation-flow-step small{display:block!important;margin-top:.1rem!important;color:#c9bbb0!important;font-size:.76rem!important;line-height:1.42!important}
  .reservation-flow-line{height:14px!important;margin-left:17px!important}
  .reservation-shell{padding-top:1.8rem!important}
  .form-section-head{grid-template-columns:48px minmax(0,1fr)!important;gap:.8rem!important;align-items:start!important}
  .form-section-head>span{width:48px;height:48px;font-size:.78rem}
  .form-section-head h2{font-size:clamp(1.75rem,8vw,2.25rem)!important;line-height:1.02!important;overflow-wrap:anywhere}
  .form-section-head p{font-size:.9rem;line-height:1.45}
  .reservation-form,.contact-form{padding:1.05rem!important;border-radius:22px}
  .slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Contact hero and cards. */
  .contact-intro>div:first-child{order:1!important}
  .contact-intro-actions{
    order:2!important;
    width:100%!important;
    padding:1.15rem!important;
    gap:.8rem!important;
    align-items:stretch!important;
    background:linear-gradient(145deg,#2b1b13,#1b120e)!important;
  }
  .contact-intro-actions .contact-email-link{
    display:block!important;
    width:100%!important;
    padding:0 0 .55rem!important;
    font-family:"Saraj Roboto",system-ui,sans-serif!important;
    font-size:clamp(.92rem,4.5vw,1.08rem)!important;
    font-weight:500!important;
    line-height:1.35!important;
    letter-spacing:0!important;
    text-transform:none!important;
    color:#f4ece4!important;
    border-bottom:1px solid rgba(255,255,255,.16)!important;
    overflow-wrap:anywhere!important;
  }
  .contact-intro-phones{gap:.45rem!important}
  .contact-intro-phone{
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:stretch!important;
    gap:.7rem!important;
    width:100%!important;
    padding:.38rem 0!important;
    font-size:.96rem!important;
  }
  .contact-intro-phone span{font-size:.67rem!important;letter-spacing:.11em!important;white-space:nowrap!important}
  .contact-instagram-link{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin-top:.15rem!important;
    padding:.68rem .78rem!important;
    font-family:"Saraj Roboto",system-ui,sans-serif!important;
    font-size:.82rem!important;
  }
  .contact-cards{padding-top:1.8rem!important}
  .contact-card{padding:1.05rem!important;text-align:left}
  .contact-card h2{font-size:1.35rem!important}
  .contact-phone-link{grid-template-columns:76px minmax(0,1fr)!important;gap:.65rem!important}
  .contact-layout{padding-top:1.8rem!important}
  .route-panel{border-radius:22px}
  .route-copy{padding:1.05rem!important}
  .route-copy h2{font-size:clamp(1.9rem,8.5vw,2.45rem)}

  /* Menu: compact headings and no clipped cards. */
  .menu-tools{top:78px;margin-top:.65rem;padding:.65rem;border-radius:17px}
  .menu-search input{height:46px;font-size:.92rem}
  .menu-board{padding-top:1.45rem!important}
  .menu-board-title{gap:.4rem;margin-bottom:.7rem;padding-bottom:.8rem}
  .menu-board-title h2{font-size:clamp(1.85rem,8.8vw,2.5rem)!important;line-height:1.04!important;overflow-wrap:anywhere}
  .menu-board-title>p{font-size:.9rem;line-height:1.45}
  .menu-section{padding:.95rem 1rem!important;border-radius:17px}
  .menu-section h3{font-size:1.4rem!important}
  .menu-line{grid-template-columns:minmax(0,1fr) auto!important}
  .menu-line strong{font-size:.9rem}
  .menu-line>span{font-size:.83rem;white-space:nowrap}

  /* Footer: no giant social icon, no broken contact names. */
  .site-footer{margin-top:2.6rem;padding-inline:14px!important;padding-bottom:1.2rem}
  .footer-inner{grid-template-columns:1fr!important;gap:1.25rem!important;padding-bottom:1.4rem}
  .footer-brand,.footer-column,.footer-column:last-child{grid-column:auto!important;min-width:0}
  .footer-column{gap:.42rem}
  .footer-column>strong{font-size:.7rem}
  .footer-column span,.footer-column a{font-size:.84rem;line-height:1.5}
  .footer-phone-link{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:.65rem!important;width:100%!important}
  .footer-phone-link span{font-size:.64rem!important;white-space:nowrap!important}
  .footer-social-link{display:inline-flex!important;width:max-content!important;max-width:100%!important;align-items:center!important;gap:.55rem!important}
  .footer-bottom{gap:.25rem;font-size:.7rem}

  /* Bottom action dock: centered, compact and not content-blocking. */
  .mobile-action-dock{
    left:var(--v44-mobile-gutter)!important;
    right:var(--v44-mobile-gutter)!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    min-height:70px!important;
    padding:5px!important;
    border-radius:21px!important;
  }
  .mobile-action-dock a{min-height:58px!important;padding:.38rem .28rem!important;font-size:.66rem!important}
  .mobile-action-dock svg{width:21px!important;height:21px!important}
  .mobile-action-dock .dock-primary{border-radius:17px!important}

  .gallery-hero-copy h1{font-size:clamp(2rem,9vw,2.65rem)!important}
  .gallery-intro-card{grid-template-columns:94px minmax(0,1fr)!important}
  .gallery-intro-card div{min-width:0}
  .gallery-intro-card strong{font-size:.92rem}
  .gallery-intro-card span{font-size:.82rem;line-height:1.45}
}

/* Very small phones. */
@media (max-width:390px){
  :root{--v44-mobile-gutter:8px}
  .header-inner{width:calc(100% - 16px);grid-template-columns:minmax(0,1fr) 44px 46px}
  .brand-logo{width:44px;height:40px}
  .brand-copy strong{font-size:1.3rem}
  .nav-toggle{width:44px;height:44px}
  .reserve-pill{width:46px;height:46px;min-width:46px}

  .home-hero-copy{padding:1.15rem 1rem!important}
  .home-hero-copy h1{font-size:clamp(1.58rem,7.5vw,1.9rem)!important}
  .home-hero-copy h1 .brand-display{font-size:clamp(2.45rem,12.5vw,3rem)!important}
  .hero-title-long{font-size:.86em!important}
  .hero-title-word{display:block!important}
  .hero-text{font-size:.89rem!important}
  .hero-facts dt{font-size:1rem!important}
  .hero-facts dd{font-size:.55rem!important}

  .page-intro h1{font-size:clamp(1.95rem,10vw,2.55rem)!important}
  .contact-intro-phone,.contact-phone-link,.footer-phone-link{grid-template-columns:68px minmax(0,1fr)!important}
  .contact-intro-phone{font-size:.9rem!important}
  .mobile-action-dock{grid-template-columns:.92fr .92fr 1.22fr!important}
  .mobile-action-dock a{font-size:.62rem!important}
}

/* Landscape phones: avoid oversized heroes and keep controls reachable. */
@media (max-width:900px) and (orientation:landscape) and (max-height:540px){
  .home-hero{grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr)!important;grid-template-rows:auto!important}
  .home-hero-copy{grid-column:1!important;grid-row:1!important;padding:1rem!important}
  .home-hero-media{grid-column:2!important;grid-row:1!important;min-height:430px!important}
  .home-hero-copy h1{font-size:1.65rem!important}
  .home-hero-copy h1 .brand-display{font-size:2.5rem!important}
  .hero-text{display:none!important}
  .hero-actions{grid-template-columns:1fr 1fr!important}
  .mobile-action-dock{left:18%;right:18%}
}

@media (prefers-reduced-motion:reduce){
  .home-hero,.home-hero-copy,.home-hero-media img{transition:none!important;animation:none!important;transform:none!important}
}