/* ==========================================================================
   Bucket-list moments, as they appear on the landing page.

   ── the tick is gone, and so is everything it paid for ──────────────────
   This was a set of dashed slots with a seal on each: nothing arrived ticked,
   the print sat at three-quarter strength and desaturated until the reader
   claimed it, and the header counted how many they had done.

   All of it went on 2026-09-06. `/bucket-list` lost its scoreboard and the trip
   pages lost this album, both on 2026-09-03, which left the landing page as the
   only place on the site still asking a returning-visitor question of a
   first-time visitor. And the reward for answering was that a photograph
   stopped being gray, which is a strange thing to charge for when the
   photographs are the best asset on the site.

   So: no seal, no score, no `localStorage`, no grayscale, and no dashed frame
   pretending the print had not been mounted yet. A photograph at full strength,
   the sentence under it, and where it happens. The section is a sample and the
   link at the end goes to `/bucket-list`, which has the search, the nine
   categories and all of them.

   Shared with nothing. One caller (partials/bucket_list.html) and one endpoint
   that re-renders the same partial, so the markup cannot drift from itself.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   THE SHEET

   The prints are mounted rather than loose. Between the two brand slabs the
   landing page runs three sections on one fill, and a third fill is what turns
   a pair of objects into a stripe -- so this one is given a material instead of
   a color: a sheet of paper laid on the field, with the twelve numbered frames
   on it. It is white where the field under it is warmed toward the pine, which
   is the whole of how it shows; in dark it is the card color on the page
   color, same object, same hairline.

   Nothing is printed on the sheet. It wore a mono strip in the mock email's
   header form for a while, naming itself, which is a label sitting on top of
   the thing it labels and the same fault as the eyebrows the landing page
   already threw out.
   ────────────────────────────────────────────────────────────────────────── */

.bt-sheet {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: clamp(12px, 1.4vw, 20px);
    overflow: hidden;
    /* The same lift the slabs get, at about half. A sheet of paper on paper is
       a hairline and a shadow; without the shadow it is a box. */
    box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--brand-bg) 50%, transparent);
}
.bt-sheet #bt-moments { padding: clamp(14px, 1.8vw, 24px); }

/* ──────────────────────────────────────────────────────────────────────────
   THE GRID
   ────────────────────────────────────────────────────────────────────────── */

.bt-album {
    display: grid; gap: 18px 16px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.bt-slot {
    display: block; text-decoration: none; color: inherit;
    /* No border, no padding, no rotation. The slot is the photograph and the
       words under it; anything drawn round them was scenery for the seal. */
}
.bt-slot, .bt-slot:hover, .bt-slot:focus-visible { color: inherit; }
.bt-slot:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; border-radius: 12px; }
.bt-slot:hover .bt-text { color: var(--accent-color); }

.bt-print {
    position: relative; display: block;
    aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
    background: var(--bg-tertiary); margin-bottom: 11px;
}
/* Two classes deep on purpose. The tour page's own content reset used to be
   `.tour img { height:auto }`, one class and one type, which tied a
   one-class-one-type selector and won on source order. That reset is scoped
   now, but this component does not get to assume it. */
.bt-slot .bt-print img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.bt-slot:hover .bt-print img { transform: scale(1.045); }
/* Just enough shade in the corner for the number to hold over a bright sky. */
.bt-print::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 34%);
}
.bt-print.is-empty {
    border: 1.5px dashed var(--border-color); background: transparent;
}
.bt-print.is-empty::after { display: none; }

.bt-no {
    position: absolute; bottom: 8px; left: 10px; z-index: 3;
    font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
    letter-spacing: .12em; color: var(--white);
}
.bt-print.is-empty .bt-no { color: var(--text-muted); }

.bt-text {
    display: block; font-size: .95rem; font-weight: 650; line-height: 1.34;
    letter-spacing: -.012em;
    transition: color .16s ease;
    /* No clamp. These are short sentences whose last word is usually the point --
       "at sunrise", "650m above the fjord" -- so the slot grows instead. */
}
.bt-meta {
    display: block; margin-top: 5px;
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .bt-album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
    .bt-text { font-size: .87rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bt-slot .bt-print img, .bt-slot:hover .bt-print img { transition: none; transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   The way through

   Not "show me more". The window used to page forward through the catalog
   twelve at a time, which made this section a worse version of the page it is
   supposed to hand over to. `/bucket-list` has the search, the nine categories
   and every one of them.
   ────────────────────────────────────────────────────────────────────────── */

.bt-more-row {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 26px;
}
.bt-all {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 20px;
    background: transparent; text-decoration: none;
    border: 1px solid var(--border-color); border-radius: 999px;
    color: var(--text-primary);
    font-size: .85rem; font-weight: 700;
    transition: border-color .18s ease, color .18s ease, gap .18s ease;
}
.bt-all:hover, .bt-all:focus-visible {
    border-color: var(--accent-color); color: var(--accent-color); gap: 14px;
}
.bt-all svg {
    width: 15px; height: 15px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .bt-all, .bt-all:hover { transition: none; gap: 9px; }
}