/* rcd-profile-v2.css — Wave-1 rabbi-profile refresh (owner brief C,D,E,G,H).
   Loaded AFTER /v2-assets/rabbi-profile.css so these rules win. This is a
   DECLUTTER + RESPONSIVE + STRUCTURE pass — NOT a restyle: the elegant dark
   "Tzfat x Singularity" identity (tokens, glows, fonts) is untouched.
   Every rule is data-driven and per-slug safe (no rabbi hardcoded). */

/* ============================ C · RESPONSIVE NAV ====================== */
/* Ribbon items render as ICON + short label on wide screens; ICON-ONLY and
   compact on phones. Markup (rabbi-profile.html): a.ri > span.ri-ic (emoji)
   + span.ri-lb (label). */
.ribbon a.ri { display: inline-flex; align-items: center; gap: 8px; }
.ribbon a.ri .ri-ic { font-size: 16px; line-height: 1; filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .35)); }
.ribbon a.ri .ri-lb { white-space: nowrap; }
@media (max-width: 640px) {
  /* phones: ICONS ONLY, compact, evenly spread across the bar */
  .ribbon__inner { justify-content: space-between; gap: 2px; }
  .ribbon a.ri { gap: 0; padding: 9px 12px; }
  .ribbon a.ri .ri-ic { font-size: 21px; }
  .ribbon a.ri .ri-lb {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* keep the accented #ask pill readable as an icon too */
  .ribbon a.ri[href="#ask"] { padding: 9px 13px; }
}

/* ============================ D · HERO DECLUTTER ===================== */
/* Desktop (>1080px) keeps the two-column hero. TABLET & MOBILE (<=1080):
   show ONLY the rabbi photo + circular menu + top nav — hide the whole right
   column (name / subtitle / topic-tags / two CTAs / stats-row). Those actions
   remain reachable from the top nav ribbon, the orbit, and the footer. */
@media (max-width: 1080px) {
  .hero { padding: 40px 0 34px; }
  .hero__grid { grid-template-columns: 1fr !important; gap: 0; justify-items: center; }
  .hero__text { display: none !important; }
  .portrait-wrap.rcdw { margin-inline: auto; }
  /* a small, always-visible cue that the photo is the "ask the rabbi" button */
  .rcd-ask-cue { display: block; }
}

/* H · make the orbit reliably sit ABOVE neighbouring hero content so every
   orbit item is hoverable / tappable (the report: "ne poslouchá ani
   neodpovídá"). Raising the stacking + guaranteeing pointer-events fixes the
   dead-orbit on the two-column desktop layout where the right text column
   overlapped the wheel. */
.hero__grid .portrait-wrap.rcdw { position: relative; z-index: 6; }
.rcdw .arc { z-index: 20 !important; }
.rcdw .arc__item { z-index: 21; }
.rcdw .topic-btn { z-index: 22; }
/* clearer press / hover feedback on every orbit item (H) */
.rcdw .topic-btn { -webkit-tap-highlight-color: transparent; }
.rcdw .topic-btn:active { transform: translate(-50%, -50%) rotate(calc(-1 * (var(--a,0deg) + var(--spin,0deg)))) scale(.9); }
.rcdw .topic-btn:hover { box-shadow: 0 0 0 1px rgba(106,215,255,.5), 0 8px 22px rgba(0,0,0,.45); }
/* G · course shortcuts in the orbit get a warm (gold) accent to read as
   "his courses" vs the cool topic chips. */
.rcdw .topic-btn.is-course { border-color: rgba(244,201,119,.55); background: rgba(30,24,12,.6); }
.rcdw .topic-btn.is-course .ti { filter: drop-shadow(0 0 7px rgba(244,201,119,.6)); }
.rcdw .topic-btn.is-course:hover { border-color: rgba(244,201,119,.85); box-shadow: 0 0 0 1px rgba(244,201,119,.5), 0 8px 22px rgba(0,0,0,.45); }

/* G · center-photo "ask" cue (hidden on desktop where the right column already
   carries the CTA; shown on tablet/mobile via the media query above). */
.rcd-ask-cue {
  display: none; margin: 16px auto 0; text-align: center;
  font-family: var(--tech); font-size: 13px; letter-spacing: .04em;
  color: var(--cyan-bright); opacity: .9;
}
.rcd-ask-cue .k {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--line-bright); background: rgba(var(--accent-rgb), .08);
  box-shadow: var(--glow-sm);
}

