/* ============================================================================
   pub.css — LAYOUT ONLY for the public academy/session pages (/a/:slug, /s/:id).

   The design system is NOT forked here. The page links /styles.css first — the
   repo's design-system entry point — which imports tokens/fonts.css (self-hosted
   Anton · Inter · JetBrains Mono · Cairo · Tajawal) and colors_and_type.css
   (navy/cream/gold custom properties, the type scale, `.display-*`, `.body*`,
   `.label`, `.tag`, `.surface-*`, `.card-shadow`, `.paper-tex`, `.dot`, and the
   `:lang(ar)` rules that swap to Tajawal/Cairo and strip tracking + uppercase).
   Every value below is a token. No hex, no glass, no blur, no neon.

   RTL: logical properties only (margin-inline / padding-inline / inset-inline,
   border-inline-end) so `<html dir="rtl">` mirrors the whole layout for free.
   ============================================================================ */

/* styles.css sets a dark body for the landing shell; these pages are cream. */
body.pb-body {
  min-height: 100vh;
  background-color: var(--cream);
  color: var(--ink);
}

.pb-page {
  max-width: 480px;
  margin-inline: auto;
  padding: 0 var(--sp-5) 168px;
}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.pb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 18px 0 var(--sp-2);
}
.pb-home { display: inline-flex; }
.pb-home img { height: 19px; width: auto; display: block; }
.pb-lang {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: 6px var(--sp-3);
  line-height: 1;
}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.pb-hero { padding: var(--sp-6) 0 var(--sp-2); }
.pb-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--r-card);
  object-fit: cover;
  display: block;
  margin-bottom: var(--sp-4);
  background: var(--ice-4);
}
.pb-logo-sm { width: 40px; height: 40px; border-radius: var(--r-tile); margin: 0; }
.pb-logo-mark {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold-hi);
  font-size: 26px;
  line-height: 1;
}
.pb-logo-sm.pb-logo-mark { font-size: 16px; }

.pb-eyebrow { color: var(--gold-lo); margin: 0 0 10px; }
.pb-h1 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(32px, 10.5vw, var(--t-display-m));
  overflow-wrap: anywhere;
}
.pb-sub { color: var(--muted); font-size: var(--t-body-s); margin: 0 0 var(--sp-3); }
.pb-desc { margin: 0; color: var(--muted-dark); }
.pb-empty { color: var(--faint); margin: 0; }

/* ── section heading: gold tracked label + hairline rule ──────────────────── */
.pb-section { margin-top: var(--sp-8); }
.pb-sec {
  color: var(--gold-lo);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.pb-sec::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* ── cards ────────────────────────────────────────────────────────────────── */
.pb-card { padding: var(--sp-5); border-radius: var(--r-card-l); }
.pb-tomb { padding-top: var(--sp-5); }

.pb-facts { margin: 0; display: grid; gap: var(--sp-4); }
.pb-fact dt { color: var(--gold-lo); margin: 0 0 var(--sp-1); }
.pb-fact dd { margin: 0; }

/* ── join code (/q/) ──────────────────────────────────────────────────────────
   The printed code is the fallback that survives a broken universal link: a
   person types it into the app. So it is set big, mono, wide-tracked and
   LTR-isolated — legible off a phone screen held next to a poster, and never
   reordered by bidi when the page is Arabic. */
.pb-codecard { margin-top: var(--sp-6); text-align: center; }
.pb-code-label { color: var(--gold-lo); margin: 0 0 var(--sp-2); }
.pb-code {
  margin: 0;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-indent: 0.18em;   /* balance the trailing letter-space */
  color: var(--ink);
  line-height: 1.1;
}
.pb-code-hint { margin: var(--sp-3) 0 0; text-align: center; }
.pb-hero > .pb-pill { margin-bottom: var(--sp-3); }

/* ── session rows ─────────────────────────────────────────────────────────── */
.pb-list { border-radius: var(--r-card-l); overflow: hidden; }
.pb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-fast) ease;
}
.pb-row + .pb-row { border-top: 1px solid var(--line); }
.pb-row:active { background: var(--cream-2); }
.pb-row-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pb-row-title { font-weight: 600; }
.pb-row-meta { font-size: var(--t-caption); color: var(--muted); }
.pb-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); flex: 0 0 auto; }
.pb-price { font-weight: 700; font-size: var(--t-body-s); color: var(--ink); }

