/* ============================================================
   Buckettrips — Out of Office, the index (/blog and the archives)

   FIN, from `docs/FILTERING.md`, ported from the drawing in
   `static/mockups/final.html`: its `.mast.masthead` and `.mh-*` rules are the
   head, its `.cards`/`.acard` rules are the results. Every number below — the
   paddings, the type sizes, the mask's four stops — is that file's, moved
   across and namespaced. It is not a second derivation from the prose.

   WHAT WAS HERE, AND WHY IT WENT.

   A photograph as the ground with a wash over it for white type, a question
   set on it, and then five rows of controls: kind pills, the eight
   most-written-about countries as pills with every other country behind a
   disclosure with its own find box, season pills and a bookable checkbox. The
   photograph and the question are what the trip search looks like, so having
   them here was the surest way to confuse the two pages; the five rows are the
   wall the lab was opened to remove. Nothing shows now until something is
   chosen, and what is chosen is a pill under the field.

   THE THREE THINGS THIS FILE STILL DECIDES.

   The site's own type. The lab set Newsreader for every headline; `blog.css`
   spent three attempts arriving at the opposite conclusion and wrote it down —
   the journal is part of BucketTrips, BucketTrips is Inter, and a reader moving
   from a trip page to an article should not feel the floor change. So the
   editorial feel is made with weight, scale and rules, which is the same
   argument `docs/FILTERING.md` makes. A third face is Kim's call; see
   `docs/FONTS.md`.

   Accent from the token. Accent is a user setting (settings-fab.css ships
   four), so anything that means "chosen" reads var(--accent-color) and nothing
   here hard-codes a color. `palette.css` is the only file that declares one.

   The head is paper, in both modes. It was dark in both modes when it was a
   masthead over an image and the type had to be white on it. It is not that
   any more: the type is the page's own text color on the page's own ground,
   and the photograph is texture behind it faded to a ninth of its strength by
   the time it reaches a word.
   ============================================================ */

/* ════════════════════════════════════════════════════════════════
   THE MASTHEAD
   The name at newspaper size, a dateline, a heavy rule, and the field.
   No crumb, no question, no banner, and no kind of piece, which is the
   writer's and not the reader's (docs/BLOG.md §3): above the results the journal shares nothing
   with `/trips` and `/bucket-list` but the field itself.
   ════════════════════════════════════════════════════════════════ */

/* The site's ground is `--bg-secondary`, and the footer carries `mt-5`, so
   under a white results area 48px of gray showed between the last card and the
   footer -- a band of another page's color with nothing in it. The journal is
   paper from the bar down, so it says so here rather than patching the gap. */
body.bx-page { background: var(--bg-primary); }

.bx-mh { background: var(--bg-primary); }

/* Bootstrap's `.container` is 1320px, and the journal drawn across it is not
   the journal in `final.html`: three cards became three very wide cards and the
   lead's photograph grew until it was the page. This is the 1120 the landing
   page draws its pictures in, so a page of photographs is as wide here as it is
   there and no wider. Everything is in it, the photograph included: against a
   left margin the words already have, a picture that runs out of the page reads
   as a banner rather than as the top of a page somebody is reading.

   The gutter is 16px a side rather than Bootstrap's 12, the least a phone
   needs between a card's edge and the glass. `.bx-mh-shot` insets by the same
   variable, so the picture's edges stay on the type's. */
.bx-mh .container, .bx-body .container { max-width: 1120px; --bs-gutter-x: 2rem; }

/* The photograph's block, which the picture bleeds out of and the rule stops.
   Positioned so the picture can reach the edges of the page rather than the
   edges of the container the words are in. */
/* The band is `.bx-mh-top`; the words sit on its floor and the picture fills
   it. Both have to happen in that order: bottom-aligning the container the
   picture now lives in shrank it to the height of two lines of type, so the
   photograph became an 88px letterbox with 84px of paper above it -- which
   read as a margin nobody asked for and a hammock nobody could see. So the
   container stretches, and the bottom-aligning moves inside it. */
