/* =====================================================================
 *  BRESLEV UI  —  unified component layer  (Stage 02)
 * ---------------------------------------------------------------------
 *  Consumes design-tokens.css. EVERY selector is scoped under `.bt-page`
 *  so this file can be enqueued globally with ZERO effect on legacy
 *  templates — only pages that opt in by wrapping content in
 *  `<div class="bt-page"> … </div>` receive the new design.
 *
 *  This is the real implementation of the approved full-site mockup.
 * ===================================================================== */

.bt-page{ font-family:var(--bt-font-base); color:var(--bt-ink); direction:rtl; line-height:var(--bt-lh-base); }
.bt-page *{ box-sizing:border-box; }
.bt-page img{ max-width:100%; }
.bt-page h1,.bt-page h2,.bt-page h3,.bt-page h4{ margin:0; line-height:var(--bt-lh-tight); font-family:var(--bt-font-heading); }
.bt-page a{ text-decoration:none; color:inherit; }

/* ---- layout ---- */
.bt-wrap{ max-width:var(--bt-container); margin-inline:auto; }
.bt-crumbs{ font-size:var(--bt-fs-sm); color:var(--bt-muted); padding:14px 0; }
.bt-crumbs a:hover{ color:var(--bt-brand-deep); }
.bt-crumbs b{ color:var(--bt-ink-2); font-weight:600; }
.bt-eyebrow{ font-size:var(--bt-fs-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--bt-brand); }
.bt-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; flex-wrap:wrap; }
.bt-sec-head h2{ font-size:var(--bt-fs-2xl); color:var(--bt-blue-deep); font-weight:700; }
.bt-sec-head .more{ font-size:var(--bt-fs-sm); font-weight:700; color:var(--bt-brand-deep); }

/* ---- buttons (extend token .bt-btn) ---- */
.bt-page .bt-btn.sm{ padding:8px 15px; font-size:var(--bt-fs-sm); }
.bt-page .bt-btn.full{ width:100%; }

/* ---- chips ---- */
.bt-page .bt-chip.blue{ background:var(--bt-blue-soft); color:var(--bt-blue); }
.bt-page .bt-chip.ghost{ background:var(--bt-surface); color:var(--bt-ink-2); border:1px solid var(--bt-line); }

/* ---- hero ---- */
.bt-hero{ background:var(--bt-grad-hero); color:#fff; position:relative; overflow:hidden; border-radius:var(--bt-radius-lg); }
.bt-hero::after{ content:""; position:absolute; inset-block:0; inset-inline-start:-8%; width:52%;
  background:radial-gradient(circle at center, rgba(243,112,33,.22), transparent 62%); pointer-events:none; }
.bt-hero__inner{ position:relative; z-index:1; padding:56px 34px; display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:center; }
.bt-hero h1{ font-size:var(--bt-fs-hero); font-weight:800; line-height:1.15; }
.bt-hero p{ margin:16px 0 24px; font-size:var(--bt-fs-lg); color:#d6e6f1; max-width:46ch; }
.bt-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }
.bt-hero__panel{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--bt-radius-lg); padding:22px; backdrop-filter:blur(6px); }
.bt-hero--slim .bt-hero__inner{ display:block; padding:40px 34px; }
.bt-hero--slim p{ margin-bottom:0; }

/* ---- unified card ---- */
.bt-grid{ display:grid; gap:18px; }
.bt-grid.c2{ grid-template-columns:repeat(2,1fr); }
.bt-grid.c3{ grid-template-columns:repeat(3,1fr); }
.bt-grid.c4{ grid-template-columns:repeat(4,1fr); }
.bt-card{ background:var(--bt-bg); border:1px solid var(--bt-line); border-radius:var(--bt-radius-md);
  overflow:hidden; box-shadow:var(--bt-shadow-sm); transition:box-shadow var(--bt-transition), transform var(--bt-transition);
  display:flex; flex-direction:column; height:100%; }
