/* ============================================================
   best.css : the /best comparison pages and their hub.
   RTL Hebrew. Uses only tokens from tokens.css so the pages
   read as part of the site rather than a bolted-on section.
   ============================================================ */

.bp-head{margin-top:var(--s-5);max-width:62ch}
.bp-head .title{margin-bottom:var(--s-4)}

/* The answer-first block. Deliberately the first prose on the page:
   a reader (and an answer engine) should get the recommendation before
   the table, not after it. */
/* No rule down the edge. A bar tacked beside a paragraph is decoration standing
   in for hierarchy; this earns its weight from size, leading and space instead. */
.bp-answer{font-size:calc(var(--fs-lead) * 1.08);line-height:1.55;color:var(--ink);
  margin:0 0 var(--s-5);max-width:54ch;font-weight:500}
.bp-meta{font-size:var(--fs-sm);color:var(--muted);margin:0}

/* ---------- comparison table ---------- */
.bp-tablewrap{margin-top:var(--s-7)}
.bp-tablewrap h2,.bp-list h2,.bp-why h2{font-size:var(--fs-h2);margin:0 0 var(--s-4)}

/* Wide content scrolls inside its own container; the page body never
   scrolls horizontally. */
.bp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.bp-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);min-width:640px}
.bp-table th,.bp-table td{padding:14px 16px;text-align:start;
  border-bottom:1px solid var(--hair);vertical-align:middle}
.bp-table thead th{font-size:var(--fs-sm);color:var(--muted);font-weight:600;
  background:var(--paper-2);white-space:nowrap}
.bp-table tbody tr:last-child th,.bp-table tbody tr:last-child td{border-bottom:0}
.bp-table tbody th{font-weight:400}
.bp-table a{color:var(--accent-ink);font-weight:700}

.bp-label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);
  letter-spacing:.02em;margin-bottom:2px}
.bp-name{display:block;font-weight:600;line-height:1.35;max-width:34ch}

/* ---------- per-pick prose ---------- */
.bp-list{margin-top:var(--s-7)}
.bp-pick{padding:var(--s-5) 0;border-bottom:1px solid var(--hair)}
.bp-pick:last-child{border-bottom:0}
.bp-pick h3{font-size:var(--fs-h4);margin:0 0 var(--s-3);line-height:1.35}
.bp-pick h3 .bp-label{display:inline-block;margin:0 0 0 8px}
.bp-take{margin:0 0 var(--s-3);line-height:1.7;max-width:68ch}
.bp-shopline{margin:0 0 var(--s-3);font-size:var(--fs-sm);color:var(--muted)}
.bp-shopline a{color:var(--accent-ink);font-weight:700}
/* Tasting notes read as text, not as a row of tinted capsules. A pill around
   every noun reads as a component kit; weight and colour rank it just as well. */
.bp-notes{font-size:var(--fs-sm);color:var(--muted)}
.bp-note{display:inline}
.bp-note+.bp-note::before{content:" · ";color:var(--line)}

/* ---------- method ---------- */
.bp-why{margin-top:var(--s-7);max-width:68ch}
.bp-why p{line-height:1.7;margin:0 0 var(--s-4)}
.bp-excluded{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- hub cards ---------- */
.bp-card .card-body{padding:var(--s-5)}
.bp-card h3{font-size:var(--fs-h4);margin:0 0 var(--s-3)}
.bp-card p{color:var(--muted);line-height:1.6;margin:0 0 var(--s-4)}

/* ---------- narrow screens ----------
   Below 720px the table becomes stacked rows: each cell carries its own
   header via data-th, so the six columns stay readable without a horizontal
   scrollbar that hides the buy link off-screen. */
@media (max-width:720px){
  .bp-scroll{border:0;background:transparent;overflow-x:visible}
  .bp-table{min-width:0;display:block}
  .bp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bp-table tbody,.bp-table tr,.bp-table th,.bp-table td{display:block;width:100%}
  .bp-table tr{background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:var(--s-4);margin-bottom:var(--s-4)}
  .bp-table tbody th{padding:0 0 var(--s-3);border-bottom:1px solid var(--hair);margin-bottom:var(--s-3)}
  .bp-table td{padding:6px 0;border-bottom:0;display:flex;justify-content:space-between;gap:12px}
  .bp-table td::before{content:attr(data-th);color:var(--muted);font-size:var(--fs-sm)}
  .bp-name{max-width:none}
}

/* ---------- hero ----------
   Beside the copy, not above it: the answer block must stay the first thing a
   reader meets, so a decorative image never pushes the recommendation down.
   Below 860px it stacks under the copy for the same reason. */
/* Deliberately NOT text-on-the-left with a panel on the right. That skeleton is
   the most over-shipped hero there is, and recolouring it does not rescue it.
   The headline and the answer own the full measure; the photograph follows as
   evidence, wide and quiet, showing the three roast levels the page compares. */
.bp-head{display:block;max-width:none}
.bp-head-copy{max-width:62ch}
.bp-hero{margin-top:var(--s-6);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-2);aspect-ratio:21/9}
.bp-hero img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:720px){.bp-hero{aspect-ratio:3/2}}

/* ---------- hub entries ----------
   Not a card grid. One entry in a three-column grid reads as a page that failed
   to load the other two. These are rows: the count carries the weight, the use
   cases tell you what is inside, and the row grows as entries are added. */
.bp-entries{margin-top:var(--s-7);border-top:1px solid var(--line);max-width:820px}
.bp-entry{display:grid;grid-template-columns:200px 1fr;gap:var(--s-5);align-items:center;
  padding:var(--s-5) 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.bp-entry:hover{background:var(--paper-2)}
.bp-entry-body{display:flex;flex-direction:column;gap:6px}
.bp-entry h2{margin:0;font-size:var(--fs-h3);line-height:1.3;font-weight:600}
.bp-entry-labels{color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.bp-entry-meta{color:var(--muted);font-size:var(--fs-xs)}
@media (max-width:600px){
}

/* Entry title carries more weight now that the numeral is gone. */
.bp-entry h2{font-size:var(--fs-h2)}

/* ---------- closing actions ----------
   One real button, and a link beside it. Deliberately NOT a filled button next
   to an outlined one: that pair is a named preset, and the bare .btn used here
   before had a transparent border and no fill, so it read as plain text and
   nobody could tell it was clickable. */
.bp-actions{margin-top:var(--s-5);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-4) var(--s-5)}
.bp-secondary{color:var(--accent-ink);font-weight:700;text-decoration:none;
  padding-block:6px;border-bottom:1.5px solid transparent}
.bp-secondary:hover{border-bottom-color:var(--accent-ink)}

/* ---------- entry thumbnail ----------
   The page's own hero, small, in the reading-start column. No tile, no scrim,
   no text over the image, no shadow and no hover-lift: those are what turn an
   image row into the image-card preset. Just the photograph and the type. */
.bp-entry-thumb{width:200px;height:133px;object-fit:cover;display:block;
  border-radius:var(--r-md);background:var(--paper-2)}
@media (max-width:600px){
  .bp-entry{grid-template-columns:104px 1fr;gap:var(--s-4)}
  .bp-entry-thumb{width:104px;height:69px}
}

/* ---------- short pages must still fill the screen ----------
   /best with one entry is 993px of content in a 1400px viewport, which left the
   footer floating mid-screen with 407px of dead cream under it. Scoped to these
   pages so it cannot disturb the rest of the site; on the long comparison page
   flex:1 simply has nothing to do. */
body[data-page="best"]{min-height:100vh;display:flex;flex-direction:column}
body[data-page="best"]>main{flex:1 0 auto}