.bx-mh-top { position: relative; display: flex; align-items: stretch; }
/* The height is the picture's. A journal with nothing photographed yet gets
   the name, the dateline and the rule, rather than 172px of paper above them. */
.bx-mh.has-shot .bx-mh-top { min-height: 172px; }
.bx-mh-top > .container {
    position: relative; width: 100%;
    display: flex; align-items: flex-end;
}
.bx-mh-words { position: relative; z-index: 1; max-width: 52%; padding: 24px 0 4px; }

.bx-mh-name {
    font-size: 2.5rem; font-weight: 800; letter-spacing: -.055em; line-height: .98;
    margin: 0; color: var(--text-primary);
    display: flex; align-items: center; gap: 12px;
    /* A shelf's name is a country's, and some of them are long: at 320px in
       60% of the width, "Bosnia and Herzegovina" has to be able to break. */
    min-width: 0; overflow-wrap: break-word;
}
.bx-mh-flag { width: .78em; height: .78em; flex: 0 0 auto; }

.bx-mh-line {
    margin: 7px 0 0; font-family: var(--font-mono); font-size: .6rem;
    letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
}
/* The wordmark in the bar is BucketTrips on every page. "Out of Office" is a
   masthead word, not a second logo, and this line says which. */
.bx-mh-line b { color: var(--text-secondary); font-weight: 700; }
/* On a shelf the journal's name is the way back to all of it. */
.bx-mh-line b a { color: inherit; text-decoration: none; }
.bx-mh-line b a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* One line under the dateline on a shelf, saying what the shelf holds. The
   journal itself does not get one: an index that explains itself to somebody
   already reading it is the standfirst this design took out. */
.bx-mh-blurb {
    margin: 9px 0 0; max-width: 52ch;
    font-size: .84rem; line-height: 1.55; color: var(--text-secondary);
}

/* ── the picture ──
   J2 from the drawing: run edge to edge, and faded out to the left by one long
   ramp on the picture itself rather than by a wash over it. The ramp reaches
   only 12% by the time it passes the words, which is the number that decides
   whether this is a masthead or the trips banner again. It stops at the rule,
   so the field is never touched. The mask is on the outside, the crop on the
   image, where `adjust_style` writes the focal point set in the admin. The
   picture is shown the way round it is in the library; one that reads better
   mirrored is flipped there (Media, Flip left to right). */
