/* ============================================================
   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}
/* The page H1. Without a size it fell to the browser default (34px) while every
   H2 below it used --fs-h2 (36px), so the page title was SMALLER than its own
   section headings. Matches .section-head .title in base.css, which is the
   established pattern for a page-level title. */
.bp-head .title{font-size:var(--fs-h1);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)}

/* ---------- the close ----------
   This was the default CTA stack: a rhetorical-question heading, a subline, a
   filled button and a secondary text link beside it, running down one axis at
   the full 1000px container while every prose block above it sits at 68ch. The
   secondary link pointed at /catalog, which the footer's own nav already offers
   in the same viewport, so it was a duplicate as well as half of a named preset.
   Three of the four classes in that markup (.title on the h2, .lead on the
   paragraph, a padding-inline:0 that .section never applied) matched no rule at
   all, which is why the block never looked like the rest of the page.

   Now the copy and the routes are two columns on a shared top baseline, and the
   button is the first and heaviest route rather than a call to action with a
   list of leftovers underneath. One ranked set, one start axis. The copy column
   is capped at a reading measure so the close stops being the only full-width
   prose on the page; the block itself is start-aligned like .bp-why above it,
   so the trailing space is the page's own rhythm, not two clusters flung apart. */
.bp-close{display:grid;gap:var(--s-6)}
.bp-close-copy{max-width:54ch}
/* balance so that if the count ever pushes the line over, it breaks into two
   even lines instead of orphaning one word under a full one. */
.bp-close h2{font-size:var(--fs-h2);margin:0 0 var(--s-3);text-wrap:balance}
.bp-close-copy p{color:var(--muted);margin:0}
.bp-routes{display:grid;justify-items:start;gap:var(--s-5)}
@media (min-width:860px){
  .bp-close{grid-template-columns:minmax(0,46ch) auto;justify-content:start;
    column-gap:var(--s-8);align-items:start}
}

/* ---------- onward routes ----------
   Quiet rows under the button: same set, lower rank, carried by weight and ink
   rather than by a second colour or a rule drawn between the two groups.
   The arrow stays welded to its label. Pushing it to a shared inline-end axis
   does align the glyphs, but it strands 150px of dead space inside every short
   row, which is the same "two clusters with a gulf between them" that alignment
   was supposed to fix. The rows share their START axis, which is the edge a
   reader actually tracks in RTL, and the arrows rag with the text they belong
   to. Logical properties throughout, so that start edge is inherited. */
.bp-related ul{display:grid;gap:var(--s-3);justify-items:start}
.bp-related a{color:var(--muted);font-weight:500;padding-block:4px}
.bp-related a .arw{flex:none;opacity:.55}
.bp-related a:hover{color:var(--accent-ink)}
.bp-related a:hover .arw{opacity:1}

/* ---------- 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}

/* price-overview page: the example price sits quiet next to the bean name */
.pp-egprice{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);white-space:nowrap}
.bp-table td[data-th="מה יש שם"]{max-width:34ch}

/* hub group heading (השוואות / מדריכים) */
.bp-group{font-size:var(--fs-h3);margin:var(--s-7) 0 var(--s-2);padding-top:var(--s-5);
  border-top:1px solid var(--line)}
.bp-group:first-of-type{border-top:0;padding-top:0;margin-top:var(--s-6)}
.bp-group+.bp-entries{margin-top:0}