/* ============================================================
   b3LAB.io — Redesign v0.1 · Component base (Direction C + A-Hero)
   Prototype: PortalOFX+ · reuses existing :root tokens (colors/font FIXED).
   New classes only, prefixed .r-* / .b3-* — no collision with base styles.
   ============================================================ */

/* ─── A-HERO ─────────────────────────────────────────────── */
.r-hero { text-align: center; padding-block: clamp(var(--space-12), 8vw, var(--space-32)) clamp(var(--space-8), 4vw, var(--space-16)); }
.r-hero-title {
  font-family: var(--font-display); font-weight: 700; line-height: 1.02;
  font-size: clamp(2.4rem, 7vw, 4.6rem); letter-spacing: -0.02em;
  margin: var(--space-4) 0 var(--space-4);
}
.r-hero-sub {
  max-width: 640px; margin: 0 auto var(--space-6); font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--color-text-muted); line-height: 1.55;
}
.r-hero-sub em { color: var(--color-accent); font-style: normal; }
.r-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); }

/* ─── b3-LOOP (video wrapper, poster + reduced-motion aware) ── */
.b3-loop { position: relative; margin: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface-2); }
/* max-width:100% is critical — a <video> has the poster's intrinsic width (1280px) and iOS
   Safari can ignore width:100%, overflowing right (clipped by body{overflow-x:hidden}). */
.b3-loop-video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--color-surface-2); }
.b3-loop-hero { width: 100%; max-width: 860px; margin: var(--space-8) auto 0; box-shadow: 0 24px 80px -40px rgba(0,0,0,.8); }
.b3-loop-cap { font-family: var(--font-display); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: var(--space-3); text-align: center; border-top: 1px solid var(--color-border); }

/* ─── C SPEC-GRID ────────────────────────────────────────── */
.r-features { padding-block: clamp(var(--space-8), 4vw, 60px); }
.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-3); margin-top: var(--space-8); }

/* tile = native <details>, exclusive via name= */
.b3-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); overflow: hidden; transition: border-color var(--transition), background var(--transition); }
.b3-tile:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }
.b3-tile[open] { grid-column: 1 / -1; border-color: var(--color-accent); background: var(--color-surface-2); }

.b3-tile-head { list-style: none; cursor: pointer; display: flex; flex-direction: column; position: relative; }
.b3-tile-head::-webkit-details-marker { display: none; }
.b3-tile .b3-loop { border: 0; border-radius: 0; border-bottom: 1px solid var(--color-border); }
.b3-tile-label { font-family: var(--font-display); font-size: .8125rem; letter-spacing: .04em;
  padding: var(--space-3) var(--space-4); color: var(--color-text); }
.b3-tile-more { position: absolute; top: var(--space-2); right: var(--space-3); font-family: var(--font-display);
  font-size: 1.1rem; line-height: 1; color: var(--color-accent); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); width: 26px; height: 26px;
  display: grid; place-items: center; }
.b3-tile[open] .b3-tile-more { transform: rotate(45deg); }

.b3-tile-body { padding: 0 var(--space-4) var(--space-4); }
.b3-tile-lead { color: var(--color-text); line-height: 1.55; margin-bottom: var(--space-2); }
.b3-tile-for { font-size: .875rem; color: var(--color-text-muted); }
.b3-tile-for strong { color: var(--color-accent); font-weight: 600; }

/* open tile → loop left / text right on wide screens */
@media (min-width: 720px) {
  .b3-tile[open] .b3-tile-head { flex-direction: row; align-items: stretch; }
  .b3-tile[open] .b3-loop { width: 55%; border-bottom: 0; border-right: 1px solid var(--color-border); }
  .b3-tile[open] .b3-tile-label { display: flex; align-items: center; }
}

/* ─── FOLD (secondary content in <details>) ──────────────── */
.r-fold, .r-fullspec { max-width: 820px; margin: var(--space-8) auto 0; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); }
.r-fold > summary, .r-fullspec > summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6);
  font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.r-fold > summary::-webkit-details-marker, .r-fullspec > summary::-webkit-details-marker { display: none; }
.r-fold[open] > summary, .r-fullspec[open] > summary { border-bottom: 1px solid var(--color-border); }
.r-fold-body, .r-fullspec-body { padding: var(--space-6); color: var(--color-text-muted); line-height: 1.65; font-size: .9375rem; }
.r-fullspec-body strong { color: var(--color-text); }

/* ─── reduced motion: never autoplay, show poster only ───── */
@media (prefers-reduced-motion: reduce) {
  .b3-loop-video { /* JS also guards; CSS is the belt-and-braces */ }
}

/* ─── unified legal box (one outer <details>, items expand inside) ── */
.r-legal { max-width: 820px; margin: 0 auto; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); }
.r-legal > summary { cursor: pointer; list-style: none; padding: var(--space-4) var(--space-6);
  font-family: var(--font-display); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent); }
.r-legal > summary::-webkit-details-marker { display: none; }
.r-legal[open] > summary { border-bottom: 1px solid var(--color-border); }
.r-legal .accordion { padding: var(--space-4) clamp(var(--space-3), 3vw, var(--space-6)); }

/* ─── global early-stage marquee banner ─────────────────────── */
.r-banner { position: sticky; top: 0; z-index: 99; height: calc(var(--nav-height) / 2);
  background: #FA4652; color: #fff; overflow: hidden; display: flex; align-items: center;
  box-shadow: 0 1px 0 rgba(0,0,0,.22); }
.r-banner-track { display: inline-flex; flex: none; white-space: nowrap; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.18);
  will-change: transform; animation: r-marquee 60s linear infinite; }
.r-banner:hover .r-banner-track { animation-play-state: paused; }
@keyframes r-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* nav (sticky) drops below the banner; anchor offset accounts for banner + nav */
.nav { top: calc(var(--nav-height) / 2); }
html { scroll-padding-top: calc(var(--nav-height) * 1.5 + 12px); }
@media (prefers-reduced-motion: reduce) {
  .r-banner-track { animation: none; }
  .r-banner { justify-content: center; }
  .r-banner-track > span:nth-child(n+2) { display: none; }
}