/* ── pills (availability + sport chips) ───────────────────────────────────── */
.pb-pill {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  background: var(--ice-4);
  color: var(--ink);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.pb-pill-open     { background: rgba(30, 122, 110, 0.12); color: var(--ok); }
.pb-pill-full     { background: rgba(176, 58, 58, 0.10);  color: var(--bad); }
.pb-pill-waitlist { background: rgba(91, 84, 201, 0.12);  color: var(--waitlist); }
.pb-pill-closed   { background: rgba(20, 34, 60, 0.08);   color: var(--muted); }
.pb-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── coaches ──────────────────────────────────────────────────────────────── */
.pb-coaches { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.pb-coach { display: flex; align-items: center; gap: var(--sp-2); }
.pb-coach-av { width: 36px; height: 36px; border-radius: var(--r-chip); object-fit: cover; }
.pb-coach-mark { display: grid; place-items: center; background: var(--navy); color: var(--gold-hi); font-size: 14px; line-height: 1; }
.pb-coach-name { color: var(--ink); }

/* ── academy chrome on a session page ─────────────────────────────────────── */
.pb-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius: var(--r-chip);
  text-decoration: none;
  color: inherit;
  margin: var(--sp-4) 0 0;
}
.pb-chrome-name { font-weight: 600; }
.pb-chrome-go {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--muted);
  border-inline-end: 2px solid var(--muted);
  transform: rotate(45deg);
  margin-inline-start: auto;
}
/* RTL: border-inline-end is now the LEFT edge, so the same 45° turn would point
   the corner up. Turn the other way to get a trailing (left-pointing) chevron. */
[dir="rtl"] .pb-chrome-go { transform: rotate(-45deg); }

/* ── footer ───────────────────────────────────────────────────────────────── */
.pb-foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.pb-foot-tag { margin: 0 0 var(--sp-2); color: var(--muted); }
.pb-foot-links { margin: 0; color: var(--faint); display: flex; gap: var(--sp-2); }
.pb-foot-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }

/* ── dock (app hand-off) ──────────────────────────────────────────────────── */
.pb-dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--cream) 58%, rgba(239, 232, 220, 0));
}
.pb-dock[hidden] { display: none; }
.pb-dock-inner {
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pb-cta {
  display: block;
  text-align: center;
  padding: 15px var(--sp-6);
  border-radius: var(--r-chip);
  background: var(--cta);
  color: var(--off-white);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: none;
  cursor: pointer;
}
:lang(ar) .pb-cta { font-family: var(--font-ar-body); }
.pb-cta-ghost { background: transparent; color: var(--cta); box-shadow: inset 0 0 0 1.5px var(--cta); }
.pb-cta-inline { display: inline-block; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-5); }
/* D12 — the "already have Laeeb?" line under the dock's primary Get button (/si, /join). */
.pb-dock-note { margin: 0; text-align: center; color: var(--muted); }
/* D12 (P3-4) — the SAME line, next to the inline CTA in the page body (app-link.ts): the dock
   is dismissible (pub.js hides it for the tab session), the body copy is not. Left-aligned, like
   every other line in `.pb-hero` — `.pb-dock-note` itself stays centered for the fixed dock. */
.pb-inline-note { margin: var(--sp-3) 0 0; color: var(--muted); }
.pb-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  padding: var(--sp-2);
  cursor: pointer;
  align-self: center;
}

/* ── focus + motion ───────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--r-tile);
}
@media (prefers-reduced-motion: reduce) {
  .rise, .rise-stagger > * { animation: none !important; }
  .pb-row { transition: none; }
}

/* ── Arabic ───────────────────────────────────────────────────────────────── */
/* colors_and_type.css already strips tracking + uppercasing from `.label`/`.tag`
   under :lang(ar), but it leaves the FAMILY alone — and neither JetBrains Mono
   nor Inter carries Arabic glyphs, so those lines fell back to the system
   monospace and rendered wide and broken-looking. Any label that can hold
   Arabic words moves to Tajawal here. */
:lang(ar) .label,
:lang(ar) .tag,
:lang(ar) .font-mono,
:lang(ar) .pb-sub,
:lang(ar) .pb-row-meta,
:lang(ar) .pb-fact dt {
  font-family: var(--font-ar-body);
  letter-spacing: 0;
  text-transform: none;
}
/* Prices stay mono in both languages: Western digits + the Latin "JOD" token.
   In an RTL paragraph the bidi algorithm reorders "7.500 JOD" → "JOD 7.500"
   (the space between a number run and a Latin run resolves to the paragraph
   direction), so the price is isolated as its own LTR run. */
:lang(ar) .pb-price { font-family: var(--font-mono); }
.pb-price { direction: ltr; unicode-bidi: isolate; }
/* "Free" / "مجاني" is a word, not a number — it keeps the page's own script,
   direction and family. */
.pb-price-free { direction: inherit; unicode-bidi: normal; }
:lang(ar) .pb-price-free { font-family: var(--font-ar-body); }
/* Same isolation for a numeric value inside a fact row. */
.pb-num { direction: ltr; unicode-bidi: isolate; }