/* Xervion mobile fixes - 25 Oct 2026.
   Loaded after each page's own styles so these rules win the cascade.
   Backups of the pre-change pages: backup-2026-10-25-mobile. */

/* 1. Grid columns may shrink below their longest word (email addresses were
      pushing the restaurants page 10px wider than a 360px phone). */
.contact-grid>*,.form-row>*,.logi-grid>*,.why-grid>*,.included-grid>*,.insights-grid>*{min-width:0}
.contact-info a,.contact-info span,.contact-info address{overflow-wrap:anywhere}

/* 2. Bullet cards with a bold lead-in: let the sentence flow as one paragraph
      instead of being split into two narrow flex columns. */
.included-item{display:block;position:relative;padding-left:46px;line-height:1.5}
.included-item .dot{position:absolute;left:24px;top:calc(22px + .75em - 4px)}

/* 3. Insight cards on the restaurants landing page had no styles at all. */
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.insight-card{background:#fff;border:1px solid var(--divider,#d2d2d7);border-radius:var(--radius,18px);padding:28px 26px;display:block;color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.insight-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -22px rgba(0,0,0,.2)}
.insight-card .tag{display:block;font-size:12px;font-weight:600;color:var(--accent,#0078e4);text-transform:uppercase;letter-spacing:.03em}
.insight-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin:10px 0 8px;line-height:1.35;color:var(--text,#1d1d1f)}
.insight-card p{font-size:14px;color:var(--text-soft,#6e6e73);line-height:1.6;margin:0}
@media (max-width:680px){.insights-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.insights-grid{grid-template-columns:1fr}}

/* 4. Sea/Air/Payment/Documentation cards: the one-column rule existed but sat
      before the base rule, so phones got two cramped columns. */
@media (max-width:920px){.logi-grid{grid-template-columns:1fr}}
@media (max-width:560px){.logi-card{padding:24px 20px}}

/* 5. Testimonial strip: cards fit the screen, and cards that start off-screen
      inside the moving strip are never left invisible. */
.testi-track .testi-card.reveal{opacity:1;transform:none}
@media (max-width:560px){.testi-card{width:calc(100vw - 72px);max-width:340px;padding:24px 20px}}

/* 6. World map: smaller minimum width on phones (script centres it on Pakistan). */
@media (max-width:680px){.world-map-wrap svg{min-width:640px}}

/* 6b. Floating crate graphics drift across the hero paragraph on phones. */
@media (max-width:560px){.hero-containers{display:none}}

/* 7. Page-hero label + subtitle (FAQ, Portfolio, legal pages) read as one line. */
@media (max-width:680px){.article-meta{display:block;text-align:center;line-height:1.6;padding:0 6px}}

@media (max-width:768px){
  /* 8. Form fields at 16px so iPhones don't zoom in when a field is tapped. */
  .xv-qf input[type=text],.xv-qf input[type=email],.xv-qf textarea,
  .field input,.field select,.field textarea,
  input[type=search],input[type=text],input[type=email],input[type=tel],select,textarea{font-size:16px}

  /* 9. Tap targets of at least 44px. */
  .navtoggle{min-width:44px;min-height:44px}
  .foot-social a{width:44px;height:44px}
  .foot-col ul{gap:0}
  .foot-col ul a{display:inline-flex;align-items:center;min-height:44px}
  .foot-office{gap:0}
  .foot-office-name{margin-bottom:4px}
  .foot-office-row{align-items:center;min-height:44px}
  .foot-office-row a,.foot-bottom-links a{display:inline-flex;align-items:center;min-height:44px}
  .breadcrumb a,.contact-info a,.foot-contact a{display:inline-block;padding:12px 0;margin:-12px 0}
  .intent-btn{min-height:44px}
  .guides-more a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
  .foot-bottom-links{gap:0 24px}

  /* 10. No text below 12px. */
  .insight-card .tag,.market-card .tag,.portfolio-info .tag,.contact-info .label,.stat-item .lbl{font-size:12px}
}