/* Trackon – phone & small-tablet refinements (client feedback, Oct 2026).
   Loaded after responsive.css on every page; everything is scoped to <= 768px so desktop is untouched. */

/* scroll arrows for horizontal tab rows (markup added by /assets/js/mobile-ui.js) – hidden on desktop */
.sx-wrap { display: contents; }
.sx-btn { display: none; }

@media (max-width: 768px) {
  .sx-wrap { display: block; position: relative; min-width: 0; }

  /* ---------- 1. Page banners: lighter tint so the photo stays visible ---------- */
  .banner.banner-photo::before,
  .banner.fr-banner::before,
  .pg-hero.has-photo:not(.gl-hero)::before,
  .pg-hero.has-photo.lt-hero:not(.gl-hero)::before {
    background: linear-gradient(180deg, rgba(122, 20, 24, .66) 0%, rgba(122, 20, 24, .42) 42%, rgba(122, 20, 24, .12) 78%, rgba(122, 20, 24, .04) 100%) !important;
  }
  .banner:not(.banner-photo):not(.fr-banner)::before { opacity: .75; }
  .pg-hero.has-photo::after { opacity: .5; }
  .banner-bg, .pg-hero .pg-bg { background-size: cover; background-repeat: no-repeat; }
  .banner h1, .pg-hero.has-photo h1 { font-size: clamp(1.5rem, 6.4vw, 1.95rem); line-height: 1.18; text-shadow: 0 2px 14px rgba(60, 8, 10, .55); }
  .banner .lede, .pg-hero.has-photo .lede, .pg-hero.has-photo p { font-size: clamp(.875rem, 3.7vw, .95rem); line-height: 1.55; text-shadow: 0 1px 10px rgba(60, 8, 10, .6); }
  .banner .banner-in, .pg-hero > .wrap { overflow-wrap: anywhere; }
  /* leave room under the text so the picture itself shows */
  .banner.banner-photo .banner-in, .banner.fr-banner .banner-in { padding-bottom: clamp(120px, 34vw, 230px); }

  /* ---------- 5. Call-to-action buttons: compact, never full-screen-wide ---------- */
  .btn { font-size: .875rem; padding: .72rem 1.2rem; min-height: 44px; border-radius: 10px; }
  .banner-actions, .pg-actions, .hero-actions, .fr-hero-actions, .fr-banner .banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
  .banner-actions .btn, .pg-actions .btn, .hero-actions .btn, .fr-banner .btn,
  #franchise .btn, .intl .btn, .svc-panel .btn, .split-tx .btn, .lt-banner .btn, .net-tx .btn {
    width: auto !important; flex: 0 0 auto !important; align-self: flex-start;
  }

  /* ---------- 2. Track widget: right-sized Track button + visible "Locate us" ---------- */
  .tbar { row-gap: 10px; column-gap: 10px; }
  .tbar input#awb { flex: 1 1 100%; height: 46px; }
  .tb-go { flex: 0 0 auto; width: auto; min-width: 120px; height: 44px; padding: 0 1.25rem; font-size: .9rem; }
  .tb-branch { display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; margin-left: auto; height: 44px; padding: 0 1rem;
    border: 1.5px solid #F8C9A8; border-radius: 10px; color: var(--red); font: 700 .875rem/1 var(--h); text-decoration: none; background: #fff; white-space: nowrap; }
  .tb-branch:hover { border-color: var(--orange); color: var(--orange-600); }

  /* ---------- 3. Text badges on top of photos ---------- */
  .ph .tag, .svc-panel .ph .tag { font-size: .69rem; padding: 5px 10px; letter-spacing: .03em; border-radius: 999px; }
  .split-img .badge { padding: 8px 12px; font-size: .75rem; border-radius: 12px; left: 12px; bottom: 12px; }
  .split-img .badge b { font-size: 1.05rem; }
  .industry-card .cap h3 { font-size: 1rem; }
  .industry-card .cap p { font-size: .8rem; line-height: 1.45; }
  .g-tile span { font-size: .66rem; padding: 4px 8px; }
  .jc-tag, .post-tag, .ld-role { font-size: .69rem; }

  /* ---------- 4a. World map floating cards ---------- */
  .intl .map .glass { padding: 5px 8px; font-size: .6rem; border-radius: 8px; max-width: calc(100% - 16px); }
  .intl .map .glass b { font-size: .72rem; }
  .intl .map .glass.g1 { top: 8px; right: 8px; }
  .intl .map .glass.g2 { left: 8px; bottom: 8px; gap: 6px; }
  .intl .map .glass .dot-live { width: 7px; height: 7px; }

  /* ---------- 4b. India map city labels + franchise counter ---------- */
  .mapbox .hub, .net-map .hub { font-size: .58rem; padding: 3px 7px 3px 4px; gap: 4px; border-radius: 5px; letter-spacing: .03em; }
  .mapbox .hub.l, .net-map .hub.l { padding: 3px 4px 3px 7px; }
  .mapbox .hub i, .net-map .hub i { width: 7px; height: 7px; }
  .center-badge { width: 78px !important; height: 78px !important; right: 8px; bottom: 8px; }
  .center-badge b { font-size: 1.05rem !important; }
  .center-badge, .center-badge em { font-size: .48rem !important; letter-spacing: .04em; }

  /* ---------- 7. Stat cards (Partners, About, Life…): icon / number / label stacked and centred in an even grid ---------- */
  .fr-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 18px; column-gap: 0; }
  .fr-stat-row > .fr-stat {
    grid-column: auto; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto; justify-items: center !important; justify-content: center !important;
    text-align: center; padding: 6px 8px !important; row-gap: 6px; column-gap: 0;
  }
  .fr-stat-row > .fr-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fr-stat-row > .fr-stat .fr-stat-ic { grid-row: auto; margin: 0; width: 38px; height: 38px; }
  .fr-stat-row > .fr-stat b { align-self: center; font-size: 1.2rem; }
  .fr-stat-row > .fr-stat small { align-self: center; font-size: .74rem; white-space: normal; line-height: 1.3; margin-top: 0; }
  .fr-stat-row > .fr-stat::before { display: none !important; }
  .fr-stat-row > .fr-stat:nth-child(even):not(:last-child:nth-child(odd))::before { display: block !important; content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(142, 27, 30, .18); }
  /* exactly three stats: one row of three */
  .fr-stat-row:has(> .fr-stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .fr-stat-row:has(> .fr-stat:nth-child(3):last-child) > .fr-stat:last-child { grid-column: auto; }
  .fr-stat-row:has(> .fr-stat:nth-child(3):last-child) > .fr-stat + .fr-stat::before { display: block !important; content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 1px; background: rgba(142, 27, 30, .18); }
  .fr-stat-row:has(> .fr-stat:nth-child(3):last-child) > .fr-stat b { font-size: 1.1rem; }

  /* ---------- 8. Scroll arrows on horizontal tab rows ---------- */
  .sx-wrap.sx-on .sx-btn {
    display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .2s;
  }
  .sx-btn::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(23, 23, 23, .18); border: 1px solid var(--line); }
  .sx-btn svg { position: relative; width: 16px; height: 16px; color: var(--red); }
  .sx-prev { left: 0; }
  .sx-next { right: 0; }
  /* filter / tab pills: comfortable 44px tap height */
  .g-filter button, .blog-filter button, .lt-vtabs button { min-height: 44px; }
  .sx-wrap.sx-on .sx-btn[hidden] { opacity: 0; pointer-events: none; display: grid; }
  .sx-wrap:not(.sx-on) .sx-btn { display: none !important; }
  .sx-wrap.sx-on > .sx-track { scroll-behavior: smooth; }
  .sx-wrap.sx-on.sx-more-r > .sx-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); }
  .sx-wrap.sx-on.sx-more-l > .sx-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px); mask-image: linear-gradient(90deg, transparent, #000 46px); }
  .sx-wrap.sx-on.sx-more-l.sx-more-r > .sx-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, transparent, #000 46px, #000 calc(100% - 46px), transparent); }
}

