/* MYTEMPO — responsive overrides. PC (>=1200px) is untouched; every rule lives inside a max-width query. */

@media (hover: none) {
  [data-m~="cursor"] { display: none !important; }
}

/* ---------- Tablet & below ---------- */
@media (max-width: 1199px) {
  [data-m~="root"] :is(h1, h2, h3) { word-break: auto-phrase; }
  [data-m~="chat"] > span:first-child { white-space: nowrap; }
  [data-m~="root"] p { text-wrap: pretty; }
}

/* Single-column layouts: sticky side columns would float over the content */
@media (max-width: 1023px) {
  [data-m~="unstick"] { position: static !important; top: auto !important; }
  [data-m~="svcimg"] { order: -1; aspect-ratio: 4 / 3 !important; max-height: none !important; }
  [data-m~="join"] { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  [data-m~="jlabel"] { flex-direction: row !important; align-items: baseline !important; gap: 14px !important; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  /* Services: wide devices (iPad / MacBook) get a shorter stage so they sit closer to the heading */
  [data-m~="dvbox"]:has([data-dvk="dev"]) { height: auto !important; aspect-ratio: 100 / 64; }
  [data-m~="dvbox"]:has([data-dvk="web"]) { height: auto !important; aspect-ratio: 100 / 52; }
  /* Balance only big headings; body copy, list items and card titles wrap normally to the full width */
  [data-m~="root"] :is(h1, h2, h3) { text-wrap: balance; }
  [data-m~="root"] :is(p, span, a, li, dd, dt, button) { text-wrap: pretty; }
  /* Header */
  [data-m~="hcap"] { top: 10px !important; left: 10px !important; right: 23px !important; height: 52px !important; }
  [data-m~="hlogo"] { top: 10px !important; height: 52px !important; left: 24px !important; gap: 9px !important; }
  [data-m~="hlogo"] > span:first-child { font-size: 17px !important; }
  [data-m~="hlogo"] > span:last-child { font-size: 17px !important; }
  [data-m~="hmenu"] { top: 10px !important; height: 52px !important; right: 76px !important; font-size: 13px !important; }
  [data-m~="hpanel"] { padding: 88px 22px 28px !important; }

  /* Floating AI chat */
  [data-m~="chat"] { right: 12px !important; bottom: 12px !important; gap: 8px !important; }
  [data-m~="chat"] > span:first-child { padding: 8px 13px !important; font-size: 12px !important; gap: 9px !important; white-space: nowrap; }
  [data-m~="chatbtn"] { width: 52px !important; height: 52px !important; }
  [data-m~="chatbtn"] > span { font-size: 21px !important; }

  /* Footer */
  [data-m~="fgrid"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 20px !important; padding-bottom: 40px !important; }
  [data-m~="fgrid"] > :first-child { grid-column: 1 / -1 !important; }

  /* CTA pair (Contact / About us) */
  [data-m~="cta"] { min-height: 230px !important; gap: 36px !important; padding: 28px 24px !important; }
  [data-m~="cta"] > div:last-child > span:first-child { width: 44px !important; height: 44px !important; }

  /* FAQ answers: keep the number indent, drop the right gutter */
  [data-m~="faqa"] { padding: 0 0 24px 48px !important; }

  /* Banner cards (subsidy) */
  [data-m~="banner"] { padding: 30px 22px !important; gap: 28px !important; }

  /* Icon rows with a trailing note (subsidy steps, contact flow) */
  [data-m~="srow"] { flex-wrap: wrap !important; row-gap: 4px !important; }
  [data-m~="srow"] > span:last-child { flex-basis: 100% !important; margin-left: 0 !important; padding-left: 76px; }

  /* Top — note list: compact thumbnail, title gets the rest of the row */
  [data-m~="vrow"] { flex-wrap: wrap !important; row-gap: 6px !important; gap: 6px 14px !important; }
  [data-m~="vrow"] > span:last-child { flex-basis: 100% !important; padding-left: 32px; }

  [data-m~="nrow"] { grid-template-columns: auto minmax(0, 1fr) !important; gap: 10px !important; align-items: center !important; }
  [data-m~="nrow"] > div:first-child { width: min(28vw, 150px) !important; height: auto !important; }
  [data-m~="nrow"] > div:nth-child(2) > div:first-child { flex-wrap: wrap !important; row-gap: 2px !important; }

  /* Top — Works rail */
  [data-m~="wcard"] { width: 82vw !important; gap: 16px !important; }
  [data-m~="wchead"] { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  [data-m~="wsvc"] { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 16px !important; }

  /* Recruit — positions */
  [data-m~="pos"] { min-height: 0 !important; padding: 56px 24px 30px !important; gap: 20px !important; }

  /* Work detail */
  [data-m~="meta2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-m~="gal"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }

  /* Contact — full-width send button */
  [data-m~="send"] { align-self: stretch !important; justify-content: space-between !important; padding: 20px 28px 20px 32px !important; }
}

@media (max-width: 859px) { [data-m~="abdeco"] { display: none !important; } }