/* "Browse the shelf" — Cms\View\TaleShelfView, on the front page (HomeLandingView).
   The look is /home5's shelf (tilted, overlapping covers standing on a
   wooden board); the additions are the arrow buttons, always-visible titles
   where there is no hover, and CSS variables so a dark page can re-tint it.
   Everything is scoped under .tshelf. */

.tshelf {
  --tshelf-heading: var(--plum-dark);
  --tshelf-lead: var(--ink-soft);
  --tshelf-link: var(--plum);
  --tshelf-arrow-bg: var(--paper);
  --tshelf-arrow-ink: var(--plum);
  --tshelf-arrow-line: var(--border);
  --tshelf-board-1: #c9925a;
  --tshelf-board-2: #a8703c;
  --tshelf-board-shadow: rgba(83, 56, 114, .35);
  --tshelf-cover-shadow: rgba(60, 40, 80, .2);
  padding: 8px 0 56px;
}
.tshelf-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tshelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tshelf h2 { font-family: var(--display); font-size: 26px; line-height: 1.15; margin: 0; color: var(--tshelf-heading); }
.tshelf-lead { margin: 8px 0 0; font-size: 15px; color: var(--tshelf-lead); max-width: 46ch; }

.tshelf-arrows { display: none; gap: 8px; flex: none; }
.tshelf-arrow {
  width: 42px; height: 42px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--tshelf-arrow-bg); color: var(--tshelf-arrow-ink);
  border: 1px solid var(--tshelf-arrow-line); box-shadow: var(--shadow-sm);
  transition: transform .15s, opacity .15s;
}
.tshelf-arrow:hover:not(:disabled) { transform: translateY(-2px); }
.tshelf-arrow:disabled { opacity: .35; cursor: default; }
.tshelf-arrow:focus-visible, .tshelf-scroll:focus-visible, .tshelf-cover:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.tshelf-scroll { overflow-x: auto; padding: 30px 6px 20px; margin: 0 -6px; scrollbar-width: thin; }
.tshelf-row { list-style: none; margin: 0; padding: 0 8px; display: flex; align-items: flex-end; gap: 2px; width: max-content; }
.tshelf-item {
  --tilt: -4deg;
  flex: none; width: 112px; margin-left: -14px;
  transform: rotate(var(--tilt)) translateY(0);
  transition: transform .18s;
}
.tshelf-item:first-child { margin-left: 0; }
.tshelf-item:nth-child(6n+1) { --tilt: -3deg; }
.tshelf-item:nth-child(6n+2) { --tilt: 2deg; transform: rotate(var(--tilt)) translateY(-10px); }
.tshelf-item:nth-child(6n+3) { --tilt: -1.5deg; transform: rotate(var(--tilt)) translateY(4px); }
.tshelf-item:nth-child(6n+4) { --tilt: 3deg; }
.tshelf-item:nth-child(6n+5) { --tilt: -2.5deg; transform: rotate(var(--tilt)) translateY(-6px); }
.tshelf-item:nth-child(6n+6) { --tilt: 1.5deg; transform: rotate(var(--tilt)) translateY(2px); }
.tshelf-item:hover, .tshelf-item:focus-within { transform: rotate(0) translateY(-14px); z-index: 2; }
.tshelf-cover {
  display: block; position: relative; border-radius: 5px 9px 9px 5px; overflow: hidden;
  box-shadow: -3px 0 0 rgba(0, 0, 0, .12), 0 10px 20px var(--tshelf-cover-shadow);
  border-left: 4px solid rgba(0, 0, 0, .18);
}
.tshelf-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.tshelf-band {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px;
  background: linear-gradient(0deg, rgba(20, 10, 30, .88), transparent);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1.25;
  opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s;
}
.tshelf-item:hover .tshelf-band, .tshelf-cover:focus-visible .tshelf-band { opacity: 1; transform: translateY(0); }
/* No hover on a phone: the title is simply always there. */
@media (hover: none) { .tshelf-band { opacity: 1; transform: none; } }

.tshelf-board {
  height: 14px; margin: -2px 0 0; border-radius: 3px;
  background: linear-gradient(180deg, var(--tshelf-board-1), var(--tshelf-board-2));
  box-shadow: 0 10px 16px -6px var(--tshelf-board-shadow);
}
.tshelf-more { text-align: center; margin: 22px 0 0; }
.tshelf-more a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 14px; color: var(--tshelf-link); text-decoration: none;
}
.tshelf-more a:hover { text-decoration: underline; }

@media (min-width: 860px) {
  .tshelf h2 { font-size: 32px; }
  .tshelf-arrows { display: flex; }
  .tshelf-scroll { padding: 44px 6px 26px; }
  .tshelf-row { gap: 4px; }
  .tshelf-item { width: 138px; margin-left: -20px; }
  .tshelf-item:hover, .tshelf-item:focus-within { transform: rotate(0) translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
  .tshelf-item, .tshelf-band, .tshelf-arrow { transition: none; }
}