/* ==========================================================================
   LAW Café Bar — responsive.css
   Targets: 1920 · 1440 · 1024 · 768 · 390 · 320
   ========================================================================== */

/* Large screens: keep the composition tight, never stretch */
@media (min-width:1700px){
  :root{--wrap:1280px}
  html{font-size:106.25%}
}

/* ---------- ≤1100 ---------- */
@media (max-width:1100px){
  .footer-main{grid-template-columns:1fr 1fr;row-gap:36px}
  .menu-grid{grid-template-columns:minmax(200px,.7fr) minmax(0,2fr)}
  .menu-list{columns:1}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaic{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mosaic .m-hide-md{display:none}
}

/* ---------- ≤980: collapse navigation ---------- */
@media (max-width:980px){
  :root{--header-h:68px}
  /* backdrop-filter would make the header the containing block of the fixed nav panel */
  .site-header,.site-header.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--black)}
  .site-header.is-scrolled .bar{height:62px}
  .brand img{width:48px;height:48px}
  .nav-toggle{display:block}
  .main-nav{position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:99;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom));background:var(--black);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .nav-open .main-nav{opacity:1;visibility:visible;transform:none}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav li{border-bottom:1px solid var(--line-d)}
  .main-nav a{padding:20px 0;font:500 clamp(1.5rem,6vw,2rem)/1.2 var(--serif);letter-spacing:0;text-transform:none}
  .main-nav a::after{display:none}
  .main-nav a[aria-current="page"]{color:var(--gold-light)}
  .main-nav__foot{display:block;margin-top:28px;font-size:.95rem;color:var(--on-dark-2)}
  .main-nav__foot a{display:inline;padding:0;font:600 1.1rem/1.4 var(--sans);color:var(--gold-light);text-decoration:none}
  body.nav-lock{overflow:hidden}

  .split,.split--wide-media{grid-template-columns:1fr;gap:36px}
  .split--reverse .split__media,.split--wide-media.split--reverse{order:0}
  .split--wide-media.split--reverse{grid-template-columns:1fr}
  .frame img{aspect-ratio:4/3}
  .frame--land img{aspect-ratio:4/3}
  .band{grid-template-columns:1fr}
  .band__copy{padding:clamp(36px,8vw,64px) var(--gutter)}
  .band__media{min-height:0;aspect-ratio:16/10}
  .values{grid-template-columns:1fr;gap:28px}
  .exp-grid{grid-template-columns:1fr;gap:44px}
  .form-wrap,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .menu-grid{grid-template-columns:1fr;gap:26px}
  .menu-aside{position:static}
  .menu-aside figure{display:none}
  .menu-aside .count{display:none}
  .menu-list{columns:2}
}
@media (min-width:981px){
  .main-nav__foot{display:none}
}

/* ---------- ≤820: mobile action bar ---------- */
@media (max-width:820px){
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .action-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;background:rgba(11,10,9,.97);border-top:1px solid var(--line-d);padding-bottom:env(safe-area-inset-bottom);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .action-bar a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font:700 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--on-dark)}
  .action-bar a+a{border-left:1px solid var(--line-d)}
  .action-bar svg{width:16px;height:16px;color:var(--gold)}
  .nav-open .action-bar,.lb-open .action-bar{display:none}
}

/* ---------- ≤720 ---------- */
@media (max-width:720px){
  .cards3{grid-template-columns:1fr;gap:16px}
  .cat-card{aspect-ratio:4/4.3}
  .trio{grid-template-columns:1fr}
  .trio img{aspect-ratio:16/10}
  .footer-main{grid-template-columns:1fr;gap:32px}
  .form-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,34vw,200px)}
  .g-item.g-big{grid-column:span 2;grid-row:span 2}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,34vw,200px)}
  .mosaic .m-big{grid-column:span 2}
  .mosaic .m-hide-sm{display:none}
  .menu-list{columns:1}
  .info-row{grid-template-columns:1fr;gap:4px}
  .hero__inner{padding-inline:0}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-btn{width:44px;height:44px}
  .footer-bottom{flex-direction:column}
}

/* ---------- ≤480 ---------- */
@media (max-width:480px){
  :root{--gutter:20px}
  body{font-size:.97rem}
  .hero{min-height:clamp(540px,88svh,720px)}
  .hero .btn-row,.btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .btn,.btn-row .btn{width:100%}
  .hero__sub{letter-spacing:.24em}
  .page-hero{min-height:260px}
  .frame::after{inset:-8px 8px 8px -8px}
  .split--reverse .frame::after{inset:-8px -8px 8px 8px}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .form-actions .btn{width:100%}
  .map-card{min-height:320px}
}

/* ---------- ≤360 ---------- */
@media (max-width:360px){
  :root{--gutter:16px}
  h1{font-size:2.15rem}
  .hero h1{font-size:2.7rem}
  .btn{padding:.8em 1.2em;letter-spacing:.1em}
  .brand img{width:42px;height:42px}
  .lang-btn{min-width:40px;padding:0 8px}
  .header-tools{gap:6px}
  .nav-toggle{width:42px;height:42px}
  .nav-toggle i{left:10px;right:10px}
  .menu-nav a{font-size:.7rem}
}

/* ---------- Motion on small screens: fewer, lighter shapes ---------- */
@media (max-width:720px){
  .deco .d-sq,.deco .d-dot{display:none}
  .deco .d-blob{width:300px}
  .deco .d-ring{width:110px}
  .btn:hover{transform:none;box-shadow:none}
}
@media (hover:none){
  .frame:hover::after{transform:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.action-bar,.menu-nav,.lightbox{display:none!important}
  body{background:#fff;color:#000}
}