/* ============================================================
   sidebar.css
   Headmistress card + quick links
   Cleaned + enhanced (non-destructive)
============================================================ */

.rg-grid-side{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* Side card container */
.rg-sidecard{
  background:#ffffff;
  border-radius:12px;
  padding:16px;
  box-shadow:0 8px 20px rgba(2,10,30,0.06);
}

/* Card header */
.rg-sidecard-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.rg-sidecard-head h3{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#002b5c;
}

.rg-badge{
  background:#d4af37;
  color:#002b5c;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

/* Headmistress block */
.rg-hm{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}

.rg-hm-photo{
  width:120px;
  height:120px;
  border-radius:10px;
  background-image:url('/roma-girls-website/assets/images/headmistress/default.jpg');
  background-size:cover;
  background-position:center;
  margin:0 auto;
  box-shadow:0 8px 20px rgba(2,10,30,0.08);
}

.rg-hm-text{
  margin:0;
  color:#6b7280;
  line-height:1.5;
}

/* Quick links */
.rg-quicklinks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rg-quicklink{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  color:#002b5c;
  background:rgba(0,43,92,0.04);
  transition:transform .12s ease, background .12s ease;
}

.rg-quicklink:hover{
  transform:translateX(6px);
  background:rgba(0,43,92,0.08);
}

/* Headmistress Photo — Clean, Responsive, Perfect Fit */
.rg-hm-photo {
    width: 100%;
    max-width: 180px;        /* Perfect size on desktop */
    height: auto;            /* Prevent distortion */
    border-radius: 6px;      /* Soft rounded corners */
    display: block;          /* Prevent inline spacing issues */
    margin: 0 auto 15px;     /* Center + spacing below */
    object-fit: cover;       /* Ensures neat cropping */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Soft shadow */
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .rg-hm-photo {
        max-width: 140px;    /* Slightly smaller on mobile */
        margin-bottom: 12px;
    }
}