/* Responsive layer.

   The pages were built at desktop width and every layout decision lives in an
   inline style attribute, so on a 390px phone the two-column book pages stayed
   two-column -- the description column came out about 150px wide, three words
   to a line -- the header's call to action ran off the right edge, and all
   three main pages scrolled sideways.

   The overrides hang off classes rather than off the inline styles themselves.
   The first attempt matched on the style attribute (`[style*="repeat(3,"]`)
   and silently applied to nothing: these pages are rendered by the framework in
   support.js, which reserialises every style attribute on the way out, so
   `minmax(0,5fr)` reaches the browser as `minmax(0px, 5fr)`. A class survives
   that. The classes are applied at the source -- the two hand-maintained pages
   and the generator behind the other twelve.

     l-split    a side-by-side layout: hero and cover pairs, the three-up row
     l-covers   a grid of cover thumbnails, readable small
     l-cards    a grid of text cards, or product cards carrying a button
     l-d1/2/3   display headings, bucketed by their desktop size

   Inline styles still beat a class, so the declarations are marked important.
   That part is unavoidable without rewriting the markup; the selector is the
   part that had to stop guessing.

   Two breakpoints:
     900px  tablet and below -- side-by-side layouts stack
     600px  phone -- padding and display type come down, card grids go single

   Load this after the design system stylesheet. */

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

  .l-split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }

  /* A sticky column is only useful beside something that scrolls past it.
     Stacked, it pins the cover over the text you are trying to read. */
  .l-split > [style*="sticky"] { position: static !important; }

  .l-covers { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .l-cards  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* The header runs logo / links / button on one line. Let it wrap rather than
     push the button off the edge -- both the header itself and the row of links
     inside it, which on a 360px screen still could not fit "Cookbooks", "Shop"
     and the call to action side by side. */
  nav { flex-wrap: wrap !important; gap: 12px !important; }
  nav > div { flex-wrap: wrap !important; gap: 16px !important; }
}

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

  /* 40px of side padding on a 390px screen leaves 310px of text. Only the
     horizontal component is replaced, so each section keeps the vertical
     rhythm it was given. */
  nav, section, footer, header { padding-left: 20px !important; padding-right: 20px !important; }

  /* Cover thumbnails still read at two across. Anything with a sentence or a
     button in it takes the full width. */
  .l-cards { grid-template-columns: minmax(0, 1fr) !important; }

  /* Display type, set at fixed pixel sizes for a 1280px canvas. Each bucket
     keeps its desktop size as the ceiling and scales with the viewport. */
  .l-d1 { font-size: clamp(34px, 10vw, 76px) !important; }
  .l-d2 { font-size: clamp(28px, 7.5vw, 54px) !important; }
  .l-d3 { font-size: clamp(22px, 5.5vw, 38px) !important; }

  /* Long single words in a big face have nowhere to break. */
  .l-d1, .l-d2 { overflow-wrap: break-word; }

  /* The wordmark is the one heading that must not wrap: "Copper Spoon" broke
     over two lines and doubled the height of the sticky header. */
  nav > a:first-child { font-size: 19px !important; white-space: nowrap !important; }

  nav .btn { padding-left: 14px !important; padding-right: 14px !important; font-size: 15px !important; }

  /* "Add to cart" broke across two lines inside its pill. A button label is a
     label, not a paragraph -- but a row of unbreakable labels has to be allowed
     to wrap instead, or it simply runs off the side, which is what the price
     row on the book pages did the moment these labels stopped breaking. */
  .btn { white-space: nowrap; }
  .l-buyrow, .l-btnrow { flex-wrap: wrap !important; gap: 14px !important; }
  /* The footer's link row is the same shape and broke the same way the
     moment a fifth link was added to it. */
  footer > div { flex-wrap: wrap !important; }

  /* Column gaps sized for a desktop grid leave holes once things stack. */
  .l-covers, .l-cards { gap: 22px !important; }

  /* Tap targets. A cursor is a point and a fingertip is roughly 9mm, which is
     why both platform guidelines ask for about 44px. These were 17 to 30px:
     the footer links, the nav, the filter chips and the "All eleven in the
     shop" line. The extra height is padding, so nothing moves horizontally and
     the text stays where it was.

     Chips already sit in a wrapping flex row and simply get taller. The inline
     links in a sentence are deliberately excluded -- padding them would open
     gaps mid-paragraph -- so only links that stand alone are grown. */
  nav a, footer a, .tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .tag {
    font-size: 13px !important;   /* the design system sets 11px */
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* A button is already a comfortable target; this only guarantees the floor. */
  .btn { min-height: 44px; }

  /* The hero is a fixed 820px box with the copy and the shelf both absolutely
     positioned inside it, one over the other. That composes on a wide screen.
     On a phone the heading wraps to three lines and the paragraph to nine, so
     the copy filled almost the whole box and squeezed the shelf into a 75px
     band at the bottom. Letting both layers flow puts the copy first and gives
     the shelf a band of its own. */
  header#top { height: auto !important; }
  header#top > div { position: static !important; }
  header#top > div:first-child { padding: 40px 20px 30px !important; }
  header#top > div:last-child { height: 210px; }

  /* Five coloured spines, each with its category set across it at 20px starting
     22px from the left. That works at 288px a spine and not at 78px, where
     "Healthy eats" ran across its neighbour and out of the strip. Set the
     labels down the spine instead, which is where a bookshelf puts them
     anyway, and they fit at any width. */
  a[href^="#book-"] > span {
    writing-mode: vertical-rl;
    left: 50% !important;
    transform: translateX(-50%);
    bottom: 16px !important;
    font-size: 15px !important;
  }

  /* Decorative circles are positioned off the right edge to bleed. A phone's
     narrower viewport makes that bleed a much larger share of the screen. */
  [style*="border-radius:999px"][style*="620px"],
  [style*="border-radius: 999px"][style*="620px"] { width: 380px !important; height: 380px !important; }
}

/* A backstop, not a fix: the rules above remove the causes of sideways scroll,
   and this stops any single missed element from taking the whole page with it.

   On <html> alone, deliberately. Naming html AND body -- which an earlier
   version did, reasoning that body alone would do nothing -- makes <body> a
   scroll container of its own. The page then scrolls the body while
   window.scrollY stays at 0, so every scroll listener on window goes silent and
   scroll position reads as the top of the page from ten thousand pixels down.
   html is the viewport's scroll container already, so clipping it there is
   enough and costs nothing. */
@media (max-width: 900px) {
  html { overflow-x: hidden; }
}

/* The hero shelf spines sit in a click-transparent layer (it spans the whole
   hero while showing only a band at the bottom), so each spine has to take
   pointer events back for itself. Not a mobile rule -- it applies at every
   width, and lives here because this is the file that loads everywhere. */
a[data-spine] { pointer-events: auto; }