/* ==========================================================================
   inRadius — WEB (desktop) VERSION
   Loaded on every page. Nothing here changes the phone layout:
   all rules live inside @media (min-width:1024px).
   The header / footer markup is injected by assets/web.js.
   ========================================================================== */

.webnav,.webfoot,.web-hero-aside,.web-side-book{display:none}

@media (min-width:1024px){
  :root{--web-h:68px;--web-max:1320px;--web-pad:48px;--web-line:#1d1b19;--web-card:#0e0d0c}

  /* ---------- page frame: no phone shell, room for the top bar ---------- */
  html{scroll-padding-top:calc(var(--web-h) + 16px)}
  body{padding:var(--web-h) 0 0 !important;display:block !important;background:#080706}
  .app{margin:0 auto !important;border:none !important;border-radius:0 !important;box-shadow:none !important;
    min-height:calc(100vh - var(--web-h)) !important;padding-bottom:64px !important}

  /* mobile-only chrome */
  .tabbar,.irtabbar,.bottomfade,.irtabfade,.scrollhint,.searchbar{display:none !important}

  /* ---------- TOP BAR ---------- */
  .webnav{display:flex;position:fixed;top:0;left:0;right:0;height:var(--web-h);z-index:95;
    background:rgba(8,7,6,.84);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
    border-bottom:1px solid var(--web-line);font-family:'Lora',serif;color:#fff}
  .webnav .wn-in{width:100%;max-width:var(--web-max);margin:0 auto;padding:0 var(--web-pad);display:grid;
    grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
  .wn-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;justify-self:start}
  .wn-brand img{width:30px;height:30px}
  .wn-brand b{font-weight:500;font-size:21px;letter-spacing:.03em}
  .wn-city{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
    border:1px solid #2c2825;border-radius:999px;padding:5px 11px;display:inline-flex;align-items:center;gap:7px}
  .wn-city::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.7)}
  .wn-links{display:flex;gap:6px}
  .wn-links a{position:relative;color:rgba(255,255,255,.6);text-decoration:none;font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;padding:10px 14px;border-radius:999px;transition:color .2s,background .2s}
  .wn-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .wn-links a.on{color:#fff}
  .wn-links a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff}
  .wn-right{display:flex;align-items:center;gap:12px;justify-self:end}
  .wn-icon{width:40px;height:40px;border-radius:50%;border:1px solid #2a2623;background:transparent;color:#fff;cursor:pointer;
    display:grid;place-items:center;position:relative;transition:border-color .2s,background .2s}
  .wn-icon:hover{border-color:#4a4440;background:rgba(255,255,255,.04)}
  .wn-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .wn-icon .wn-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#fff;color:#000;
    font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;font-family:'Lora',serif}
  .wn-icon .wn-badge.on{display:flex}
  .wn-cta{background:#fff;color:#000;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
    padding:12px 20px;border-radius:999px;transition:transform .16s,opacity .2s}
  .wn-cta:hover{opacity:.9}
  .wn-cta:active{transform:scale(.97)}
  .wn-me{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;padding:4px 14px 4px 4px;border:1px solid #2a2623;border-radius:999px;transition:border-color .2s}
  .wn-me:hover{border-color:#4a4440}
  .wn-me .wn-av{width:32px;height:32px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:14px;font-weight:600}
  .wn-me span{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* keep page overlays above the bar */
  #splash{z-index:1000}

  /* ---------- FOOTER (pages without their own) ---------- */
  .webfoot{display:block;border-top:1px solid var(--web-line);background:#080706;font-family:'Lora',serif}
  .webfoot .wf-in{max-width:var(--web-max);margin:0 auto;padding:44px var(--web-pad) 26px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  .webfoot .wf-name{font-size:24px;color:#fff;margin-top:10px}
  .webfoot .wf-brand img{width:30px;height:30px}
  .webfoot p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);margin-top:8px;max-width:300px}
  .webfoot h4{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:400;margin-bottom:12px}
  .webfoot a{display:block;font-size:13.5px;color:rgba(255,255,255,.7);text-decoration:none;margin-bottom:9px;transition:color .2s}
  .webfoot a:hover{color:#fff}
  .webfoot .wf-bot{max-width:var(--web-max);margin:0 auto;padding:16px var(--web-pad) 26px;border-top:1px solid #151413;display:flex;justify-content:space-between;
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}

  /* ======================================================================
     HOME
     ====================================================================== */
  .web-home .app{max-width:none !important;background:#000;overflow:visible !important;overflow-x:clip !important}
  .web-home .bellbtn{display:none !important}
  .web-home .masthead{max-width:var(--web-max);margin:0 auto;padding:64px var(--web-pad) 36px !important;text-align:left;
    display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:48px;align-items:end}
  .web-home .masthead .sub{grid-column:1;font-size:22px !important;margin:0 0 -6px 6px !important;opacity:.7;letter-spacing:.12em;text-transform:uppercase;font-size:14px !important}
  .web-home .masthead .city{grid-column:1;font-size:clamp(96px,10vw,148px) !important;line-height:.9 !important;letter-spacing:-.01em}
  .web-hero-aside{display:block;grid-column:2;grid-row:1 / span 2;padding-bottom:14px}
  .web-hero-aside p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.72)}
  .web-hero-stats{display:flex;gap:36px;margin:22px 0 24px}
  .web-hero-stats div{display:flex;flex-direction:column}
  .web-hero-stats b{font-weight:400;font-size:40px;line-height:1;color:#fff}
  .web-hero-stats span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:8px}
  .web-hero-stats .live b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin-left:8px;vertical-align:super;box-shadow:0 0 10px rgba(74,222,128,.8)}
  .web-hero-go{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#000;border:none;cursor:pointer;border-radius:999px;
    font-family:'Lora',serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:15px 26px;transition:transform .16s}
  .web-hero-go:hover{transform:translateY(-1px)}
  .web-hero-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* category cards: one calm row instead of the phone carousel */
  .web-home .posters{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px !important;overflow:visible !important;
    max-width:var(--web-max);margin:0 auto;padding:0 var(--web-pad) 8px !important;scroll-snap-type:none}
  .web-home .posters::before,.web-home .posters::after{display:none !important}
  .web-home .poster{width:auto !important;aspect-ratio:3/4.2 !important;transform:none !important;opacity:1 !important;filter:none !important;
    z-index:auto !important;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s}
  .web-home .poster:nth-child(n+7){display:none !important}
  .web-home .poster:hover{transform:translateY(-6px) !important;box-shadow:0 28px 60px rgba(0,0,0,.75)}
  .web-home .poster .pname{font-size:30px !important;animation:none !important}
  .web-home .poster .soonov .sname{font-size:24px !important}
  .web-home .poster[data-meal="coffee"]{outline:1px solid rgba(255,255,255,.5);outline-offset:5px}
  .web-home .poster .pnow{display:none}
  .web-home .catlabel{max-width:var(--web-max) !important;padding:72px var(--web-pad) 18px !important}
  .web-home .cattags{position:sticky;top:var(--web-h);z-index:20;background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .web-home .catgrid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:24px !important;max-width:var(--web-max) !important}
  .web-home .ctile{aspect-ratio:4/5 !important}
  @media (min-width:1500px){.web-home .catgrid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}}
  .web-home .site-footer{max-width:var(--web-max);margin:56px auto 0 !important}

  /* ======================================================================
     PLACE PAGES (place-*.html) — two columns with a sticky info rail
     ====================================================================== */
  .web-place .app{max-width:var(--web-max) !important;background:#000;overflow:visible !important;overflow-x:clip !important}
  .web-place .backbtn{top:40px !important;left:72px !important}
  .web-place .favbtn{top:40px !important;right:72px !important}
  .web-place .hero{margin:24px var(--web-pad) 0;border-radius:24px;overflow:hidden;height:min(62vh,600px) !important;max-height:none !important}
  .web-place .identity{padding:0 calc(var(--web-pad) + 32px) !important;margin-top:-96px !important;position:relative;z-index:3}
  .web-place .identity .name{font-size:48px !important}
  .web-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;padding:12px var(--web-pad) 0;align-items:start}
  .web-main>*{margin-left:0 !important;margin-right:0 !important;padding-left:0 !important;padding-right:0 !important}
  .web-main .tiles{padding-top:28px !important}
  .web-main .about{grid-template-columns:1fr 240px !important;padding-top:44px !important;text-align:left}
  .web-main .about .copy{text-align:left}
  .web-main .amenities{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .web-side{position:sticky;top:calc(var(--web-h) + 24px);display:flex;flex-direction:column;gap:16px;padding-top:28px;
    max-height:calc(100vh - var(--web-h) - 40px);overflow-y:auto;scrollbar-width:none}
  .web-side::-webkit-scrollbar{display:none}
  .web-side>*{margin:0 !important;background:var(--web-card);border:1px solid var(--web-line);border-radius:20px;padding:20px 22px !important}
  .web-side>.map{padding:0 !important;overflow:hidden;height:240px !important;position:relative}
  .web-side .section h3{margin-top:0 !important}
  .web-side-book{display:block !important;width:100%;background:#fff;color:#000;border:none;border-radius:999px;cursor:pointer;
    font-family:'Lora',serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:16px 0 !important;transition:opacity .2s}
  .web-side-book:hover{opacity:.9}

  /* ======================================================================
     ACCOUNT-TYPE PAGES — shown as a centred card instead of a phone
     ====================================================================== */
  .web-card .app{max-width:560px !important;margin:40px auto 56px !important;border:1px solid var(--web-line) !important;border-radius:28px !important;
    min-height:0 !important;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7) !important}

  /* everything else (catalogs, coffee, about…) keeps its own wide layout */
  .web-wide .app{max-width:var(--web-max) !important}
}

@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  .web-home .poster,.web-home .poster:hover{transition:none;transform:none !important}
}

/* ==========================================================================
   PHONE IMPROVEMENTS (below 1024px)
   ========================================================================== */
.qbar,.fpzoom{display:none}
@media (max-width:1023.98px){
  /* tab bar: readable labels, clears the iPhone home indicator */
  .irtabbar .tl,.tabbar .tl{font-size:9.5px !important;letter-spacing:.06em !important}
  .irtabbar,.tabbar{bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important}

  /* venue quick bar — status + the three things people actually tap */
  .qbar{display:block;padding:16px 16px 0;animation:introUp .85s ease .2s both}
  .qb-status{display:flex;align-items:center;gap:8px;font-family:'Lora',serif;font-size:13.5px;color:rgba(255,255,255,.78)}
  .qb-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#8a8580;flex:none}
  .qb-status.open::before{background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.7)}
  .qb-status b{font-weight:600;color:#fff}
  .qb-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .qb-row a,.qb-row button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 10px;border-radius:14px;
    background:#121110;border:1px solid #262220;color:#fff;text-decoration:none;font-family:'Lora',serif;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,background .2s}
  .qb-row a:active,.qb-row button:active{transform:scale(.96);background:#1a1817}
  .qb-row .qb-main{background:#fff;color:#000;border-color:#fff}
  .qb-row svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  /* floor plan: tap to open full screen and pan around */
  .fp-wrap{position:relative;cursor:zoom-in}
  .fp-wrap::after{content:"Tap to zoom";position:absolute;right:12px;bottom:12px;font-family:'Lora',serif;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:#fff;background:rgba(0,0,0,.7);border:1px solid #3a3532;border-radius:999px;padding:6px 11px;pointer-events:none}
  .fpzoom{position:fixed;inset:0;z-index:200;background:#000;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .fpzoom.on{display:block}
  .fpzoom img{display:block;width:240%;max-width:none;height:auto;padding:70px 24px 40px}
  .fpzoom button{position:fixed;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    background:rgba(0,0,0,.6);color:#fff;font-size:16px;cursor:pointer;z-index:2}
  .fpzoom .fz-hint{position:fixed;top:28px;left:20px;font-family:'Lora',serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
}
