/* ==========================================================================
   Wondermaths - material download carousel for the world pages.
   Styles the card track that assets/world-material-carousel.js builds from the
   existing grouped material <details>. Colours come from the world page tokens
   (--wl-*), so each world keeps its own accent. The toolbar sits above the
   track: no arrows squeeze the cards, they stay whole and unobstructed.
   External file: the production CSP allows no inline style.
   ========================================================================== */

.wm-carousel {
  --wm-card: 300px;
  --wm-gap: clamp(16px, 2vw, 22px);
  /* On the world pages the carousel is inserted into the existing CSS grid
     (.farm-shelf-pair). As a grid item it would otherwise keep min-width:auto
     and let its min-content widen the 1fr track past the viewport. Span the
     row, take the row's width and allow shrinking. */
  grid-column: 1 / -1;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 1080px;
  margin: clamp(20px, 3vw, 34px) auto 0;
}

/* The card copy speaks in the brand body voice. Headings keep the brand
   heading font through the portal's own h1-h6 rule; buttons and links would
   otherwise fall back to the browser's serif button font. */
.wm-carousel,
.wm-carousel .wm-status,
.wm-carousel .wm-card-meta,
.wm-carousel .wm-card-toggle,
.wm-carousel .wm-card-link,
.wm-carousel .realm-download-groups a {
  font-family: var(--brand-body-font, 'Segoe UI', Arial, sans-serif);
}

/* ---- toolbar: status + Previous / Next ---------------------------------- */

.wm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 14px;
}
.wm-status {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--wl-navy, #174A7E);
}
.wm-navs {
  display: flex;
  gap: 10px;
}
.wm-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--wl-navy, #174A7E);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease;
}
.wm-nav:hover:not(:disabled) { background: #0F365C; }
.wm-nav:disabled { opacity: .38; cursor: default; }
.wm-nav:focus-visible {
  outline: 3px solid #0F365C;
  outline-offset: 3px;
}
/* CSS arrow: a rotated square corner, no SVG and no text glyph. */
.wm-arrow {
  width: 12px;
  height: 12px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg) translate(-1px, 1px);
}
.wm-prev .wm-arrow { transform: rotate(135deg) translate(-1px, 1px); }

/* ---- track -------------------------------------------------------------- */

.wm-track {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--wm-gap);
  padding: 4px 0 18px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--wl-stroke, #A8E9E1) transparent;
}
.wm-track:focus-visible {
  outline: 3px solid #174A7E;
  outline-offset: 4px;
  border-radius: 18px;
}

/* ---- cards -------------------------------------------------------------- */

.wm-card {
  box-sizing: border-box;
  flex: 0 0 var(--wm-card);
  min-width: 0;
  scroll-snap-align: start;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--wl-stroke, #DCEDF5);
  border-radius: 20px;
  box-shadow: 0 20px 34px -30px rgba(23, 74, 126, .6);
}

/* Article cards carry the page's own material card, so the carousel only
   frames them. */
.wm-card--article {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.wm-card--article > article {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.wm-card--article > article img { max-width: 100%; }

/* Generous preview area. Illustration scenes fill the frame; paper, lineart and
   rhyme sheets stay whole on white. */
.wm-card-art {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--wl-stroke, #E3F1F8);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}
/* Every preview stays whole: a cover, a worksheet sheet or a lineart page is
   never cropped, so nothing inside the frame is scaled or cut. */
.wm-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
}
.wm-card-art:focus-visible {
  outline: 3px solid #174A7E;
  outline-offset: 2px;
}
.wm-card-art--static { cursor: default; }

.wm-card > h3,
.wm-card > p {
  margin: 0;
}
.wm-card-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--wl-navy, #174A7E);
}
.wm-card-meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #5A7290;
}

/* Clear, large materials button. */
.wm-card-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  /* White on navy, whatever the page's global brand text colour says. */
  --brand-ink: #fff;
  --brand-heading-ink: #fff;
  color: #fff;
  background: var(--wl-navy, #174A7E);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}
.wm-carousel .wm-card-toggle,
.wm-carousel .wm-card-toggle * {
  color: #fff;
}
:root[data-portal-theme] body .wm-carousel .wm-card-toggle,
:root[data-portal-theme] body .wm-carousel .wm-card-toggle * {
  color: #fff;
}
.wm-carousel .wm-nav,
.wm-carousel .wm-nav * {
  color: #fff;
}
:root[data-portal-theme] body .wm-carousel .wm-nav,
:root[data-portal-theme] body .wm-carousel .wm-nav * {
  color: #fff;
}
.wm-card-toggle:hover { background: #0F365C; }
.wm-card-toggle:focus-visible {
  outline: 3px solid #0F365C;
  outline-offset: 3px;
}
.wm-chev {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.wm-card.is-open .wm-chev { transform: rotate(-135deg) translate(-2px, -2px); }

/* ---- the moved material list -------------------------------------------- */

.wm-card > details {
  margin: 0;
  border: 0;
  padding: 0;
}
/* A closed group leaves no gap, no separator and no room behind. */
.wm-card > details:not([open]) { display: none; }
.wm-card > details[open] {
  border-top: 1px solid var(--wl-mint, #D2F9F6);
  padding-top: 10px;
}
/* The card's own button is the visible control, but the native summary stays in
   the DOM for the no-JS reading order. */
.wm-card > details > summary {
  display: none;
}
.wm-card .realm-download-groups {
  display: flex;
  flex-direction: column;
}
.wm-card .realm-download-groups a,
.wm-card .wm-card-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--wl-ink, #17324D);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wm-card .realm-download-groups a:hover,
.wm-card .wm-card-link:hover { color: var(--wl-navy, #174A7E); }

/* ---- sizing: 3 complete cards on a laptop, 2 on a tablet, 1 + peek on a
   phone ------------------------------------------------------------------ */

@media (min-width: 1100px) {
  .wm-carousel { --wm-card: calc((100% - 2 * var(--wm-gap)) / 3); }
}
@media (min-width: 641px) and (max-width: 1099px) {
  .wm-carousel { --wm-card: calc((100% - var(--wm-gap)) / 2); }
}
@media (max-width: 640px) {
  .wm-carousel {
    --wm-gap: 14px;
    --wm-card: calc((100% - var(--wm-gap)) / 1.15);
  }
  .wm-card-title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-card-img,
  .wm-chev,
  .wm-nav { transition: none; }
  .wm-card-art:hover .wm-card-img--cover { transform: none; }
}