/* ============================================================
   Genre Landing — Cardstock theme
   Sibling stylesheet to product_detail.css. All rules scoped
   under .ck-home (which itself sits inside .cardstock so the
   theme tokens defined there are in scope).

   Visual language:
     • paper panels with paper-2.png multiply overlay (reuse .panel)
     • burnt-orange accent for titles, slate ink for body
     • Roboto for prose, Roboto Mono for prices/counts/eyebrows
     • horizontal shelves (Netflix-style scroll) + bottom year mosaic
   ============================================================ */

.cardstock.ck-home {
  /* The cardstock theme assumes a constrained outer column; the genre
     page wants a generous max-width so 6-tile shelves can breathe. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.0em 1.4em 3em;
  display: flex;
  flex-direction: column;
  gap: 1.4em;
}

/* The genre landing's in-body .product-jumps picker was retired — year +
   release navigation now lives in the shared breadcrumb header (base.html
   .nav-breadcrumb). Its bespoke styles (including the .ck-pjump-year eyebrow)
   were removed; the breadcrumb's own .dd-yr handles the season eyebrow now. */

/* ===================================================================
   SHELF (panel) — header + horizontal scroll of tiles
   =================================================================== */
.cardstock .ck-shelf {
  padding: 1.1em 1.2em 0.9em;
}
.cardstock .ck-shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.7em;
  padding-bottom: 0.5em;
  border-bottom: 1px dashed var(--rule-soft);
}
.cardstock .ck-shelf-title {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  /* Pencil-crayon mood: very slight rotation to mirror the product
     detail page's price tilt. Anchored so the H1 stays left-flush. */
  transform: rotate(-0.4deg);
  transform-origin: left center;
  line-height: 1.15;
}
.cardstock .ck-shelf-sub {
  margin: 0.25em 0 0;
  font-size: 0.86em;
  color: var(--ink-3);
  line-height: 1.4;
}
.cardstock .ck-shelf-more {
  flex: 0 0 auto;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.25em 0;
  transition: color 140ms ease;
}
.cardstock .ck-shelf-more:hover {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cardstock .ck-shelf-scroll {
  display: flex;
  gap: 1em;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.3em 0.1em 0.8em;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(40, 40, 40, 0.30) transparent;
}
.cardstock .ck-shelf-scroll::-webkit-scrollbar { height: 8px; }
.cardstock .ck-shelf-scroll::-webkit-scrollbar-thumb {
  background: rgba(40, 40, 40, 0.30);
  border-radius: 4px;
}
.cardstock .ck-shelf-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(40, 40, 40, 0.50);
}

/* ===================================================================
   TILE — product card. Inherits paper canvas via the panel underneath;
   no per-tile chrome so the row reads as a continuous shelf of papers.
   =================================================================== */
.cardstock .ck-tile {
  flex: 0 0 220px;
  width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: transform 160ms ease;
}
.cardstock .ck-tile:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.cardstock .ck-tile-image {
  position: relative;
  aspect-ratio: 1 / 1;
  /* No tinted background or border — transparent product art floats
     directly on the panel's paper canvas. */
  background: transparent;
  border: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardstock .ck-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 1px rgba(15, 15, 15, 0.45))
    drop-shadow(0 2px 4px rgba(15, 15, 15, 0.22))
    drop-shadow(0 6px 10px rgba(10, 10, 10, 0.18))
    saturate(0.97);
  transition: transform 220ms ease;
}
.cardstock .ck-tile:hover .ck-tile-image img {
  transform: scale(1.04);
}
.cardstock .ck-tile-placeholder {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Badges over the image */
.cardstock .ck-tile-badge {
  position: absolute;
  top: 0.4em; left: 0.4em;
  padding: 0.18em 0.5em;
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.22);
}
.cardstock .ck-tile-badge-deal {
  color: #fff;
  background: var(--green);
}
.cardstock .ck-tile-eta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.32em 0.55em;
  font-family: "Roboto Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg,
    rgba(72, 88, 106, 0) 0%,
    rgba(72, 88, 106, 0.92) 70%);
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tile body — eyebrow, title, price+meta. Gap is zero so title and
   price sit flush; explicit margin-bottom on the eyebrow preserves a
   touch of breathing room between eyebrow and the title+price block. */
