/* =====================================================================
   The Collectorium — Collection view (v3)
   ---------------------------------------------------------------------
   templates/collection/view.html.twig — the core catalogue page: hero,
   completion ring, toolbar, item grid, description.

   The toolbar's own pieces are here; the parts it reuses are not. The
   segmented pill, chips, drawer, card grid and the compact/large display
   modes are all components (public/css/v3/components.css) — this file only
   styles the toolbar row that arranges them.

   Prefixed `.v3-coll-*` (rather than reusing category.css's `.v3-cat-head`/
   `.v3-swatch`) because every pages/*.css file is imported together into
   the same `pages` layer (public/css/app.css) — a generic name here would
   collide with category.css's swatch on every page load, not just this one.
   ===================================================================== */

.v3-coll-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 24px;
}

/* Sized to its contents rather than to a square, for the reason spelled out on
   .v3-swatch (pages/category.css): a wide wordmark contained in a fixed square
   is intact but tiny. Kept in step with that rule deliberately — the two page
   heads should not drift. */
.v3-coll-swatch {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 80px;
  max-width: 200px;
  height: 80px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 13px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.72);
  text-align: center;
  white-space: pre-line;
}

/* Definite height, not 100% — see .v3-swatch img in pages/category.css for why
   (a percentage height silently clips square images). Kept in step with that
   rule; the two page heads should not drift. */
.v3-coll-swatch img {
  width: auto;
  max-width: 100%;
  height: 64px;
  object-fit: contain;
}

.v3-coll-head-main {
  min-width: 0;
}

.v3-coll-head-main h1 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 32px;
  letter-spacing: -0.03em;
}

.v3-coll-head-meta {
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  color: var(--fg-secondary);
}

/*
   Collected by N Users — moved into the hero by TC-417. A step quieter than
   .v3-coll-head-meta above it so the item count still leads.

   .v3-coll-tags / .v3-tag lived here and styled the "Verified" pill, the only
   tag the hero ever rendered. TC-417 removed the flag, so both went with it.
*/
.v3-coll-collectors {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--fg-tertiary);
}

.v3-coll-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.v3-coll-stat .v {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 25px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.v3-coll-stat .k {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-tertiary);
}

/* ---------------------------------------------------------------------
   Secondary meta — collectors count / different-user subtitle / login
   prompt. Minor, legacy-adjacent bits kept functional but destyled of
   their inline styles now that they sit in a v3 page.
   --------------------------------------------------------------------- */
.v3-coll-secondary {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}

.v3-coll-desc {
  margin-bottom: 20px;
  font-size: 17px;
  color: var(--fg-secondary);
  white-space: pre-line;
}

/* The actions (collection/_userControls.html.twig) are `.v3-chip`s as of Web
   v3 · 17 — the legacy `.pillBlack` they replaced was an inline-block that
   spaced itself, so this row owns the gap now. Also wraps the single-line
   login prompt for anonymous readers, which is unaffected by the flex. */
.v3-coll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   Toolbar — one row between the hero and the grid.
   collection/_toolbar.html.twig
   --------------------------------------------------------------------- */
.v3-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* Segment + find + sort, as one group. Also the node public/js/v3/toolbar.js
   moves into the drawer below 720px — which is why they are wrapped rather
   than laid out as loose children of the toolbar.

   It grows to fill the row: left to size itself, the group takes only its
   content width and then wraps its own children onto a second line while the
   rest of the toolbar sits empty. Growing also pushes the display-mode switch
   out to the right edge, so no spacer element is needed. */
.v3-toolbar-tools {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

/* Opens the drawer. Mobile ergonomics only — above 720px the tools it would
   reveal are already sitting in the toolbar. */
.v3-toolbar-filter {
  display: none;
}

/* Scoped find — narrows the cards already on the page (not a site search). */
.v3-collfind {
  display: inline-flex;
  flex: 0 1 260px;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  max-width: 320px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  background: var(--circle-chrome);
  color: var(--fg-tertiary);
  transition: background var(--duration-1);
}

.v3-collfind:focus-within {
  background: var(--border);
}

.v3-collfind .icon {
  flex-shrink: 0;
}

.v3-collfind-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--fg);
}

.v3-collfind-input::placeholder {
  color: var(--fg-tertiary);
  font-weight: var(--weight-semibold);
}

.v3-collfind .clr {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: color var(--duration-1);
}

/* Only shown once there is something to clear (toolbar.js toggles the
   attribute). Needs stating because the `display` above would otherwise beat
   the UA sheet's `[hidden] { display: none }`. */
.v3-collfind .clr[hidden] {
  display: none;
}

.v3-collfind .clr:hover {
  color: var(--fg);
}

.v3-find-count {
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--fg-tertiary);
}

/* Split sort chip: key cycler on the left, direction toggle on the right. */
.v3-sort {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.v3-sort button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  font-size: 13px;
  cursor: pointer;
  transition: color var(--duration-1);
}

.v3-sort button:hover {
  color: var(--fg);
}

.v3-sort .d {
  padding: 0 9px;
  border-left: 1px solid var(--border);
}

/* ---------------------------------------------------------------------
   Responsive — stats wrap below on narrow viewports, matching the design
   mock's @container behaviour but as a plain media query (this codebase's
   v3 pages use @media, not container queries — see category.css).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .v3-coll-head {
    flex-wrap: wrap;
  }

  .v3-coll-stats {
    width: 100%;
    padding-top: 6px;
    margin-left: 0;
    border-top: 1px solid var(--divider);
  }
}

@media (max-width: 720px) {
  .v3-coll-head-main h1 {
    font-size: 26px;
  }

  .v3-coll-swatch {
    min-width: 60px;
    max-width: 150px;
    height: 60px;
    font-size: 11px;
  }

  .v3-coll-swatch img {
    height: 44px;
  }

  /* Drawer territory: the chip appears, and toolbar.js moves the tools out of
     the row and into the drawer it opens. The toolbar row is left holding the
     chip and the display-mode switch — the two things worth reaching for
     without opening anything. */
  .v3-toolbar-filter {
    display: inline-flex;
  }

  .v3-toolbar-tools {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }

  /* Full-width inside the drawer: the segment and find are the only things in
     it, so there is nothing to sit beside. */
  .v3-toolbar-tools .v3-segment {
    display: flex;
  }

  .v3-toolbar-tools .v3-segment a {
    flex: 1;
  }

  .v3-collfind {
    flex-basis: auto;
    max-width: none;
  }

  .v3-sort {
    align-self: flex-start;
  }
}