/* ==========================================================================
   NEW FEATURES — live session banner, on-this-day, org chart, growth
   chart, sponsorship tiers, ID cards, legal/static pages
   ========================================================================== */

/* ---- Live session banner ---- */
.live-session-banner {
  background: var(--pciu-charcoal-800);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .live-session-banner {
  background: var(--pciu-blue-700);
}

.live-session-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.live-session-banner__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.live-session-banner__info strong {
  color: #fff;
  font-family: var(--font-display);
  margin-right: var(--space-2);
}

.live-session-banner__time {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
}

.live-session-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--pciu-blue-400);
  background: rgba(77, 120, 204, 0.15);
  padding: 0.35em 0.8em;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.live-session-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e14b4b;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(225, 75, 75, 0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(225, 75, 75, 0); }
}

.live-session-banner__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.live-session-banner .btn-secondary {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.live-session-banner .btn-secondary:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 700px) {
  .live-session-banner__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .live-session-banner__info { flex-direction: column; }
  .live-session-banner__actions { justify-content: center; }
}

/* ---- On this day widget ---- */
.on-this-day {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.on-this-day__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.on-this-day__icon svg { width: 18px; height: 18px; }

.on-this-day p {
  margin-top: var(--space-1);
  color: var(--color-text);
}

/* ---- Org chart ---- */
.org-chart {
  overflow-x: auto;
  padding: var(--space-6) 0;
}

.org-chart__tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  min-width: max-content;
  margin-inline: auto;
}

.org-chart__level {
  display: flex;
  gap: var(--space-5);
  position: relative;
  justify-content: center;
}

.org-chart__level::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 1px;
  height: 1.5rem;
  background: var(--color-border-strong);
}

.org-chart__level:first-child::before { display: none; }

.org-chart__node {
  width: 190px;
  padding: var(--space-4);
  text-align: center;
  position: relative;
}

.org-chart__node::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 1px;
  height: 1.5rem;
  background: var(--color-border-strong);
}

.org-chart__level:first-child .org-chart__node::before { display: none; }

.org-chart__photo-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
}

.org-chart__photo,
.org-chart__initials {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent);
}

.org-chart__name {
  font-weight: 700;
  font-size: var(--fs-sm);
}

.org-chart__title {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 700px) {
  .org-chart__tree { align-items: stretch; }
  .org-chart__level { flex-direction: column; align-items: center; }
}

/* ---- Growth chart section ---- */
.growth-chart-wrap {
  background: var(--color-bg-elevated);
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-lg);
  /* padding: var(--space-6); */
  position: relative;
  height: 340px;
}

/* ---- Sponsorship tiers ---- */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  position: relative;
}

.tier-card--highlight {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.tier-card__ribbon {
  position: absolute;
  top: -0px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3em 1em;
  border-radius: var(--radius-lg);
  z-index: 1000;
}

.tier-card__name {
  font-size: var(--fs-lg);
}

.tier-card__price {
  color: var(--color-accent);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.tier-card__benefits {
  flex: 1;
  margin-bottom: var(--space-5);
}

.tier-card__benefits li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding-block: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.tier-card__benefits svg {
  width: 16px;
  height: 16px;
  color: var(--pciu-green-500);
  flex-shrink: 0;
  margin-top: 3px;
}

@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; }
}

/* ---- Printable ID card ---- */
.id-card-gate {
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

/* Fixed, constant card PROPORTIONS — CR80-ish ratio (~1.586:1, the same
   ratio as a standard ID/credit card). The card's absolute size can
   still shrink on narrow phone screens (via min(340px, 88vw)) so it
   never overflows the viewport, but width/height always scale together
   via aspect-ratio — never lets content length distort its shape. All
   internal sizing below uses container query units (cqw) tied to this
   stage, so the logo, photo, and text all scale WITH the card itself as
   it resizes, not with the page/viewport. */
.id-card-stage {
  width: min(var(--id-card-w), 88vw);
  aspect-ratio: 340 / 214;
  margin-inline: auto;
  perspective: 1200px;
  container-type: inline-size;
  container-name: id-card;
}

:root {
  --id-card-w: 340px;
}

.id-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.id-card.is-flipped {
  transform: rotateY(180deg);
}

.id-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-elevated);
  display: flex;
  flex-direction: column;
}

