/* ==========================================================================
   SHOP COLLECTIONS
   Loaded after gear.css, which owns the product-card language this borrows.

   The banner is original illustration, so it is treated as atmosphere and
   never as evidence: the heading sits over it in real HTML, and a credit line
   under it says plainly that it is a drawing rather than a photograph of
   anything for sale. The dark left third of each banner is where the text goes.
   ========================================================================== */

/* ------------------------------- the items ------------------------------- */
.col__grid {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: clamp(0.875rem, 1.8vw, 1.25rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px)  { .col__grid:not([data-n="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .col__grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* A grid must fit its count. Board 13 draws its single item at one third of
   the row with two thirds of the row empty, which is the exact shape the brief
   names — so one item is the wide feature the brief asks for instead: the
   plate keeps the left, the card's own content keeps the right, and nothing
   about that content changes. */
@media (min-width: 820px) {
  .col__grid[data-n="1"] .col__card {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .col__grid[data-n="1"] .col__plate { grid-column: 1; grid-row: 1; height: 100%; min-height: 11rem; }
  .col__grid[data-n="1"] .col__nophoto { grid-column: 1; grid-row: 2; padding-bottom: 1rem; }
  .col__grid[data-n="1"] .col__b { grid-column: 2; grid-row: 1 / span 2; }
  .col__grid[data-n="1"] .col__go { width: auto; min-width: 16rem; }
}


/* plate · the no-photograph line · the body, and the body is what stretches
   so three cards line their tables up. */
.col__card {
  display: grid; grid-template-rows: auto auto 1fr;
  height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-fast, 180ms) ease, transform var(--dur-fast, 180ms) ease;
}
.col__item:hover .col__card { border-color: rgb(var(--a-rgb) / 0.5); transform: translateY(-2px); }

.col__plate {
  display: grid; align-content: center; justify-items: start; gap: 0.45rem;
  height: 8.5rem; padding: 1.1rem 1.15rem;
  text-decoration: none; color: inherit;
  /* Board 12 paints this plate almost to the accent itself — it is the block
     of colour the page is built around. At .78 fading to .28 it read half as
     colourful as the board draws it. */
  background:
    radial-gradient(130% 120% at 88% 110%, rgb(var(--a-rgb) / .55) 0%, transparent 62%),
    linear-gradient(140deg, rgb(var(--a-rgb) / .98), rgb(var(--a-rgb) / .72) 52%, rgb(var(--a-rgb) / .40) 100%);
}
.col__img { width: 100%; height: 100%; object-fit: contain; }
/* Board: the maker leads the plate, the format sits under it with a short
   rule in the collection's accent. */
.col__maker { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.col__fmt {
  font-size: 0.9375rem; color: rgba(255,255,255,.94); text-shadow: 0 1px 4px rgba(0,0,0,.75);
  padding-bottom: .4rem;
  border-bottom: 3px solid var(--a); justify-self: start;
}
.col__nophoto { margin: 0; padding: .55rem clamp(1rem, 2vw, 1.3rem) 0; font-size: 0.75rem; color: #8A949A; }

/* A column, so the button and its checked-on line sit at the foot of every
   card whatever length the reason to choose runs to. */
.col__b { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1rem, 2vw, 1.3rem); }
.col__t { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; }
.col__tl { color: var(--cream); text-decoration: none; }
.col__tl:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The board's table: one row per fact, ruled, label left. */
.col__rows { margin: .2rem 0 0; display: grid; gap: 0; }
.col__rows > div {
  display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: .8rem;
  align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--line);
}
.col__rows dt { color: #8A949A; font-size: 0.8125rem; }
.col__rows dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--cream); }
.col__note { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: var(--cream-dim); max-width: 42ch; }
.col__notel {
  display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--a); margin-bottom: 0.15rem;
}
.col__foot { margin-top: auto; padding-top: 0.5rem; }
/* Full width, as the board draws it. */
.col__go { min-height: 46px; width: 100%; justify-content: center; }
.col__chk { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--cream-dim); }
.col__foot2 {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
  font-size: 0.875rem; line-height: 1.6; color: var(--cream-dim);
}
.col__foot2i { flex: none; width: 26px; height: 26px; display: inline-flex; }
.col__foot2i svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .col__card { transition: none; }
  .col__item:hover .col__card { transform: none; }
}
/* On a phone the banner is cropped harder and the wash covers the full width,
   because the text no longer has a dark third to sit in. */
@media (max-width: 720px) {
  .col__rows > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* ---- the strip on Gear and Safehouse ------------------------------------ */
.collstrip__g {
  list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: clamp(0.875rem, 1.6vw, 1.1rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .collstrip__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.collstrip__a {
  display: grid; align-content: start; gap: 0.4rem;
  height: 100%;
  min-height: 44px;
  padding: clamp(1.05rem, 2vw, 1.4rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(150deg, rgb(var(--a-rgb) / 0.12), rgba(0,0,0,0.26) 74%), var(--surface);
  text-decoration: none;
  transition: border-color var(--dur-fast, 180ms) ease, transform var(--dur-fast, 180ms) ease;
}
.collstrip__a:hover, .collstrip__a:focus-visible {
  border-color: rgb(var(--a-rgb) / 0.55); transform: translateY(-2px);
}
.collstrip__t { font-size: 1.0625rem; font-weight: 700; color: var(--cream); }
.collstrip__l { font-size: 0.875rem; line-height: 1.55; color: var(--cream-dim); max-width: 34ch; }
.collstrip__n {
  margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--a);
}
@media (prefers-reduced-motion: reduce) {
  .collstrip__a { transition: none; }
  .collstrip__a:hover, .collstrip__a:focus-visible { transform: none; }
}


/* ---- the collection card's toggle, matching every other product card ---- */
.col__more { margin: .1rem 0 .2rem; }
.col__more > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
  min-height: 44px; color: var(--cream-dim); font-size: .875rem;
}
.col__more > summary::-webkit-details-marker { display: none; }
.col__more > summary::before {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.col__more[open] > summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.col__more > summary:hover { color: var(--cream); }