/* ============================================================
   Automation Gallery — responsive hardening & mobile alignment
   Loaded last. Desktop layout unchanged; fixes tablet/phone.
   ============================================================ */

/* --- 1. Global overflow guards (stops sideways scroll / drift) --- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }

/* --- 2. Let grid/flex children shrink.
       Default min-width:auto is the #1 cause of mobile misalignment. --- */
[class*="grid"] > *, [class*="row"] > *, [class*="wrap"] > *,
[class*="stack"] > *, [class*="cards"] > * { min-width: 0; }

/* --- 3. Long words / emails / URLs must not blow out the layout --- */
h1, h2, h3, h4, h5, p, li, a, span, td, th, dd, dt { overflow-wrap: break-word; }

/* --- 4. Scrollable overflow for wide spec tables --- */
table { max-width: 100%; display: block; overflow-x: auto; }

/* --- 5. TABLET (iPad / iPad Pro portrait) ------------------------
       Site breakpoints stopped at 980px, so 1024px tablets kept
       dense 4-across rows. Collapse them to a comfortable 2-up. --- */
@media (max-width: 1024px) {
  .bgrid, .pgrid, .hudgrid, .sptabs { grid-template-columns: repeat(2, 1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .vrow, .spgrid, .vt-grid, .appwrap, .hero-grid { grid-template-columns: 1fr; }
}

/* --- 6. PHONE --------------------------------------------------- */
@media (max-width: 640px) {
  .bgrid, .pgrid, .hudgrid, .sptabs, .fgrid,
  .hero-quad, .sel-grid, .appfeat, .fopts,
  .spstack, .sc-inner { grid-template-columns: 1fr; }

  /* consistent, notch-safe gutters */
  .wrap, .section, .shead { padding-left: max(18px, env(safe-area-inset-left));
                            padding-right: max(18px, env(safe-area-inset-right)); }

  /* comfortable tap targets (accessibility + usability) */
  .btn, button, a.btn, nav a { min-height: 44px; }

  /* stop oversized display type from overflowing narrow screens */
  h1 { word-break: normal; hyphens: auto; }
}

/* --- 7. Very small phones --------------------------------------- */
@media (max-width: 380px) {
  .wrap, .section { padding-left: 14px; padding-right: 14px; }
}

/* --- 8. Respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* --- 9. HERO FIX (verified on a real 390px viewport) -------------
   The particle logo canvas is JS-sized to min(vw,vh)*0.87 and centred,
   which made it sit directly behind the eyebrow, H1 and paragraph on
   phones. Lift and shrink it so the text block is clear and readable. */
@media (max-width: 760px) {
  #pcanvas { top: 31% !important; transform: translate(-50%, -50%) scale(.85) !important; }
}
@media (max-width: 400px) {
  #pcanvas { top: 29% !important; transform: translate(-50%, -50%) scale(.78) !important; }
}

/* --- 10. TOPBAR FIX (verified: removed 42px horizontal overflow) ---
   The injected topbar (phone + India/UAE region toggle) overflowed
   small screens, causing sideways scroll on every page. */
@media (max-width: 760px) {
  .topbar .wrap { flex-wrap: wrap; row-gap: 4px; padding-left: 12px; padding-right: 12px; }
  .topbar .tl, .topbar .tr { min-width: 0; }
  .topbar .tl a { font-size: 12px; }
  .topbar .rtoggle button { padding: 4px 8px; font-size: 11px; }
}
@media (max-width: 420px) {
  .topbar .rtoggle button { padding: 3px 6px; font-size: 10px; }
}

/* --- 11. WhatsApp floating contact button --- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:9990;display:flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;text-decoration:none;padding:13px 18px 13px 15px;border-radius:999px;
  font-family:var(--disp,'Sora'),system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1;
  box-shadow:0 8px 22px rgba(37,211,102,.38),0 2px 6px rgba(0,0,0,.14);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,211,102,.5),0 3px 8px rgba(0,0,0,.16);color:#fff;}
.wa-float:focus-visible{outline:3px solid #0b7a3b;outline-offset:3px;}
.wa-float svg{width:22px;height:22px;flex:none;fill:#fff;}
.wa-float .wa-txt{white-space:nowrap;}
@media (max-width:640px){
  .wa-float{right:14px;bottom:14px;padding:0;width:56px;height:56px;justify-content:center;border-radius:50%;}
  .wa-float .wa-txt{display:none;}
  .wa-float svg{width:28px;height:28px;}
}
@media print{.wa-float{display:none;}}

/* --- 12. Cookie consent banner --- */
.ag-cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:9995;max-width:560px;
  background:#14161b;color:#eef1f6;border-radius:16px;padding:18px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.34);font-family:var(--font-body,system-ui),sans-serif;
  display:none;}
.ag-cc.show{display:block;animation:agccIn .35s cubic-bezier(.2,.8,.2,1);}
@keyframes agccIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ag-cc p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:#c9cfda;}
.ag-cc a{color:#fff;text-decoration:underline;}
.ag-cc .ag-cc-btns{display:flex;gap:10px;flex-wrap:wrap;}
.ag-cc button{border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:13.5px;
  padding:10px 18px;border-radius:999px;min-height:42px;}
.ag-cc .acc{background:#E0202F;color:#fff;}
.ag-cc .acc:hover{background:#c41b28;}
.ag-cc .dec{background:transparent;color:#c9cfda;border:1px solid #39404d;}
.ag-cc .dec:hover{border-color:#5a6373;color:#fff;}
@media(max-width:640px){.ag-cc{left:10px;right:10px;bottom:80px;padding:16px;}}

/* --- 13. Mobile navigation drawer (inner pages) --------------------
   .navlinks was display:none under 960px with NO fallback — phone
   visitors had no menu at all. */
#agNavBtn{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;
  flex-direction:column;gap:5px;z-index:10001;}
#agNavBtn span{display:block;width:24px;height:2.5px;border-radius:2px;background:#16151a;
  transition:transform .25s ease,opacity .25s ease;}
#agNavBtn[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
#agNavBtn[aria-expanded="true"] span:nth-child(2){opacity:0;}
#agNavBtn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
@media(max-width:960px){
  #agNavBtn{display:flex;}
  nav .navcta{display:none;}
}
#agNavOverlay{position:fixed;inset:0;background:rgba(10,10,14,.5);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:10000;}
#agNavOverlay.on{opacity:1;pointer-events:auto;}
#agNavDrawer{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;
  z-index:10002;transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;box-shadow:-18px 0 44px rgba(0,0,0,.16);}
#agNavDrawer.on{transform:none;}
.agnd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid #eeece8;}
.agnd-head img{width:120px;height:auto;}
.agnd-close{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:#16151a;padding:4px 8px;}
.agnd-links{display:flex;flex-direction:column;padding:14px 8px;overflow-y:auto;}
.agnd-links a{padding:13px 14px;font-size:15.5px;font-weight:600;color:#16151a;text-decoration:none;
  border-radius:10px;font-family:var(--font-head,'Sora'),sans-serif;}
.agnd-links a:hover,.agnd-links a.active{background:#faf2f2;color:#C8202F;}
.agnd-links a.agnd-cta{margin:12px 6px 0;background:#E0202F;color:#fff;text-align:center;border-radius:999px;}

/* --- 14. Skip link (keyboard users) --- */
.skip-link{position:fixed;top:-60px;left:14px;z-index:10005;background:#16151a;color:#fff;
  padding:11px 18px;border-radius:0 0 10px 10px;font-size:14px;font-weight:600;text-decoration:none;
  transition:top .2s ease;}
.skip-link:focus{top:0;}