/* ============================ E · CONSOLIDATED PORTFOLIO ============= */
/* All formerly-stacked lower sections (Учение дня, Спросить, Биография+Каналы,
   Онлайн-курсы, Библиотека) live inside ONE block. A segmented tab bar shows
   exactly one pane at a time, so the page no longer stacks 5 full-screen
   sections. Progressive enhancement: without JS every pane is visible (the
   old behaviour); JS adds `.js` and reveals one pane at a time. */
.rcd-portfolio { padding-top: 30px; }
.rcd-pf-bar { margin-bottom: 26px; }
.rcd-pf-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 6px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  backdrop-filter: blur(8px);
}
.rcd-pf-tab {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--tech); font-size: 14px; color: var(--muted);
  padding: 11px 17px; border-radius: 11px; border: 1px solid transparent;
  background: none; transition: color .16s, background .16s, border-color .16s, box-shadow .2s;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.rcd-pf-tab:hover { color: var(--cyan-bright); background: rgba(var(--accent-rgb), .07); }
.rcd-pf-tab.is-active {
  color: var(--cyan-bright); border-color: var(--line-bright);
  background: rgba(var(--accent-rgb), .12); box-shadow: var(--glow-sm);
}
.rcd-pf-tab .t-ic { font-size: 16px; line-height: 1; }
/* JS-active mode: one pane at a time, and each pane drops its own top padding
   (the tab bar already spaces them) so the block reads as ONE unit. */
.rcd-portfolio.js .rcd-pane { display: none; }
.rcd-portfolio.js .rcd-pane.is-active { display: block; animation: rcdPfIn .28s ease; }
.rcd-portfolio.js .rcd-pane { padding-top: 0; padding-bottom: 8px; }
@keyframes rcdPfIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .rcd-pf-tabs { justify-content: space-between; }
  .rcd-pf-tab { gap: 0; padding: 11px 13px; flex: 1 1 auto; justify-content: center; }
  .rcd-pf-tab .t-lb {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .rcd-pf-tab .t-ic { font-size: 21px; }
}

/* E · KILL the inline-expand-that-grows-the-page bug. The daily study card
   opens its content in-place; cap it to a fixed-height internal scroll region
   so opening a card can never balloon the page (was ~1/3 screen wasted on
   mobile). */
.studycard__panel:not([hidden]) {
  max-height: min(62vh, 560px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.studycard__panel::-webkit-scrollbar { width: 6px; }
.studycard__panel::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 6px; }

/* E · online course cards open the reader in an OVERLAY (see rcd-hero-*.js)
   instead of navigating/expanding in place. Overlay chrome: */
.rcd-overlay {
  position: fixed; inset: 0; z-index: 1800; display: none;
  align-items: center; justify-content: center; padding: 4vh 16px;
  background: rgba(4, 7, 18, .72); backdrop-filter: blur(6px);
}
.rcd-overlay.is-open { display: flex; }
.rcd-overlay__panel {
  width: min(760px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  border: 1px solid var(--line-bright); border-radius: var(--r-lg);
  background: var(--bg-2); box-shadow: 0 24px 70px rgba(0,0,0,.6);
  overflow: hidden;
}
.rcd-overlay__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.rcd-overlay__head h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; flex: 1; }
.rcd-overlay__close {
  width: 38px; height: 38px; border-radius: 10px; flex: none; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
}
.rcd-overlay__close:hover { border-color: var(--line-bright); box-shadow: var(--glow-sm); }
.rcd-overlay__body { padding: 0; flex: 1; overflow: hidden; }
.rcd-overlay__body iframe { width: 100%; height: 70vh; border: 0; display: block; background: var(--bg); }

/* keep the online-courses grid tidy inside its pane */
#rlp-online-cards a:hover { border-color: var(--line-bright) !important; box-shadow: var(--glow-sm); }