/* ═══════════════════════════════════════════════════════════════════
   Solvia · shared mobile-first layer
   Linked from every page. Page-specific mobile rules stay in the page.
   Loaded after the page's own <style>, so it wins where it needs to.
   ═══════════════════════════════════════════════════════════════════ */

/* --- structural hardening (all sizes) ------------------------------ */
/* grid and flex children default to min-width:auto, which lets a long
   word or a wide child push the track past the viewport */
.container > *, [class*="-grid"] > *, [class*="-row"] > * { min-width: 0; }
img, video, svg, iframe { max-width: 100%; }
p, li, td, h1, h2, h3, h4, h5, a, span { overflow-wrap: anywhere; }
h1, h2, .hero-title, .section-title { overflow-wrap: normal; }

@media (max-width: 860px) {
  /* --- touch: nothing a finger must hit is under 44px ------------- */
  a:not(.client-logo), button, select, summary,
  .btn, .pk-cta, .pkg-cta, .tab, .pf-btn, .guide-pill, .hd-btn {
    min-height: 44px;
  }
  .btn, .pk-cta, .pkg-cta { min-height: 50px; padding: 14px 24px; }
  .hd-btn { display: inline-flex; align-items: center; padding: 10px 16px; }

  /* --- forms: 16px keeps iOS Safari from zooming on focus --------- */
  input, select, textarea { font-size: 16px !important; min-height: 52px; }
  textarea { min-height: 120px; }
  label { font-size: .9rem; }

  /* --- one column, comfortable rhythm ----------------------------- */
  section { padding-block: 62px; }
  .container, .wrap { padding-inline: 20px; }
  .pks, .pf, .feats, .demos, .faqs, .about-block { grid-template-columns: 1fr !important; }
  .pks { gap: 18px; }

  /* --- type: readable minimums ------------------------------------ */
  body { font-size: 16px; }
  p, li { line-height: 1.8; }
  [dir="rtl"] p, [dir="rtl"] li { line-height: 2.05; }
  .pf-note, .pk-fit, .chip, .cat, .date { font-size: .84rem !important; }

  /* --- wide content scrolls in its own box, never the page -------- */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pkg-table-wrap, .strip-wrap, .marquee-wrapper, .table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* --- floating actions: thumb reach, clear of the home indicator -- */
  .sv-floats a, .float-wa, .float-call, #whatsapp-btn, #call-btn {
    width: 56px !important; height: 56px !important;
    inset-block-end: calc(18px + env(safe-area-inset-bottom));
    inset-inline-end: calc(16px + env(safe-area-inset-right));
  }
  .sv-floats a:nth-child(1), .float-call, #call-btn {
    inset-block-end: calc(84px + env(safe-area-inset-bottom));
  }
  footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* --- inline footer links: grow the tap area without breaking flow */
  footer a, .pf-note a, .careers-footer-note a, .idn-bundle a {
    padding-block: 9px; display: inline-block;
  }

  /* --- lightbox controls sized for fingers ------------------------ */
  .svlb-x, .lb-x, .lb-close, .blog-modal-close,
  .svlb-prev, .svlb-next, .lb-nav, .lb-arrow {
    min-width: 46px !important; min-height: 46px !important;
  }

  /* --- portfolio strips: bigger cards, snappier scrolling --------- */
  .strip { scroll-snap-type: x mandatory; }
  .strip img { width: 168px !important; height: 168px !important; scroll-snap-align: center; }
  .pf img { border-radius: 2px; }
}

/* --- small phones (320 to 380) ------------------------------------ */
@media (max-width: 380px) {
  .container, .wrap { padding-inline: 16px; }
  section { padding-block: 52px; }
  .btn, .pk-cta, .pkg-cta { padding: 13px 18px; font-size: .92rem; }
  .strip img { width: 148px !important; height: 148px !important; }
}

/* --- landscape phones: short viewports ---------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  section { padding-block: 44px; }
}

/* --- coarse pointers: no hover-only affordances ------------------- */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: rgba(163, 112, 28, .18); }
  .pk:hover, .service-card:hover, .web-card:hover { transform: none; }
}

/* --- respect reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}