.cardstock .ck-tile-body {
  padding: 0.6em 0.1em 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.cardstock .ck-tile-eyebrow { margin-bottom: 0.2em; }
.cardstock .ck-tile-eyebrow {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardstock .ck-tile-title {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cardstock .ck-tile:hover .ck-tile-title { color: var(--accent-deep); }
.cardstock .ck-tile-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 0;
  flex-wrap: wrap;
}
.cardstock .ck-tile-price {
  font-family: "Roboto Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-num);
}
.cardstock .ck-tile-price.muted { color: var(--ink-3); font-weight: 500; }
.cardstock .ck-tile.is-presale .ck-tile-price { color: var(--slate); }
.cardstock .ck-tile-tag {
  font-family: "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0.1em 0.45em;
  background: rgba(40, 40, 40, 0.06);
  border-radius: 2px;
}

/* End-of-shelf "view more" tile, same footprint as a real tile so the
   row terminates evenly. Dashed border keeps it visually distinct. */
.cardstock .ck-tile-end {
  flex: 0 0 180px;
  width: 180px;
  scroll-snap-align: start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  text-align: center;
  text-decoration: none;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.18);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 1em;
  transition: color 160ms ease, background 160ms ease,
              border-color 160ms ease, transform 160ms ease;
}
.cardstock .ck-tile-end:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.34);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
}
.cardstock .ck-tile-end-arrow {
  font-family: "Roboto Mono", monospace;
  font-size: 2.2em;
  line-height: 1;
  font-weight: 500;
}
.cardstock .ck-tile-end-label {
  font-family: "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ===================================================================
   YEARS MOSAIC — multi-row grid below the shelves. Each tile renders
   a collage of the season's top hobby box images (transparent art
   layered with slight per-slot rotation, so the tile reads as a small
   scattered pile of cards). Up to 4 images per tile; CSS keys
   .ck-year-collage-1..4 against the slot index from the template.
   =================================================================== */
.cardstock .ck-years {
  padding: 1.1em 1.2em 1.2em;
}
.cardstock .ck-years-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1em;
  margin-top: 0.4em;
}
.cardstock .ck-year-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0.4em;
  background: rgba(255, 255, 255, 0.10);
  transition: border-color 200ms ease, background 200ms ease,
              transform 200ms ease;
}
.cardstock .ck-year-tile:hover {
  text-decoration: none;
  border-color: var(--rule);
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

.cardstock .ck-year-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: visible;
}
/* Each collage slot is a transparent hobby box image, absolutely
   positioned with a fixed rotation + translation so the four slots
   form a loose scattered pile. Overlap intentional — the boxes' alpha
   channels let the layers below show through. */
