/* ─────────────────────────────────────────────────────────────────────────
 * MemberReel canonical public-directory layout.
 *
 * ONE SOURCE OF TRUTH. Loaded by:
 *   - worker.js `buildDirectoryPage()` — every chamber at localhost:8787/{slug}
 *   - demo/index.html — the /demo vertical showcase
 *
 * Every rule here uses CSS variables defined by each consumer on :root so
 * each chamber / vertical gets its own primary color threading through:
 *   --primary            : hex
 *   --primary-05/07/10/13/20/90 : rgba primary at each alpha
 *   --font-serif         : 'DM Serif Display', serif
 *   --font-body          : 'Source Sans 3', sans-serif
 *
 * Do NOT duplicate these rules anywhere else. Any visual change to the
 * canonical directory layout means editing this file — it ripples to
 * every chamber page + the demo immediately.
 *
 * Left inline in buildDirectoryPage (not here): breadcrumb, filter-bar,
 * directory-sec wrapper bg, join-banner, dir-footer, dir-pagination,
 * featured-box / f-card family (demo doesn't use featured), popup .p-*.
 * ───────────────────────────────────────────────────────────────────────── */

/* HERO — primary-tinted accent circles behind content ─────────────────────── */
.hero{background:#fff;padding:40px 24px;text-align:center;border-bottom:1px solid #e8e8e8;width:100%;position:relative;overflow:hidden}
.hero > .hero-icon-box, .hero > .hero-name, .hero > .hero-tagline, .hero > .hero-cta, .hero > .hero-count{position:relative;z-index:1}
.hero-circle{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero-circle-1{width:400px;height:400px;background:var(--primary-10);top:-200px;left:-100px}
.hero-circle-2{width:300px;height:300px;background:var(--primary-07);bottom:-150px;right:-80px}
.hero-circle-3{width:150px;height:150px;background:var(--primary-05);top:20px;right:200px}
.hero-icon-box{width:72px;height:72px;background:var(--primary);border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.hero-icon-box svg{display:block}
.hero-icon-box .hero-emoji{font-size:34px;line-height:1}
.hero-name{font-family:var(--font-serif);font-size:36px;font-weight:700;color:#1a1f2e;line-height:1.15;margin-bottom:6px}
.hero-tagline{font-size:15px;color:#555;line-height:1.5;margin-bottom:24px;max-width:560px;margin-left:auto;margin-right:auto}
.hero-cta{display:inline-block;background:var(--primary);color:#fff !important;border-radius:8px;padding:12px 28px;font-size:15px;font-weight:700;transition:opacity .15s;border:none;cursor:pointer;font-family:inherit}
.hero-cta:hover{opacity:.9}
.hero-count{font-size:24px;color:#555;margin-top:14px}
.hero-count-num{color:var(--primary);font-weight:700}

/* TOP GRID — primary-tinted band + 2-col or single-col about/featured ────── */
.top-grid-bg{background:var(--primary-13);padding:28px 16px;width:100%}
.top-grid-bg > .top-grid{padding:0}
.top-grid{display:grid;grid-template-columns:1fr 400px;gap:20px;max-width:1060px;margin:0 auto;padding:24px 16px 0}
@media(max-width:900px){.top-grid{grid-template-columns:1fr}}
.top-grid.no-featured{grid-template-columns:1fr;max-width:800px}

/* ABOUT-BOX (right column, or single-col when no featured) ───────────────── */
.about-box{background:#fff;border-radius:16px;padding:24px;border:1px solid #e8e8e8;display:flex;flex-direction:column;gap:18px}
.about-eyebrow{font-size:10px;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-bottom:6px}
.about-title{font-size:18px;font-weight:700;color:#1a1f2e;margin-bottom:8px;line-height:1.3}
.about-desc{font-size:13px;color:#666;line-height:1.7}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}
.about-stat{text-align:center}
.about-stat-num{font-size:24px;font-weight:800;color:var(--primary);line-height:1.1;font-family:var(--font-serif)}
.about-stat-label{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:0.06em;margin-top:4px;font-weight:700}
.about-features{display:flex;flex-direction:column;gap:14px}
.about-feature{display:flex;gap:12px;align-items:flex-start}
.about-feature-icon{width:32px;height:32px;background:var(--primary-10);color:var(--primary);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.about-feature-icon.ic-video{background:#DC2626;color:#fff}
.about-feature-icon.ic-spotlight{background:#F59E0B;color:#fff}
.about-feature-icon.ic-network{background:#DC2626;color:#fff}
.about-feature-title{font-size:13px;font-weight:700;color:#1a1f2e;line-height:1.3}
.about-feature-desc{font-size:11px;color:#888;line-height:1.4;margin-top:2px}

/* DIRECTORY SECTION HEADING above the grid ─────────────────────────────── */
.dir-header-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.dir-rotation-note{font-size:13px;color:#666;margin-bottom:8px}
.dir-heading{font-size:24px;font-weight:700;color:#1a1f2e;margin-bottom:0;line-height:1.2;display:flex;align-items:center;gap:12px}
.dir-heading-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:#2563EB;color:#fff;border-radius:10px;font-size:18px;flex-shrink:0}
.dir-count{background:var(--primary);color:#fff;border-radius:20px;padding:4px 14px;font-size:12px;font-weight:600;white-space:nowrap}

/* GRID — 4 cols desktop, 2 cols tablet, 1 col mobile ─────────────────────── */
.dir-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:768px){.dir-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:480px){.dir-grid{grid-template-columns:1fr;gap:16px}}

/* EMPTY STATE ─────────────────────────────────────────────────────────────── */
.dir-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:#888;font-size:14px}

/* MEMBER CARD ─────────────────────────────────────────────────────────────── */
.m-card{background:#ffffff;border-radius:14px;border:1px solid #D4D6DA;box-shadow:0 2px 6px rgba(15,23,42,0.10),0 6px 16px rgba(15,23,42,0.08);overflow:hidden;cursor:pointer;transition:box-shadow 180ms ease,transform 180ms ease;display:flex;flex-direction:column}
.m-card:hover{transform:translateY(-3px);box-shadow:0 6px 14px rgba(15,23,42,0.12),0 12px 28px rgba(15,23,42,0.10)}
.m-media{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#1a1f2e;flex-shrink:0}
.m-media:not(.m-media-placeholder)::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,41,66,0.05) 0%,rgba(26,41,66,0.45) 100%);pointer-events:none;z-index:1}
.m-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.m-media > iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.p-media > video,.modal-video-frame:is(video){object-fit:contain}
.m-media > .m-initials-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--primary)}
.m-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--primary);border:2px solid rgba(255,255,255,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,0.4);z-index:2}
.m-play-btn::before{content:'';display:block;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid #fff;margin-left:3px}

/* ─── MEMBERREEL WATERMARK (R2 videos only) ───
 * Appears inside the native HTML5 <video> element ONLY when a member has a
 * video hosted on our Cloudflare R2 bucket — applies to both file uploads
 * AND webcam recordings since both land in the same video_url field. It is
 * NOT added to YouTube-embedded videos. Placed by the click-to-play handler
 * in worker.js when it swaps in the <video> element on user click. */
.mr-watermark {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  background: #111;
  color: #fff !important;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: 1px solid #C0392B;
  border-radius: 4px;
  opacity: 0.95;
  transition: opacity 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
  line-height: 1.2;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.mr-watermark:hover {
  opacity: 1;
  background: #000;
  box-shadow: 0 4px 14px rgba(192, 57, 43, 0.55);
  transform: translateY(-1px);
}
.mr-watermark::before {
  content: "▶";
  color: #C0392B;
  font-size: 8px;
}
.mr-watermark .mr-accent {
  color: #C0392B;
}

.m-initials{display:none}
.m-body{padding:12px 16px 14px;display:flex;flex-direction:column;flex:1;background:#fff}
.m-category{display:none}
.m-category-overlay{position:absolute;top:10px;left:10px;z-index:3;background:rgba(20,25,32,0.85);color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-radius:20px;padding:4px 10px;line-height:1;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.m-video-ready-label{background:#050505;color:#fff;border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.22)}
.m-name-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:7px}
.m-body-top{display:flex;flex-direction:column;gap:0}
.m-body-spacer{flex:1;min-height:9px}
.m-biz-name{font-family:var(--font-serif),'DM Serif Display',Georgia,serif;font-weight:700;font-size:20px;color:#0F172A;line-height:1.12;letter-spacing:0;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
@media(max-width:640px){.m-biz-name{font-size:16px}}
.m-biz-name img{width:22px;height:22px;object-fit:contain;border-radius:4px;flex-shrink:0}
.m-verified-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;margin-top:2px;border:0;background:transparent;color:#1D9E75;font-size:16px;line-height:1;flex-shrink:0}
.m-verified-check i{font-size:inherit;line-height:1}
.m-org-badges,.p-org-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;min-height:20px;align-items:flex-start}
.m-org-badge{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:12px;padding:3px 8px;font-size:10px;font-weight:500;line-height:1;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.m-org-badge-summary{background:#E6F1FB;color:#0C447C}
.m-org-badges .m-org-badge-summary{width:96px;height:22px;justify-content:center;padding:0 8px}
.m-org-badge-count{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#0C447C;color:#fff;font-size:8px;font-weight:800;line-height:1;letter-spacing:0;margin-left:6px}
.m-owner{font-family:var(--font-serif),'DM Serif Display',Georgia,serif;font-size:13px;font-style:italic;color:#4B5159;line-height:1.25;margin:0 0 9px}
.m-desc{font-size:.75rem;color:#666;line-height:1.45;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-readmore{display:inline-block;font-size:11px;font-weight:600;color:var(--primary);cursor:pointer;margin-bottom:8px;text-decoration:none}
.m-readmore:hover{text-decoration:underline}
.m-details{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.m-detail{display:flex;gap:5px;font-size:.72rem;color:#666;align-items:flex-start}
.m-detail span:first-child{flex-shrink:0;width:13px;text-align:center;line-height:1.4}
.m-contact-strip{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;padding:0;background:transparent;border:0}
.m-contact-row{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;line-height:1.25;color:#3A3F4A}
.m-contact-row i{width:12px;text-align:center;color:#6B7280;font-size:11px;flex-shrink:0}
.m-contact-row span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-footer{padding:8px 0 0;border-top:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;background:transparent;min-width:0}
.m-socials-row{display:flex;align-items:center;gap:7px;min-height:14px;min-width:0;flex:1 1 auto;overflow:hidden}
.m-social-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:14px;text-decoration:none;line-height:1;transition:opacity .15s,transform .15s;flex:0 0 14px}
.m-social-icon:hover{opacity:.85;transform:translateY(-1px)}
.m-social-fb{color:#1877F2}
.m-social-ig{color:#E4405F}
.m-social-li{color:#0A66C2}
.m-social-yt{color:#FF0000}
.m-social-tt{color:#000000}
.p-btn-yt{background:#FF0000}
.m-view-profile{display:inline-flex;align-items:center;gap:5px;padding:0;background:transparent;border:0;color:#0F172A;font-size:11px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;font-family:inherit;flex:0 0 auto;margin-left:auto}
.m-view-profile i{font-size:13px}
.m-view-profile:hover{color:var(--primary)}

/* ─── VIDEO COMING SOON block ───
 * Opt-in canonical component that fills .m-media when a member has no
 * video_url AND no thumbnail_url. Gives placeholder cards a real sales
 * pitch: grid-textured primary-color background, play-icon hero, serif
 * title, member-facing subtitle, social-proof stat line, and an org
 * watermark in the corner. worker.js cardMediaHtml does not emit this
 * markup today — Pineview stays on the simple .m-initials-wrap path —
 * so adding these rules does not change any live chamber page. Demo
 * panels opt in by emitting .m-video-soon markup directly. */
.m-video-soon{position:absolute;inset:0;background:#E8EEF5;background-image:linear-gradient(rgba(32,57,79,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(32,57,79,0.08) 1px,transparent 1px);background-size:18px 18px;color:#20394F;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 12px 24px}
.m-video-soon-playicon{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid rgba(32,57,79,0.18);display:flex;align-items:center;justify-content:center;font-size:13px;color:#20394F;margin-bottom:7px;box-shadow:0 8px 20px rgba(32,57,79,.12)}
.m-video-soon-title{font-family:var(--font-serif);font-size:15px;font-weight:700;line-height:1;margin-bottom:3px;color:#172437}
.m-video-soon-sub{font-size:9.5px;opacity:.88;letter-spacing:.02em;line-height:1.3;color:#536779}
.m-video-soon-stat{position:absolute;bottom:5px;left:8px;right:8px;font-size:8px;opacity:.78;line-height:1.3;text-align:center;font-weight:700;color:#607487;text-transform:uppercase;letter-spacing:.08em}
.m-video-soon-watermark{position:absolute;top:6px;right:10px;font-size:8px;opacity:.6;font-weight:600;letter-spacing:.05em;text-transform:uppercase;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-media.m-media-placeholder{background:linear-gradient(135deg,#f8fafb 0%,#d8e4f0 100%) !important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.m-media-placeholder i.ti{font-size:28px;color:#4B5159;opacity:.75;line-height:1}
.m-placeholder-label{font-family:var(--font-serif),'DM Serif Display',Georgia,serif;font-size:20px;color:#1a1a1a;opacity:.85;line-height:1;text-align:center;padding:0 14px}
.m-placeholder-caption{font-size:8px;color:#6B7280;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-top:2px;line-height:1}
@media(max-width:640px){.m-media-placeholder i.ti{font-size:24px}.m-placeholder-label{font-size:17px}}

/* FILTER BAR — search + category chips. Canonical class names so any
 * consumer (demo today, Pineview tomorrow) can adopt by rendering the
 * same markup. Primary color threads through via --primary vars. */
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.dir-search{flex:1;min-width:240px;padding:10px 14px;border:1px solid #d8dde3;border-radius:10px;font-size:14px;font-family:inherit;color:#1a1f2e;background:#fff;outline:none;transition:border-color .15s}
.dir-search:focus{border-color:var(--primary)}
.cat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cat-chip{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;background:#fff;border:1px solid #d8dde3;color:#555;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.cat-chip:hover{border-color:var(--primary);color:var(--primary)}
.cat-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* Result count ("Showing X of Y") — canonical, demo-only for now */
.dir-showing{font-size:13px;color:#666;margin-bottom:14px}
.dir-showing-num{font-weight:700;color:#1a1f2e}

/* Phase 2 card redesign lock: these rules intentionally outrank older
 * worker-inline card experiments until those blocks are fully deleted. */
.m-card{border:1px solid #D4D6DA !important;border-radius:14px !important;background:#fff !important;min-height:0 !important;box-shadow:0 2px 6px rgba(15,23,42,0.10),0 6px 16px rgba(15,23,42,0.08) !important;transition:box-shadow 180ms ease,transform 180ms ease !important}
.m-card:hover{transform:translateY(-3px) !important;box-shadow:0 6px 14px rgba(15,23,42,0.12),0 12px 28px rgba(15,23,42,0.10) !important}
.m-card::before,.m-card::after,.m-qr-mark,.m-card-logo,.m-card-monogram,.m-verified,.m-divider{display:none !important}
.m-media{aspect-ratio:16 / 9 !important;padding-top:0 !important;background:var(--primary) !important}
.m-body{padding:12px 16px 14px !important;min-height:0 !important;background:#fff !important}
.m-category{display:none !important}
.m-name-row{display:flex !important;align-items:flex-start !important;gap:6px !important;margin-bottom:7px !important}
.m-body-top{display:flex !important;flex-direction:column !important;gap:0 !important}
.m-body-spacer{flex:1 !important;min-height:9px !important}
.m-biz-name{font-family:var(--font-serif),'DM Serif Display',Georgia,serif !important;font-size:20px !important;font-weight:700 !important;line-height:1.12 !important;letter-spacing:0 !important;margin:0 !important;max-width:none !important;min-height:0 !important;display:-webkit-box !important;-webkit-line-clamp:2 !important;-webkit-box-orient:vertical !important;overflow:hidden !important}
.m-org-badges{display:flex !important;flex-wrap:wrap !important;gap:6px !important;margin:0 0 8px !important;min-height:20px !important;align-items:flex-start !important}
.m-contact-strip{display:flex !important;flex-direction:column !important;gap:4px !important;padding:0 !important;margin:0 0 8px !important;background:transparent !important;border:0 !important}
.m-footer{padding:8px 0 0 !important;border-top:1px solid #E5E7EB !important;display:flex !important;justify-content:space-between !important;align-items:center !important;gap:8px !important;background:transparent !important;margin-top:0 !important;min-width:0 !important}