/* ============================================================
   EXPOHIVE — Mobile Enhancements
   1. Trust logo infinite marquee
   2. Mobile dashboard card (.mob-dash)
   3. Footer mobile optimisation
   ============================================================ */

/* ============================================================
   1. TRUST MARQUEE — loops left on mobile, static flex on desktop
   ============================================================ */

/* Global Trust Logo Autoscroll Marquee */
.trust {
  padding: 60px 0 20px;
}
.trust .lab {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}
.trust-marquee {
  width: 100%;
  overflow: hidden;
  /* edge fade */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  padding: 30px 0;
  margin: -10px 0;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  width: max-content;
  justify-content: flex-start;
  animation: marquee-scroll 24s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0%   {transform: translateX(0)}
  100% {transform: translateX(-50%)}
}

/* Show duplicate clients for seamless marquee loop */
.marquee-track .client[aria-hidden="true"] {
  display: flex;
}

.client {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line, #e9e8ee);
  border-radius: 10px;
  padding: 6px 16px;
  height: 80px;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(28, 32, 58, 0.03);
}
.client .mk {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  flex: none;
}
.client-logo {
  height: 60px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  flex: none;
}
.client .nm {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.client .nm small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 2px;
}

@media (max-width:768px){
  .trust{padding:28px 0 10px;overflow:hidden}
  .trust .lab{padding:0 var(--pad,20px);margin-bottom:16px}

  .marquee-track{
    gap: 12px;
    padding: 4px 0 12px;
    animation: marquee-scroll 18s linear infinite;
  }
  .client{
    flex: 0 0 auto;
    padding: 4px 12px;
    height: 46px;
    box-sizing: border-box;
    min-width: 130px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }
  .client:hover {
    transform: none;
  }
  .client-logo {
    height: 34px;
    width: auto;
    max-width: 90px;
  }
  .client .nm small{font-size:9.5px;}
}

/* ============================================================
   2. MOBILE DASHBOARD CARD (.mob-dash)
   ============================================================ */

/* Hidden on desktop */
.mob-dash{display:none}
/* Hidden on desktop: show desktop browser */
.desktop-mock{display:block}

