/* =========================================================
   BOARD OF GOVERNOR'S PAGE — page-specific only.
   Loaded solely by bog.php via $pageExtraCss.
   Same card pattern as statutory-committee.css.
   ========================================================= */

.bog-section{ padding:72px 0; }

.bog-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}

.bog-card{
  display:flex;
  align-items:center;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 24px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -22px rgba(10,61,38,.35);
  border-color:transparent;
}
.bog-icon{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-700);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease;
}
.bog-card:hover .bog-icon{
  background:var(--green-700);
  color:#fff;
}
.bog-card h3{
  flex:1;
  font-size:1.02rem;
  font-weight:700;
  color:var(--green-900);
  line-height:1.35;
}
.bog-arrow{
  flex:0 0 auto;
  color:var(--ink-soft);
  transition:transform .2s ease, color .2s ease;
}
.bog-card:hover .bog-arrow{
  transform:translateX(4px);
  color:var(--green-700);
}

@media (max-width:560px){
  .bog-section{ padding:48px 0; }
  .bog-grid{ grid-template-columns:1fr; gap:16px; }
  .bog-card{ padding:22px 20px; }
}