/*
 * PneumaLuna — mobile corrections
 *
 * Layered on top of the built stylesheet, which ships no mobile rules at all for the
 * services drawer. Design language (colours, gradients, blur, radii) is preserved
 * throughout; these rules only correct reachability, legibility and touch ergonomics.
 */

/* ------------------------------------------------------------------ *
 * 1. Services drawer — the trap
 *
 * The drawer is position:absolute inside the services section and is taller than a
 * phone viewport, so scrolling down to read it pushes the ✕ off the top of the screen
 * (measured at top:-331px after a 520px scroll) and there is no other way out.
 * On mobile it becomes a fixed full-screen sheet with a sticky bar, so the close
 * control is always on screen, and its body scrolls independently.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .svc-drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    border-radius: 0;
    border-left: none;
    border-right: none;
    /* dvh tracks the collapsing mobile URL bar; vh is the fallback */
    height: 100vh;
    height: 100dvh;
    max-height: none;
    /* A later rule in the built CSS centres the panel with
     * `top:50%; height:84%; transform:translateY(-50%)`. Overriding position/top/height
     * alone leaves that translate in place, which lifts the sheet half a viewport off
     * screen and hides the close bar. The transform has to be neutralised too. */
    transform: translateY(14px) scale(1);
  }

  .svc-drawer.open {
    transform: none;
  }

  .svc-drawer-bar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #060c20, #071026);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* was overflow:hidden — content below the fold was unreachable */
  .svc-drawer-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;          /* don't scroll the page behind the sheet */
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* keep the page behind the sheet from scrolling under it */
  body.drawer-open #main-scroll { overflow: hidden; }

  /* #main-scroll is `position:relative; z-index:1`, so it forms a stacking context and
   * the drawer's z-index:300 is scoped inside it. #main-nav (z-index:50) lives in the
   * root context and therefore paints over the sheet's close button no matter how high
   * the drawer's z-index goes. Dropping the nav below #main-scroll while the sheet is
   * open is what actually lets the ✕ receive taps. */
  body.drawer-open #main-nav {
    z-index: 0;
    pointer-events: none;
  }
}

/* Close control: 32×32 is below the 44px minimum on every mobile guideline.
   The visual circle is unchanged; the tappable area grows to meet the finger. */
@media (max-width: 768px) {
  .svc-drawer-close {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }
}

/* ------------------------------------------------------------------ *
 * 2. Fixed nav had no background, so section copy scrolled visibly
 *    through the logo. A gradient scrim keeps both readable.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  #main-nav {
    background: linear-gradient(180deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .nav-inner {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ------------------------------------------------------------------ *
 * 3. Touch targets — all measured below 44px on a 375px viewport
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  .footer-link {
    display: inline-block;
    padding: 13px 0;          /* 16px line box -> ~44px target */
    line-height: 18px;
  }

  .prod-more,
  #polaris-explore {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .lang-toggle { min-height: 44px; }
  .lang-option { min-height: 44px; display: flex; align-items: center; }
  .cm-close    { min-width: 44px; min-height: 44px; }

  .social-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-outline,
  .cm-send,
  .ctabar-btn { min-height: 44px; }
}

/* ------------------------------------------------------------------ *
 * 4. Legibility — several styles rendered at 10.9–11.5px
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .case-tag                   { font-size: .75rem; }   /* was 10.88px */
  .case-keywords, .case-status{ font-size: .8rem;  }   /* was 11.2px  */
  .num-tag, .prod-more        { font-size: .78rem; }   /* was 11.52px */
  .case-desc                  { font-size: .9rem; line-height: 1.6; }

  /* Micro-labels rendered at 8.96px. Kept deliberately small to preserve the badge
     look, but raised to a size that is actually readable on a phone. */
  .chip                       { font-size: .68rem; letter-spacing: .06em; }
  .footer-col-title           { font-size: .78rem; }
  .footer-links li            { font-size: .8rem; }
}

/* ------------------------------------------------------------------ *
 * 5. Contact modal — was clipping on short viewports
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .contact-modal {
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .cm-input { font-size: 16px; }   /* < 16px makes iOS Safari zoom on focus */
}

/* ------------------------------------------------------------------ *
 * 6. Projects — stop the cards leaving before they can be read
 *
 * The scroll handler drives the cards from whole-page progress:
 *     opacity   = 1 - p(s, .58, .70)
 *     transform = translateX(p(s, .58, .72) * [-120%, 0, +120%])
 * Those thresholds assume the desktop layout, where all three cards share one
 * viewport and the fan-out reads as an exit flourish. On mobile the cards are
 * stacked, so the page is far longer and 58% of total scroll lands in the middle
 * of the stack. Measured with card 3 sitting mid-screen: opacity 0.60 and
 * translateX(41%), putting 118px of it off the right edge of a 375px viewport.
 *
 * The handler writes inline styles, so !important is what overrides it. The cards
 * simply stay put and readable; the fan-out remains intact on desktop.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .project-card {
    opacity: 1 !important;
    transform: none !important;
  }
  #projects-header {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * 7. Language picker in the mobile menu
 *
 * The selector lives in .nav-links, which is display:none on mobile, and the
 * mobile menu ships only the five section buttons — so there was no way to change
 * language on a phone at all. mobile-fixes.js injects this row.
 * ------------------------------------------------------------------ */
.mm-lang {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 6px;
  padding-top: 12px;
}

@media (max-width: 900px) {
  .mobile-menu .mm-lang { display: block; }
}

.mm-lang-label {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffffff73;
  margin: 0 0 8px 4px;
}

.mm-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mm-lang-btn {
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #ffffff0a;
  color: #ffffffd9;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.mm-lang-btn:hover { background: #ffffff14; }

.mm-lang-btn.active {
  background: #2563eb2e;
  border-color: #2563eb80;
  color: #fff;
}

/* Respect a user's reduced-motion preference for the heavier transitions. */
@media (prefers-reduced-motion: reduce) {
  .svc-drawer, .mobile-menu, .contact-modal-backdrop {
    transition-duration: .01ms !important;
  }
}