/* Shapes & Patterns, Space & Building and Matching & Memory — page-scoped
   styles, loaded after assets/counting-20261001/counting.css. The whole layout,
   the chrome, the card frame, the 44/72/16px bars and the filter logic stay in
   the shared files; this file only adds what is specific to these three pages:
   their own wide and portrait hero scene and the category stripe colours that
   differ from the Counting page. Every "next" tile now uses its own organic
   illustration, so no mask is needed.
   Palette stays navy #174A7E on white; no turquoise inside the cards. */

/* ---------- category stripes ----------
   Real labels and colours from assets/world-cards.json, white text throughout.
   Counting keeps the approved sunny yellow with navy text, Patterns keeps the
   approved leafy green from the Counting page, and Sequencing becomes warm
   orange so no teal stripe reaches the card UI. Page-scoped: these rules only
   load on the three new pages. */
body.cc-page .cc-stripe[data-category="counting"]{background:#FFD45A;color:#174A7E}
body.cc-page .cc-stripe[data-category="patterns"]{background:#2B713F;color:#fff}
body.cc-page .cc-stripe[data-category="sequencing"]{background:#995314;color:#fff}
body.cc-page .cc-stripe[data-category="shapes"]{background:#8A4FA0;color:#fff}
body.cc-page .cc-stripe[data-category="symmetry"]{background:#2A5C8A;color:#fff}
body.cc-page .cc-stripe[data-category="puzzles"]{background:#5B3A8C;color:#fff}
body.cc-page .cc-stripe[data-category="logic"]{background:#7A4A16;color:#fff}
body.cc-page .cc-stripe[data-category="paths"]{background:#46539E;color:#fff}
body.cc-page .cc-stripe[data-category="measuring"]{background:#2E7A46;color:#fff}
body.cc-page .cc-stripe[data-category="memory"]{background:#C0503F;color:#fff}
body.cc-page .cc-stripe[data-category="discovery"]{background:#7A5A00;color:#fff}
body.cc-page .cc-stripe[data-category="matching"]{background:#8A5A2B;color:#fff}
body.cc-page .cc-stripe[data-category="sorting"]{background:#6E5A2E;color:#fff}

/* ---------- hero scenes ----------
   The shared .cc-hero keeps its box, copy position, CTA and the 761–1024px
   tablet text correction. Each page only swaps in its own artwork: the wide
   file is 1672×941 and the portrait file carries the same 941:1672 proportion
   as the shared hero, so the shared aspect-ratio and mobile rules still hold. */
:root body.cc-page.cc-shapes .cc-hero{background-image:url("shapes-hero-desktop.webp")}
:root body.cc-page.cc-space .cc-hero{background-image:url("space-hero-desktop.webp")}
:root body.cc-page.cc-memory .cc-hero{background-image:url("memory-hero-desktop.webp")}

@media (max-width:760px){
  :root body.cc-page.cc-shapes .cc-hero{background-image:url("shapes-hero-mobile.webp")}
  :root body.cc-page.cc-space .cc-hero{background-image:url("space-hero-mobile.webp")}
  :root body.cc-page.cc-memory .cc-hero{background-image:url("memory-hero-mobile.webp")}
}