.bx-mh-shot {
    /* Inside the container, so the two side margins match the words'. The
       horizontal inset cancels the gutter Bootstrap pads the container with,
       so the picture's edges line up with the type's rather than sitting a
       gutter proud of it. */
    position: absolute; z-index: 0; pointer-events: none;
    top: 0; bottom: 0;
    left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    -webkit-mask-image: linear-gradient(to right, transparent 26%, rgba(0,0,0,.12) 53%, rgba(0,0,0,.55) 76%, #000 95%);
            mask-image: linear-gradient(to right, transparent 26%, rgba(0,0,0,.12) 53%, rgba(0,0,0,.55) 76%, #000 95%);
}
.bx-mh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Heavy on purpose. It is the one piece of furniture that says "publication"
   and it costs nothing to keep consistent. */
.bx-mh-rule { height: 3px; background: var(--text-primary); margin-top: 13px; }

/* ── the field ──
   Small and at the end of the row under the rule, rather than large under a
   headline. The pills it grows drop to a row of their own across the full width
   underneath, so a picked country does not change the height of the field. */
.bx-mh .bt-filter {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: center; column-gap: 16px; margin: 12px 0 0; position: relative;
}
/* Hidden inputs in a grid would each be handed a cell. They still submit. */
.bx-mh .bt-carry { display: none; }

/* The field, small: this is a masthead and the field is a tool on it rather
   than the question the page is asking. */
.bx-mh .bt-field {
    grid-row: 1; grid-column: 2;
    border-radius: 50px; padding: 0 12px; font-size: .84rem;
}
.bx-mh .bt-field .bt-q { padding: 8px 4px; font-size: .84rem; }
.bx-mh .bt-add { font-size: .7rem; padding: 3px 9px; }
.bx-mh .bt-pills { grid-row: 2; grid-column: 1 / -1; margin: 9px 0 0; }

/* ════════════════════════════════════════════════════════════════
   RESULTS — cards, because a piece is chosen on its photograph
   ════════════════════════════════════════════════════════════════ */
/* No padding at the foot: the footer's own 64px margin is the one gap between
   the last card and it, the size of the landing page's gap between sections.
   With padding here as well the two stacked to 128px of empty paper. */
.bx-body { padding: 6px 0 0; background: var(--bg-primary); }

.bx-bar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    font-size: .85rem; color: var(--text-secondary); margin: 12px 0;
}
.bx-count strong { color: var(--text-primary); font-weight: 700; }
.bx-where { color: var(--text-muted); }

/* ── SORT ──
   Beside the results it orders, not down among the filters that decide what
   the results are. One button naming the order the list is in and the other
   four behind it, because five links in a row wrapped to two lines at any
   width worth having and read as navigation. The same drawing `/trips` uses,
   and `data-bt-sheet` hands it to the filter control at phone width so it
   comes up as the sheet rather than as a menu in the corner. */
.bx-sort { position: relative; }
.bx-sort > summary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 50px;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    font-size: .76rem; color: var(--text-secondary);
    cursor: pointer; list-style: none; white-space: nowrap;
}
.bx-sort > summary::-webkit-details-marker { display: none; }
.bx-sort > summary:hover { border-color: var(--accent-color); }
.bx-sort > summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.bx-sort > summary b { color: var(--text-primary); font-weight: 600; }
.bx-sort-label {
    font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-muted); font-family: var(--font-mono);
}
.bx-sort-car {
    width: 11px; height: 11px; opacity: .6;
    fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
}
.bx-sort[open] > summary .bx-sort-car { transform: rotate(180deg); }

.bx-sort-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    min-width: 210px; padding: 5px;
    background: var(--bg-elevated); border: 1px solid var(--border-color);
    border-radius: 12px; box-shadow: 0 16px 48px var(--card-shadow);
    display: flex; flex-direction: column;
}
.bx-sort-opt {
    font-size: .82rem; font-weight: 500;
    padding: 8px 10px; border-radius: 8px;
    text-decoration: none; white-space: nowrap;
}
.bx-sort-opt, .bx-sort-opt:hover, .bx-sort-opt:focus-visible { color: var(--text-primary); }
.bx-sort-opt:hover { background: var(--bg-secondary); }
.bx-sort-opt:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.bx-sort-opt.is-on, .bx-sort-opt.is-on:hover { color: var(--accent-color); font-weight: 600; }

/* ── THE CARDS ──
   A route is compared on price, length and date in columns you read down, so
   `/trips` is rows. A piece is chosen on its photograph and its title, so this
   is cards, with the newest leading across the full width and carrying its
   standfirst. One control, three result shapes. */
