/* ─────────────────────────────────────────────────────────────────────────
 * MemberReel canonical public-directory layout.
 *
 * ONE SOURCE OF TRUTH. Loaded by:
 *   - worker.js `buildDirectoryPage()` — every chamber at memberreel.com/{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:12px;border:2px solid var(--primary);box-shadow:0 2px 12px rgba(0,0,0,0.08);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.m-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.m-media{position:relative;width:100%;padding-top:56.25%;overflow:hidden;background:#1a1f2e;flex-shrink:0}
.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}
.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}
.m-initials{font-size:36px;font-weight:700;color:#fff;font-family:var(--font-serif);text-shadow:0 2px 6px rgba(0,0,0,0.25)}
.m-body{padding:12px;display:flex;flex-direction:column;flex:1}
.m-category{display:inline-block;font-size:9px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--primary);background:var(--primary-10);border:1px solid var(--primary-20);border-radius:999px;padding:2px 8px;margin-bottom:6px;align-self:flex-start}
.m-biz-name{font-family:var(--font-serif);font-size:0.95rem;color:#1a1f2e;margin-bottom:3px;line-height:1.25;display:flex;align-items:center;gap:6px;font-weight:400}
.m-biz-name img{width:22px;height:22px;object-fit:contain;border-radius:4px;flex-shrink:0}
.m-owner{font-size:.72rem;color:#888;margin-bottom:6px}
.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-footer{padding:8px 10px;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:5px;margin-top:auto}
.m-footer-website{flex:1;height:28px;padding:0 10px;background:var(--primary);color:#fff !important;border:none;border-radius:999px;font-size:10px;font-weight:500;letter-spacing:.2px;cursor:pointer;text-decoration:none;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:opacity .15s}
.m-footer-website:hover{opacity:.9}
.m-footer-website i{font-size:9px}
.m-footer-icon{width:26px;height:26px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;text-decoration:none;padding:0;font-family:inherit;color:#fff;font-size:11px;transition:opacity .15s,background .2s}
.m-footer-icon:hover{opacity:.88}
.m-footer-icon i{line-height:1}
.m-footer-fb{background:#1877F2}
.m-footer-ig{background:#E1306C}
.m-footer-share{background:#888}
.m-footer-copy{background:#555}
.m-footer-copy.m-copied{background:#1D9E75}

/* ─── 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:var(--primary);background-image:linear-gradient(rgba(255,255,255,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.10) 1px,transparent 1px);background-size:18px 18px;color:#fff;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:rgba(255,255,255,0.22);border:1.5px solid rgba(255,255,255,0.45);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;margin-bottom:7px}
.m-video-soon-title{font-family:var(--font-serif);font-size:15px;font-weight:700;line-height:1;margin-bottom:3px}
.m-video-soon-sub{font-size:9.5px;opacity:.88;letter-spacing:.02em;line-height:1.3}
.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:500}
.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}

/* 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}