/* Responsive layer.
   The artboards were authored at desktop width and carry no width breakpoints at
   all, so this file adds them. Sizes in the source are mostly inline styles,
   which beat any class rule, so the type floors below have to match on the
   inline declaration itself and use !important to win. Nothing here changes the
   desktop rendering: every rule sits inside a max-width query. */

/* The menu control is injected on every page but belongs to the phone layout
   only; without this it would render with default button styling on desktop. */
.jd-menu-toggle { display: none; }

/* -- mobile commerce patterns (phones and tablets) --------------- */
/* Borrowed from how Kenyan mobile commerce behaves, adapted for a supplier
   that quotes rather than sells online. Desktop above 1024px is untouched. */
@media (max-width: 1024px) {

  /* Pinned contact bar. Built by jodroc-actions.js, which publishes its own
     height and yields the floor to the quote-basket bar when that comes up. */
  #jd-actions {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 58;
    display: flex;
    gap: 1px;
    background: var(--color-divider, rgba(32,31,29,.16));
    border-top: 1px solid var(--color-accent, #141636);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #jd-actions.jd-act-hidden { display: none; }
  #jd-actions .jd-act {
    flex: 1 1 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #fdfdfd);
    color: var(--color-text, #201f1d);
    text-decoration: none;
    font-size: 15px;
    letter-spacing: 0.04em;
    padding: 12px 8px;
  }
  #jd-actions .jd-act-primary {
    background: var(--brand-teal, #004F49);
    color: #fff;
    flex: 1.4 1 0;
  }

  /* the last section has to clear the bar */
  body { padding-bottom: calc(var(--jd-action-h, 0px) + 12px) !important; }

  /* The search pill computes its own offset against the basket bar; this adds
     the contact bar on top of whatever it worked out. */
  #jd-search {
    bottom: calc(var(--jd-search-bottom, 20px) + var(--jd-action-h, 0px)) !important;
    opacity: 1 !important;
    width: min(calc(100vw - 28px), 420px) !important;
  }

  /* Two cards per row rather than one. A single column turns a catalogue into
     a very long scroll; two is what a phone shopper expects to see. */
  [style*="grid-template-columns"]:has(> a.card),
  [style*="grid-template-columns"]:has(> .card),
  [style*="grid-template-columns"]:has(> a > .plate) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Anything tappable gets a real target. Inline links inside prose are left
     alone - stretching those would break the line box. */
  .btn, button, nav a, .card, a.card, .jd-room, .jd-cat,
  #jd-hero-rail > a, .jd-s-row {
    min-height: 48px !important;
  }
  .btn, button, nav a, .jd-s-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
  }
  /* the add-to-quote control is a 26px square by design; a height-only floor
     stretches it into a sliver, so it grows on both axes instead */
  .jd-add,
  button[style*="width:26px"], button[style*="width: 26px"] {
    min-width: 46px !important;
    min-height: 46px !important;
  }
  /* Every button gets a floor rather than naming them one by one - the widgets
     render their own controls (search clear and close, the quote builder's
     row-remove) and chasing each class was a losing game. min-width only
     raises a floor, so wide text buttons are unaffected. */
  button { min-width: 44px !important; }
  .jd-add, .jd-x, #jd-search button { min-width: 46px !important; }
  /* horizontal nav items are as wide as their word; a little side padding
     turns a 39px link into a comfortable target without moving anything */
  nav a {
    padding: 12px 9px !important;
    min-width: 44px !important;
  }
}

/* -- tablet and phone: flexible containers ----------------------- */
/* The artboards size their grid tracks with a hard pixel floor -
   repeat(auto-fit, minmax(300px, 1fr)) - so a track can be wider than the box
   holding it as soon as the page narrows, and the row spills sideways.
   Wrapping the floor in min(100%, ...) is the structural fix: the track takes
   its ideal width when there is room and the container's own width when there
   is not, so it can never overflow. Desktop keeps its own tracks untouched;
   this applies at 1024px and below only.

   The prose measures have the same problem in reverse. A 52ch column is a
   comfortable read on a 1200px page, but once the container halves that column
   is narrower than the space it sits in and the text runs as a thin ribbon. */
