/* Samlingar (/butiken/samlingar, /butiken/samling/<adress>) - src/samlingar/ */

/* ------------------------------------------------------------ the list of collections */
.sam-list { list-style: none; padding: 0; margin: 8px auto 48px; max-width: 1000px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sam-card { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px; color: inherit; text-decoration: none; }
.sam-card:hover, .sam-card:focus-visible { border-color: var(--accent-line); }
.sam-card h2 { margin: 0; font-size: 26px; line-height: 1.2; color: var(--ink); }
.sam-card p { margin: 10px 0 0; color: var(--muted); }
.sam-card .sam-count { margin-top: 14px; color: var(--gold-text); font-weight: 600; }
.sam-more { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------ one collection: a timeline of small tiles */
.sam-results .result-count { margin-bottom: 12px; }

/* The jump bar by decade stays under the top of the window while the timeline scrolls. */
.sam-jumps { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: 0 0 18px; background: var(--cream); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.sam-jumps a { flex: none; padding: 5px 12px; font-size: 16px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.sam-jumps a:hover, .sam-jumps a:focus-visible { border-color: var(--accent-line); color: var(--maroon); }

.sam-timeline { --rail: 22px; --p: 0%; position: relative; padding-left: 52px; }
.sam-rail { position: absolute; left: var(--rail); top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.sam-rail-fill { width: 100%; height: var(--p); background: var(--gold); }

.sam-node { position: relative; margin: 0 0 20px; scroll-margin-top: 64px; }
.sam-dot { position: absolute; left: -41px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); box-sizing: border-box; transition: background .3s, transform .3s; }
.sam-node-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 8px; }
.sam-year, .sam-node-head h2.sam-label { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1; font-weight: 600; color: var(--gold-text); }
.sam-node-head h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.sam-note { font-size: 15px; color: var(--soft); line-height: 1.3; }

/* Small tiles: a cover of 56x75 and two or three lines beside it. */
.sam-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px 18px; }
.sam-book { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px; margin: -6px; color: inherit; text-decoration: none; border-radius: 4px; }
.sam-book:hover, .sam-book:focus-visible { background: var(--card); }
.sam-cover { display: block; width: 56px; height: 75px; }
.sam-cover .cover { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.sam-cover .cover--none { padding: 5px; border-width: 3px; }
.sam-cover .cover--none .cover-title { font-size: 11px; }
.sam-cover .cover--none .cover-author { display: none; }
.sam-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sam-title { font-size: 18px; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sam-book:hover .sam-title { color: var(--maroon); }
.sam-author { font-style: italic; color: var(--muted); font-size: 15px; }
.sam-facts { color: var(--soft); font-size: 14.5px; margin-top: 1px; }
.sam-price { margin-top: 2px; font-weight: 600; color: var(--maroon); font-size: 16px; }

/* Appearing as you scroll: only when the script has run, so without it everything is simply there. */
.sam-js .sam-node { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.sam-js .sam-node.in { opacity: 1; transform: none; }
.sam-js .sam-node .sam-book { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.sam-js .sam-node.in .sam-book { opacity: 1; transform: none; }
.sam-js .sam-node.in .sam-book:nth-child(2) { transition-delay: .06s; }
.sam-js .sam-node.in .sam-book:nth-child(3) { transition-delay: .12s; }
.sam-js .sam-node.in .sam-book:nth-child(4) { transition-delay: .18s; }
.sam-js .sam-node.in .sam-book:nth-child(n+5) { transition-delay: .24s; }
.sam-js .sam-node.in .sam-dot { background: var(--gold); transform: scale(1.15); }

/* Wide screens: the author sits to the left of the tiles, so a node with one or two books is one short row. */
@media (min-width: 900px) {
  .sam-node { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .sam-node-head { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; }
  .sam-books { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (max-width: 600px) {
  .sam-timeline { --rail: 8px; padding-left: 30px; }
  .sam-dot { left: -28px; }
  .sam-books { grid-template-columns: 1fr; gap: 10px; }
  .sam-year, .sam-node-head h2.sam-label { font-size: 22px; }
  .sam-node-head h2 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .sam-js .sam-node, .sam-js .sam-node .sam-book, .sam-dot { transition: none; }
}