.id-card__face--back {
  transform: rotateY(180deg);
}

/* -- Front face -- */
.id-card__header {
  background: var(--color-accent);
  color: #fff;
  padding: 2.3cqw 3.5cqw;
  display: flex;
  align-items: center;
  gap: 2.3cqw;
  flex-shrink: 0;
}

.id-card__header .brand-mark {
  width: 6.5cqw;
  height: 6.5cqw;
  flex-shrink: 0;
}

.id-card__header-text {
  min-width: 0;
  line-height: 1.15;
}

.id-card__header-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 3.2cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.id-card__header-text span {
  display: block;
  font-size: 2.3cqw;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.id-card__body {
  flex: 1;
  min-height: 0;
  padding: 2.9cqw 3.5cqw;
  display: flex;
  align-items: center;
  gap: 3.5cqw;
}

.id-card__photo-col {
  flex-shrink: 0;
}

.id-card__photo,
.id-card__initials {
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.3cqw;
  color: var(--color-accent);
  border: 0.6cqw solid var(--color-accent-soft);
}

.id-card__info-col {
  min-width: 0;
  flex: 1;
}

.id-card__name {
  font-size: 4.4cqw;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
}

.id-card__role {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 3.1cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1.5cqw;
}

.id-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw 2.3cqw;
}

.id-card__meta-item {
  font-size: 2.5cqw;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.id-card__meta-item strong {
  color: var(--color-text-muted);
  font-weight: 600;
}

.id-card__footer {
  font-family: var(--font-mono);
  font-size: 2.2cqw;
  color: var(--color-text-subtle);
  text-align: center;
  padding: 1.2cqw;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.id-card__id-number {
  position: absolute;
  bottom: 1.8cqw;
  right: 2.9cqw;
  font-family: var(--font-mono);
  font-size: 2.3cqw;
  color: var(--color-text-subtle);
}

/* -- Back face -- */
.id-card__face--back .id-card__body {
  flex-direction: column;
  align-items: flex-start;
  padding: 3.5cqw 4.1cqw;
  gap: 1.8cqw;
}

.id-card__back-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.9cqw;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  margin-bottom: 0.6cqw;
}

.id-card__back-list {
  font-size: 2.5cqw;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.id-card__back-list li {
  padding-left: 2.9cqw;
  position: relative;
}
.id-card__back-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.id-card__back-contact {
  margin-top: auto;
  font-size: 2.3cqw;
  color: var(--color-text-subtle);
  border-top: 1px dashed var(--color-border);
  padding-top: 1.8cqw;
  width: 100%;
}

/* -- Theme variants -- */
.id-card--theme-minimal .id-card__header {
  background: var(--color-bg-elevated);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent);
}
.id-card--theme-minimal .id-card__header .brand-mark svg rect,
.id-card--theme-minimal .id-card__header .brand-mark svg text {
  fill: var(--color-accent);
}
.id-card--theme-minimal .id-card__header-text strong,
.id-card--theme-minimal .id-card__header-text span { color: var(--color-text); opacity: 1; }

.id-card--theme-dark .id-card__face {
  background: var(--pciu-charcoal-800);
  border-color: var(--pciu-charcoal-700);
}
.id-card--theme-dark .id-card__header {
  background: var(--pciu-charcoal-900);
}
.id-card--theme-dark .id-card__name { color: #fff; }
.id-card--theme-dark .id-card__role { color: var(--pciu-gold-500); }
.id-card--theme-dark .id-card__meta-item,
.id-card--theme-dark .id-card__meta-item strong { color: var(--pciu-slate-300); }
.id-card--theme-dark .id-card__footer,
.id-card--theme-dark .id-card__back-list,
.id-card--theme-dark .id-card__back-contact { color: var(--pciu-slate-400); }
.id-card--theme-dark .id-card__back-title { color: var(--pciu-gold-500); }
.id-card--theme-dark .id-card__back-list li::before { color: var(--pciu-gold-500); }
.id-card--theme-dark .id-card__footer,
.id-card--theme-dark .id-card__back-contact { border-color: var(--pciu-charcoal-700); }

/* -- Theme + flip controls -- */
.id-card-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.id-card-theme-picker {
  display: flex;
  gap: var(--space-2);
}

.id-card-theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  cursor: pointer;
  padding: 0;
}
.id-card-theme-swatch[aria-pressed="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}
.id-card-theme-swatch--classic { background: var(--pciu-blue-600); }
.id-card-theme-swatch--minimal { background: #fff; border-color: var(--pciu-slate-300); }
.id-card-theme-swatch--dark { background: var(--pciu-charcoal-800); }

.id-card-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.id-card-list-item + .id-card-list-item { margin-top: var(--space-2); }

@media print {
  body * { visibility: hidden; }
  #printable-id-card, #printable-id-card * { visibility: visible; }
  #printable-id-card {
    position: fixed;
    top: 0.4in;
    left: 0.4in;
    margin: 0;
    perspective: none;
    width: auto;
    height: auto;
    aspect-ratio: auto;
  }
  /* Printing always shows both faces side by side, regardless of which
     one is currently flipped up in the on-screen preview — so a single
     print always gives you a complete front+back card to cut out. */
  #printable-id-card .id-card {
    display: flex;
    gap: 0.3in;
    transform: none !important;
    width: auto;
    height: 2.125in;
    position: static;
    container-type: normal;
  }
  #printable-id-card .id-card__face {
    position: static;
    transform: none !important;
    width: 3.375in;
    flex-shrink: 0;
    container-type: inline-size;
  }
  #printable-id-card .id-card-controls,
  #printable-id-card .id-card-theme-picker {
    display: none;
  }
}