.cardstock .ck-year-collage-item {
  position: absolute;
  display: block;
  width: 64%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  transform-origin: center 60%;
  transition: transform 280ms ease;
  filter:
    drop-shadow(0 0 1px rgba(15, 15, 15, 0.40))
    drop-shadow(0 2px 4px rgba(15, 15, 15, 0.22))
    drop-shadow(0 8px 12px rgba(10, 10, 10, 0.20));
}
/* Slot 1 — back-left, tilted left. */
.cardstock .ck-year-collage-1 {
  top: 8%;  left: 5%;
  transform: rotate(-9deg);
  z-index: 1;
}
/* Slot 2 — back-right, tilted right. */
.cardstock .ck-year-collage-2 {
  top: 6%;  left: 31%;
  transform: rotate(7deg);
  z-index: 2;
}
/* Slot 3 — front-center, mostly upright (the "hero" box). */
.cardstock .ck-year-collage-3 {
  top: 16%; left: 18%;
  transform: rotate(-2deg);
  z-index: 4;
}
/* Slot 4 — front-right, splayed. */
.cardstock .ck-year-collage-4 {
  top: 14%; left: 38%;
  transform: rotate(11deg);
  z-index: 3;
}
/* Single-image fallback — center it, no rotation, larger crop. */
.cardstock .ck-year-collage[data-count="1"] .ck-year-collage-1 {
  top: 8%; left: 18%;
  width: 64%;
  transform: rotate(-1deg);
}
/* Two images — side-by-side mirror tilt. */
.cardstock .ck-year-collage[data-count="2"] .ck-year-collage-1 {
  top: 12%; left: 6%;  transform: rotate(-7deg);
}
.cardstock .ck-year-collage[data-count="2"] .ck-year-collage-2 {
  top: 10%; left: 30%; transform: rotate(7deg); z-index: 2;
}
/* Three images — symmetric fan: left-tilted, center, right-tilted. */
.cardstock .ck-year-collage[data-count="3"] .ck-year-collage-1 {
  top: 14%; left: 4%;  transform: rotate(-10deg); z-index: 1;
}
.cardstock .ck-year-collage[data-count="3"] .ck-year-collage-2 {
  top: 14%; left: 32%; transform: rotate(10deg);  z-index: 1;
}
.cardstock .ck-year-collage[data-count="3"] .ck-year-collage-3 {
  top: 8%;  left: 18%; transform: rotate(-1deg);  z-index: 3;
}
/* Hover: spread the pile slightly so the boxes peek out at the operator. */
.cardstock .ck-year-tile:hover .ck-year-collage-1 { transform: rotate(-13deg) translate(-6px, -2px); }
.cardstock .ck-year-tile:hover .ck-year-collage-2 { transform: rotate(11deg)  translate(6px, -2px); }
.cardstock .ck-year-tile:hover .ck-year-collage-3 { transform: rotate(-2deg)  translateY(-4px); }
.cardstock .ck-year-tile:hover .ck-year-collage-4 { transform: rotate(15deg)  translate(4px, 2px); }

/* Year title — the prominent label of the tile. Sits at the bottom of
   the collage so the scattered boxes float above it like art above a
   caption. Sized to read as the tile's actual title, not a subtitle. */
.cardstock .ck-year-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  z-index: 10;
  text-align: center;
  font-family: var(--font-stack);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  /* Slight pencil-crayon tilt to match the shelf-title rotation. */
  transform: rotate(-0.6deg);
  transform-origin: center;
  /* Multiply blend lets the year ink soak into the paper texture
     beneath, the way the price-mask does on product detail. */
  mix-blend-mode: multiply;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.cardstock .ck-year-tile:hover .ck-year-label {
  color: var(--accent-deep);
}
/* Diagonal-stripe placeholder for years with no product images. */
.cardstock .ck-year-tile.no-image .ck-year-image {
  background:
    repeating-linear-gradient(45deg,
      rgba(40, 40, 40, 0.04) 0 6px,
      transparent 6px 12px),
    rgba(40, 40, 40, 0.04);
  border-radius: 4px;
}

/* ===================================================================
   EMPTY STATE
   =================================================================== */
.cardstock .ck-empty {
  padding: 2em 1.5em;
  text-align: center;
}
.cardstock .ck-empty p { margin: 0.2em 0; }
.cardstock .ck-empty .muted { color: var(--ink-3); font-size: 0.9em; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 880px) {
  .cardstock.ck-home {
    padding: 0.8em 1em 2em;
    gap: 1em;
  }
  .cardstock .ck-shelf { padding: 0.9em 0.9em 0.7em; }
  .cardstock .ck-shelf-title { font-size: 1.15em; }
  .cardstock .ck-tile { flex: 0 0 170px; width: 170px; }
  .cardstock .ck-tile-end { flex: 0 0 140px; width: 140px; }
}
@media (max-width: 520px) {
  .cardstock .ck-shelf-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
  }
  .cardstock .ck-shelf-more { align-self: flex-end; }
}