/* =============================================================
   MOBILE + TABLET LAYOUT
   The pages are designed at desktop width with inline styles
   (exported from the design canvas). These rules adapt them for
   tablets (< 1100px) and phones (< 760px). They target the
   rendered inline styles, so they need !important.
   ============================================================= */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  #dc-root > div { min-width: 0 !important; width: 100% !important; overflow-x: clip; }
  [style*="px 180px"], [style*=" 0 180px"] { padding-left: 48px !important; padding-right: 48px !important; }

  /* Experience rows: years on top, company + plus button, role underneath */
  .job-head { grid-template-columns: minmax(0, 1fr) 40px !important; row-gap: 6px !important; }
  .job-head > :nth-child(1) { grid-column: 1 / -1; }
  .job-head > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .job-head > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .job-head > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .job-head:hover { padding-left: 0 !important; }
  .shot-img { flex-basis: 280px !important; height: auto !important; }
  .shot-img img { height: 200px !important; }

  /* Case study rows on the homepage */
  a.case { grid-template-columns: minmax(0, 1fr) 24px !important; row-gap: 6px !important; }
  a.case > :nth-child(1) { grid-column: 1 / -1; }
  a.case > :nth-child(2) { grid-column: 1; grid-row: 2; }
  a.case > :nth-child(3) { grid-column: 1; grid-row: 3; }
  a.case > :nth-child(4) { grid-column: 2; grid-row: 2; }
  a.case .thumb { display: none !important; }
  a.case:hover { padding-left: 0 !important; }

  /* Accordion rows in case studies (process, decisions) */
  button.dec[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) 40px !important; row-gap: 4px !important; }
  button.dec[style*="grid-template-columns"] > :nth-child(1) { grid-column: 1 / -1; }
  button.dec[style*="grid-template-columns"] > :nth-child(2) { grid-column: 1; grid-row: 2; }
  button.dec[style*="grid-template-columns"] > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .dec:hover { padding-left: 0 !important; }
  .panel > span:empty { display: none; }

  /* Hero portrait: drops under the intro */
  .riso-host { position: relative !important; top: auto !important; right: auto !important; width: min(58%, 220px) !important; margin: 12px auto 34px; }

  /* Picsume hero screenshot follows the page gutter */
  .hero-shot { margin-left: 48px !important; margin-right: 48px !important; }

  /* Label-column grids: the label sits above the content */
  [style*="grid-template-columns: 180px minmax(0, 1fr)"]:not(.job-head):not(.case):not(.dec) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px !important; }
  [style*="grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr)"] > :first-child { grid-column: 1 / -1; }
  [style*="repeat(6, minmax(0, 1fr))"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* Case study section nav: one swipeable row */
  nav[style*="sticky"] { gap: 12px !important; }
  nav[style*="sticky"] > div { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav[style*="sticky"] > div::-webkit-scrollbar { display: none; }
  nav[style*="sticky"] .nl { white-space: nowrap; }
  nav[style*="sticky"] > a { font-size: 15px !important; }

}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  /* Side gutters and section rhythm */
  [style*="px 180px"], [style*=" 0 180px"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="px 180px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 0 180px"], section[style*="padding: 0px 180px"] { padding-top: 0 !important; padding-bottom: 56px !important; }

  /* Every multi-column grid stacks... */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px; }
  /* ...except stat strips and screen galleries, which go two-up */
  [style*="repeat(4, minmax(0, 1fr))"], [style*="repeat(6, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [style*="repeat(4, minmax(0, 1fr))"]:not([style*="gap: 1px"]) { column-gap: 16px !important; row-gap: 32px !important; }
  /* Captions under two-up screens need a smaller scale */
  [style*="repeat(4, minmax(0, 1fr))"] > div > span[style*="font-size: 22px"] { font-size: 17px !important; line-height: 1.25; }
  [style*="repeat(4, minmax(0, 1fr))"] > div > span[style*="font-size: 15px"] { font-size: 13.5px !important; line-height: 1.5 !important; }
  [style*="repeat(4, minmax(0, 1fr))"] img[style*="border-radius: 22px"] { border-radius: 16px !important; border-width: 4px !important; }

  /* Type scale */
  h1 { font-size: 44px !important; line-height: 1.02 !important; }
  h2 { font-size: 30px !important; line-height: 1.12 !important; }
  [style*="font-size: 120px"] { font-size: 64px !important; }
  [style*="font-size: 72px"], [style*="font-size: 68px"], [style*="font-size: 64px"] { font-size: 44px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: 32px !important; }
  [style*="font-size: 44px"], [style*="font-size: 40px"] { font-size: 28px !important; }
  [style*="font-size: 30px"] { font-size: 22px !important; }
  [style*="font-size: 20px"], [style*="font-size: 19px"] { font-size: 17px !important; }

  /* Play page: a tall table that fits a phone screen */
  .play-table { width: 100% !important; aspect-ratio: 1 / 1.7 !important; }

  .hero-shot { margin-left: 20px !important; margin-right: 20px !important; height: 240px !important; margin-top: 40px !important; }
  .feat-main, .feat-pair { gap: 28px !important; }

  h1.flip { font-size: 36px !important; line-height: 1.12 !important; }

  /* Hero extras are desktop-only: no dashboard flip on phones */
  .flip-hint, .flip .dash { display: none !important; }
  .flip:hover .en, .flip:focus .en { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* Home header: let the right-hand links wrap under the name */
  header[style*="px 180px"] { flex-wrap: wrap; gap: 10px 20px; }
  header[style*="px 180px"] > div { gap: 16px !important; flex-wrap: wrap; }

  .job-head { padding: 24px 0 !important; }
  a.case { padding: 22px 0 !important; }

  /* Killer Pool hero phones */
  div[style*="height: 560px"] { height: auto !important; align-items: flex-start !important; gap: 3vw !important; padding: 40px 0 72px !important; }
  img.phone { width: 27vw !important; height: auto !important; aspect-ratio: 390 / 844; flex: none; border-width: 4px !important; border-radius: 18px !important; }

  /* Feature showcase phone and sticky column */
  /* "What I added": each screen sits inside its own item instead of one column at the end */
  .feat-side { display: none !important; }
  .feat-inline { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; padding: 8px 0 4px 36px; }
  .feat-inline img { width: min(240px, 100%) !important; }

  /* Lightbox: arrows sit at the bottom so they don't cover the image */
  .lb button[aria-label="Previous screen"], .lb button[aria-label="Next screen"] { top: auto !important; bottom: 24px; }

  /* Footer and closing blocks wrap */
  footer { flex-wrap: wrap; gap: 8px; }
  section[style*="justify-content: space-between; align-items: end"] { flex-direction: column; align-items: flex-start !important; }
  div[style*="justify-content: space-between; align-items: baseline"] { flex-wrap: wrap; gap: 8px; }
}