@media (max-width: 1024px) {
  [style*="minmax(180px"],
  [style*="minmax( 180px"],
  [style*="minmax(200px"],
  [style*="minmax( 200px"],
  [style*="minmax(220px"],
  [style*="minmax( 220px"],
  [style*="minmax(240px"],
  [style*="minmax( 240px"],
  [style*="minmax(260px"],
  [style*="minmax( 260px"],
  [style*="minmax(280px"],
  [style*="minmax( 280px"],
  [style*="minmax(300px"],
  [style*="minmax( 300px"],
  [style*="minmax(320px"],
  [style*="minmax( 320px"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  }

  [style*="max-width:38ch"],
  [style*="max-width: 38ch"],
  [style*="min(38ch"],
  [style*="min( 38ch"],
  [style*="max-width:40ch"],
  [style*="max-width: 40ch"],
  [style*="min(40ch"],
  [style*="min( 40ch"],
  [style*="max-width:44ch"],
  [style*="max-width: 44ch"],
  [style*="min(44ch"],
  [style*="min( 44ch"],
  [style*="max-width:46ch"],
  [style*="max-width: 46ch"],
  [style*="min(46ch"],
  [style*="min( 46ch"],
  [style*="max-width:48ch"],
  [style*="max-width: 48ch"],
  [style*="min(48ch"],
  [style*="min( 48ch"],
  [style*="max-width:50ch"],
  [style*="max-width: 50ch"],
  [style*="min(50ch"],
  [style*="min( 50ch"],
  [style*="max-width:52ch"],
  [style*="max-width: 52ch"],
  [style*="min(52ch"],
  [style*="min( 52ch"],
  [style*="max-width:56ch"],
  [style*="max-width: 56ch"],
  [style*="min(56ch"],
  [style*="min( 56ch"] {
    max-width: 100% !important;
  }
}