.bt-card:hover{ box-shadow:var(--bt-shadow-md); transform:translateY(-3px); }
.bt-card__thumb{ aspect-ratio:16/10; background:var(--bt-surface-2) center/cover; position:relative; }
.bt-card__thumb .cat{ position:absolute; inset-block-start:12px; inset-inline-start:12px;
  background:var(--bt-brand); color:#fff; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:var(--bt-radius-pill); }
.bt-card__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bt-blue-soft); color:var(--bt-blue); font-size:38px; }
.bt-card__body{ padding:16px 17px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bt-card__body h3{ font-size:var(--bt-fs-lg); color:var(--bt-blue-deep); font-weight:700;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bt-card__body p{ margin:0; font-size:var(--bt-fs-sm); color:var(--bt-muted); flex:1; }
.bt-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px;
  color:var(--bt-muted); padding-top:10px; border-top:1px solid var(--bt-line); margin-top:auto; }
.bt-card__meta .go{ color:var(--bt-brand-deep); font-weight:700; }

/* institution variant (synagogues) */
.bt-card--inst .bt-card__thumb{ aspect-ratio:16/9; }
.bt-card--inst .badges{ position:absolute; inset-block-end:10px; inset-inline-start:10px; display:flex; gap:6px; }
.bt-card--inst .badge{ background:rgba(0,51,78,.9); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--bt-radius-pill); }
.bt-card--inst .irow{ display:flex; align-items:center; gap:7px; font-size:var(--bt-fs-sm); color:var(--bt-ink-2); }
.bt-card--inst .irow .ic{ color:var(--bt-brand); width:16px; text-align:center; flex:none; }

/* ---- filter bar ---- */
.bt-filter{ background:var(--bt-bg); border:1px solid var(--bt-line); border-top:3px solid var(--bt-blue);
  border-radius:var(--bt-radius-md); padding:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  box-shadow:var(--bt-shadow-sm); margin-bottom:26px; }
.bt-filter .field{ flex:1; min-width:180px; }
.bt-filter select, .bt-filter input[type=text]{ width:100%; height:46px; padding:0 14px; border:1px solid var(--bt-line);
  border-radius:var(--bt-radius-sm); font-size:var(--bt-fs-base); font-family:inherit; background:var(--bt-surface); color:var(--bt-ink); }
