/* =====================================================================
   The Collectorium — Item view (v3)
   ---------------------------------------------------------------------
   templates/item/view/view.html.twig — the dedicated item page: art
   column + info column, the big stepper, the full-width Want toggle,
   notes, and the variant rows.

   Prefixed `.v3-item-*`: every pages/*.css file is imported into the same
   `pages` layer (public/css/app.css), so a generic name here would collide
   with another page's on every load, not just this page's.
   ===================================================================== */

/* -------------------------------------------------------------------
   Layout — two columns on desktop, one below 720px.
   ------------------------------------------------------------------- */
/* The page gutter is `.main`'s (public/css/v3/shell.css), as it is on every
   other v3 page — this only narrows the reading column within it. */
.v3-item {
  max-width: 1000px;
  margin: 0 auto;
}

.v3-item-cols {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

/* -------------------------------------------------------------------
   Art column
   ------------------------------------------------------------------- */
.v3-item-art .frame {
  display: grid;
  place-items: center;
  overflow: hidden;
  max-width: 420px;
  /* Holds the column open when the src is dead — see the partial. Without it
     the frame collapses and the info column slides left over the empty space. */
  min-height: 240px;
  border-radius: var(--radius-lg);
  background: var(--circle-chrome);
  /* Hairline as an inset shadow, not a border: no-image.jpg is flat white,
     and an inset rides on top of the pixels instead of adding a box around
     them — so the edge reads the same on either theme. */
  box-shadow: inset 0 0 0 1px var(--border);
}

.v3-item-art .frame img {
  display: block;
  width: 100%;
  height: auto;
}

.v3-item-credit {
  margin-top: var(--space-2);
  color: var(--fg-tertiary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}

/* -------------------------------------------------------------------
   Info column
   ------------------------------------------------------------------- */
.v3-item-info h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--type-title);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.v3-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--fg-tertiary);
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* The separator is drawn rather than typed, so it never shows up on its own
   when the item has no number, or no collection to link to. */
.v3-item-meta > * + *::before {
  content: '·';
  margin-right: var(--space-2);
  color: var(--fg-quaternary);
}

.v3-item-desc {
  margin-top: var(--space-4);
  color: var(--fg-secondary);
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
}

/* -------------------------------------------------------------------
   Big stepper + Want toggle.

   This is `.v3-mini-stepper` — the same fragment the ItemCard renders,
   because stepper.js swaps that markup in over AJAX and a different shape
   here would be replaced by the card's on the first press. The wrapper is
   ours and survives the swap (only the fragment's innerHTML is replaced),
   so scoping the size to it is what keeps the control big afterwards.

   Since TC-419 there is only one shape to size: −/count/+ always, reading 0
   when the viewer has none, with − disabled rather than absent. (It used to
   swap to a single "Got" toggle at zero, so this block had to dress both.)
   ------------------------------------------------------------------- */
.v3-item-controls {
  margin-top: var(--space-6);
}

.v3-item-controls .v3-mini-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  margin-top: 0;
}

.v3-item-controls .v3-mini-stepper .step {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-blue);
  color: var(--fg-on-accent);
  font-size: 26px;
}

.v3-item-controls .v3-mini-stepper .step:hover {
  background: var(--accent-blue-hover);
}

.v3-item-controls .v3-mini-stepper .step:disabled {
  background: var(--button-disabled);
}

.v3-item-controls .v3-mini-stepper .c {
  min-width: 60px;
  font-weight: var(--weight-bold);
  font-size: 40px;
  letter-spacing: var(--tracking-tight);
}

/* Want takes the full width on its own line: `flex-basis: 100%` breaks the
   row after the stepper without needing a second wrapper in the fragment
   (which the AJAX swap would overwrite anyway). */
.v3-item-controls .v3-mini-stepper .want {
  flex-basis: 100%;
  height: 46px;
  margin-left: 0;
  border-radius: var(--radius-lg);
  font-size: 15px;
}

/* -------------------------------------------------------------------
   Notes
   ------------------------------------------------------------------- */
.v3-item-notes {
  margin-top: var(--space-6);
}

.v3-item-notes-save {
  height: 38px;
  margin-top: var(--space-3);
  padding: 0 var(--space-5);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--circle-chrome);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--duration-1), transform var(--duration-1);
}

.v3-item-notes-save:hover {
  background: var(--border);
}

.v3-item-notes-save:active {
  transform: scale(0.94);
}

.v3-item-notes-readonly {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-secondary);
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
}

/* .v3-item-suggest styled the "Suggest variant" entry point, removed with the
   suggestion feature (TC-410). */

/* -------------------------------------------------------------------
   Variants — a row each: thumb, name, own controls.
   ------------------------------------------------------------------- */
.v3-item-variants {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}

.v3-item-variants h2 {
  margin: 0 0 var(--space-4);
  color: var(--fg-tertiary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.v3-item-variant {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
}

.v3-item-variant:last-child {
  border-bottom: none;
}

.v3-item-variant .thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--circle-chrome);
  box-shadow: inset 0 0 0 1px var(--border);
}

.v3-item-variant .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-item-variant .thumb-empty {
  display: grid;
  place-items: center;
  color: var(--fg-quaternary);
}

.v3-item-variant .nm {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-item-variant .nm:hover {
  color: var(--accent-blue);
}

/* The variant's controls stay the card-sized mini stepper — the big one is
   the page subject's, and giving every row a 48px stepper would flatten the
   hierarchy the section depends on. */
.v3-item-variant .v3-mini-stepper {
  flex-shrink: 0;
  margin-top: 0;
}

/* -------------------------------------------------------------------
   Subbar pager
   ------------------------------------------------------------------- */
.v3-item-pager {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.v3-item-pager a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--fg-tertiary);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-1), color var(--duration-1);
}

.v3-item-pager a:hover {
  background: var(--circle-chrome);
  color: var(--fg);
}

/* -------------------------------------------------------------------
   Single column — the art stops leading the page and caps its own width.
   ------------------------------------------------------------------- */
@media (max-width: 720px) {
  .v3-item-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .v3-item-art .frame {
    max-width: 320px;
    margin: 0 auto;
  }

  .v3-item-pager a span {
    display: none;
  }
}

/* -------------------------------------------------------------------
   The same content, in the item panel (Web v3 · 10).

   public/js/v3/panel.js injects this page's `[data-panel-content]` node into
   a 420px panel on the collection page, so every rule above applies to it —
   including the two-column grid, which has nowhere near the room. Left alone
   it doesn't merely look cramped: the art column takes the 420px it asks for,
   the info column is what's left of it, and the item's name wraps to a
   character a line.

   These rules live here, beside the layout they answer, and not in
   components.css with the rest of the panel, because they *have* to: the
   panel's frame is a component, but this is `.v3-item-*` layout, and
   public/css/app.css declares `pages` after `components`. A components-layer
   rule cannot override a pages-layer one at any specificity — so the override
   belongs in the layer that owns what it is overriding.
   ------------------------------------------------------------------- */

/* The page centres itself in a 1000px reading column; in the panel, the panel
   is the column. */
.v3-item-panel .v3-item {
  max-width: none;
  margin: 0;
}

/* Art leads, copy follows — the same single-column stack the page itself falls
   back to below 720px, which is the width the panel effectively is. */
.v3-item-panel .v3-item-cols {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.v3-item-panel .v3-item-art .frame {
  max-width: 240px;
  margin: 0 auto;
}