/* -- tablet and below -------------------------------------------- */
@media (max-width: 900px) {
  header.nav {
    gap: 14px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  header.nav > nav { gap: 16px !important; }
}

/* -- phones ------------------------------------------------------ */
@media (max-width: 760px) {

  /* Brighter ground for handsets. The design system's paper tone reads well on
     a colour-managed desktop display but goes muddy on a phone held at arm's
     length, often at reduced brightness outdoors. Lifting the surface tokens
     rather than hard-coding backgrounds means every panel, card and plate that
     references them brightens consistently. Text stays #201f1d, so contrast
     against the page rises from about 14.5:1 to 16:1. */
  :root {
    --color-bg: #fdfdfd !important;
    --color-surface: #f5f4f4 !important;
    --color-neutral-100: #ffffff !important;
    --color-neutral-200: #f2f0f0 !important;
  }
  html, body { background: #fdfdfd !important; }
  .card, .plate { background: #ffffff !important; }

  /* Header collapses to brand + menu button; the links move into a panel
     that jodroc-mobile.js toggles. Keeping the bar one row tall matters
     because it is fixed, and the hero sits directly beneath it. */
  header.nav > nav {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 6px 18px 14px !important;
    background: var(--color-bg, #fdfdfd);
    border-bottom: 1px solid var(--color-accent, #141636);
    font-size: 18px !important;
    max-height: calc(100vh - 58px);
    overflow-y: auto;
  }
  header.nav[data-open="1"] > nav { display: flex !important; }

  /* flex items default to min-width:auto, so the bar refuses to shrink below
     its content and overflows the viewport on a 360px handset */
  header.nav { min-width: 0 !important; }
  header.nav > * { min-width: 0 !important; }
  header.nav .nav-brand { overflow: hidden !important; }

  header.nav > nav > a {
    padding: 13px 2px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text, #201f1d) 12%, transparent);
  }
  header.nav > nav > a:last-child { border-bottom: 0 !important; }

  .jd-menu-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--color-accent, #141636);
    color: var(--color-text, #201f1d);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 2px;
  }
  header.nav > a.btn { font-size: 15px !important; padding: 9px 12px !important; }

  /* A wrapped call-to-action doubles the height of a fixed header. */
  header.nav > a.btn,
  header.nav .nav-brand span { white-space: nowrap !important; }
  header.nav .nav-brand span { font-size: 17px !important; }

  /* The hero is a 100vh sticky panel with the scroll cues stacked absolutely
     inside it, scrubbed against a long scroll run. That only works when there
     is a drawing to scrub and room to read: with the 3D off and type at phone
     size the copy outgrows the panel and lands on the thumbnail rail. So on
     phones the stage stops being a scroll stage - the panels unstack and flow
     as ordinary sections, keeping every headline and paragraph. Desktop is
     untouched: the panels stay stacked and cross-fade as designed.

     Matching is done through :has() on the cue class rather than the inline
     style, because the runtime re-serialises inline styles with spaces. */
  section:has(> div > div > .jd-cue),
  section:has(> div > .jd-cue) {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 92px !important;
  }
  section:has(.jd-cue) > div,
  section:has(.jd-cue) > div > div {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .jd-cue {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    padding: 26px 0 34px !important;
  }
  .jd-cue + .jd-cue { border-top: 1px solid var(--color-divider, rgba(32,31,29,.16)); }
  #jd-canvas, section:has(.jd-cue) canvas { display: none !important; }

  /* Four thumbnails across 390px leaves ~85px per cell, so the captions
     collide. Two columns gives each caption room to sit on one line. */
  #jd-hero-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  #jd-hero-rail > :last-child { grid-column: 1 / -1; }

  /* Multi-column and px-floored grids drop to one column. The computed-track
     pass in jodroc-mobile.js catches whatever these selectors miss. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns: repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fill"],
  [style*="grid-template-columns: repeat(auto-fill"],
  [style*="grid-template-columns:minmax(320px"],
  [style*="grid-template-columns:minmax(300px"],
  [style*="grid-template-columns:minmax(280px"],
  [style*="grid-template-columns: minmax(320px"],
  [style*="grid-template-columns: minmax(300px"],
  [style*="grid-template-columns: minmax(280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* the supply list is a number / title / "View" row; on a narrow phone the
     trailing link is pushed off the edge, so the three parts stack instead */
  [style*="grid-template-columns:64px 1fr auto"],
  [style*="grid-template-columns: 64px 1fr auto"],
  [style*="grid-template-columns:1fr 92px 34px"],
  [style*="grid-template-columns: 1fr 92px 34px"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  /* Nothing may push the page sideways. */
  img, svg, canvas, iframe, video, table { max-width: 100% !important; }

  /* -- readable minimums --
     Authored markup writes "font-size:13px"; styles set by the runtime
     serialise with a space, so both forms are matched. The font shorthand
     also sets size, and resets it. */
  [style*="font-size:8px"]     { font-size: 14.5px !important; }
  [style*="font-size:9px"]     { font-size: 14.5px !important; }
  [style*="font-size:10px"]    { font-size: 14.5px !important; }
  [style*="font-size:10.5px"]  { font-size: 14.5px !important; }
  [style*="font-size:11px"]    { font-size: 15px !important; }
  [style*="font-size:12px"]    { font-size: 15.5px !important; }
  [style*="font-size:13px"]    { font-size: 17px !important; }
  [style*="font-size:14px"]    { font-size: 17.5px !important; }
  [style*="font-size:15px"]    { font-size: 18.5px !important; }
  [style*="font:11px"]         { font-size: 15px !important; }
  [style*="font:15px"]         { font-size: 18.5px !important; }
  [style*="font-size: 8px"]    { font-size: 14.5px !important; }
  [style*="font-size: 9px"]    { font-size: 14.5px !important; }
  [style*="font-size: 10px"]   { font-size: 14.5px !important; }
  [style*="font-size: 10.5px"] { font-size: 14.5px !important; }
  [style*="font-size: 11px"]   { font-size: 15px !important; }
  [style*="font-size: 12px"]   { font-size: 15.5px !important; }
  [style*="font-size: 13px"]   { font-size: 17px !important; }
  [style*="font-size: 14px"]   { font-size: 17.5px !important; }
  [style*="font-size: 15px"]   { font-size: 18.5px !important; }
  [style*="font: 11px"]        { font-size: 15px !important; }
  [style*="font: 15px"]        { font-size: 18.5px !important; }

  /* the same floors for sizes that come from the design system */
  h6            { font-size: 17px !important; }
  label         { font-size: 15.5px !important; }
  .card-kicker  { font-size: 15px !important; }
  .card-body    { font-size: 17px !important; }
  .card-title   { font-size: 22px !important; }
  .meta, .tag, .pill, .sc-interp { font-size: 15px !important; }
  body { font-size: 19.5px !important; line-height: 1.6; }

  /* Long uppercase tracking wraps badly in a narrow column. */
  [style*="letter-spacing:.16em"],
  [style*="letter-spacing:0.16em"] { letter-spacing: 0.1em !important; }

  /* Generous desktop section padding wastes a phone screen. */
  section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* -- small phones ------------------------------------------------ */
@media (max-width: 400px) {
  #jd-hero-rail { gap: 10px !important; }
  /* the bar has three items and no room to spare at 360px */
  header.nav {
    gap: 9px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  header.nav .nav-brand { gap: 8px !important; }
  header.nav .nav-brand img { height: 26px !important; }
  header.nav > a.btn { font-size: 14.5px !important; padding: 8px 10px !important; }
  header.nav .nav-brand span {
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
  }
  .jd-menu-toggle { font-size: 13px; padding: 7px 9px; letter-spacing: 0.04em; }
  header.nav > nav { font-size: 18px !important; }
}

/* -- narrowest handsets ------------------------------------------ */
@media (max-width: 380px) {
  /* the mark alone carries the brand; the wordmark is what the bar can spare */
  header.nav .nav-brand span { display: none !important; }
}