/* ---------- Stacked banner (opt-in with class "m-stack"): photo on top, uncropped and untinted; text below on maroon ---------- */
@media (max-width: 768px) {
  section.m-stack { display: flex !important; flex-direction: column; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; background: var(--red-900, #5E1013) !important; overflow: hidden; }
  section.m-stack::before, section.m-stack::after { display: none !important; }
  section.m-stack.m-stack > .banner-bg[class], section.m-stack.m-stack > .pg-bg[class] {
    position: relative !important; inset: auto !important; order: 0; flex: none; width: 100%; height: auto !important;
    aspect-ratio: var(--m-ar, 4 / 3); background-size: cover !important; background-position: var(--m-pos, 50% 50%) !important; transform: none !important; animation: none !important;
  }
  section.m-stack > .banner-bg::before, section.m-stack > .banner-bg::after, section.m-stack > .pg-bg::before, section.m-stack > .pg-bg::after { display: none !important; }
  section.m-stack > .wrap, section.m-stack > .banner-in {
    order: 1; position: relative; z-index: 1; margin-top: 0 !important; padding: 22px 0 28px !important; min-height: 0 !important; transform: none !important;
  }
  section.m-stack > .route { display: none !important; }
  section.m-stack h1, section.m-stack .lede, section.m-stack p { text-shadow: none !important; }
  section.m-stack .lede, section.m-stack p { color: #F6DCD8; }
  section.m-stack .hl { color: #FF9A55; }
  /* a thin brand line where photo meets text */
  section.m-stack > .wrap::before, section.m-stack > .banner-in::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; border-radius: 0 0 3px 3px; background: var(--orange); }
}

@media (max-width: 768px) {
  /* blog articles: the text column may never grow wider than the screen */
  .art-wrap { grid-template-columns: minmax(0, 1fr) !important; }
  .art-wrap > * { min-width: 0; }
  /* stacked banners: slightly tighter text block */
  section.m-stack > .wrap, section.m-stack > .banner-in { padding: 18px 0 22px !important; }
  section.m-stack h1 { margin-bottom: .45em; }
}
/* short phones (e.g. 360x740): keep the button on the first screen by trimming the photo a little */
@media (max-width: 768px) and (max-height: 800px) {
  section.m-stack.m-stack > .banner-bg[class], section.m-stack.m-stack > .pg-bg[class] { max-height: 36svh; max-height: 36vh; }
  section.m-stack h1 { font-size: clamp(1.35rem, 5.8vw, 1.7rem); }
  section.m-stack .lede, section.m-stack p { font-size: .86rem; line-height: 1.5; }
}

@media (max-width: 400px) {
  .tb-go { min-width: 104px; padding: 0 1rem; }
  .tb-branch { padding: 0 .8rem; }
  .mapbox .hub, .net-map .hub { font-size: .54rem; }
}