.bx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.bx-card {
    display: flex; flex-direction: column; gap: 9px; min-width: 0;
    color: inherit; text-decoration: none;
}
.bx-shot {
    display: grid; place-items: center;
    aspect-ratio: 16 / 10; border-radius: 11px; overflow: hidden;
    background: var(--bg-tertiary); color: var(--text-muted);
}
.bx-shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.bx-card:hover .bx-shot img { transform: scale(1.045); }
.bx-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.bx-eyebrow {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: .58rem; letter-spacing: .11em;
    text-transform: uppercase; color: var(--accent-color); font-weight: 700;
}
.bx-eyebrow img { width: 12px; height: 12px; }
.bx-title {
    font-size: .94rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.28;
    color: var(--text-primary);
}
.bx-card:hover .bx-title { color: var(--accent-color); }
.bx-dek { font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.bx-sig {
    font-family: var(--font-mono); font-size: .6rem;
    color: var(--text-muted); letter-spacing: .03em;
}
.bx-sig em { font-style: normal; color: var(--accent-color); }

/* The lead is separated from the row of three under it by a rule of its own,
   so it reads as the top of the page rather than as a card that grew. */
.bx-card.is-lead {
    grid-column: 1 / -1; flex-direction: row; gap: 18px; align-items: center;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
}
.bx-card.is-lead .bx-shot { flex: 0 0 46%; aspect-ratio: 16 / 9; }
.bx-card.is-lead .bx-title { font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.16; }

/* ── PAGER ──
   Numbered rather than one step at a time. "Older" never says how far the
   archive goes, and a reader who wants page six has to click five times. */
.bx-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 28px; flex-wrap: wrap;
}
.bx-pager-link {
    border: 1px solid var(--border-color); background: var(--card-bg);
    border-radius: 10px; padding: 9px 20px;
    font-size: .82rem; font-weight: 600; color: var(--text-primary) !important;
    text-decoration: none;
}
.bx-pager-link:hover { border-color: var(--accent-color); color: var(--accent-color) !important; }
.bx-pnums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bx-pnum {
    display: grid; place-items: center; min-width: 34px; height: 34px;
    padding: 0 9px; border-radius: 9px; text-decoration: none;
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--text-secondary); border: 1px solid transparent;
}
.bx-pnum:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.bx-pnum.is-on {
    color: var(--text-primary); border-color: var(--border-color);
    background: var(--bg-tertiary); font-weight: 600;
}
.bx-pnum-gap { padding: 0 3px; color: var(--text-muted); }

/* ── EMPTY ──
   Every way out is read off the facet counts, so none of them is another
   nothing. That is the whole difference between an empty state and an apology. */
.bx-empty {
    text-align: center; padding: 52px 22px;
    background: var(--card-bg); border: 1px dashed var(--border-color); border-radius: 14px;
}
.bx-empty h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.bx-empty p {
    font-size: .89rem; line-height: 1.6; color: var(--text-secondary);
    margin: 0 auto 18px; max-width: 52ch;
}
.bx-outs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bx-outs a {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--border-color); background: var(--bg-secondary);
    border-radius: 50px; padding: 8px 16px;
    font-size: .79rem; color: var(--text-secondary) !important; text-decoration: none;
}
.bx-outs a:hover { border-color: var(--accent-color); color: var(--accent-color) !important; }
.bx-outs a i { font-style: normal; font-family: var(--font-mono); font-size: .68rem; opacity: .6; }
.bx-outs a.is-clear {
    border-color: var(--accent-color); color: var(--accent-color) !important; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   NARROW
   700/701 is the pair `filter.css` and `trips.css` already use, and a
   breakpoint pair has to meet: this is the width at which the modal
   becomes a sheet, so it is the width at which the row becomes a stack.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .bx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .bx-mh.has-shot .bx-mh-top { min-height: 150px; }
    .bx-mh-words { max-width: 60%; padding-top: 20px; }
    .bx-mh-name { font-size: 1.42rem; gap: 8px; }
    .bx-mh-line { line-height: 1.5; }
    /* Steeper than the desktop's, because 375px has to hold the same words in
       the same clear left third: the ramp is at 9% where the type ends against
       12% on a wide screen. */
    .bx-mh-shot {
        -webkit-mask-image: linear-gradient(to right, transparent 40%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.5) 82%, #000 97%);
                mask-image: linear-gradient(to right, transparent 40%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.5) 82%, #000 97%);
    }

    .bx-mh .bt-filter { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .bx-mh .bt-field { grid-row: 1; grid-column: 1; }
    .bx-mh .bt-pills { grid-row: 2; grid-column: 1; margin: 9px 0 0; }
    .bx-mh-rule { margin-top: 11px; }

    .bx-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .bx-card.is-lead { flex-direction: column; gap: 9px; align-items: stretch; }
    .bx-card.is-lead .bx-shot { flex: none; aspect-ratio: 16 / 10; }
    .bx-card.is-lead .bx-title { font-size: 1.1rem; }
    .bx-bar { gap: 10px; margin: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bx-shot img { transition: none; }
    .bx-card:hover .bx-shot img { transform: none; }
}