/* design-menu.css — Pro overlay menu (split-screen, editorial, functional)
   Overrides /assets/navbar.css overlay rules. */

/* ─── OVERLAY SHELL ──────────────────────────────────────── */
.overlay-menu{
  position: fixed; inset: 0; z-index: 95;
  background:
    radial-gradient(ellipse at 78% 28%, rgba(198,161,91,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 88%, rgba(198,161,91,.06) 0%, transparent 50%),
    rgba(7,7,8,.985);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .45s cubic-bezier(.16,1,.3,1), visibility .45s;
}
.overlay-menu.is-open{ opacity: 1; visibility: visible; }
body.menu-open{ overflow: hidden; }

/* ─── CLOSE BUTTON ──────────────────────────────────────── */
.overlay-close{
  position: fixed; top: 22px; right: 26px; z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(198,161,91,.25);
  color: var(--gold-soft, #D6B878);
  font: 300 28px/1 Georgia,sans-serif;
  cursor: pointer; backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.overlay-close:hover{
  background: rgba(198,161,91,.16);
  border-color: var(--gold, #C6A15B);
  transform: rotate(90deg);
}

/* ─── GRID LAYOUT ──────────────────────────────────────── */
.overlay-grid{
  max-width: 1440px; margin: 0 auto;
  padding: clamp(56px,9vh,120px) clamp(28px,5vw,88px) clamp(40px,6vh,80px);
  display: grid;
  grid-template-columns: 1.05fr 1.1fr .85fr;
  gap: clamp(36px,5vw,80px);
  min-height: 100vh;
}
@media (max-width: 1100px){
  .overlay-grid{ grid-template-columns: 1fr 1fr; }
  .overlay-col--side{ grid-column: 1/-1; }
}
@media (max-width: 720px){
  .overlay-grid{ grid-template-columns: 1fr; gap: 36px; padding: 80px 24px 40px; }
}

/* ─── COLUMN PRIMITIVES ──────────────────────────────── */
.overlay-col{ min-width: 0; }
.overlay-col-head{
  display: flex; align-items: center; gap: 12px;
  font: 600 10px/1 Georgia; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold, #C6A15B);
  margin-bottom: 24px;
}
.overlay-col-head::before{
  content:""; width: 28px; height: 1px; background: var(--gold, #C6A15B);
}

/* ─── NAV LIST (left) ──────────────────────────────────── */
.overlay-nav-list{
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 2px;
}
.overlay-nav-item a, .overlay-nav-item button{
  display: flex; align-items: baseline; gap: 18px;
  padding: 14px 0; text-decoration: none;
  border-bottom: 1px solid rgba(198,161,91,.12);
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; width: 100%; text-align: left;
  transition: padding-left .25s ease, border-color .25s;
}
.overlay-nav-item a:hover, .overlay-nav-item button:hover{
  padding-left: 12px;
  border-bottom-color: rgba(198,161,91,.42);
}
.overlay-nav-num{
  font: 500 11px/1 Georgia,Georgia,serif;
  color: var(--gold-soft, #D6B878);
  letter-spacing: .04em; min-width: 28px;
}
.overlay-nav-label{
  flex: 1;
  font: 400 clamp(22px,2vw,28px)/1.1 Georgia,Georgia,serif;
  color: #F4EFE6;
  letter-spacing: -.005em;
}
.overlay-nav-meta{
  font: 500 10px/1 Georgia; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(157,150,138,.78);
  opacity: 0; transition: opacity .25s, transform .25s;
  transform: translateX(-6px);
}
.overlay-nav-item a:hover .overlay-nav-meta,
.overlay-nav-item button:hover .overlay-nav-meta{
  opacity: 1; transform: translateX(0);
}

/* ─── TYPE CHIP CLOUD (project types) ────────────────── */
.overlay-types{
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px;
}
.overlay-type{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  font: 600 10px/1 Georgia; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(198,161,91,.18);
  color: rgba(244,239,230,.85); text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.overlay-type:hover{
  background: rgba(198,161,91,.14);
  border-color: rgba(198,161,91,.5);
  color: #F4EFE6;
  transform: translateY(-1px);
}
.overlay-type-n{
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 10px/1 Georgia,serif;
  color: var(--gold, #C6A15B);
  background: rgba(198,161,91,.18);
  width: 18px; height: 18px; border-radius: 50%;
}

/* ─── SERVICES TREE (middle col) ─────────────────────── */
.overlay-svcs{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.overlay-svc{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0; text-decoration: none;
  border-bottom: 1px solid rgba(198,161,91,.10);
  transition: padding-left .25s, border-color .25s;
}
.overlay-svc:hover{
  padding-left: 12px;
  border-bottom-color: rgba(198,161,91,.42);
}
.overlay-svc-name{
  font: 500 16px/1.2 Georgia; color: #F4EFE6;
}
.overlay-svc-sub{
  font: 400 11px/1.4 Georgia; color: rgba(157,150,138,.78);
  margin-top: 4px; letter-spacing: .02em;
}
.overlay-svc-arrow{
  font: 500 16px/1 Georgia,serif;
  color: var(--gold-soft, #D6B878);
  opacity: .6; transition: opacity .25s, transform .25s;
}
.overlay-svc:hover .overlay-svc-arrow{ opacity: 1; transform: translateX(4px); }

/* ─── CTA STACK (above middle col) ───────────────────── */
.overlay-cta-stack{
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px;
}
.overlay-cta{
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-radius: 14px;
  text-decoration: none; font: 600 11px/1 Georgia;
  letter-spacing: .14em; text-transform: uppercase;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.overlay-cta--gold{
  background: linear-gradient(135deg, #D6B878 0%, #C6A15B 60%, #A8862A 100%);
  color: #1a1612; box-shadow: 0 10px 24px rgba(198,161,91,.28);
}
.overlay-cta--gold:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(198,161,91,.42); color: #1a1612; }
.overlay-cta--wa{ background: #25D366; color: #fff; }
.overlay-cta--wa:hover{ background: #1ebe5a; transform: translateY(-2px); }
.overlay-cta--dark{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(198,161,91,.25);
  color: #F4EFE6;
}
.overlay-cta--dark:hover{ background: rgba(198,161,91,.12); border-color: rgba(198,161,91,.5); }
.overlay-cta-arrow{ font: 500 16px/1 Georgia,serif; opacity: .8; }

/* ─── CONTACT / STUDIO / SOCIAL (right col) ───────────── */
.overlay-side{
  display: flex; flex-direction: column; gap: 28px;
}
.overlay-side-card{
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(198,161,91,.18);
}
.overlay-contact-row{
  display: flex; flex-direction: column; gap: 16px;
}
.overlay-contact-line{
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none;
}
.overlay-contact-line-label{
  font: 500 10px/1 Georgia; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(157,150,138,.78);
}
.overlay-contact-line-val{
  font: 500 17px/1.3 Georgia,serif;
  color: #F4EFE6;
  transition: color .2s;
}
.overlay-contact-line:hover .overlay-contact-line-val{ color: var(--gold, #C6A15B); }

.overlay-social{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.overlay-social a{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  font: 600 10px/1 Georgia; letter-spacing: .14em; text-transform: uppercase;
  color: #F4EFE6; text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .2s, border-color .2s;
}
.overlay-social a:hover{ background: rgba(198,161,91,.14); border-color: var(--gold, #C6A15B); }
.overlay-social svg{ width: 14px; height: 14px; }

.overlay-lang-row{
  display: inline-flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(198,161,91,.18);
  border-radius: 999px;
}
.overlay-lang-row a{
  padding: 8px 14px; border-radius: 999px;
  font: 600 10px/1 Georgia; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,239,230,.62); text-decoration: none;
  transition: all .18s;
}
.overlay-lang-row a:hover{ color: #F4EFE6; }
.overlay-lang-row a.is-active{ background: var(--gold, #C6A15B); color: #1a1612; }

/* ─── STUDIO MINI (right col bottom) ────────────────── */
.overlay-studio{
  position: relative;
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(198,161,91,.25);
  aspect-ratio: 16/11; min-height: 180px;
}
.overlay-studio-img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.overlay-studio-img::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7,7,8,.92) 100%);
}
.overlay-studio-meta{
  position: absolute; inset: auto 0 0 0; padding: 22px; z-index: 1;
}
.overlay-studio-eye{
  font: 600 9px/1 Georgia; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold, #C6A15B); margin: 0 0 8px;
}
.overlay-studio-quote{
  font: 400 16px/1.3 Georgia,serif;
  font-style: italic; color: #F4EFE6; margin: 0;
}

/* ─── ACCOUNT CHIP ──────────────────────────────────── */
.overlay-account{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(198,161,91,.22);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.overlay-account:hover{ background: rgba(198,161,91,.10); border-color: var(--gold, #C6A15B); }
.overlay-account-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #D6B878, #C6A15B);
  display: flex; align-items: center; justify-content: center;
  color: #1a1612; font: 600 13px/1 Georgia;
}
.overlay-account-name{
  font: 500 13px/1.2 Georgia; color: #F4EFE6;
}
.overlay-account-sub{
  font: 400 11px/1 Georgia; color: rgba(157,150,138,.78); margin-top: 2px;
}
.overlay-account-arrow{
  margin-left: auto; font: 500 16px/1 Georgia,serif;
  color: var(--gold-soft, #D6B878);
}

/* ─── DIVIDER ───────────────────────────────────────── */
.overlay-divider{
  margin: 28px 0; height: 1px; background: rgba(198,161,91,.18); border: 0;
}

/* ─── REVEAL ANIMATION (stagger) ────────────────────── */
.overlay-menu.is-open .overlay-col,
.overlay-menu.is-open .overlay-side > *{
  animation: ovIn .55s cubic-bezier(.16,1,.3,1) both;
}
.overlay-menu.is-open .overlay-col--mid{ animation-delay: .08s; }
.overlay-menu.is-open .overlay-col--side{ animation-delay: .14s; }
.overlay-menu.is-open .overlay-side > *:nth-child(2){ animation-delay: .22s; }
.overlay-menu.is-open .overlay-side > *:nth-child(3){ animation-delay: .28s; }
@keyframes ovIn{
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}