/* Wondermaths - Halloween adventures: ready-adventures cards (2026-10-04).
 *
 * Loaded by /halloween.html ONLY, from inside the #hw-adventures section.
 * The public CSP (style-src 'self') blocks the inline style="" attributes the
 * game authors left on the newly added cards, so this same-origin stylesheet
 * restores that exact geometry without touching any other section or page.
 *
 * Every selector is scoped to #hw-adventures. The frame/category rules also
 * repair the two pre-existing set cards, whose own inline styles are blocked
 * by the same CSP; their authored HTML is left untouched.
 */

/* 3:2 preview frames, edge-to-edge cover art. */
#hw-adventures .hw-page-frame {
  aspect-ratio: 3 / 2;
}

#hw-adventures .hw-page-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The shared coloring stylesheet stretches .hw-page-link with flex: 1, which
   pushed white space under the shorter adventure cards (the long caption grew
   the link). Pin the preview link to its natural height so all four 3:2 frames
   stay the same height at a given width. */
#hw-adventures .hw-page-link {
  flex: none;
}

/* Tall, centred category chips. */
#hw-adventures .wm-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
}

/* One Play button for every adventure card. All four anchors share the single
   .hw-page-cta class and this scoped pill, so they render with the same width,
   padding, font, radius, orange-on-navy palette and shadow. The card is a
   flex column, so margin-top:auto bottom-aligns the button and the row of
   buttons lines up. */
#hw-adventures .hw-sheet {
  display: flex;
  flex-direction: column;
}

#hw-adventures .hw-page-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin: auto 0 0;
  padding: 14px 18px;
  border: 2px solid transparent;
  border-radius: 100px;
  background: var(--hw-orange, #f2740c);
  color: var(--hw-plum-ink, #2a1140);
  font: 700 1rem/1.2 'Poppins', 'Segoe UI', sans-serif;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 26px rgb(192 90 4 / 32%);
  transition: background .2s ease, transform .2s ease;
}

#hw-adventures .hw-page-cta:hover {
  background: var(--hw-orange-soft, #ffa24d);
}

/* A visible focus ring for the Play button. */
#hw-adventures .hw-page-cta:focus-visible {
  outline: 3px solid var(--hw-plum-ink, #2a1140);
  outline-offset: 3px;
}