/* Orbace Sudoku — Book Recommendations (Orbace Web Team — Journal and
 * Su-Pu Book Recommendations handoff, 2026-10-12). Namespaced under
 * .obr- (Orbace Book Recommendations). One shared component, used on both
 * /journal and /su-pu — scripts/build-pages.mjs's
 * renderBookRecommendationsSection() stamps data-book-section="journal"|
 * "supu" on the <section> so this file can give each placement its own
 * grid-column count and host-page-matching horizontal inset without two
 * copies of the rest of the component's CSS.
 *
 * Local palette vars mirror the exact names journal.html's own inline
 * <style> and su-pu's css/orbace-supu-library.css already use on these two
 * pages (--g/--d/--r/--p/--pd/--c/--i/--m/--l) — a fallback value is given
 * on every var() read so this file degrades sanely if ever reused on a
 * page that doesn't define them, without creating a third competing
 * palette scheme.
 */

.obr-section{
  max-width:76rem;
  margin:2.5rem auto;
  box-sizing:border-box;
}
.obr-section *{box-sizing:border-box}
.obr-section[data-book-section="journal"]{padding:0 1.3rem;}
.obr-section[data-book-section="supu"]{padding:0;margin:2rem auto 2.5rem;}

.obr-section-head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}
.obr-eyebrow{
  display:flex;align-items:center;gap:.5rem;
  color:var(--r,#c41e3a);font-size:.75rem;font-weight:850;
  letter-spacing:.13em;text-transform:uppercase;
}
.obr-eyebrow-mark{width:6px;height:6px;background:var(--r,#c41e3a);transform:rotate(45deg);flex:0 0 auto}
.obr-heading{
  margin:0;color:var(--d,#17362a);font-family:Georgia,"Source Serif 4",serif;
  font-weight:600;line-height:1.18;font-size:clamp(1.5rem,3.2vw,1.9rem);
}

.obr-disclosure{
  display:flex;flex-direction:column;gap:2px;
  padding:.65rem .9rem;border-radius:6px;
  background:var(--pd,#eee3cf);color:var(--i,#252b28);
  font-size:.82rem;line-height:1.5;margin-bottom:1.1rem;
}
.obr-disclosure strong{font-weight:600}

.obr-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:520px){
  .obr-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:760px){
  .obr-section[data-book-section="supu"] .obr-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
  .obr-section[data-book-section="journal"] .obr-grid{grid-template-columns:repeat(4,1fr)}
}

.obr-card{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:1.1rem 1.15rem;border-radius:6px;
  background:#fff;border:1px solid var(--l,rgba(36,76,58,.2));
  border-top:3px solid var(--g,#244c3a);
}
.obr-card-num{
  font-family:Georgia,"Source Serif 4",serif;font-size:.78rem;
  color:var(--m,#626862);font-variant-numeric:tabular-nums;
}
.obr-card-head{display:flex;flex-direction:column;gap:2px}
.obr-card-title{
  margin:0;color:var(--d,#17362a);font-family:Georgia,"Source Serif 4",serif;
  font-weight:600;font-size:1.05rem;line-height:1.3;
  overflow-wrap:anywhere;
}
.obr-card-author{font-size:.82rem;color:var(--m,#626862)}
.obr-card-desc{margin:0;color:var(--m,#626862);font-size:.88rem;line-height:1.55;flex:1}

.obr-card-link{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 1rem;border-radius:5px;
  background:var(--g,#244c3a);color:#fff!important;
  text-decoration:none;font-size:.9rem;font-weight:600;
  outline-offset:3px;
}
.obr-card-link:hover{background:var(--d,#17362a);color:#fff!important}
.obr-card-link:focus-visible{outline:2px solid var(--r,#c41e3a)}