/* TRACIO patch 17.7 (6 Oct 2026): mobile-first layout fixes. One URL per page; desktop unchanged.
   Everything that changes layout sits inside @media (max-width:760px). Outside it there are only
   visual no-ops (phone-only headline hidden, sector-chip links styled exactly like the old spans).
   Banner flag: see js/cookies.js (TRACIO_CB_ROW). Folding/footer accordions: js/p177-mobile.js. */

/* phone-only headline: hidden on desktop and tablet; desktop keeps the existing H1 text */
.h1-m{display:none}
/* the H1 wrapper spans must not pick up the hero accent-span colour (.hero h1 span): desktop H1 looks exactly as before */
.hero h1 > .h1-d,.hero h1 > .h1-m{color:inherit}
/* sector chips became links (P8): same look as the old <span> */
a.sector-chip,a.sector-chip:visited{color:#9fb0cc;text-decoration:none}
a.sector-chip:hover,a.sector-chip:focus-visible{color:#eef2ff;text-decoration:none}
/* injected by JS on phones only; never rendered on desktop */
.m177-fold-btn,.m177-ft-btn,.m177-lang,.m177-related{display:none}
/* /demo phone-only hero Book button: not shown on desktop (desktop unchanged) */
.page-banner .hero-cta.m177-hero-cta{display:none}

@media (max-width:760px){
  /* --- P4: top bar off on phones (language picker is in the Menu, see .m177-lang) --- */
  .announce{display:none!important}

  /* --- P5: phone headline swap + hero order: eyebrow, H1, Book, then the rest --- */
  .h1-m{display:inline}
  .h1-d{display:none}
  main .hero h1,main .page-banner h1{font-size:26px!important;line-height:1.18!important;letter-spacing:-.01em}
  body.lp .lp-hero h1{font-size:23px!important;line-height:1.2!important}
  .hero .container:has(> h1),.hero .container > div:has(> h1),.page-banner .container:has(> h1),.page-banner .container > div:has(> h1){display:flex!important;flex-direction:column}
  .hero .container:has(> h1) > *,.hero .container > div:has(> h1) > *,.page-banner .container:has(> h1) > *,.page-banner .container > div:has(> h1) > *{order:5}
  .hero .container:has(> h1) > .eyebrow,.hero .container > div:has(> h1) > .eyebrow,.page-banner .container:has(> h1) > .eyebrow,.page-banner .container > div:has(> h1) > .eyebrow{order:1;align-self:flex-start}
  .hero .container:has(> h1) > h1,.hero .container > div:has(> h1) > h1,.page-banner .container:has(> h1) > h1,.page-banner .container > div:has(> h1) > h1{order:2;margin-bottom:14px}
  .hero .container:has(> h1) > .hero-cta,.hero .container > div:has(> h1) > .hero-cta,.page-banner .container:has(> h1) > .hero-cta,.page-banner .container > div:has(> h1) > .hero-cta,.page-banner .m177-hero-cta{order:3;margin-top:0;margin-bottom:16px}
  .hero .container:has(> h1) > p.lead:first-of-type,.hero .container > div:has(> h1) > p.lead:first-of-type,.page-banner .container:has(> h1) > p.lead:first-of-type{order:4}
  main .hero.p15-fold,main .hero{padding-top:22px}
  main .page-banner{padding-top:18px}
  /* research buttons leave the hero on phones (JS moves them under the first section) */
  .hero .hero-cta > .btn-ghost{display:none}
  .m177-related{display:block;margin:14px 0 0;font-size:.95rem}
  .m177-related a{display:inline-flex;align-items:center;min-height:44px}
  /* /demo hero Book button (P9) */
  .page-banner .hero-cta.m177-hero-cta{display:flex!important;flex-direction:column;gap:8px;margin-top:14px}
  .m177-hero-cta .btn{width:100%;justify-content:center;min-height:48px}

  /* --- P7: decorative hero photos off on phones; no space reserved for them, so nothing jumps --- */
  .has-media > .hero-media{display:none!important}
  .has-media > .container,.has-media > .lp-wrap{order:0}

  /* --- P1: sticky Book bar, shown with the cookie banner open, stacked directly above it --- */
  .wc-sticky,.lp-sticky{padding:6px 12px calc(6px + env(safe-area-inset-bottom))!important;max-height:64px;box-sizing:border-box}
  .wc-sticky a,.lp-sticky a{min-height:48px!important;white-space:nowrap;overflow:hidden;font-size:15px;line-height:1.1;padding-top:0;padding-bottom:0;display:flex!important;align-items:center;justify-content:center;width:100%;box-sizing:border-box}
  html.m177-cb-open .wc-sticky,html.m177-cb-open .lp-sticky{bottom:var(--m177-cbh,0px)!important;padding-bottom:6px!important;border-bottom:1px solid var(--border,#1f2a44)}
  html.m177-cb-tall .wc-sticky,html.m177-cb-tall .lp-sticky{display:none!important}
  html.m177-kbd .wc-sticky,html.m177-kbd .lp-sticky{transform:translateY(110%)!important;pointer-events:none!important}
  html.m177-cb-open body.wc-has-sticky,html.m177-cb-open body.m177-has-lpsticky{padding-bottom:calc(var(--m177-cbh,0px) + 84px)!important}

  /* --- P2: one-row phone cookie banner (flag: TRACIO_CB_ROW in js/cookies.js) --- */
  .cookie-banner.cb-row{left:0!important;right:0!important;bottom:0!important;max-width:100%!important;margin:0!important;max-height:70vh;border-radius:10px 10px 0 0!important;border-left:0!important;border-right:0!important;border-bottom:0!important}
  .cookie-banner.cb-row .cookie-banner-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;column-gap:6px;row-gap:0;align-items:center;padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important}
  .cookie-banner.cb-row .cookie-actions{display:contents!important}
  .cookie-banner.cb-row .cookie-text{grid-column:1;font-size:11px!important;line-height:12.5px!important;color:var(--muted,#9fb0cc);margin:0}
  .cookie-banner.cb-row .cookie-text strong{display:inline!important;font-size:11px!important;margin:0 2px 0 0!important}
  .cookie-banner.cb-row .cookie-text span{display:inline!important;font-size:11px!important;line-height:12.5px!important}
  .cookie-banner.cb-row .cookie-text a{padding:0!important}
  .cookie-banner.cb-row .cb-cust{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;font-size:11px;line-height:12.5px;font-weight:600;color:var(--text,#eef2ff);text-decoration:underline;cursor:pointer}
  .cookie-banner.cb-row .cb-cust::before{content:"\00b7\00a0";font-weight:400;color:var(--muted,#9fb0cc);display:inline-block;text-decoration:none}
  .cookie-banner.cb-row [data-consent=reject],.cookie-banner.cb-row [data-consent=accept]{width:auto;min-width:62px;max-width:84px;min-height:44px!important;height:44px;padding:2px 5px!important;font-size:11.5px!important;line-height:1.12!important;white-space:normal;text-align:center;justify-content:center;flex:none;margin:0;box-sizing:border-box}
  .cookie-banner.cb-row .cookie-banner-categories{padding:12px 14px}

  /* --- P3: footer groups as accordions (JS adds .m177-ft); compact footer on /lp/* --- */
  .m177-ft .footer-grid{display:block!important}
  .m177-ft .footer-grid > div{border-top:1px solid var(--border,#1f2a44);margin:0!important;padding:0!important}
  .m177-ft .footer-grid > div:first-child{border-top:0;padding-bottom:14px!important}
  .m177-ft .footer-grid > div > h4{margin:0!important;padding:0!important}
  .m177-ft .m177-ft-btn{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer;text-align:left}
  .m177-ft .m177-ft-btn::after,.m177-fold-btn::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 6px 4px 12px;flex:none;transition:transform .2s}
  .m177-ft .m177-ft-open .m177-ft-btn::after,.m177-open > .m177-fold-btn::after,.m177-fold-btn[aria-expanded=true]::after{transform:rotate(-135deg);margin-bottom:-4px}
  .m177-ft .footer-grid > div:not(.m177-ft-open) > ul{display:none!important}
  .m177-ft .footer-grid > div.m177-ft-open > ul{padding-bottom:12px}
  .m177-ft .footer-grid ul a{display:inline-flex;align-items:center;min-height:44px}
  .m177-ft .footer-grid ul li{margin:0!important}
  .m177-ft .footer-social a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .m177-ft .footer-bottom a,.m177-ft .footer-bottom .cookie-prefs-link{display:inline-flex;align-items:center;min-height:44px}
  body strong > footer,body b > footer{font-weight:400}
  /* /lp/*: compact footer: logo, company line and legal links first, then the closed groups */
  body.lp .m177-ft > .container{display:flex;flex-direction:column}
  body.lp .m177-ft .footer-grid{display:contents!important}
  body.lp .m177-ft .footer-grid > div{order:4}
  body.lp .m177-ft .footer-grid > div:first-child{order:1}
  body.lp .m177-ft .footer-bottom{order:2;margin:0 0 10px;padding-top:0;border-top:0}
  body.lp .m177-ft .footer-social{order:3;margin-bottom:8px}
  body.lp .m177-ft .footer-grid > div:first-child p{font-size:.85rem;margin-top:6px}

  /* --- P6: long sections fold into tap-to-open panels (JS adds .m177-fold); content stays in the HTML --- */
  .m177-fold:not(.m177-open) .m177-fh{display:none!important}
  .m177-fold:not(.m177-open) .m177-teaser{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .m177-fold.section,.m177-fold.section-sm,.m177-fold.lp-section{padding-top:26px!important;padding-bottom:22px!important}
  .m177-fold:not(.m177-open) h2{margin-bottom:6px}
  .m177-fold-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin:10px 0 0;padding:0 14px;background:rgba(255,255,255,.03);border:1px solid var(--border,#1f2a44);border-radius:10px;color:var(--text,#eef2ff);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;text-align:left}
  .m177-open .m177-fold-btn{margin-bottom:14px}
  section:has(> .m177-fold-btn),.m177-fold{content-visibility:visible!important;contain-intrinsic-size:auto 200px}

  /* wide tables become stacked cards (data-label added in the HTML) */
  main table{width:100%!important;min-width:0!important;max-width:100%!important;border-collapse:collapse}
  main table thead{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  main table,main table tbody,main table tr,main table td,main table th{display:block!important;box-sizing:border-box}
  main table tr{border:1px solid var(--border,#1f2a44);border-radius:10px;margin:0 0 10px;padding:8px 12px;background:rgba(255,255,255,.02)}
  main table td,main table tbody th{border:0!important;padding:5px 0!important;text-align:left!important;width:auto!important;white-space:normal!important;overflow-wrap:anywhere}
  main table td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#9fb0cc);margin-bottom:2px}
  main table td[data-label=""]::before{display:none}
  main table tbody th{font-weight:700;color:var(--text,#eef2ff)}
  main div:has(> table){overflow-x:visible!important;max-width:100%}

  /* --- no sideways scroll at 390 px --- */
  html,body{overflow-x:clip}
  main pre,main code{white-space:pre-wrap;overflow-wrap:anywhere}
  main img,main video,main iframe,main svg{max-width:100%}

  /* --- P8: sector chips as tappable links --- */
  .sector-strip a.sector-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

  /* --- P9: /contact: Book card above the phone card, clear of the banner --- */
  .m177-contact-cards{display:flex!important;flex-direction:column}
  .m177-contact-cards > [data-p172-book="contact-card"]{order:-1;margin-top:0!important;margin-bottom:16px!important}

  /* --- tap targets >= 44 px on phones --- */
  .wc-chip{min-height:44px;display:inline-flex!important;align-items:center}
  .hero-cta .btn,.cta-banner .btn,main .btn{min-height:48px}
  .breadcrumb a,.breadcrumbs a,nav[aria-label*=readcrumb] a{display:inline-flex;align-items:center;min-height:44px}
  .nav-toggle,.nav-search,header .search-toggle{min-height:44px;min-width:44px}
  header .brand{min-height:44px}
  .wc-qa summary{padding-top:9px;padding-bottom:9px}
  .fp-tech-btn,.fp-scene-btn,.fp-btn{min-height:44px}
  main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main select{min-height:44px}
  main .spec-link{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .m177-contact-cards a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  .cookie-banner.cb-row [data-consent=reject],.cookie-banner.cb-row [data-consent=accept]{width:84px!important;min-width:84px;max-width:84px}
  footer a.brand{display:inline-flex;align-items:center;min-height:44px}
  footer li > a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .m177-ft .footer-bottom a,.m177-ft .footer-bottom .cookie-prefs-link{min-width:44px}
  footer input:not([type=checkbox]):not([type=radio]):not([type=hidden]),footer button:not(.m177-ft-btn),footer select{min-height:44px!important}
  main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),main select{min-height:44px!important}
  main select{max-width:100%;min-width:0}
  #contact-form select,#contact-form input,#contact-form textarea{max-width:100%;min-width:0;box-sizing:border-box}
  .m177-tap{display:inline-flex!important;align-items:center;min-height:44px}
  .aud-links a{display:flex;align-items:center;min-height:44px}
  .m177-tap{min-width:44px}
  .m177-tapb{display:flex!important;align-items:center;min-height:44px}
  .fx-btn,.lidash-tab,.tp-back{min-height:44px}
  .fx-btn{min-width:44px}
  a.pr-more{display:inline-flex;align-items:center;min-height:44px}
  li:has(> .wc-rail-n) > a{display:flex;align-items:center;min-height:44px}
  main > a.card{display:block;margin:0 20px 12px}
  main{overflow-wrap:break-word}
  .proof-chip:has(> strong:only-child:empty){display:none}
  .logowall{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .logowall .logo-tile{min-width:0;max-width:100%}
  .logowall .logo-name{overflow-wrap:anywhere;min-width:0}
  #contact-form .form-row{grid-template-columns:minmax(0,1fr)!important}
  #contact-form .field{min-width:0}
  #contact-form select{width:100%}
  /* a page whose hero sits below other sections (nl/personas): hero first on phones */
  main:has(> section.hero):has(> section:first-child:not(.hero):not(.page-banner)){display:flex;flex-direction:column}
  main:has(> section.hero):has(> section:first-child:not(.hero):not(.page-banner)) > section.hero{order:-1}
  main details:not(.faq-item):not(.form-more):not(.langpick) > summary{padding-top:10px;padding-bottom:10px;min-height:44px;box-sizing:border-box}
  form.dl-gate label:has(> input[type=checkbox]){min-height:44px}
  body.lp .lp-row{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:980px){
  .m177-lang{display:block}
  .m177-lang .m177-lang-h{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#9fb0cc);margin:6px 0 2px}
  .m177-lang .m177-lang-list{display:flex;flex-wrap:wrap;gap:4px 8px}
  .m177-lang .m177-lang-list a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--border,#1f2a44);border-radius:999px}
  .m177-lang .m177-lang-list a[aria-current]{border-color:var(--accent,#22d3ee)}
}

/* TRACIO patch 17.7.1 (6 Oct 2026): extra fold pass, phones only. Every rule sits inside @media (max-width:760px),
   so desktop and tablet are unchanged. Closed fold panels are more compact on every page; the target pages
   (home, /services/amr-agv-advisory, /solutions/asset-tracking, /guides/rtls-cost-guide and translations,
   html.m1771 set by js/p177-mobile.js) fold more sections and get tighter phone spacing. Content stays in the HTML. */
@media (max-width:760px){
  /* compact closed panels (all pages) */
  .m177-fold:not(.m177-open).section,.m177-fold:not(.m177-open).section-sm,.m177-fold:not(.m177-open).lp-section,.m177-fold:not(.m177-open){padding-top:16px!important;padding-bottom:12px!important}
  .m177-fold:not(.m177-open) .section-head{margin-bottom:0!important}
  .m177-fold:not(.m177-open) .eyebrow{margin-bottom:4px}
  .m177-fold:not(.m177-open):not(.brand-strip) h2{font-size:1.3rem!important;line-height:1.22!important;margin-top:0!important;margin-bottom:4px!important}
  .m177-fold:not(.m177-open) .m177-teaser{margin-top:0!important;margin-bottom:0!important;font-size:.95rem!important;line-height:1.45!important}
  .m177-fold:not(.m177-open) > .container > .m177-fold-btn,.m177-fold:not(.m177-open) .m177-fold-btn{min-height:44px;margin-top:8px}
  .m177-fold:not(.m177-open) + .m177-fold:not(.m177-open){padding-top:8px!important}
  .m177-fold:not(.m177-open) .trusted-label{margin:0 0 2px!important}
  .m177-fold.trusted:not(.m177-open) .trusted-inner{display:block!important}

  /* target pages: tighter phone spacing (no content removed) */
  html.m1771 main > .section:not(.hero):not(.m177-fold),html.m1771 main > .section-sm:not(.hero):not(.m177-fold){padding-top:28px!important;padding-bottom:28px!important}
  html.m1771 .cta-banner{padding:22px 18px!important}
  html.m1771 .cta-banner h2{font-size:1.5rem!important;line-height:1.2!important;margin-bottom:8px!important}
  html.m1771 .cta-banner p{margin-top:0!important;margin-bottom:10px!important}
  html.m1771 .cta-banner .lead{font-size:1rem!important;line-height:1.5!important}
  html.m1771 .grid-2:has(> .cta-banner){gap:14px!important}
  html.m1771 .stats-band{padding-top:24px!important;padding-bottom:24px!important}
  html.m1771 .stats-band .container > div:has(> div + div),html.m1771 .stats-band .stats-grid,html.m1771 .stats-band .stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 12px!important}
  html.m1771 .p172-book{padding-top:28px!important;padding-bottom:28px!important}
  html.m1771 .client-strip{padding-top:18px!important;padding-bottom:18px!important}
  html.m1771 main .hero{padding-bottom:22px!important}
}
@media (max-width:760px){
  html.m1771 .stats-band .stat-num{font-size:1.9rem!important;line-height:1.15!important}
  html.m1771 .stats-band .stat-item:last-child .stat-num{font-size:1.2rem!important;line-height:1.3!important;padding-top:6px}
  html.m1771 footer.footer{padding-top:36px!important}
  html.m1771 footer .footer-grid{margin-bottom:12px!important}
  html.m1771 footer .footer-bottom{padding-top:14px!important}
}
@media (max-width:760px){
  html.m1771 .p172-book .p172-book-main .lead{margin-bottom:14px!important}
  html.m1771 .p172-book .p172-book-grid{gap:16px!important}
  html.m1771 .p172-book .p172-book-form{padding:16px!important}
  html.m1771 .p172-book .p172-book-form .field{margin-bottom:8px!important}
  html.m1771 .p172-book .p172-book-form .form-row{gap:0!important}
}
@media (max-width:760px){
  html.m1771 .m177-fold:not(.m177-open):not(.brand-strip) h2{font-size:1.15rem!important;line-height:1.28!important;margin-bottom:2px!important}
  html.m1771 .m177-fold:not(.m177-open) + .m177-fold:not(.m177-open){padding-top:6px!important}
  html.m1771 .m177-fold:not(.m177-open){padding-bottom:10px!important}
}
@media (max-width:760px){
  .m177-fold.trusted .trusted-inner{padding-left:24px!important;padding-right:24px!important}
  .m177-fold.trusted:not(.m177-open) .trusted-inner{padding-top:0!important;padding-bottom:0!important}
  .m177-fold.trusted:not(.m177-open) .trusted-label{border-bottom:0!important;padding-bottom:0!important}
}
/* 17.7.1 brand-check items, phones only */
@media (max-width:760px){
  /* hero Book buttons: long translated labels wrap centred, not left-aligned */
  main .hero-cta .btn,main .lp-hero .btn,body.lp .lp-hero-cta .btn,.m177-hero-cta .btn{justify-content:center!important;text-align:center!important}
  /* /lp/ compact footer: side padding, no bullets, one YouTube link (the @TRACIO_LTD one) */
  body.lp footer.p17-footer .container{padding:0 20px!important}
  body.lp footer ul{list-style:none!important;padding-left:0!important}
  body.lp footer .footer-social a[href*="youtube.com/channel/"]{display:none!important}
}
@media (max-width:760px){
  /* a nowrap Book label (long in de/es/...) must not widen the hero past the screen: wrap it, centred */
  main .hero-cta,main .lp-hero-cta,.m177-hero-cta{max-width:100%;min-width:0}
  main .hero .container,main .hero .container > div,main .page-banner .container,main .lp-hero .lp-wrap{min-width:0;max-width:100%}
  main .hero-cta .btn,main .lp-hero .btn,.m177-hero-cta .btn{white-space:normal!important;max-width:100%;box-sizing:border-box}
}
@media (max-width:760px){
  /* hero stat row: long translated values wrap to a new row instead of being cut off at the screen edge */
  main .hero-stats{display:flex!important;flex-wrap:wrap;gap:12px 22px!important}
  main .hero-stat{flex:1 1 0;min-width:min-content;max-width:100%}
  main .hero-stat .num,main .hero-stat .lbl,main .hero-stat span,main .hero-stat strong{overflow-wrap:break-word}
  /* /technologies accordion tags: wrap inside the summary */
  .tech-acc summary > *{min-width:0}
  .tech-acc summary .tech-tag{white-space:normal!important;text-align:right}
}
/* p17.7.3 slim menus: phone drawer packs submenu links two per row */
@media (max-width:980px){
header.nav .nav-submenu.nav-slim:not(.nav-mega),
header.nav .nav-submenu.nav-slim.nav-mega .nav-mega-col{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-items:stretch}
header.nav .nav-submenu.nav-slim.nav-mega{display:block}
header.nav .nav-submenu.nav-slim{width:auto!important;max-width:calc(100% - 6px)!important;min-width:0!important}
header.nav .nav-has-sub:not(.open)>.nav-submenu.nav-slim{display:none!important}
header.nav .nav-submenu.nav-slim>li:first-child:not(.nav-tools-label),
header.nav .nav-submenu.nav-slim .nav-mega-h,
header.nav .nav-submenu.nav-slim .nav-tools-label{grid-column:1/-1}
header.nav .nav-submenu.nav-slim a{display:flex;align-items:center;min-height:44px;line-height:1.25;font-size:14px;padding:4px 6px 4px 12px!important;overflow-wrap:anywhere;min-width:0}
header.nav .nav-submenu.nav-slim>li,header.nav .nav-submenu.nav-slim .nav-mega-col>a{min-width:0}
}