/* =====================================================================
   The Collectorium — Discover pages (v3)
   ---------------------------------------------------------------------
   /discover, a category drill-in (templates/category/viewVerified.html.twig),
   and /collections (templates/category/viewCustom.html.twig) — all three
   share templates/category/_discoverGrid.html.twig for the actual grid, so
   this file only covers the page head, the drill-in header, and the
   category card itself (the collection tile is shared chrome, styled in
   components.css).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page head — centered intro used by /discover and /collections
   --------------------------------------------------------------------- */
.v3-page-head {
  margin-bottom: 24px;
}

.v3-page-head-centered {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
  text-align: center;
}

.v3-page-head .sub {
  margin-top: 5px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------
   Category drill-in header — swatch + name + counts
   --------------------------------------------------------------------- */
.v3-cat-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 28px;
}

/* Sized to its contents, not to a square. A category's image is usually a wide
   logo lockup, so a fixed square either crops it (object-fit: cover) or shrinks
   it to a sliver floating in dead space (contain) — a 650×120 wordmark lands at
   56×10px in a 72px box. The box widens to the logo instead, and falls back to
   a 72px square for the initials, which is the only case the design actually
   specifies (see .wa-swatch / .wa-cat in the design project — neither renders an
   image at all; logos are real-data territory the mock never modelled). */
.v3-swatch {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 72px;
  max-width: 190px;
  height: 72px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 26px;
  color: rgba(0, 0, 0, 0.72);
}

/* The height must be a definite length, not 100%. It is what makes the image's
   intrinsic width aspect-correct (56 × ratio), which is in turn what the box
   above shrink-wraps to — so a wide logo widens the box and a square one leaves
   it square. With height: 100% the browser sizes width from max-width first and
   then derives the height from the ratio instead, which pushes a square image to
   182px tall inside a 72px box and clips it. max-width caps a very wide logo at
   the box, where object-fit: contain takes over; a dead src has no intrinsic
   width, so the box falls back to its min-width square. */
.v3-swatch img {
  width: auto;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
}

.v3-cat-head h1 {
  margin-bottom: 4px;
}

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

/* ---------------------------------------------------------------------
   Category card — components/_collectionTile.html.twig's counterpart for
   Category entities. Page-scoped rather than in components.css because
   only these Discover pages use it (per Web v3 · 06).
   --------------------------------------------------------------------- */
.v3-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.v3-tiles-secondary {
  margin-top: 24px;
}

.v3-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
  transition: transform var(--duration-2) var(--ease-out);
}

.v3-cat:hover {
  transform: translateY(-3px);
}

/* Either the category's own image or, failing that, its initials — same
   convention as .v3-tile .glyph (components.css). */
.v3-cat .glyph {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 16px 16px 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

.v3-cat .glyph img {
  max-width: 100%;
  max-height: 88px;
  object-fit: contain;
}

.v3-cat .foot {
  padding: 12px 16px 14px;
}

.v3-cat .foot .nm {
  /* .foot isn't a flex/grid container, so this <span> isn't auto-blockified —
     without display: block, nowrap + text-overflow: ellipsis has no effect on
     a plain inline box (see the .v3-tile .bar fix in components.css for the
     more dramatic version of this same class of bug). */
  display: block;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-cat .foot .ct {
  margin-top: 2px;
  font-weight: var(--weight-bold);
  font-size: 12px;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------
   Responsive — 3-up down to 1-up, matching the shared .v3-tiles/.v3-grid
   breakpoints in components.css.
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .v3-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .v3-cat-grid { grid-template-columns: 1fr; }

  .v3-cat-head { flex-wrap: wrap; }
  .v3-swatch { min-width: 60px; max-width: 150px; height: 60px; font-size: 22px; }
  /* keeps the 8px breathing room above/below at the smaller height */
  .v3-swatch img { height: 44px; }
}