/* ═══════════════════════════════════════════════════════════
responsive.css
MOBILE  : < 768px
TABLET  : 768px - 1023px
DESKTOP : >= 1024px
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
MOBILE (< 768px)
══════════════════════════════════════════════════════════ */
@media (max-width: 767px)and (orientation: portrait) {

.menu-header {
padding: 14px 20px 8px;
}

.menu-header-inner {
gap: clamp(10px, 3vw, 24px);
}

.logo-oww {
height: clamp(62px, 11vw, 140px);
}

.logo-waiterrush {
height: clamp(80px, 16vw, 240px);
}

.logo-zcs {
height: clamp(58px, 10.5vw, 132px);
}

.menu-bg,
.view-menu {
height: 100vh !important;
min-height: 100vh !important;
}

.menu-main {
flex: 1 !important;
flex-direction: column !important;
padding: 10px 20px !important;
gap: 14px !important;
align-items: stretch !important;
justify-content: center !important;
box-sizing: border-box !important;
}

.menu-card {
flex: 1 !important;
width: 100% !important;
min-height: 160px !important;
height: auto !important;
}

.menu-card-inner {
border-radius: 22px !important;
}

.menu-footer {
padding: 8px 20px 14px;
}

.blue-header {
padding: 14px 20px;
}

/* ISPEZIONA */

.ispeziona-layout {
flex-direction: column !important;
padding: 0 20px 24px;
gap: 20px;
align-items: stretch;
}

.silhouette-area {
order: 1;
width: 100%;
height: 240px;
min-height: 240px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}

.silhouette-img {
display: none !important;
max-height: 220px !important;
width: auto !important;
}

.silhouette-img.sil-visible {
display: block !important;
}

.robot-list-wrap {
order: 2;
width: 100%;
}

.robot-list {
gap: 14px;
}

.robot-item {
padding: 14px 18px;
gap: 16px;
border-radius: 50px;
}

.robot-icon-wrap {
width: 68px;
height: 68px;
}

.robot-icon-img {
width: 200%;
height: 200%;
object-fit: cover;
}

.robot-model-lbl {
font-size: 1.4rem;
}

.robot-subtitle-lbl {
font-size: 0.9rem;
}

.robot-cta {
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
}

/* DETTAGLIO */

.view-detail .blue-bg {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}

.detail-layout {
display: flex !important;
flex-direction: column !important;
flex: 1;
padding: 0 20px 16px;
gap: 14px;
overflow-y: auto;
}

.detail-card {
width: 100%;
padding: 22px 24px;
border-radius: 20px;
}

.detail-title {
font-size: 2rem;
}

.detail-desc {
font-size: 0.9rem;
line-height: 1.65;
}

.detail-site-btn {
font-size: 1.4rem;
}

.viewer-column {
height: 50vh;
min-height: 300px;
}

.viewer-wrap {
flex: 1;
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
}

model-viewer {
width: 100%;
height: 100%;
min-height: 280px;
}

.viewer-ctrl-bar {
display: flex;
}

.viewer-hints {
border-radius: 16px;
font-size: 0.78rem;
padding: 8px 12px;
}
}

