/* ==========================================================================
   English Quiz — site chrome
   Linked (after tokens.css + style.css) on practice.html only, for the
   category artwork grid that presents public quizzes the way
   englishvoiced.com/lessons/ presents lessons — a coloured card per
   category with an art panel on top, above the app's existing dropdown
   and room-code box.

   The header/nav itself is NOT handled here — practice.html and play.html
   use the same .top-nav markup and classes as index.html (in style.css),
   so all three pages share one identical menu.

   Everything here is namespaced with a `qz-` prefix so it can't collide
   with the existing bento / panel / question-view classes in style.css;
   this file is purely additive chrome around them, not a replacement.
   Colours reuse the --cat-* tokens appended to tokens.css rather than
   inventing a parallel palette, so nothing here introduces a visible seam
   against the rest of the app.
   ========================================================================== */

/* ---------- Hero ---------- */

.qz-hero { max-width: var(--max-width); margin: 0 auto; padding: 24px 24px 4px; }
.qz-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quizzes-tint);
  margin-bottom: 10px;
}
.qz-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  margin: 0 0 12px;
}
.qz-hero p { font-size: 15.5px; line-height: 1.6; color: var(--cream-dim); max-width: 640px; margin: 0; }

/* ---------- Category sections + artwork tile grid ---------- */

.qz-cat { max-width: var(--max-width); margin: 44px auto 0; padding: 0 24px; }
.qz-cat__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.qz-cat__title { font-size: 20px; font-weight: 700; margin: 0; text-transform: none; letter-spacing: 0; }
.qz-cat__count { font-size: 13px; color: var(--cream-faint); }

/* Cards designed for 280–330px width — matches the Claude Design artwork
   handoff (see assets/art/README in the design-handoff export). */
.qz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }

.qz-tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--tile-ink, var(--cream));
  background: var(--tile-card, var(--surface));
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.qz-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / 0.28); }

/* Full-bleed artwork panel — fixed 165px height (not aspect-ratio) per the
   design spec. The dot texture lives here rather than in each artwork
   fragment, since it's identical within a category; --tile-dot-alpha is
   set per tile (Use of English is very slightly brighter: .1 vs .09). */
.qz-tile__art {
  position: relative;
  height: 165px; /* matches the 322x165 artwork box from the design handoff */
  overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, var(--tile-dot-alpha, 0.09)) 1px, transparent 1.2px);
  background-size: 14px 14px;
}

/* Lesson-quiz artwork (second Claude Design handoff) is drawn on a fixed
   322x165 box with absolute px positions, so it can't reflow like the older
   flex-based art. The box is centred in the panel and scaled as a whole —
   js/quiz-browse.js sets --art-scale to fit the tile's actual size. */
.qz-art-fixed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 322px;
  height: 165px;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--art-scale, 1));
  transform-origin: center;
  pointer-events: none;
}

.qz-tile__body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qz-tile__kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.qz-tile__title {
  font-family: 'Archivo Black', var(--font-display);
  text-transform: none;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
}
.qz-tile__desc { font-size: 12.5px; line-height: 1.5; opacity: 0.9; }
.qz-tile__cta { font-size: 12px; font-weight: 700; margin-top: 6px; }

/* ---------- "Or jump straight to a quiz" section label, above the kept
   dropdown/code panel — so it reads as a deliberate, scalable fallback
   next to the grid rather than a leftover control. ---------- */

.qz-fallback__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .qz-hero, .qz-cat { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Two-box bento rows (2:1 width) ----------
   Used for practice.html's "pick a quiz" / "have a code" pair, and for
   play.html's "join" / "reconnect" pair. Each box keeps the existing
   .panel look; this class only arranges two of them side by side. ---------- */

.qz-bento-row {
  max-width: var(--wrap, var(--max-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

/* Equal-height boxes: stretch (above) makes both match the taller one;
   the flex column + space-between then spreads each box's own content
   (heading/fields up top, button at the bottom) instead of leaving one
   big empty gap underneath the shorter box's content. */
.qz-bento-row .panel {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Quiz picker dropdown — the browser's native arrow sits flush against the
   edge by default; draw our own further in so it doesn't crowd the border. */
#quiz-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23f1ecdf' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 46px;
}

@media (max-width: 720px) {
  .qz-bento-row { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
}