/* Rotary Board of Directors — org chart */
.rotary-board-chart{
  position:relative;
  margin:32px 0;
  padding:10px 0;
}
.rotary-board-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.rotary-board-svg path{
  fill:none;
  stroke:var(--rotary-accent);
  stroke-width:3.5;
  stroke-linejoin:round;
  stroke-linecap:round;
}
/* Frames the Board (President through Directors) as its own clearly
   bordered zone, separate-looking from the Committees nested below it. */
.rotary-board-main{
  position:relative;
  z-index:1;
  border:2px solid var(--rotary-secondary);
  border-radius:calc(var(--rotary-radius) + 4px);
  padding:32px 24px 24px;
}
.rotary-board-tier{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex-wrap:wrap;
  gap:20px;
  margin-top:46px;
}
.rotary-board-tier:first-child{ margin-top:0; }

.rotary-board-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:160px;
  max-width:220px;
  padding:14px 18px;
  background:var(--rotary-bg);
  border:1px solid var(--rotary-border);
  border-radius:var(--rotary-radius);
  text-align:center;
  font-family:inherit;
  cursor:default;
}
button.rotary-board-node{ cursor:pointer; }
button.rotary-board-node:hover{ border-color:var(--rotary-primary); box-shadow:0 4px 14px rgba(0,0,0,.08); }

.rotary-board-node-top{
  background:var(--rotary-secondary);
  border-color:var(--rotary-secondary);
}
.rotary-board-node-top .rotary-board-name,
.rotary-board-node-top .rotary-board-position{ color:#fff; }
.rotary-board-node-top .rotary-board-position{ color:var(--rotary-accent); }

.rotary-board-node-committee{
  background:var(--rotary-bg-alt);
  border-color:var(--rotary-primary);
}
.rotary-board-node-committee .rotary-board-position{ color:var(--rotary-secondary); }

/* A bold, clearly visible border for Director-level boxes specifically. */
.rotary-board-node-director{
  border-width:3px;
  border-color:var(--rotary-secondary);
}
.rotary-board-node-director .rotary-board-position{ color:var(--rotary-secondary); font-weight:700; }

/* ===== Committees & Sub-Committees — a fully separate section below the
   board, one column per Director, not nested inline under them. ===== */
.rotary-board-committees-section{
  margin-top:50px;
}
.rotary-board-committees-banner{
  display:block;
  width:fit-content;
  margin:0 auto 24px;
  background:var(--rotary-secondary);
  color:#fff;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:13px;
  padding:10px 24px;
  border-radius:999px;
}
.rotary-board-committees-columns{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}
.rotary-board-committee-column{
  flex:1 1 200px;
  max-width:260px;
  border:2px solid var(--rotary-secondary);
  border-radius:var(--rotary-radius);
  overflow:hidden;
  background:var(--rotary-bg);
}
.rotary-board-committee-header{
  background:var(--rotary-secondary);
  color:#fff;
  text-align:center;
  padding:12px 10px;
}
.rotary-board-committee-header-name{ display:block; font-weight:700; font-size:14px; }
.rotary-board-committee-header .rotary-board-position{ color:var(--rotary-accent); margin-top:2px; display:block; }
.rotary-board-committee-list{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 14px;
}
/* A simple bold gold line running down the column, connecting each
   sub-committee role — no JS measurement needed, just a vertical bar. */
.rotary-board-committee-list::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:16px;
  width:3px;
  background:var(--rotary-accent);
  transform:translateX(-50%);
  z-index:0;
}
.rotary-board-committee-item{
  position:relative;
  z-index:1;
  border:1px solid var(--rotary-border);
  border-radius:var(--rotary-radius);
  background:var(--rotary-bg);
  padding:8px 10px;
  text-align:center;
  font-family:inherit;
  cursor:default;
  display:flex;
  flex-direction:column;
  gap:2px;
}
button.rotary-board-committee-item{ cursor:pointer; }
button.rotary-board-committee-item:hover{ border-color:var(--rotary-primary); box-shadow:0 4px 10px rgba(0,0,0,.08); }
.rotary-board-committee-item .rotary-board-name{ font-size:13px; }
.rotary-board-committee-item .rotary-board-position{ font-size:11px; }

.rotary-board-photo{
  width:48px; height:48px; border-radius:50%; overflow:hidden;
  background:var(--rotary-border); margin-bottom:4px;
}
.rotary-board-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.rotary-board-name{ font-weight:700; font-size:15px; color:var(--rotary-text); }
.rotary-board-position{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  color:var(--rotary-primary);
}

/* Connector lines are drawn by JS (measuring real positions) and only make
   sense on wider screens where the chart doesn't wrap into a narrow single
   column — hide them below this width and just rely on the tier order,
   which stays perfectly readable without lines on a phone. */
@media (max-width:700px){
  .rotary-board-svg{ display:none; }
  .rotary-board-tier{ margin-top:16px; }
}