/* ---- Blog post detail page ---- */
.blog-post__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-6);
}

.blog-post__cover {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Responsive 16:9 video embed — the iframe fills its aspect-ratio box at
   any viewport width, so the YouTube player always fits the column width
   without manual sizing per device. */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  background: var(--pciu-charcoal-900);
  box-shadow: var(--shadow-md);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.blog-post__body {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.blog-post__body p {
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.blog-post__body p:first-of-type {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

/* ---- Legal / static content pages ---- */
.legal-content h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--color-text-muted); }
.legal-content ul { list-style: disc; padding-left: 1.4em; margin: var(--space-3) 0; }
.legal-content li { padding-block: var(--space-1); }
.legal-content .updated-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-6);
}


/* ---- General Members table ---- */
.gm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.gm-count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* Horizontal-scroll wrapper keeps this a REAL <table> (sortable, copyable,
   accessible to screen readers as tabular data) instead of converting to
   stacked cards on narrow screens — important once this list is in the
   thousands, since re-rendering as cards at that volume gets expensive
   and loses the at-a-glance scanability a table gives you. */
.gm-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}

.gm-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.gm-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.gm-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: middle;
  white-space: nowrap;
}

.gm-table tbody tr:last-child td { border-bottom: none; }
.gm-table tbody tr:hover { background: var(--color-surface); }

.gm-name-cell {
  color: var(--color-text);
  font-weight: 600;
  white-space: normal;
}

.gm-photo-cell { width: 1%; }

/* Responsive photo/initials: fixed small size on the table, scales down
   slightly on narrow screens via the media query below. */
.gm-photo,
.gm-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  color: var(--color-accent);
  flex-shrink: 0;
}

.gm-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--color-text-subtle);
  white-space: normal;
}

@media (max-width: 600px) {
  .gm-photo, .gm-initials { width: 30px; height: 30px; }
  .gm-table { font-size: var(--fs-xs); }
  .gm-table thead th,
  .gm-table tbody td { padding: var(--space-2) var(--space-3); }
}