.bt-filter select:focus, .bt-filter input:focus{ outline:none; border-color:var(--bt-brand); background:#fff; }
.bt-filter .acts{ display:flex; gap:10px; }

/* ---- lesson row (list) ---- */
.bt-lrow{ display:flex; gap:16px; background:var(--bt-bg); border:1px solid var(--bt-line); border-radius:var(--bt-radius-md);
  padding:16px; box-shadow:var(--bt-shadow-sm); transition:box-shadow var(--bt-transition), transform var(--bt-transition); align-items:center; }
.bt-lrow:hover{ box-shadow:var(--bt-shadow-md); transform:translateY(-2px); }
.bt-lrow .badge-time{ width:74px; height:74px; border-radius:var(--bt-radius-sm); background:var(--bt-grad-hero); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; }
.bt-lrow .badge-time b{ font-size:20px; font-variant-numeric:tabular-nums; } .bt-lrow .badge-time span{ font-size:11px; opacity:.85; }
.bt-lrow .info{ flex:1; min-width:0; } .bt-lrow .info h3{ font-size:var(--bt-fs-lg); color:var(--bt-blue-deep); }
.bt-lrow .info .sub{ font-size:var(--bt-fs-sm); color:var(--bt-muted); margin-top:3px; }
.bt-lrow .info .tags{ display:flex; gap:7px; margin-top:9px; flex-wrap:wrap; }

/* ---- worlds grid (home) ---- */
.bt-worlds{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bt-world{ display:flex; gap:14px; align-items:center; background:var(--bt-bg); border:1px solid var(--bt-line);
  border-radius:var(--bt-radius-md); padding:18px; box-shadow:var(--bt-shadow-sm); transition:box-shadow var(--bt-transition), transform var(--bt-transition); }
.bt-world:hover{ box-shadow:var(--bt-shadow-md); transform:translateY(-2px); border-color:var(--bt-brand-soft); }
.bt-world .ic{ width:52px; height:52px; border-radius:13px; background:var(--bt-brand-soft); color:var(--bt-brand-deep);
  display:flex; align-items:center; justify-content:center; font-size:23px; flex:none; }
.bt-world.b .ic{ background:var(--bt-blue-soft); color:var(--bt-blue); }
.bt-world h3{ font-size:16.5px; color:var(--bt-blue-deep); } .bt-world p{ margin:2px 0 0; font-size:12.5px; color:var(--bt-muted); }

/* ---- section spacing + surfaces ---- */
.bt-section{ padding:40px 0; } .bt-tint{ background:var(--bt-surface); }

/* ---- cta banner ---- */
.bt-cta{ background:var(--bt-grad-brand); color:#fff; border-radius:var(--bt-radius-lg); padding:28px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bt-cta h3{ font-size:var(--bt-fs-xl); } .bt-cta p{ margin:6px 0 0; color:rgba(255,255,255,.9); font-size:var(--bt-fs-base); }

/* ---- pagination ---- */
.bt-pagination{ margin-top:36px; text-align:center; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.bt-pagination .page-numbers{ display:inline-flex; align-items:center; padding:9px 15px; background:#fff; border:1px solid var(--bt-line);
  border-radius:var(--bt-radius-sm); color:var(--bt-ink-2); font-weight:600; font-size:var(--bt-fs-sm); }
.bt-pagination .page-numbers:hover{ border-color:var(--bt-brand); color:var(--bt-brand-deep); }
.bt-pagination .page-numbers.current{ background:var(--bt-blue); color:#fff; border-color:var(--bt-blue); }

/* ---- empty state ---- */
.bt-empty{ text-align:center; padding:54px 20px; background:var(--bt-surface); border:1px dashed var(--bt-line-2); border-radius:var(--bt-radius-md); }
.bt-empty h3{ color:var(--bt-blue-deep); font-size:var(--bt-fs-xl); margin-bottom:8px; }
.bt-empty p{ margin:0; color:var(--bt-muted); }

/* ---- single detail (synagogue) ---- */
.bt-cover{ aspect-ratio:16/6; border-radius:var(--bt-radius-lg); background:var(--bt-grad-hero) center/cover; position:relative; overflow:hidden; margin-top:8px; }
.bt-cover .ov{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,51,78,.85), transparent 70%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px; }
.bt-cover .ov h1{ color:#fff; font-size:clamp(24px,3.6vw,36px); }
.bt-detail{ display:grid; grid-template-columns:1.6fr .9fr; gap:26px; margin-top:26px; }
.bt-infobox{ background:var(--bt-bg); border:1px solid var(--bt-line); border-radius:var(--bt-radius-md); padding:20px; box-shadow:var(--bt-shadow-sm); margin-bottom:18px; }
.bt-infobox h3{ color:var(--bt-blue-deep); font-size:var(--bt-fs-lg); margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--bt-brand-soft); }
.bt-drow{ display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--bt-line); font-size:var(--bt-fs-base); }
.bt-drow:last-child{ border:0; } .bt-drow .lb{ color:var(--bt-muted); width:110px; flex:none; font-weight:600; }
.bt-facil{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.bt-facil .f{ display:flex; align-items:center; gap:9px; font-size:var(--bt-fs-base); color:var(--bt-ink-2); }
.bt-facil .f .v{ color:var(--bt-success); font-weight:800; }
.bt-actions{ display:flex; flex-direction:column; gap:10px; }
.bt-sticky{ position:sticky; top:12px; }

/* ---- responsive ---- */
@media (max-width:820px){
  .bt-hero__inner{ grid-template-columns:1fr; }
  .bt-detail{ grid-template-columns:1fr; }
  .bt-worlds,.bt-grid.c3,.bt-grid.c4{ grid-template-columns:1fr 1fr; }
  .bt-filter .field{ min-width:140px; }
}
@media (max-width:520px){
  .bt-grid.c2,.bt-grid.c3,.bt-grid.c4,.bt-worlds{ grid-template-columns:1fr; }
  .bt-hero__inner{ padding:36px 20px; }
  .bt-lrow{ flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce){
  .bt-card,.bt-world,.bt-lrow,.bt-page .bt-btn{ transition:none; }
  .bt-card:hover,.bt-world:hover,.bt-lrow:hover{ transform:none; }
}