@media (max-width:640px){
  /* Show mobile card, hide desktop browser */
  .mob-dash{display:block}
  .desktop-mock{display:none}

  .mob-dash{
    background:var(--navy,#262a4c);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 64px -12px rgba(38,42,76,.35),0 4px 20px rgba(0,0,0,.12);
    font-family:var(--font,sans-serif)
  }

  /* --- Header --- */
  .mob-dash-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 16px 14px;
    background:linear-gradient(135deg,#1e2247 0%,#262a4c 100%);
    border-bottom:1px solid rgba(255,255,255,.07)
  }
  .mob-dash-icon{
    width:36px;height:36px;
    border-radius:10px;
    background:rgba(248,171,15,.18);
    color:var(--amber,#f8ab0f);
    display:grid;place-items:center;
    flex:none
  }
  .mob-dash-icon svg{width:18px;height:18px}
  .mob-dash-info{flex:1;min-width:0}
  .mob-dash-title{font-size:13px;font-weight:800;color:#fff;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mob-dash-sub{font-size:9.5px;color:#8a90b0;font-family:var(--mono,monospace);margin-top:1px;text-transform:uppercase;letter-spacing:.06em}
  .mob-live-pill{
    flex:none;
    font-size:9.5px;font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(74,222,128,.15);
    color:#4ade80;
    border:1px solid rgba(74,222,128,.25);
    white-space:nowrap
  }

  /* --- KPI strip --- */
  .mob-kpi-row{
    display:flex;
    align-items:stretch;
    background:var(--navy,#262a4c)
  }
  .mob-kpi{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:14px 8px 12px;
    text-align:center;
    gap:2px
  }
  .mob-kpi-divider{
    width:1px;
    background:rgba(255,255,255,.08);
    margin:10px 0
  }
  .mob-kpi-val{
    font-size:22px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.03em;
    line-height:1
  }
  .mob-kpi--amber .mob-kpi-val{color:var(--amber,#f8ab0f)}
  .mob-kpi-label{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:#8a90b0;
    font-weight:700;
    margin-top:3px
  }
  .mob-kpi-chg{
    font-size:10px;
    font-weight:700;
    color:#4ade80;
    margin-top:2px
  }
  .mob-kpi--amber .mob-kpi-chg{color:var(--amber-300,#fcd34d)}

  /* --- Chart --- */
  .mob-chart{
    background:#fff;
    padding:14px 14px 12px;
    border-radius:0 0 20px 20px
  }
  .mob-chart-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px
  }
  .mob-chart-title{font-size:11.5px;font-weight:700;color:var(--ink,#1a1d33)}
  .mob-chart-leg{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:9.5px;
    color:var(--muted,#6b7280)
  }
  .dot{
    display:inline-block;
    width:8px;height:8px;
    border-radius:2px
  }
  .dot-a{background:var(--amber,#f8ab0f)}
  .dot-n{background:var(--navy,#262a4c)}

  .mob-bars{
    display:flex;
    align-items:flex-end;
    gap:8px;
    height:72px
  }
  .mob-col{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:stretch;
    gap:3px;
    height:100%
  }
  .mob-bar{
    display:block;
    border-radius:4px 4px 2px 2px;
    min-height:3px
  }
  .mob-bar--a{background:var(--amber,#f8ab0f)}
  .mob-bar--n{background:var(--navy,#262a4c)}

  .mob-bar-labels{
    display:flex;
    gap:8px;
    margin-top:8px
  }
  .mob-bar-labels span{
    flex:1;
    text-align:center;
    font-size:8.5px;
    color:var(--muted-2,#9ca3af);
    font-family:var(--mono,monospace)
  }
}

/* ============================================================
   3. FOOTER — Mobile optimisation & logo visibility
   ============================================================ */

/* Desktop / Default: let columns lay out directly under footer-top */
.footer-links-grid {
  display: contents;
}

/* Ensure footer logo has correct hover opacity (original white text and amber icon are preserved) */
.footer-brand img {
  opacity: 0.9;
  transition: opacity 0.25s ease;
}
.footer-brand img:hover {
  opacity: 1;
}

@media (max-width:640px){
  .footer-top{
    padding:48px var(--pad,20px) 36px;
    grid-template-columns:1fr;
    gap:32px
  }
  .footer-brand{
    grid-column:auto;
    text-align:center
  }
  .footer-brand img{
    margin:0 auto 14px;
    height:28px
  }
  .footer-brand p{
    max-width:100%;
    text-align:center;
    font-size:14px
  }
  .social{
    justify-content:center;
    margin-top:16px
  }

  /* 2-col link grid */
  .footer-links-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px 16px
  }
  .footer-col h5{
    font-size:11px;
    letter-spacing:.12em;
    margin-bottom:12px
  }
  .footer-col ul{
    gap:9px;
    font-size:14px
  }

  .footer-bottom{
    padding:18px var(--pad,20px);
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    font-size:13px
  }
}

@media (max-width:400px){
  .footer-links-grid{grid-template-columns:1fr}
  .footer-top{padding:40px var(--pad,16px) 28px}
}

/* ============================================================
   4. NAVIGATION — Mobile overrides
   ============================================================ */
@media (max-width:980px){
  /* Hide the header CTA entirely on mobile since it's already in the hamburger menu */
  .nav-cta {
    display: none !important;
  }
}

/* ============================================================
   5. FOOD COURT PHONE MOCKUP — Mobile optimisation
   ============================================================ */
@media (max-width: 520px) {
  /* Optimize food app card inside phone mockup */
  .fa-top {
    padding: 22px 14px 12px !important;
  }
  .fa-top .ttl {
    font-size: 15px !important;
  }
  .fa-search {
    padding: 6px 10px !important;
    font-size: 11px !important;
    margin-top: 8px !important;
  }
  .fa-chips {
    padding: 8px 14px 4px !important;
    gap: 5px !important;
  }
  .fa-chip {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
  .fa-list {
    padding: 4px 14px !important;
    gap: 8px !important;
  }
  .fa-card {
    padding: 6px 8px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .fa-thumb {
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }
  .fa-card .nm {
    font-size: 11px !important;
  }
  .fa-card .meta {
    font-size: 9px !important;
    margin-top: 1px !important;
  }
  .fa-card .add {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
  }
  .fa-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
  }
  .fa-bar .cnt {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
    font-size: 10px !important;
  }
}

/* ============================================================
   6. HERO FLOAT BADGES — Mobile positioning on the card
   ============================================================ */
@media (max-width: 640px) {
  .mock-wrap {
    margin-top: 48px !important;
  }
  /* Show badge-1 and badge-2 on mobile, floating on the card */
  .mock-wrap .float-badge {
    display: flex !important;
    position: absolute !important;
    transform: scale(0.8) !important;
    transform-origin: center !important;
    z-index: 5 !important;
    box-shadow: 0 8px 24px rgba(28, 32, 58, 0.16) !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
  }

  /* Badge 1: 1,204 checked-in today - top left */
  #hero-a .badge-1, #hero-b .badge-1, #hero-c .badge-1 {
    top: -30px !important;
    left: -8px !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Badge 2: 92% B2B match rate - bottom right */
  #hero-a .badge-2, #hero-b .badge-2, #hero-c .badge-2 {
    bottom: -12px !important;
    right: -8px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Hide the 3rd badge on mobile to avoid overcrowding */
  #hero-b .badge-3 {
    display: none !important;
  }

  /* Hide the redundant full-width mobile stats strip since badges are on the card */
  .hero-stats-strip {
    display: none !important;
  }
}