/* ══════════════════════════════════════════════════════════
   TABLET (768px - 1023px)
   OTTIMIZZATO PER USO IN VERTICALE
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px)and (orientation: portrait) {

  /* HEADER */

  .menu-header {
    padding: 18px 32px 10px;
  }

  .menu-header-inner {
    gap: 24px;
  }

  .logo-oww {
    height: 90px;
  }

  .logo-waiterrush {
    height: 130px;
  }

  .logo-zcs {
    height: 90px;
  }

  /* MENU */

  .menu-main {
    flex: 1;
    flex-direction: column;
    padding: 20px 40px;
    gap: 24px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .menu-card {
    width: 100%;
    max-width: 760px;
    min-height: 260px;
    flex: 1;
  }

  .menu-card-inner {
    width: 100%;
    border-radius: 28px;
  }

  .blue-header {
    padding: 18px 32px;
  }

  /* ISPEZIONA */

  .ispeziona-layout {
    flex-direction: column;
    padding: 0 32px 32px;
    gap: 28px;
    align-items: stretch;
  }

  .silhouette-area {
    order: 1;
    width: 100%;
    height: 50vh;
    min-height: 480px;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .silhouette-img {
    display: none !important;
    max-height: 460px !important;
    width: auto !important;
  }

  .silhouette-img.sil-visible {
    display: block !important;
  }

  .robot-list-wrap {
    order: 2;
    width: 100%;
  }

  .robot-list {
    gap: 18px;
  }

  .robot-item {
    padding: 18px 24px;
    gap: 18px;
    border-radius: 60px;
  }

  .robot-icon-wrap {
    width: 82px;
    height: 82px;
  }

  .robot-model-lbl {
    font-size: 1.7rem;
  }

  .robot-subtitle-lbl {
    font-size: 1rem;
  }

  .robot-cta {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
  }

  /* DETTAGLIO */

  .view-detail .blue-bg {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .detail-layout {
    display: flex !important;
    flex-direction: column !important;

    flex: 1;

    padding: 0 24px 0;
    gap: 16px;

    overflow: hidden;
  }

  .detail-card {
    width: 100%;
    padding: 32px;
    border-radius: 24px;
    flex-shrink: 0;
  }

  .detail-title {
    font-size: 2.6rem;
  }

  .detail-desc {
    font-size: 1.05rem;
    line-height: 1.8;
  }

  .detail-site-btn {
    font-size: 1.7rem;
  }

  /* VIEWER */

  .viewer-column {
    display: flex;
    flex-direction: column;

    flex: 1;

    min-height: 650px;
    height: calc(100vh - 320px);
  }

  .viewer-wrap {
    flex: 1;

    position: relative;
    overflow: hidden;

    border-radius: 20px 20px 0 0;
  }

  model-viewer {
    width: 100%;
    height: 100%;
    min-height: 650px;
  }

  /* CONTROLLI FISSATI IN BASSO */

  .viewer-ctrl-bar {
    display: flex;
    margin-top: auto !important;
    flex-shrink: 0;
  }

  .viewer-hints {
    flex-shrink: 0;

    border-radius: 20px;

    padding: 12px 16px;
    font-size: 0.9rem;
  }

  /* BACK BUTTON */

  .view-ispeziona .back-btn,
  .view-detail .back-btn {
    margin: 16px 32px;
  }
}
/* ══════════════════════════════════════════════════════════
DESKTOP (>= 1024px)
══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

.menu-header {
padding: 16px 32px 4px;
}

.menu-header-inner {
gap: clamp(16px, 2.5vw, 36px);
}

.menu-main {
flex-direction: row;
padding: 4px 48px 0;
gap: 16px;
align-items: center;
}

.menu-card {
height: min(60vh, 460px);
}

.blue-header {
padding: 18px 56px;
}

.ispeziona-layout {
flex-direction: row;
padding: 0 56px 40px;
gap: 48px;
min-height: calc(100vh - 90px);
align-items: center;
}

.robot-list-wrap {
width: 460px;
flex-shrink: 0;
}

.robot-item {
padding: 16px 24px;
gap: 20px;
}

.robot-icon-wrap {
width: 78px;
height: 78px;
}

.robot-model-lbl {
font-size: 1.6rem;
}

.robot-subtitle-lbl {
font-size: 1rem;
}

.silhouette-area {
flex: 1;
min-height: 460px;
justify-content: center;
}

.silhouette-img {
max-height: 520px;
}

.view-detail .blue-bg {
height: 100vh;
overflow: hidden;
}

.view-detail .blue-header {
height: 70px;
flex-shrink: 0;
}

.detail-layout {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 120px;
padding: 48px 100px;
height: calc(100vh - 70px);
overflow: hidden;
box-sizing: border-box;
}

.detail-card {
width: 100%;
align-self: center;
padding: 40px 44px;
}

.detail-title {
font-size: 3rem;
}

.detail-desc {
font-size: 1.1rem;
line-height: 1.8;
}

.detail-site-btn {
font-size: 1.8rem;
}

.viewer-column {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}

.viewer-wrap {
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
border-radius: 16px 16px 0 0;
}

model-viewer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.viewer-hints {
flex-shrink: 0;
border-radius: 16px;
}

.viewer-ctrl-bar {
display: none !important;
}

.view-ispeziona .back-btn,
.view-detail .back-btn {
margin: 16px 48px;
}
}

/* ══════════════════════════════════════════════════════════
PRINT
══════════════════════════════════════════════════════════ */
@media print {

.cookie-banner,
.modal,
.viewer-ctrl-bar,
.back-btn {
display: none !important;
}

}